Inital commit

static/js/main.js

@@ -0,0 +1,89 @@
+
+(function ($) {
+    "use strict";
+
+
+    /*==================================================================
+    [ Focus input ]*/
+    $('.input100').each(function(){
+        $(this).on('blur', function(){
+            if($(this).val().trim() != "") {
+                $(this).addClass('has-val');
+            }
+            else {
+                $(this).removeClass('has-val');
+            }
+        })    
+    })
+  
+  
+    /*==================================================================
+    [ Validate ]*/
+    var input = $('.validate-input .input100');
+
+    $('.validate-form').on('submit',function(){
+        var check = true;
+
+        for(var i=0; i<input.length; i++) {
+            if(validate(input[i]) == false){
+                showValidate(input[i]);
+                check=false;
+            }
+        }
+
+        return check;
+    });
+
+
+    $('.validate-form .input100').each(function(){
+        $(this).focus(function(){
+           hideValidate(this);
+        });
+    });
+
+    function validate (input) {
+        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
+            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
+                return false;
+            }
+        }
+        else {
+            if($(input).val().trim() == ''){
+                return false;
+            }
+        }
+    }
+
+    function showValidate(input) {
+        var thisAlert = $(input).parent();
+
+        $(thisAlert).addClass('alert-validate');
+    }
+
+    function hideValidate(input) {
+        var thisAlert = $(input).parent();
+
+        $(thisAlert).removeClass('alert-validate');
+    }
+    
+    /*==================================================================
+    [ Show pass ]*/
+    var showPass = 0;
+    $('.btn-show-pass').on('click', function(){
+        if(showPass == 0) {
+            $(this).next('input').attr('type','text');
+            $(this).find('i').removeClass('zmdi-eye');
+            $(this).find('i').addClass('zmdi-eye-off');
+            showPass = 1;
+        }
+        else {
+            $(this).next('input').attr('type','password');
+            $(this).find('i').addClass('zmdi-eye');
+            $(this).find('i').removeClass('zmdi-eye-off');
+            showPass = 0;
+        }
+        
+    });
+
+
+})(jQuery);

static/js/map.js

