Javascript Refactoring...

CHANGELOG

@@ -1,5 +1,10 @@
 # Changelogs
 
+## 1.2.9
+### New Features
+### Bugfixes
+### Changes
+
 ## 1.2.8
 ### New Features
 * Implement #12 Make icon transparent if there is no data update

Lora-Map/resources/js/functions.js

@@ -1,43 +1,45 @@
-setInterval(timecorrectionrunner, 60000);
+var FunctionsObject = {
-timecorrectionrunner();
+  _internalTimeOffset: 0,
-
+  Start: function () {
-function timecorrectionrunner() {
+    setInterval(this._Runner, 60000);
-  var timecorrection = new XMLHttpRequest();
+    this._Runner();
-  timecorrection.onreadystatechange = parseAjaxTimecorrection;
+    return this;
-  timecorrection.open("GET", "/currenttime", true);
+  },
-  timecorrection.send();
+  _Runner: function () {
-}
+    var timecorrection = new XMLHttpRequest();
-
+    timecorrection.onreadystatechange = function () {
-var timeOffset = 0;
+      if (timecorrection.readyState === 4 && timecorrection.status === 200) {
-
+        FunctionsObject._ParseAJAX(JSON.parse(timecorrection.responseText));
-function parseAjaxTimecorrection() {
+      }
-  if (this.readyState === 4 && this.status === 200) {
+    };
-    utcobject = JSON.parse(this.responseText);
+    timecorrection.open("GET", "/currenttime", true);
+    timecorrection.send();
+  },
+  _ParseAJAX: function (utcobject) {
     if (utcobject.hasOwnProperty("utc")) {
-      timeOffset = Date.now() - Date.parse(utcobject["utc"]);
+      this._internalTimeOffset = Date.now() - Date.parse(utcobject["utc"]);
+    }
+  },
+  TimeCalculation: function (timestr, type) {
+    if (type === "diffraw" || type === "difftext") {
+      var diff = Math.round((Date.now() - Date.parse(timestr) - this._internalTimeOffset) / 1000);
+      if (type === "diffraw") {
+        return diff;
+      }
+      if (diff < 60) {
+        return diff + " s";
+      }
+      if (diff < 60 * 60) {
+        return Math.floor(diff / 60) + " m";
+      }
+      if (diff < 60 * 60 * 24) {
+        return Math.floor(diff / (60 * 60)) + " h";
+      }
+      return Math.floor(diff / (60 * 60 * 24)) + " d";
+    } else if (type === "str") {
+      var date = new Date(Date.parse(timestr) + this._internalTimeOffset);
+      var str = date.toLocaleString();
+      return str;
     }
   }
-}
+}.Start();
-
-function timeCalculation(timestr, type) {
-  if (type === "diffraw" || type === "difftext") {
-    var diff = Math.round((Date.now() - Date.parse(timestr) - timeOffset) / 1000);
-    if (type === "diffraw") {
-      return diff;
-    }
-    if (diff < 60) {
-      return diff + " s";
-    }
-    if (diff < 60 * 60) {
-      return Math.floor(diff / 60) + " m";
-    }
-    if (diff < 60 * 60 * 24) {
-      return Math.floor(diff / (60 * 60)) + " h";
-    }
-    return Math.floor(diff / (60 * 60 * 24)) + " d";
-  } else if (type === "str") {
-    var date = new Date(Date.parse(timestr) + timeOffset);
-    var str = date.toLocaleString();
-    return str;
-  }
-}

Lora-Map/resources/js/map.js

@@ -1,53 +1,60 @@
-var mymap = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
+var MapObject = {
-
+  Map: {},
-GetMapLayers();
+  Start: function () {
-function GetMapLayers() {
+    this.Map = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
-  var layergetter = new XMLHttpRequest();
+    this._GetMapLayers();
-  layergetter.onreadystatechange = function () {
+    return this;
-    if (layergetter.readyState === 4 && layergetter.status === 200) {
+  },
-      var maps = JSON.parse(layergetter.responseText);
+  _GetMapLayers: function () {
-      var i = 0;
+    var layergetter = new XMLHttpRequest();
-      for (var key in maps) {
+    layergetter.onreadystatechange = function () {
-        i++;
+      if (layergetter.readyState === 4 && layergetter.status === 200) {
-      }
+        MapObject._ParseAJAXLayers(JSON.parse(layergetter.responseText));
-      if (i === 1) {
-        L.tileLayer(maps["online"]["url"], {
-          attribution: maps["online"]["attribution"],
-          minZoom: maps["online"]["minZoom"],
-          maxZoom: maps["online"]["maxZoom"]
-        }).addTo(mymap);
-      } else {
-        var baseMaps = {};
-        for (key in maps) {
-          if (key !== "online") {
-            var basemap = L.tileLayer(maps[key]["url"], {
-              attribution: maps[key]["attribution"],
-              minZoom: maps[key]["minZoom"],
-              maxZoom: maps[key]["maxZoom"],
-              errorTileUrl: "css/icons/failtile.png"
-            });
-            basemap.addTo(mymap);
-            baseMaps[maps[key]["title"]] = basemap;
-            break;
-          }
-        }
-        for (key in maps) {
-          if (!baseMaps.hasOwnProperty(maps[key]["title"])) {
-            baseMaps[maps[key]["title"]] = L.tileLayer(maps[key]["url"], {
-              attribution: maps[key]["attribution"],
-              minZoom: maps[key]["minZoom"],
-              maxZoom: maps[key]["maxZoom"],
-              errorTileUrl: "css/icons/failtile.png"
-            });
-          }
-        }
-        L.control.layers(baseMaps).addTo(mymap);
       }
+    };
+    layergetter.open("GET", "/getlayer", true);
+    layergetter.send();
+  },
+  _ParseAJAXLayers: function (maps) {
+    var i = 0;
+    for (var key in maps) {
+      i++;
     }
-  };
+    if (i === 1) {
-  layergetter.open("GET", "/getlayer", true);
+      L.tileLayer(maps["online"]["url"], {
-  layergetter.send();
+        attribution: maps["online"]["attribution"],
-}
+        minZoom: maps["online"]["minZoom"],
+        maxZoom: maps["online"]["maxZoom"]
+      }).addTo(this.Map);
+    } else {
+      var baseMaps = {};
+      for (key in maps) {
+        if (key !== "online") {
+          var basemap = L.tileLayer(maps[key]["url"], {
+            attribution: maps[key]["attribution"],
+            minZoom: maps[key]["minZoom"],
+            maxZoom: maps[key]["maxZoom"],
+            errorTileUrl: "css/icons/failtile.png"
+          });
+          basemap.addTo(this.Map);
+          baseMaps[maps[key]["title"]] = basemap;
+          break;
+        }
+      }
+      for (key in maps) {
+        if (!baseMaps.hasOwnProperty(maps[key]["title"])) {
+          baseMaps[maps[key]["title"]] = L.tileLayer(maps[key]["url"], {
+            attribution: maps[key]["attribution"],
+            minZoom: maps[key]["minZoom"],
+            maxZoom: maps[key]["maxZoom"],
+            errorTileUrl: "css/icons/failtile.png"
+          });
+        }
+      }
+      L.control.layers(baseMaps).addTo(this.Map);
+    }
+  }
+}.Start();
 
 var SpecialMarkers = new Array();
 GetGeoLayer();
@@ -100,7 +107,7 @@ function GetGeoLayer() {
               return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) });
             }
           }
