Merge pull request #285 from loklak/feature/data-connect

Implement Connect Service & Data Source Interface #205 #206
fossasia · Jul 6, 2015 · 8041407 · 8041407
2 parents fbe530a + eefab0e
commit 8041407
Show file tree

Hide file tree

Showing 9 changed files with 265 additions and 1 deletion.
diff --git a/app/js/controllers/dataConnect.js b/app/js/controllers/dataConnect.js
@@ -0,0 +1,67 @@
+'use strict';
+
+var controllersModule = require('./_index');
+
+
+controllersModule.controller('DataConnectCtrl', ['$scope', 'SearchService', 'PushService', 'SourceTypeService',
+	function($scope, SearchService, PushService, SourceTypeService) {
+
+	$scope.navItems = [
+		{
+			'title' : 'Data Source',
+			'icon' : 'fa fa-database',
+			'target' : 'data-source-tab'
+		},
+		{
+			'title' : 'Email, Contact and Calendar',
+			'icon' : 'fa fa-users',
+			'target' : 'contact-tab'
+		},
+		{
+			'title' : 'Internet of Things',
+			'icon' : 'fa fa-share-alt',
+			'target' : 'iot-tab'
+		}
+	];
+	$scope.dataSourceItems = [];
+	/**
+	 * Add data source form inputs values, success & error message
+	 */
+	$scope.addForm = {inputs : {}, success: '', error : ''};
+	/**
+	 * Add datasource form show state
+	 */
+	$scope.addFormOpen = false;
+
+	$scope.sourceTypesList = SourceTypeService.sourceTypeList;
+
+	function getDataSources() {
+		const query = '-/source_type=TWITTER';
+		SearchService.getData(query).then(function(data) {
+			var statuses = data.statuses;
+			statuses.forEach(function(status) {
+				if (status.source_type !== 'TWITTER') {
+					$scope.dataSourceItems.push(status);
+				}
+			});
+		}, function() {});
+	}
+
+	$scope.confirmAddDataSource = function() {
+		PushService.pushGeoJsonData($scope.addForm.inputs.url, $scope.addForm.inputs.type).then(function(data) {
+			$scope.addForm.error = '';
+			$scope.addForm.success = data.known + ' source(s) known, ' + data['new'] + ' new source(s) added';
+		}, function(err, status) {
+			$scope.addForm.success = '';
+			$scope.addForm.error = 'Add new source failed. Please verify link avaibility & data format.';
+		});
+	}
+
+	$scope.toggleAddForm = function(){
+		$scope.addForm.error = null;
+		$scope.addForm.success = null;
+		$scope.addFormOpen = !$scope.addFormOpen;
+	}
+
+	getDataSources();
+}]);
diff --git a/app/js/on_run.js b/app/js/on_run.js
@@ -28,6 +28,11 @@ function OnRun($rootScope, AppSettings, HelloService) {
           'title': 'Wall',
           'link' : '/wall',
           'icon' : 'fa fa-list'
+        },
+        {
+          'title': 'Connect',
+          'link' : '/dataConnect',
+          'icon' : 'fa fa-cloud'
         }
   	  ];
 

diff --git a/app/js/routes.js b/app/js/routes.js
@@ -70,6 +70,12 @@ function Routes($stateProvider, $locationProvider, $urlRouterProvider, $httpProv
     controller: 'MapCtrl as map',
     title: 'Map'
   })
+  .state('DataConnect', {
+    url: '/dataConnect',
+    templateUrl: 'data-connect/data-connect.html',
+    controller: 'DataConnectCtrl as dataConnect',
+    title: 'Connect Data'
+  })
   .state('Redirecting', {
     url: '/redirect',
     templateUrl: 'redirect.html',

diff --git a/app/js/services/push.js b/app/js/services/push.js
@@ -0,0 +1,30 @@
+'use strict';
+
+var servicesModule = require('./_index.js');
+
+/**
+ * @ngInject
+ */
+function PushService($q, $http, AppSettings) {
+
+	var service = {};
+
+	service.pushData = undefined;
+
+	service.pushGeoJsonData = function(url, source_type, map_type) {
+		var deferred = $q.defer();
+
+		$http.jsonp(AppSettings.apiUrl+'push/geojson.json?callback=JSON_CALLBACK', {
+			params: {url: url, source_type : source_type || 'IMPORT', map_type : map_type}
+			}).success(function(data) {
+				deferred.resolve(data);
+			}).error(function(err, status) {
+				deferred.reject(err, status);
+			});
+			return deferred.promise;
+	};
+
+	return service;
+}
+
+servicesModule.service('PushService',['$q', '$http', 'AppSettings', PushService]);
diff --git a/app/js/services/sourceType.js b/app/js/services/sourceType.js
@@ -0,0 +1,21 @@
+'use strict';
+
+var servicesModule = require('./_index.js');
+
+/**
+ * @ngInject
+ */
+function SourceTypeService() {
+
+	var service = {};
+
+	service.sourceTypeList = 
+	[
+		'IMPORT',
+		'USER'
+	];
+
+	return service;
+}
+
+servicesModule.service('SourceTypeService',[SourceTypeService]);
diff --git a/app/styles/_data-connect.scss b/app/styles/_data-connect.scss
@@ -0,0 +1,46 @@
+#data-connect-panel {
+	width: 100%;
+	margin-top: 44px ! important;
+}
+#data-connect-modal-dialog h2 {
+	margin : 0;
+}
+
+#data-connect-modal-dialog .modal-content {
+	height: 100%;
+	overflow-y: scroll;
+}
+
+@media (min-width: 1200px) {
+	#data-connect-panel {
+		width: 1170px;
+		margin: auto;
+		padding-left: 15px;
+	}
+}
+
+#data-connect-modal-dialog #add-datasource-form {
+	background-color: #f4f4f4;
+	color: #444;
+	border: 1px solid #ddd;
+	padding: 12px;
+	position: absolute;
+	right: 14px;
+	z-index: 10;
+	width: 300px;
+}
+
+#data-connect-modal .alert {
+	padding: 5px;
+}
+// overwrite admin.css
+#data-connect-modal .alert-danger {
+	background-color: #f2dede !important;
+	border-color: #ebccd1;
+	color: #a94442 !important;
+}
+#data-connect-modal .alert-success {
+	background-color: #dff0d8 !important;
+	border-color: #d6e9c6;
+	color: #3c763d !important;
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -8,6 +8,7 @@
 // Partials
 @import 'topnav';
 @import 'home';
