#24 Add information about weather/warning

CHANGELOG

@@ -4,12 +4,15 @@
 ### New Features
 * Add setting model to code
 * #19 grid automatisch generieren
+* #24 Add information about weather/warning
 ### Bugfixes
 * Add Correct Dispose Handling
+* TimeCalculation now handle negative values correct
 ### Changes
 * Refactoring of all JS
 * Make only one request per second instead of four per AJAX
 * Refactoring adminpannel and add settings.json
+* New function in TimeCalculation, so you can not have negative Timespans
 
 ## 1.2.8
 ### New Features

Lora-Map/Lora-Map.csproj

@@ -107,6 +107,12 @@
     <Content Include="resources\css\icons\placeholder.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\css\icons\storm-ac.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\css\icons\storm-in.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\icons\akku\0-4.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

Lora-Map/Model/WeatherWarnings.cs

@@ -48,18 +48,18 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
       public Warning(JsonData warning) {
         this.Id = warning["id"].ToString();
         this.From = warning["properties"]["SENT"].ToString();
-        this.Expires = warning["properties"]["EXPIRES"].ToString();
+        this.To = warning["properties"]["EXPIRES"].ToString();
         this.Location = warning["properties"]["NAME"].ToString();
         this.Type = warning["properties"]["EVENT"].ToString();
-        this.Level = warning["properties"]["SEVERITY"].ToString();
+        this.Level = warning["properties"]["SEVERITY"].ToString().ToLower();
         this.Headline = warning["properties"]["HEADLINE"].ToString();
         this.Body = warning["properties"]["DESCRIPTION"].ToString();
-        this.Instructions = warning["properties"]["INSTRUCTION"].ToString();
+        this.Instructions = warning["properties"]["INSTRUCTION"] != null ? warning["properties"]["INSTRUCTION"].ToString() : "";
       }
 
       public String Id { get; }
       public String From { get; }
-      public String Expires { get; }
+      public String To { get; }
       public String Location { get; }
       public String Type { get; }
       public String Level { get; }

Lora-Map/Server.cs

@@ -122,7 +122,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
             { "panic", this.alarms },
             { "cameracount", this.cameras },
             { "crowdcount", this.crowds },
-            { "weatherwarnings", this.weather }
+            { "weatherwarnings", this.weather.Warnungen }
           }, cont);
         } else if (cont.Request.Url.PathAndQuery.StartsWith("/get60000")) {
           return SendJsonResponse(new Dictionary<String, Object>() {

Lora-Map/resources/css/global.css

@@ -65,6 +65,12 @@ object {
 #menucollumn .info {
   background-image: url("icons/information.png");
 }
+#menucollumn .weather {
+  background-image: url("icons/storm-in.png");
+}
+#menucollumn .weather.ac {
+  background-image: url("icons/storm-ac.png");
+}
 
 #pannels {
   position: absolute;
@@ -87,7 +93,7 @@ object {
   display: none;
 }
 #pannels #pannels_pos .item {
-  margin: 4px;
+margin: 4px;
 }
 #pannels #pannels_pos .item .color {
   float: left;
@@ -101,10 +107,10 @@ object {
   margin-right: 5px;
 }
 #pannels #pannels_pos .item .icon img {
-  height: 40px;
+    height: 40px;
-  width: 40px;
+    width: 40px;
-  margin-left: 3px;
+    margin-left: 3px;
-}
+  }
 #pannels #pannels_pos .item .line1 .name {
   font-weight: bold;
 }
@@ -203,6 +209,44 @@ object {
   margin-left: 70px;
 }
 
+#pannels #pannels_weather {
+  margin: 5px;
+}
+#pannels #pannels_weather h1 {
+  margin: 0;
+  font-size: 20px;
+  text-align: center;
+}
+#pannels #pannels_weather .alertitem {
+  padding: 5px;
+}
+#pannels #pannels_weather .alertitem.minor {
+  background-color: #ffeb3b;
+}
+#pannels #pannels_weather .alertitem.moderate {
+  background-color: #fb8c00;
+}
+#pannels #pannels_weather .alertitem.severe {
+  background-color: #e53935;
+}
+#pannels #pannels_weather .alertitem.extreme {
+  background-color: #880e4f;
+}
+#pannels #pannels_weather .alertitem .head {
+  font-weight: bold;
+  display: block;
+  font-size: 14px;
+}
+#pannels #pannels_weather .alertitem .ort {
+  display: block;
+  text-align: right;
+  margin-bottom: 10px;
+}
+#pannels #pannels_weather .alertitem .text {
+  display: block;
+  margin-bottom: 10px;
+}
+
 #overlays #cameracount {
   position: absolute;
   top: 10px;

