feat(box): Add descriptions for sensors

Update i18n package to include latest translation changes and add sensor descriptions. closes #189
sensebox · Sep 25, 2018 · f0d522a · f0d522a
1 parent aa61685
commit f0d522a
Show file tree

Hide file tree

Showing 5 changed files with 2,155 additions and 2,075 deletions.
diff --git a/app/scripts/controllers/sidebar.boxdetails.js b/app/scripts/controllers/sidebar.boxdetails.js
@@ -5,9 +5,9 @@
     .module('openSenseMapApp')
     .controller('SidebarBoxDetailsController', SidebarBoxDetailsController);
 
-  SidebarBoxDetailsController.$inject = ['$scope', '$state', '$stateParams', '$document', 'moment', '$timeout', 'Box', 'OpenSenseMapAPI', 'osemMapData', 'Sidebar', 'LocalStorageService'];
+  SidebarBoxDetailsController.$inject = ['$scope', '$state', '$stateParams', '$document', 'moment', '$timeout', 'Box', 'OpenSenseMapAPI', 'osemMapData', 'Sidebar', 'LocalStorageService', 'ngDialog'];
 
-  function SidebarBoxDetailsController ($scope, $state, $stateParams, $document, moment, $timeout, Box, OpenSenseMapAPI, osemMapData, Sidebar, LocalStorageService) {
+  function SidebarBoxDetailsController ($scope, $state, $stateParams, $document, moment, $timeout, Box, OpenSenseMapAPI, osemMapData, Sidebar, LocalStorageService, ngDialog) {
     var vm = this;
     vm.box = {};
     vm.selectedSensor = null;
@@ -16,6 +16,7 @@
     vm.selectSensor = selectSensor;
     vm.resetFilter = resetFilter;
     vm.performFilter = performFilter;
+    vm.openInformation = openInformation;
 
     activate();
 
@@ -50,6 +51,61 @@
         });
     }
 
+    function openInformation (title) {
+      var prefix = '';
+      var showInfluence = true;
+      var showFunFact = true;
+      switch (title.toLowerCase()) {
+      case 'temperatur':
+      case 'temperature':
+        prefix = 'TEMPERATURE';
+        break;
+      case 'rel. luftfeuchte':
+        prefix = 'HUMIDITY';
+        break;
+      case 'luftdruck':
+        prefix = 'AIRPRESSURE';
+        break;
+      case 'beleuchtungsstärke':
+      case 'illuminence':
+        showInfluence = false;
+        prefix = 'ILLUMINENCE';
+        break;
+      case 'uv-index':
+      case 'uv-intensität':
+        prefix = 'UV';
+        showInfluence = false;
+        break;
+      case 'pm10':
+      case 'pm2.5':
+        prefix = 'PARTICULAR_MATTER';
+        showFunFact = false;
+        break;
+      }
+      if (prefix !== '') {
+        ngDialog.open({
+          template: '../../views/phenomenon.html',
+          appendClassName: 'ngdialog-custom',
+          showClose: true,
+          closeByDocument: false,
+          data: {
+            'phenomenon': title,
+            'showDefinition': true,
+            'definition': prefix + '_DEFINITION',
+            'showUnit': true,
+            'unit': prefix + '_UNIT',
+            'showInterpretation': true,
+            'interpretation': prefix + '_INTERPRETATION',
+            'showInfluence': showInfluence,
+            'influence': prefix + '_INFLUENCE',
+            'showFunFact': showFunFact,
+            'funfact': prefix + '_FUN_FACT'
+          }
+        });
+      }
+
+    }
+
     function getBoxTrajectory (options) {
       var params = Object.assign({ format: 'geojson' }, options);
       var data = { params: params };

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -230,6 +230,11 @@ a:hover {
   border-radius: 0;
 }
 
+.ngdialog.ngdialog-theme-default.ngdialog-custom .ngdialog-content {
+  min-width: 300px;
+  width: 30%;
+}
+
 .xxxl {
   width: 100%;
 }
@@ -1248,7 +1253,7 @@ article {
 
 .icon {
   /*width: 84px;*/
-  height: 84px;
+  /* height: 84px; */
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1744,4 +1749,4 @@ svg .dot {
 nav > a.active {
   background: white;
   color: rgba(0, 0, 0, .5)
-}
+}
diff --git a/app/views/explore2.sidebar.box.html b/app/views/explore2.sidebar.box.html
@@ -29,13 +29,13 @@
     <uib-accordion close-others="oneAtATime">
       <div uib-accordion-group class="panel-default" ng-repeat="sensor in details.box.sensors" is-open="sensor.chart.open" ng-cloak>
         <uib-accordion-heading>
-          <div class="row" ng-click="details.selectSensor(sensor, $event)" ng-class="sensor == details.selectedSensor ? 'selected-sensor' : ''">
-            <div class="col-xs-1">
+          <div class="row" ng-click="details.selectSensor(sensor, $event)" ng-class="sensor == details.selectedSensor ? 'selected-sensor' : ''" style="padding-left: 0px; padding-right: 0px;">
+            <div class="col-xs-1 col-md-1 col-lg-1" style="padding-left: 0px; padding-right: 0px;">
               <span title="{{sensor.title | translate}}">
                 <span class="icon osem-icon" ng-class="sensor.getIcon(sensor)"></span>
               </span>
             </div>
-            <div class="col-xs-10 sensor-measurement-info" >
+            <div class="col-xs-10 sensor-measurement-info" style="padding-left: 0px; padding-right: 0px;">
               <div>{{sensor.title}}</div><br/>
               <div ng-if="sensor.lastMeasurement.createdAt" uib-tooltip="{{'LAST_MEASUREMENT_FROM' | translate }} {{ sensor.lastMeasurement.createdAt | amUtc | amLocal | amDateFormat:'l LTS'}}" tooltip-placement="top-right">
                 <span style="font-weight:bold;">{{sensor.lastMeasurement.value}} {{sensor.unit}}</span>
@@ -45,6 +45,16 @@
                 <span class="sensor-measurement-info-nomeasurements"><i>{{'NO_MEASUREMENT'|translate}}</i></span>
               </div>
             </div>
+            <div class="col-xs-1 col-md-1 col-lg-1" style="padding-left: 0px; padding-right: 0px;" uib-tooltip="Please click for more information" tooltip-placement="top-right" tooltip-trigger="focus">
+              <div>
+                <i class="pull-right glyphicon glyphicon-info-sign"></i>
+              </div>
+              <br>
+              <br>
+              <div>
+                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': !sensor.chart.open, 'glyphicon-chevron-up': sensor.chart.open}"></i>
+              </div>
+            </div>
           </div>
         </uib-accordion-heading>
         <div>
@@ -53,6 +63,10 @@
           </div>
           <div uib-alert class="alert-danger" ng-show="sensor.chart.error">{{'COMMON_ERROR'|translate}}</div>
           <div uib-alert class="alert-info" ng-hide="sensor.lastMeasurement">{{'CHART_NODATA'|translate}}</div>
+          <div uib-alert class="alert-info" style="border-radius: 0px;">
+            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+            <a ng-click="details.openInformation(sensor.title);">{{'WHAT_IS'|translate}} {{sensor.title}}?</a>
+          </div>
           <osem-calendar
             ng-if="sensor.chart.done"
             osem-placeholder-text-start-date="{{ 'DATEPICKER_STARTINGDATE' | translate}}"