fixes loklak#272 - Added error info to CountryTweetMap (loklak#274)

Fixes issue loklak#272, added error info to map.
djmgit · Jul 25, 2017 · 5a2ee90 · 5a2ee90
1 parent 2ef94c9
commit 5a2ee90
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/CountryTweetMap/css/styles.css b/CountryTweetMap/css/styles.css
@@ -233,6 +233,47 @@ body {
     margin: 10px 0px 0px 50%;
 }
 
+.snackbar {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+}
+
+.snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+}
+
 @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(360deg); }

diff --git a/CountryTweetMap/index.html b/CountryTweetMap/index.html
@@ -44,6 +44,7 @@ <h4> Loklak CountryTweetMap </h4>
     </div>
     <span onclick="openNav()" class="glyphicon glyphicon-menu-hamburger open"></span>
     <div class="main app" ng-controller="app">
+      <div class="snackbar">{{error}}</div>
       <div id="statInfo" class="modal fade stat-info" role="dialog">
         <div class="modal-dialog">
           <div class="modal-content">

diff --git a/CountryTweetMap/scripts/app.js b/CountryTweetMap/scripts/app.js
@@ -13,6 +13,7 @@ app.controller("app", function ($scope, $http) {
     $scope.map = null;
     $scope.plot = null;
     $scope.isLoading = false;
+    $scope.error = "";
     $(".date").datepicker();
     $(".date").datepicker( "option", "dateFormat", "yy-mm-dd");
     var LeafIcon = L.Icon.extend({
@@ -26,19 +27,52 @@ app.controller("app", function ($scope, $http) {
         blueIcon = new LeafIcon({iconUrl: 'images/marker-blue.ico'}),
         redIcon = new LeafIcon({iconUrl: 'images/marker-red.png'});
 
+    $scope.showSnackbar = function() {
+        $(".snackbar").addClass("show");
+        setTimeout(function(){ $(".snackbar").removeClass("show") }, 3000);
+    }
+
     // Function to search query using Loklak API
     $scope.search = function() {
+        $scope.error = "";
         if ($scope.tweet === undefined || $scope.tweet === "" || $scope.isLoading === true) {
+            if ($scope.tweet === undefined || $scope.tweet === "") {
+                $scope.error = "Please enter a valid query word."
+            }
+            if ($scope.isLoading === true) {
+                $scope.error = "Previous search not completed. Please wait...";
+            }
+            $scope.showSnackbar();
             return;
         }
 
+        var count = $(".count").val();
+        if (count.length !== 0) {
+            if (/^\d+$/.test(count) === false) {
+                $scope.error = "Count should be a valid number.";
+                $scope.showSnackbar();
+                return;
+            }
+        }
+
+        var sinceDate = $(".start-date").val();
+        var endDate = $(".end-date").val();
+        if ((sinceDate !== undefined && endDate !== "") && (endDate !== undefined && endDate !== "")) {
+            var date1 = new Date(sinceDate);
+            var date2 = new Date(endDate);
+            if (endDate < sinceDate) {
+                $scope.error = "End date should be larger than start date";
+                $scope.showSnackbar();
+                return;
+            }
+        }
+
         $scope.isLoading = true;
         var query = "q=" + $scope.tweet;
-        var sinceDate = $(".start-date").val();
+
         if (sinceDate !== undefined && sinceDate !== "" ) {
             query += "%20since:" + sinceDate;
         }
-        var endDate = $(".end-date").val();
         if (endDate !== undefined && endDate !== "") {
             query += "%20until:" + endDate;
         }
@@ -158,7 +192,7 @@ app.controller("app", function ($scope, $http) {
         var countryMediumGroup = L.layerGroup(countriesMedium);
         var countryLowGroup = L.layerGroup(countriesLow);
 
-        var background = L.tileLayer(
+        var backgroundLight = L.tileLayer(
             'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
             {
                 maxZoom: 18,
@@ -172,7 +206,7 @@ app.controller("app", function ($scope, $http) {
                 [-90,-180],
                 [90, 180]
             ],
-            layers: [background, countryHighGroup, countryMediumGroup, countryLowGroup]
+            layers: [backgroundLight, countryHighGroup, countryMediumGroup, countryLowGroup]
         });
 
         var overlayMaps = {
@@ -181,7 +215,7 @@ app.controller("app", function ($scope, $http) {
             "Low tweets": countryLowGroup
         };
         var baseMaps = {
-            "Streets": background
+            "basemap": backgroundLight
         };
         L.control.layers(baseMaps, overlayMaps).addTo($scope.map);
         $scope.isLoading = false;