@@ -0,0 +1,589 @@
+/* eslint-disable no-undef */
+
+let retryConnection = false;
+
+var markers = L.markerClusterGroup({
+  chunkedLoading: true,
+  removeOutsideVisibleBounds: true,
+});
+
+// Prepare everything we need for the map
+let theMarker = L.Marker.extend({
+  options: {
+    id: "-1",
+  },
+});
+// Icons
+const defaultIcon = L.icon({
+  iconUrl: "/img/marker-icon.png",
+  shadowUrl: "",
+  iconSize: [25, 41], // size of the icon
+  shadowSize: [41, 41], // size of the shadow
+  iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
+  popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
+});
+
+const signalIcon = L.icon({
+  iconUrl: "/img/signal.png",
+  shadowUrl: "",
+
+  iconSize: [30, 30], // size of the icon
+  shadowSize: [0, 0], // size of the shadow
+  iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
+  shadowAnchor: [0, 0], // the same for the shadow
+  popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+});
+
+const temperatureIcon = L.icon({
+  iconUrl: "/img/temperature.png",
+  shadowUrl: "",
+
+  iconSize: [30, 30], // size of the icon
+  shadowSize: [0, 0], // size of the shadow
+  iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
+  shadowAnchor: [0, 0], // the same for the shadow
+  popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+});
+
+const cctvIcon = L.icon({
+  iconUrl: "/img/cctv.png",
+  shadowUrl: "",
+
+  iconSize: [30, 30], // size of the icon
+  shadowSize: [0, 0], // size of the shadow
+  iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
+  shadowAnchor: [0, 0], // the same for the shadow
+  popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+});
+
+const wifiIcon = L.icon({
+  iconUrl: "/img/wifi.png",
+  shadowUrl: "",
+
+  iconSize: [30, 30], // size of the icon
+  shadowSize: [0, 0], // size of the shadow
+  iconAnchor: [15, 15], // point of the icon which will correspond to marker's location
+  shadowAnchor: [0, 0], // the same for the shadow
+  popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+});
+
+function showPosition(position) {
+  mymap.setView(
+    new L.LatLng(position.coords.latitude, position.coords.longitude),
+    10
+  );
+}
+// Share a point
+function sharePOI(id) {
+  const url = "https://pointsight.project-name-here.de/#" + id;
+  sidebar.prevContent = sidebar._contentContainer.innerHTML;
+  navigator.clipboard.writeText(url);
+  makeToastNotification(
+    "Copy successful",
+    "The link to this point has been copied to your clipboard"
+  );
+}
+
+function prepareSidebar(point_id, panTo = false) {
+  const rawData = httpGet(
+    "/api/retrieve?uid=" +
+      point_id +
+      "&key=b03f8aaf-1f32-4d9e-914a-9a50f904833d"
+  );
+  if (rawData.length > 0 && !rawData.includes("502 Bad Gateway")) {
+    retryConnection = false;
+    try {
+      toggleModal("popup-modal-no-conn", false);
+      retryConnection = false;
+    } catch (error) {
+      error;
+    }
+    const moreData = JSON.parse(rawData)[0][0];
+    // Inject toolbar
+    let inspector =
+      '<i class="fas fa-flag reportBtn" style="padding: 4px;" onclick="reportPOI(\'' +
+      point_id +
+      "')\"></i>";
+    inspector +=
+      '<i class="fas fa-share-alt reportBtn" style="padding: 4px;" onclick="sharePOI(\'' +
+      point_id +
+      "')\"></i>";
+    console.warn(moreData);
+    if (moreData.type == "webcam-iframe") {
+      // Prepare the template
+      inspector += httpGet("/templates/inspectorContentIframe.html");
+      inspector = inspector.replaceAll("#TITLE", moreData.titel);
+      inspector = inspector.replaceAll("#URL", moreData.url);
+      inspector = inspector.replaceAll("#URL", moreData.url);
+    } else if (moreData.type == "webcam-image") {
+      // Prepare the template
+      inspector += httpGet("/templates/inspectorContentImage.html");
+      inspector = inspector.replaceAll("#TITLE", moreData.titel);
+      inspector = inspector.replaceAll("#URL", moreData.url);
+    } else if (moreData.type == "iframe") {
+      // Prepare the template
+      inspector += httpGet("/templates/inspectorContentIframe.html");
+      inspector = inspector.replaceAll("#TITLE", moreData.titel);
+      inspector = inspector.replaceAll("#URL", moreData.url);
+      inspector = inspector.replaceAll("#URL", moreData.url);
+    } else if (moreData.type == "request-info") {
+      // Prepare the template
+      inspector += httpGet("/templates/inspectorGeneral.html");
+      inspector = inspector.replaceAll("#TITLE", moreData.object.titel);
+      inspector = inspector.replaceAll("#description", httpGet(moreData.url));
+    } else {
+      inspector += httpGet("/templates/inspectorGeneral.html");
+      inspector = inspector.replaceAll("#TITLE", moreData.titel);
+      inspector = inspector.replaceAll("#description", moreData.description);
+    }
+    // document.getElementById("inspector").innerHTML = inspector;
+
+    sidebar.setContent(inspector);
+    sidebar.show();
+    if (panTo) {
+      mymap.panTo([moreData.location.x, moreData.location.y]);
+    }
+  } else {
+    try {
+      if (!retryConnection) {
+        toggleModal("popup-modal-no-conn", true);
+      }
+
+      retryConnection = true;
+    } catch (error) {
+      error;
+    }
+  }
+}
+
+// Handles click actions for markers
+function onClick(e) {
+  prepareSidebar(this.options.object.uid);
+}
+
+const form = document.getElementById("reportForm");
+form.addEventListener("submit", (event) => {
+  // submit event detected
+  event.preventDefault();
+  console.log("Report done by users");
+  // Change the UI
+  document.getElementById("reportBtnText").style.display = "none";
+  document.getElementById("loadingSpinner").style.display = "block";
+  document.getElementById("submitBtn").disabled = true;
+  // Get all values
+  const formy = new FormData(form);
+  const reason = formy.get("reason");
+  const email = formy.get("email");
+  const pointId = document.getElementById("pointId").innerHTML;
+  const baseUrl =
+    "/api/internal/report?key=b03f8aaf-1f32-4d9e-914a-9a50f904833d&";
+  let reqUrl =
+    baseUrl + "reason=" + reason + "&mail=" + email + "&point_id=" + pointId;
+  const response = httpGet(reqUrl);
+  const reponseParsed = JSON.parse(response);
+  if (reponseParsed.status == "success") {
+    setTimeout(() => {
+      document.getElementById("loadingDone").style.display = "block";
+      document.getElementById("loadingSpinner").style.display = "none";
+    }, 1000);
+    setTimeout(() => {
+      document.getElementById("reportBtnText").style.display = "block";
+      document.getElementById("loadingSpinner").style.display = "none";
+      document.getElementById("submitBtn").disabled = false;
+      document.getElementById("loadingDone").style.display = "none";
+      toggleModal("report-modal", false);
+      form.reset();
+      makeToastNotification("Report successful", "Thank you for your report.");
+    }, 2000);
+  } else {
+    if (reponseParsed.message == "Invalid mail") {
+      setTimeout(() => {
+        document.getElementById("reportBtnText").style.display = "block";
+        document.getElementById("loadingSpinner").style.display = "none";
+        document.getElementById("loadingDone").style.display = "none";
+        document.getElementById("submitBtn").disabled = false;
+        toggleModal("report-modal", false);
+        form.reset();
+
+        document.getElementById("Geomodal-content").innerHTML =
+          "It seemed like you provided an invalid mail address. Please try again.";
+        toggleModal("popup-modal", true);
+      }, 1000);
+    } else {
+      setTimeout(() => {
+        document.getElementById("reportBtnText").style.display = "block";
+        document.getElementById("loadingSpinner").style.display = "none";
+        document.getElementById("loadingDone").style.display = "none";
+        document.getElementById("submitBtn").disabled = false;
+        toggleModal("report-modal", false);
+        form.reset();
+
+        document.getElementById("Geomodal-content").innerHTML =
+          "Something went wrong, please try again later";
+        toggleModal("popup-modal", true);
+      }, 1000);
+    }
+  }
+});
+
+function reportPOI(poi_id) {
+  document.getElementById("pointId").innerHTML = poi_id;
+  toggleModal("report-modal", true);
+  /*const url = "/api/internal/report&key=b03f8aaf-1f32-4d9e-914a-9a50f904833d&"
+  console.log(poi_id)*/
+}
+function httpGet(theUrl) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.open("GET", theUrl, false); // false for synchronous request
+  xmlHttp.send(null);
+  return xmlHttp.responseText;
+}
+
+function httpGetTriggerForMapData(theUrl) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.open("GET", theUrl, true); // Doing it asynchronous
+  xmlHttp.send(null);
+  xmlHttp.onerror = function (e) {
+    console.log(e);
+  };
+  xmlHttp.onloadend = function (e) {
+    setTimeout(function () {
+      if (
+        xmlHttp.responseText.length > 0 &&
+        !xmlHttp.responseText.includes("502 Bad Gateway")
+      ) {
+        retryConnection = false;
+        try {
+          toggleModal("popup-modal-no-conn", false);
+          retryConnection = false;
+        } catch (error) {
+          error;
+        }
+        response = xmlHttp.responseText;
+        allMarks = 0;
+        response = JSON.parse(response);
+        allMarks = response;
+
+        markerList = [];
+        for (h in response) {
+          item = response[h];
+          let mIcon = defaultIcon;
+          if (item.icon == "signalIcon") {
+            mIcon = signalIcon;
+          } else if (item.icon == "cctvIcon") {
+            mIcon = cctvIcon;
+          } else if (item.icon == "wifiIcon") {
+            mIcon = wifiIcon;
+          } else if (item.icon == "temperatureIcon") {
+            mIcon = temperatureIcon;
+          }
+
+          var marker = new theMarker([item.location.x, item.location.y], {
+            icon: mIcon,
+            object: item,
+          }).on("click", onClick);
+          markerList.push(marker);
+        }
+        // response.forEach(addPin);
+        markers.clearLayers();
+        markers.addLayers(markerList);
+        mymap.addLayer(markers);
+        syncBtn.state("default"); // Make sure the button is back to default
+      } else {
+        try {
+          if (!retryConnection) {
+            toggleModal("popup-modal-no-conn", true);
+          }
+
+          retryConnection = true;
+        } catch (error) {
+          error;
+        }
+      }
+    }, 50);
+  };
+}
+
+// Try to find where to user is
+function home() {
+  if (navigator.geolocation) {
+    setTimeout(function () {
+      navigator.geolocation.getCurrentPosition(showPosition);
+    }, 200);
+  } else {
+    console.warn("Geolocation of user could not be fetched");
+  }
+}
+
+home();
+
+let allMarks = [];
+var layerGroup = L.layerGroup().addTo(mymap);
+var scale = L.control.scale().addTo(mymap);
+var locator = L.control
+  .locate({
+    onLocationError: function (err) {
+      console.log(err);
+      let tip = err.message;
+      if (err.message.indexOf("User denied Geolocation") > -1) {
+        tip =
+          "You have denied the location request. Please allow it in your browser settings.";
+      }
+      document.getElementById("Geomodal-content").innerHTML = tip;
+      toggleModal("popup-modal", true);
+    },
+  })
+  .addTo(mymap);
+
+/*mymap.addControl(
+  new L.Control.Fullscreen({
+    title: {
+      false: "View Fullscreen",
+      true: "Exit Fullscreen",
+    },
+  })
+);*/
+
+var sidebar = L.control.sidebar("sidebar", {
+  closeButton: true,
+  position: "right",
+});
+mymap.addControl(sidebar);
+
+var sidebar2 = L.control.sidebar("sidebar-left", {
+  // Filter one
+  closeButton: true,
+  position: "left",
+});
+mymap.addControl(sidebar2);
+// sidebar2.setContent(httpGet("/templates/filterPage.html"));
+
+L.easyButton("fa-filter", function (btn, map) {
+  if (sidebar2.isVisible()) {
+    sidebar2.hide();
+  } else {
+    sidebar2.show();
+  }
+}).addTo(mymap);
+
+syncBtn = L.easyButton({
+  states: [
+    {
+      stateName: "default", // name the state
+      icon: "fa-sync", // and define its properties
+      title: "Reload POIs", // like its title
+      onClick: function (btn, map) {
+        // and its callback
+        updatePois(); // Update all da fancy POIs
+        btn.state("loading"); // change state on click!
+      },
+    },
+    {
+      stateName: "loading",
+      icon: "fa-sync fa-spin",
+      title: "Reloading...",
+    },
+  ],
+});
+syncBtn.addTo(mymap);
+
+searchBtn = L.easyButton({
+  states: [
+    {
+      stateName: "default", // name the state
+      icon: "fa-search", // and define its properties
+      title: "Search", // like its title
+      onClick: function (btn, map) {
+        // and its callback
+        sear.toggle();
+        btn.state("search"); // change state on click!
+      },
+    },
+    {
+      stateName: "search",
+      icon: "fa-search fa-spin",
+      title: "Hide search",
+      onClick: function (btn, map) {
+        // and its callback
+        sear.toggle();
+        btn.state("default"); // change state on click!
+      },
+    },
+  ],
+});
+searchBtn.addTo(mymap);
+
+// Start getting the pois
+setTimeout(updatePois, 500);
+var additionalFilters = "";
+function updatePois() {
+  // Create a filter string
+  const enabledFilters = [];
+  try {
+    for (fi in tagsAvail) {
+      const tag = tagsAvail[fi];
+      if (document.getElementById("tag_" + tag).checked ) {
+        enabledFilters.push(tag);
+      }
+    }
+    additionalFilters =
+      '{"conjunction": "OR", "filters": [["tag","' + enabledFilters.join('"],["tag","') + '"]]}';
+  } catch (error) {
+    console.log("Filter sidebar seems not ready yet");
+  }
+
+  console.log(additionalFilters);
+  const bounds = mymap.getBounds();
+  httpGetTriggerForMapData(
+    "/api/getPOI?boundingEast=" +
+      bounds.getNorthEast().lat +
+      ";" +
+      bounds.getNorthEast().lng +
+      "&boundingWest=" +
+      bounds.getSouthWest().lat +
+      ";" +
+      bounds.getSouthWest().lng +
+      "&key=b03f8aaf-1f32-4d9e-914a-9a50f904833d&filter=" +
+      additionalFilters
+  );
+}
+
+let prevZoom = mymap.getZoom();
+let prevCenter = mymap.getCenter();
+let hasCenterChanged = false;
+let maxZoomReached = mymap.getZoom();
+
+setTimeout(function () {
+  prevCenter = mymap.getCenter();
+  prevZoom = mymap.getZoom();
+}, 200);
+
+function getDistanceBetweenCoordinates(lat1, lon1, lat2, lon2) {
+  var R = 6371; // Radius of the earth in km
+  var dLat = deg2rad(lat2 - lat1); // deg2rad below
+  var dLon = deg2rad(lon2 - lon1);
+  var a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(deg2rad(lat1)) *
+      Math.cos(deg2rad(lat2)) *
+      Math.sin(dLon / 2) *
+      Math.sin(dLon / 2);
+  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  var d = R * c; // Distance in km
+  return d;
+}
+
+function deg2rad(deg) {
+  return deg * (Math.PI / 180);
+}
+
+mymap.on("dragend", function () {
+  console.info(
+    getDistanceBetweenCoordinates(
+      prevCenter.lat,
+      prevCenter.lng,
+      mymap.getCenter().lat,
+      mymap.getCenter().lng
+    )
+  );
+  if (
+    getDistanceBetweenCoordinates(
+      prevCenter.lat,
+      prevCenter.lng,
+      mymap.getCenter().lat,
+      mymap.getCenter().lng
+    ) >= 20
+  ) {
+    setTimeout(updatePois, 2);
+    console.info("Updating POIs");
+  }
+  prevCenter = mymap.getCenter();
+  maxZoomReached = mymap.getZoom();
+  hasCenterChanged = true;
+});
+
+mymap.on("zoomend", function () {
+  console.info(mymap.getZoom() - prevZoom);
+  prevZoom = mymap.getZoom();
+
+  if (mymap.getZoom() <= maxZoomReached) {
+    maxZoomReached = mymap.getZoom();
+    console.info("Updating POIs");
+    setTimeout(updatePois, 2);
+  } else {
+    if (hasCenterChanged == false) {
+      veryLongIntegerVariableWhichNoOneWillEverUseHopefully = 42;
+    } else {
+      console.info("Updating POIs");
+      setTimeout(updatePois, 2);
+    }
+  }
+  hasCenterChanged = false;
+});
+
+function applyFilter() {
+  const val = document.getElementById("filter").value;
+  console.log(val);
+  additionalFilters =
+    '{"filters": [["tag", "' + val + '"]], "conjunction": "OR"}'; // {"filters": [["tag", "webcam"]], "conjunction": "OR"}
+  updatePois();
+}
+
+setTimeout(function () {
+  let lat = -1;
+  let lng = -1;
+  let zoom = 5;
+  let shouldThings = 0;
+  let point_id = "";
+  if (window.location.href.indexOf("#") > -1) {
+    point_id = window.location.href.split("#")[1];
+    prepareSidebar(point_id, true);
+    setTimeout(updatePois, 500);
+  } else {
+    window.location.search
+      .substr(1)
+      .split("&")
+      .forEach(function (item) {
+        const param = item.split("=");
+        if (param[0] === "lat" && _.isFinite(param[1])) {
+          lat = param[1];
+          shouldThings++;
+        } else if (param[0] === "lng" && _.isFinite(param[1])) {
+          lng = param[1];
+          shouldThings++;
+        } else if (param[0] === "zoom" && _.isFinite(param[1])) {
+          zoom = param[1];
+          shouldThings++;
+        }
+        if (shouldThings >= 2) {
+          mymap.flyTo([lat, lng], zoom);
+          console.log(lat, lng, zoom);
+        }
+      });
+  }
+}, 500);
+
+setInterval(function () {
+  if (retryConnection) {
+    updatePois();
+  }
+}, 5000);
+
+mymap.on("contextmenu.show", (e) => {
+  mymap.contextmenu.removeItem(0);
+  mymap.contextmenu.insertItem(
+    {
+      text:
+        "<b class='background-color=\"red\"'>" +
+        e.latlng.lat.toFixed(4) +
+        ", " +
+        e.latlng.lng.toFixed(4) +
+        "</b>",
+      callback: copyLocation,
+    },
+    0
+  );
+});
+sear = L.control.search({ position: "topleft" });
+
+mymap.addControl(sear);