-        }).addTo(mymap);
+        }).addTo(MapObject.Map);
       }
     }
   };
@@ -108,8 +115,8 @@ function GetGeoLayer() {
   geogetter.send();
 }
 
-mymap.on('zoomend', function () {
+MapObject.Map.on('zoomend', function () {
-  var currentZoom = mymap.getZoom();
+  var currentZoom = MapObject.Map.getZoom();
   if (currentZoom < 14) {
     SpecialMarkers.forEach(function (elem, index) {
       if (elem.feature.properties["description"] === "snumber") {
@@ -190,7 +197,7 @@ mymap.on('zoomend', function () {
   }
 });
 
-mymap.on("click", hidePanel);
+MapObject.Map.on("click", hidePanel);
 
 function hidePanel(e) {
   showHidePanel(null);

Lora-Map/resources/js/marker.js

@@ -1,27 +1,37 @@
-setInterval(datarunner, 1000);
+var MarkerObject = {
-function datarunner() {
+  _Markers: {},
-  var loc = new XMLHttpRequest();
+  PanicData: {},
-  loc.onreadystatechange = parseAjaxLoc;
+  LocationData: {},
-  loc.open("GET", "/loc", true);
+  Start: function () {
-  loc.send();
+    setInterval(this._Runner, 1000);
+    return this;
+  },
+  _Runner: function () {
+    var loc = new XMLHttpRequest();
+    loc.onreadystatechange = function () {
+      if (loc.readyState === 4 && loc.status === 200) {
+        MarkerObject._ParseAJAXLoc(JSON.parse(loc.responseText));
+      }
+    };
+    loc.open("GET", "/loc", true);
+    loc.send();
 
-  var panic = new XMLHttpRequest();
+    var panic = new XMLHttpRequest();
-  panic.onreadystatechange = parseAjaxPanic;
+    panic.onreadystatechange = function () {
-  panic.open("GET", "/panic", true);
+      if (panic.readyState === 4 && panic.status === 200) {
-  panic.send();
+        MarkerObject._ParseAJAXPanic(JSON.parse(panic.responseText));
-}
+      }
-
+    };
-var markers = {};
+    panic.open("GET", "/panic", true);
-var serverLocation = {};
+    panic.send();
-//https://leafletjs.com/reference-1.4.0.html#marker
+  },
-function parseAjaxLoc() {
+  _ParseAJAXLoc: function (serverLocation) {
-  if (this.readyState === 4 && this.status === 200) {
+    this.LocationData = serverLocation;
-    serverLocation = JSON.parse(this.responseText);
+    for (var key in this.LocationData) {
-    for (var key in serverLocation) {
+      if (this.LocationData.hasOwnProperty(key)) {
-      if (serverLocation.hasOwnProperty(key)) {
+        var positionItem = this.LocationData[key];
-        var positionItem = serverLocation[key];
         if (positionItem['Latitude'] !== 0 || positionItem['Longitude'] !== 0) {
-          if (!markers.hasOwnProperty(key)) {
+          if (!this._Markers.hasOwnProperty(key)) {
             var marker = null;
             if (positionItem['Icon'] === null) {
               marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] });
@@ -34,67 +44,63 @@ function parseAjaxLoc() {
               });
               marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'], 'icon': myIcon });
             }
-            markers[key] = marker.addTo(mymap).on("click", showMarkerInfo, key);
+            this._Markers[key] = marker.addTo(MapObject.Map).on("click", showMarkerInfo, key);
           } else {
-            markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]);
+            this._Markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]);
             if (positionItem['Icon'] !== null) {
-              if (markers[key]._icon.children.length === 0) {
+              if (this._Markers[key]._icon.children.length === 0) {
-                markers[key].setIcon(L.divIcon({
+                this._Markers[key].setIcon(L.divIcon({
                   className: 'pos-marker',
                   iconSize: [56, 80],
                   iconAnchor: [0, 80],
                   html: '<img src="' + positionItem['Icon'] + '" height="80" width="56" />'
                 }));
-              } else if (markers[key]._icon.children[0].hasAttribute("src")) {
+              } else if (this._Markers[key]._icon.children[0].hasAttribute("src")) {
-                var old = markers[key]._icon.children[0]["src"].substring(markers[key]._icon.children[0]["src"].indexOf("/", 7) + 1);
+                var old = this._Markers[key]._icon.children[0]["src"].substring(this._Markers[key]._icon.children[0]["src"].indexOf("/", 7) + 1);
                 if (old !== positionItem['Icon']) {
-                  markers[key]._icon.children[0]["src"] = positionItem['Icon'];
+                  this._Markers[key]._icon.children[0]["src"] = positionItem['Icon'];
                 }
               }
             } else {
-              if (markers[key]._icon.children.length === 1 && markers[key]._icon.children[0].hasAttribute("src")) {
+              if (this._Markers[key]._icon.children.length === 1 && this._Markers[key]._icon.children[0].hasAttribute("src")) {
-                markers[key].removeFrom(mymap);
+                this._Markers[key].removeFrom(MapObject.Map);
-                markers[key] = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] }).addTo(mymap).on("click", showMarkerInfo, key);
+                this._Markers[key] = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] }).addTo(MapObject.Map).on("click", showMarkerInfo, key);
               }
             }
           }
-          var lasttime = timeCalculation(positionItem['Recievedtime'], "diffraw");
+          var lasttime = FunctionsObject.TimeCalculation(positionItem['Recievedtime'], "diffraw");
           if (lasttime <= 5 * 60) {
-            markers[key]._icon.style.opacity = 1;
+            this._Markers[key]._icon.style.opacity = 1;
           } else if (lasttime > 5 * 60 && lasttime <= 15 * 60) {
-            markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
+            this._Markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
           } else if (lasttime > 15 * 60 && lasttime <= 30 * 60) {
-            markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
+            this._Markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
           } else if (lasttime > 30 * 60 && lasttime <= 60 * 60) {
-            markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
+            this._Markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
           } else if (lasttime > 60 * 60) {
-            markers[key]._icon.style.opacity = 0.25;
+            this._Markers[key]._icon.style.opacity = 0.25;
           }
         }
       }
     }
     updateStatus();
     update_pannels_info();
-  }
+  }, 
-}
+  _ParseAJAXPanic: function (serverPanic) {
-
+    this.PanicData = serverPanic;
-var serverPanic = {};
+    for (var id in this.PanicData) {
-function parseAjaxPanic() {
+      if (this.PanicData.hasOwnProperty(id)) {
-  if (this.readyState === 4 && this.status === 200) {
+        var alertItem = this.PanicData[id];
-    serverPanic = JSON.parse(this.responseText);
+        if (this._Markers.hasOwnProperty(id)) {
-    for (var id in serverPanic) {
+          var marker = this._Markers[id];
-      if (serverPanic.hasOwnProperty(id)) {
+          if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
-        var alertItem = serverPanic[id];
-        if (markers.hasOwnProperty(id)) {
-          var marker = markers[id];
-          if (timeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
             marker._icon.className += " marker-alert";
             showMarkerInfoPerId(id);
-          } else if (timeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
+          } else if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
             marker._icon.className = marker._icon.className.replace(" marker-alert", "");
           }
         }
       }
     }
   }
-}
+}.Start();

Lora-Map/resources/js/menu.js

@@ -41,8 +41,8 @@ function showMarkerInfoMenu() {
 
 function update_pannels_info() {
   document.getElementById("pannels_info").innerHTML = "";
-  if (serverLocation.hasOwnProperty(statusToDevice)) {
+  if (MarkerObject.LocationData.hasOwnProperty(statusToDevice)) {
-    var positionItem = serverLocation[statusToDevice];
+    var positionItem = MarkerObject.LocationData[statusToDevice];
     var html = "<div class=\"name\">Name: <span class=\"bold\">" + positionItem["Name"] + "</span></div>";
     html += "<div class=\"batt\"><span class=\"bold\">Batterie:</span> " + positionItem["Battery"] + "V <img src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></div>";
     if (positionItem["Fix"]) {
@@ -54,15 +54,15 @@ function update_pannels_info() {
     html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + positionItem["Height"].toFixed(1) + " m</div>";
     html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span>  " + positionItem["Hdop"].toFixed(1) + "</div>";
     html += "<div class=\"lanlot\"><span class=\"bold\">Dezimal:</span> " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "</div>";
-    html += "<div class=\"lastgps\"><span class=\"bold\">Letzter Wert:</span> Vor: " + timeCalculation(positionItem["Lastgpspostime"], "difftext") + "</div>";
+    html += "<div class=\"lastgps\"><span class=\"bold\">Letzter Wert:</span> Vor: " + FunctionsObject.TimeCalculation(positionItem["Lastgpspostime"], "difftext") + "</div>";
-    html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + timeCalculation(positionItem["Recievedtime"], "str") + "<br><span class=\"bold\">Vor:</span> " + timeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
+    html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "str") + "<br><span class=\"bold\">Vor:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
     html += "<div><span class=\"bold\">RSSI:</span> " + positionItem["Rssi"] + ", <span class=\"bold\">SNR:</span> " + positionItem["Snr"] + "</div>";
-    if (serverPanic.hasOwnProperty(statusToDevice)) {
+    if (MarkerObject.PanicData.hasOwnProperty(statusToDevice)) {
-      var panicData = serverPanic[statusToDevice];
+      var panicData = MarkerObject.PanicData[statusToDevice];
       if (panicData["ButtonPressed"].length > 0) {
         html += "<div class='alerts'><span class=\"bold\">Alerts:</span>";
         for (var i = 0; i < panicData["ButtonPressed"].length; i++) {
-          html += "<span class='panicitem'>" + timeCalculation(panicData["ButtonPressed"][i], "str")+" (vor " + timeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
+          html += "<span class='panicitem'>" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
         }
         html += "</div>";
       }
@@ -74,9 +74,9 @@ function update_pannels_info() {
 var overviewStatus = new Array();
 
 function updateStatus() {
-  for (var id in serverLocation) {
+  for (var id in MarkerObject.LocationData) {
-    if (serverLocation.hasOwnProperty(id)) {
+    if (MarkerObject.LocationData.hasOwnProperty(id)) {
-      var positionItem = serverLocation[id];
+      var positionItem = MarkerObject.LocationData[id];
       if (typeof overviewStatus[id] === "undefined") {
         overviewStatus[id] = createOverviewElement(positionItem, id);
         document.getElementById("pannels_pos").appendChild(overviewStatus[id]);
@@ -103,7 +103,7 @@ function updateOverviewElement(positionItem, id) {
     document.getElementById("overview-gps-id-" + id).innerText = "kein GPS-Empfang";
     document.getElementById("overview-gps-id-" + id).style.color = "red";
   }
-  document.getElementById("overview-update-id-" + id).innerText = "Letzte Werte: vor " + timeCalculation(positionItem["Recievedtime"], "difftext");
+  document.getElementById("overview-update-id-" + id).innerText = "Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext");
   if (positionItem['Icon'] === null) {
     var icon = document.getElementById("overview-icon-id-" + id);
     if (icon.children[0].hasAttribute("rel")) {
@@ -136,7 +136,7 @@ function createOverviewElement(positionItem, id) {
     "<span class=\"akku\"><img id=\"overview-akkuimg-id-" + id + "\" src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></span>" +
     "</div>";
   divItem.innerHTML += "<div class=\"line2\" style=\"color: red;\" id=\"overview-gps-id-" + id + "\">kein GPS-Empfang</div>";
-  divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzte Werte: vor " + timeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
+  divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
   return divItem;
 }
 

Lora-Map/resources/js/overlays.js

@@ -1,18 +1,29 @@
-setInterval(overlayrunner, 1000);
+var OverlayObject = {
-function overlayrunner() {
+  Start: function () {
-  var ccount = new XMLHttpRequest();
+    setInterval(this._Runner, 1000);
-  ccount.onreadystatechange = parseAjaxCount;
+    this._Runner();
-  ccount.open("GET", "/cameracount", true);
+    return this;
-  ccount.send();
+  },
-  var cdensity = new XMLHttpRequest();
+  _Runner: function () {
-  cdensity.onreadystatechange = parseAjaxDensity;
+    var ccount = new XMLHttpRequest();
-  cdensity.open("GET", "/crowdcount", true);
+    ccount.onreadystatechange = function () {
-  cdensity.send();
+      if (ccount.readyState === 4 && ccount.status === 200) {
-}
+        OverlayObject._ParseAJAXCount(JSON.parse(ccount.responseText));
+      }
+    };
+    ccount.open("GET", "/cameracount", true);
+    ccount.send();
 
-function parseAjaxCount() {
+    var cdensity = new XMLHttpRequest();
-  if (this.readyState === 4 && this.status === 200) {
+    cdensity.onreadystatechange = function () {
-    var cameracounts = JSON.parse(this.responseText);
+      if (cdensity.readyState === 4 && cdensity.status === 200) {
+        OverlayObject._ParseAJAXDensity(JSON.parse(cdensity.responseText));
+      }
+    };
+    cdensity.open("GET", "/crowdcount", true);
+    cdensity.send();
+  },
+  _ParseAJAXCount: function (cameracounts) {
     var camerastext = "";
     for (var cameraid in cameracounts) {
       if (cameracounts.hasOwnProperty(cameraid)) {
@@ -27,12 +38,8 @@ function parseAjaxCount() {
       }
     }
     document.getElementById("cameracount").innerHTML = camerastext;
-  }
+  },
-}
+  _ParseAJAXDensity: function (cameradensy) {
-
-function parseAjaxDensity() {
-  if (this.readyState === 4 && this.status === 200) {
-    var cameradensy = JSON.parse(this.responseText);
     var densystext = "";
     for (var densyid in cameradensy) {
       if (cameradensy.hasOwnProperty(densyid)) {
@@ -46,4 +53,4 @@ function parseAjaxDensity() {
     }
     document.getElementById("crwoddensy").innerHTML = densystext;
   }
-}
+}.Start();