Lora-Map/resources/index.html

@@ -11,6 +11,7 @@
   <div id="bigmap"></div>
   <div id="menucollumn">
     <span class="pos" onclick="MenuObject.ShowHidePanel('pannels_pos');"></span>
+    <span class="weather" onclick="MenuObject.ShowHidePanel('pannels_weather');" id="menucol_weather_icon"></span>
     <span class="admin" onclick="MenuObject.ShowHidePanel('pannels_admin');"></span>
     <span class="info" onclick="MenuObject.ShowHidePanel('pannels_version');"></span>
   </div>
@@ -19,6 +20,9 @@
     <div id="pannels_info">
       <!-- Shows infos about selected device here, this will be cleand by js -->
     </div>
+    <div id="pannels_weather">
+      <h1>Keine Gefahren</h1>
+    </div>
     <div id="pannels_admin">
       Teste Login...
     </div>

Lora-Map/resources/js/functions.js

@@ -28,6 +28,7 @@
         MarkerObject._ParseAJAXPanic(json["panic"]);
         OverlayObject._ParseAJAXCount(json["cameracount"]);
         OverlayObject._ParseAJAXDensity(json["crowdcount"]);
+        MenuObject._ParseAJAXWeatherAlerts(json["weatherwarnings"]);
       }
     };
     get1000.open("GET", "/get1000", true);
@@ -52,21 +53,29 @@
     }
   },
   TimeCalculation: function (timestr, type) {
-    if (type === "diffraw" || type === "difftext") {
+    if (type === "diffraw" || type === "difftext" || type === "difftextn") {
       var diff = Math.round((Date.now() - Date.parse(timestr) - this._internalTimeOffset) / 1000);
       if (type === "diffraw") {
         return diff;
       }
+      if (type === "difftextn" && diff < 0) {
+        diff = diff * -1;
+      }
+      var isneg = false;
+      if (diff < 0) {
+        isneg = true;
+        diff = diff * -1;
+      }
       if (diff < 60) {
-        return diff + " s";
+        return (isneg ? "-" : "") + diff + " s";
       }
       if (diff < 60 * 60) {
-        return Math.floor(diff / 60) + " m";
+        return (isneg ? "-" : "") + Math.floor(diff / 60) + " m";
       }
       if (diff < 60 * 60 * 24) {
-        return Math.floor(diff / (60 * 60)) + " h";
+        return (isneg ? "-" : "") + Math.floor(diff / (60 * 60)) + " h";
       }
-      return Math.floor(diff / (60 * 60 * 24)) + " d";
+      return (isneg ? "-" : "") + Math.floor(diff / (60 * 60 * 24)) + " d";
     } else if (type === "str") {
       var date = new Date(Date.parse(timestr) + this._internalTimeOffset);
       var str = date.toLocaleString();

Lora-Map/resources/js/menu.js

@@ -163,5 +163,24 @@
     };
     testadmin.open("GET", "/admin", true);
     testadmin.send();
+  },
+  _ParseAJAXWeatherAlerts: function (json) {
+    if (json.length > 0) {
+      var html = "";
+      for (var i = 0; i < json.length; i++) {
+        var walert = json[i];
+        html += "<div class='alertitem " + walert.Level + "'>" +
+          "<span class='head'>" + walert.Headline + "</span>" +
+          "<span class='ort'>" + walert.Location + "</span>" +
+          "<span class='text'>" + walert.Body + (walert.Instructions != "" ? "<br><br>" + walert.Instructions : "") + "</span>" +
+          "<span class='time'><b>Von:</b> vor " + FunctionsObject.TimeCalculation(walert.From, "difftext") + " <b>Bis:</b> in " + FunctionsObject.TimeCalculation(walert.To, "difftextn") + "</span>" +
+          "</div>";
+      }
+      document.getElementById("pannels_weather").innerHTML = html;
+      document.getElementById("menucol_weather_icon").className = "weather ac";
+    } else {
+      document.getElementById("pannels_weather").innerHTML = "<h1>Keine Gefahren</h1>";
+      document.getElementById("menucol_weather_icon").className = "weather";
+    }
   }
 }.Start();