static/js/site.js

@@ -0,0 +1,74 @@
+/* eslint-disable no-undef */
+function httpGet(theUrl) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.open("GET", theUrl, false); // false for synchronous request
+  try {
+    xmlHttp.send(null);
+  } catch (error) {
+    try {
+      if (!retryConnection) {
+        toggleModal("popup-modal-no-conn", true);
+      }
+
+      retryConnection = true;
+    } catch (error) {
+      error;
+    }
+  }
+
+  return xmlHttp.responseText;
+}
+
+function home() {
+  if (navigator.geolocation) {
+    setTimeout(function () {
+      navigator.geolocation.getCurrentPosition(showPosition);
+    }, 200);
+  } else {
+    console.warn("Geolocation of user could not be fetched");
+  }
+}
+
+function on() {
+  document.getElementById("overlay").style.display = "block";
+}
+
+function off() {
+  document.getElementById("overlay").style.display = "none";
+}
+
+function makeToastNotification(title, message) {
+  document.getElementById("notificationToast").style.display = "block";
+  document.getElementById("toast_title").innerHTML = title;
+  document.getElementById("toast_desc").innerHTML = message;
+  try {
+    setTimeout(function () {
+      document
+        .getElementById("notificationToast")
+        .classList.remove("animate-right");
+      document
+        .getElementById("notificationToast")
+        .classList.add("animate-right-back");
+      setTimeout(function () {
+        document.getElementById("notificationToast").style.display = "none";
+        setTimeout(function () {
+          document
+            .getElementById("notificationToast")
+            .classList.add("animate-right");
+          document
+            .getElementById("notificationToast")
+            .classList.remove("animate-right-back");
+        }, 50);
+      }, 500);
+    }, 2000);
+  } catch (error) {
+    console.warn(
+      "Failed to show toast notification with title: `" +
+        title +
+        "` and message: `" +
+        message +
+        "`"
+    );
+    alert(title + " \n" + message);
+  }
+}