app/views/data-connect/add-connection-modal.html
<div id="add-connection-modal" class="modal fade" role="dialog">
<div id="add-connection-modal-dialog" class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" id="add-connection-modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="close-add-connection-modal">×</button>
<h2 class="modal-title">Import Data Source</h2>
<div class="alert alert-success alert-dismissible" role="alert" ng-show="messages.success">
<button type="button" ng-click="hideSuccessPanel()" class="close"><span aria-hidden="true">×</span></button>
{{messages.success}}
</div>
<div class="alert alert-error alert-dismissible" role="alert" ng-show="messages.error">
<button type="button" class="close" ng-click="hideErrorPanel()"><span aria-hidden="true">×</span></button>
{{messages.error}}
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-2 tabs-list">
<ul class="nav nav-tabs tabs-left">
<li ng-repeat="(key, tabItem) in tabItems" ng-click="tabSelected(key)"
ng-class="$first ? 'active' : ''">
<a href="#{{tabItem.target}}" data-toggle="tab">
<i class="{{tabItem.icon}} fa-2x"></i><br>
<h4>{{tabItem.title}}</h4>
</a>
</li>
</ul>
</div>
<div class="col-xs-10 tab-content col-xs-offset-2">
<div class="tab-pane active" id="source-format-tab">
<div class="box-header">
<h3 class="box-title">Choose Data Source format</h3>
</div>
<div class="row">
<div class="col-sm-10">
<div class="col-md-4 col-sm-4" ng-repeat="(key, sourceFormat) in sourceTypeListWEndpoint">
<div id="{{key}}" ng-click="setSourceFormat($event);" class="source-format-item" ng-class="{selected : key == inputs.sourceFormat, nologo: !sourceFormat.logo}">
<img src="{{sourceFormat.logo}}" name="{{key}}" ng-show="sourceFormat.logo"/>
<h4><span for="{{sourceFormat.key}}">{{sourceFormat.name}}</span></h4>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="source-info-tab">
<div class="box-header">
<h3 class="box-title">Source Information</h3>
</div>
<div class="box-body">
<form name="source-info-form" role="form" id="source-info-form">
<div class="form-group">
<label for="sourceUrl" style="margin-bottom: 12px">Source URL*</label>
<div class="alert alert-error alert-dismissible" role="alert" ng-show="messages.validateError">
<button type="button" class="close" ng-click="hideValidateErrorPanel()"><span aria-hidden="true">×</span></button>
{{messages.validateError}}
</div>
<br/>
<input required="true" ng-model="inputs.url" ng-model-options='{ debounce: 1000 }' type="url" class="form-control" name="sourceUrl" placeholder="Public URL of the data source" style="" ng-change="validateSourceUrl();">
<i class="validate-icon fa" ng-class="
validateStatus == 'error' ? 'fa-exclamation-circle' :
(validateStatus == 'waiting' ? 'fa-spinner fa-pulse' :
(validateStatus == 'success' ? 'fa-check' : ''))"></i>
</div>
<div class="form-group" ng-show="inputs.sourceFormat == 'geojson'">
<label for="privacy">Source type</label><br/>
<ol name="sourceType" class="nya-bs-select" ng-model="inputs.sourceType">
<li nya-bs-option="value in sourceTypeList">
<a>{{value.name}}</a>
</li>
</ol><br/>
<h4 style="display: inline-block"><small>The type of the source that this data corresponds to.</small></h4>
</div>
<div class="form-group"><label>Advanced options <i id="toggle-show-data" class="fa" ng-class="showAdvancedOptions ? 'fa-caret-down' : 'fa-caret-right'" ng-click="showAdvancedOptions = !showAdvancedOptions"></i></i>
</div>
<div ng-show="showAdvancedOptions">
<div class="form-group">
<label for="harvestingFreq">Update frequency</label><br/>
<h4 style="display: inline-block"><small>Check for updates every </small></h4>
<ol name="harvestingFreq" class="nya-bs-select" ng-model="inputs.harvesting_freq">
<li nya-bs-option="freq in harvestingFreqList">
<a>{{freq.label}}</a>
</li>
</ol>
</div>
<div class="form-group">
<label for="lifetime">Lifetime</label>
<h4><small>Expiration date of the source. Leave blank for ever-lasting data.</small></h4>
<div class="form-inline">
<div class="input-group dropdown">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<a class="dropdown-toggle my-toggle-select" id="datetimepicker1" role="button" data-toggle="dropdown" data-target="#" href="">
<div class="input-append">
<input type="text" class="form-control date-input" name="lifetime" ng-model="inputs.lifetime">
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="datetimepicker1">
<datetimepicker ng-model="inputs.lifetime" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', minView: 'day' }"></datetimepicker>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane" id="mapping-rule-tab">
<div class="box-header">
<h3 class="box-title">Final step: Map your data to loklak</h3> <i id="toggle-show-data" ng-show="currentData" class="fa" ng-class="showCurrentData ? 'fa-caret-down' : 'fa-caret-right'" ng-click="showCurrentData = !showCurrentData"></i>
</div>
<div class="box-body">
<div class="row" ng-show="showCurrentData">
<pre>{{currentData | json }}</pre>
</div>
<div class="row" ng-show="currentLoklakFields == null && inputs.sourceFormat">
<div class="col-md-8">
<h4><small>This step is not required for data of type <code>{{sourceTypeList[inputs.sourceFormat]['name']}}.</code></small></h4>
</div>
</div>
<div ng-hide="currentLoklakFields == null">
<div class="row field-label">
<div class="col-md-2"><h3>Loklak field</h3></div>
<div class="col-md-4 col-md-offset-1"><h3>Custom field</h3></div>
</div>
<hr/>
<div class="form-group" ng-repeat="(key, value) in currentLoklakFields">
<div class="row" ng-class="$last ? 'last' : ''" >
<div class="col-md-2">
<span name="loklakField" class="loklak-field">{{value.label}}</span>
</div>
<div class="col-md-1" style="text-align: center">
<i class="fa fa-arrow-left"></i>
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm custom-field" ng-model="inputs.mapRules[key][0]"/>
</div>
<div class="col-md-4 field-preview" ng-show="accessDataField(key)">
<pre>{{accessDataField(key) | json }}</pre>
</div>
</div>
<div class="row">
<div class="col-md-7">
<h4><small>{{value.help}}</small></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div style="float:left;" class="col-xs-offset-2">
<a id="next-step" ng-show="showNext" ng-click="proceed()" type="button" class="btn btn-loklak-blue">Next Step</a>
<a ng-hide="showNext" ng-click="submit()" type="submit" class="btn btn-loklak-blue" ng-click="">Submit</a>
<span ng-show="" style="color:red;" class="ng-hide">Enter an event name and your event's main hashtag</span>
</div>
</div>
</div>
</div>
</div>