+@import 'data-connect';
 * {
     font-family: $font-family;
 }
@@ -1912,7 +1913,7 @@
 		text-align: center;
 		padding: 20% 0;
 	}
-	.wall-modal-dialog {
+	.wall-modal-dialog, #data-connect-modal-dialog {
 	  width: 100%;
 	  height: 95%;
 	  margin-top: 10px;

diff --git a/app/views/data-connect/data-connect-modal.html b/app/views/data-connect/data-connect-modal.html
@@ -0,0 +1,75 @@
+<div id="data-connect-modal" class="modal" role="dialog">
+	<div id="data-connect-modal-dialog" class="modal-dialog">
+
+		<!-- Modal content-->
+		<div class="modal-content">
+				<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal">&times;</button>
+			</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="navItem in navItems" 
+								ng-class="$first ? 'active' : ''">
+								<a href="#{{navItem.target}}" data-toggle="tab">
+									<i class="{{navItem.icon}} fa-2x"></i><br>
+									<h4>{{navItem.title}}</h4>
+								</a>
+							</li>
+						</ul>
+					</div>
+
+					<div class="col-xs-10 tab-content">
+						<div class="tab-pane active" id="data-source-tab">
+							<button class="pull-right btn btn-default" ng-hide="addFormOpen" ng-click="toggleAddForm()">Add New Source <i class="fa fa-plus"></i>
+							</button>
+							<div id="add-datasource-form" ng-hide="!addFormOpen">
+								<div ng-show="addForm.error" class="alert alert-danger">
+									<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+									  <span class="sr-only">Error : </span>{{addForm.error}}
+								</div>
+								<div ng-show="addForm.success" class="alert alert-success">
+									<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+									  <span class="sr-only">Success : </span>{{addForm.success}}
+								</div>
+								<form name="add-datasource-form">
+									<div class="form-group">
+										<label for="source-url">Source url</label>
+										<input name="source-url" required type="text" class="form-control" ng-model="addForm.inputs.url"/>
+									</div>
+									<div class="form-group">
+										<label for="source-type">Source type</label>
+										<select name="source-type" required type="text" 
+												ng-options="type for type in sourceTypesList"class="form-control" ng-model="addForm.inputs.type">
+											<option value="">Select source type</option>
+										</select>
+									</div>
+									<button ng-click="confirmAddDataSource()" type="submit" class="btn btn-primary">Confirm</button>
+									<button ng-click="toggleAddForm()" type="button" class="btn btn-default">Cancel</button>
+								</form>
+							</div>
+							<h2>Active Data Sources</h2>
+							<hr/>
+							<ul>
+							<li ng-repeat="item in dataSourceItems">
+								<div class="row">
+									<div class="col-md-4">{{item.user.name}}</div>
+									<div class="col-md-5">{{item.link}}</div>
+									<div class="col-md-2">{{item.provider_type}}</div>
+								</div>
+							</li>
+							</ul>
+						</div>
+						<div class="tab-pane" id="contact-tab">
+							Coming soon.
+						</div>
+						<div class="tab-pane" id="iot-tab">
+							Coming soon.
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/app/views/data-connect/data-connect.html b/app/views/data-connect/data-connect.html
@@ -0,0 +1,13 @@
+<link rel="stylesheet" type="text/css" href="css/ng-tags-input.min.css">
+<link rel="stylesheet" type="text/css" href="css/ng-tags-input.bootstrap.min.css">
+<link rel="stylesheet" type="text/css" href="css/bootstrap.vertical-tabs.min.css">
+<div class="content-wrapper">
+
+	<div class="container-fluid content-container">
+		<div id="data-connect-panel">
+			<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#data-connect-modal">My Connections</button>
+		</div>
+	</div>
+</div>
+
+<div ng-include="'data-connect/data-connect-modal.html'"></div>