added js for for filling the locations list

index.html

@@ -66,9 +66,7 @@
       <h6 class="border-bottom border-gray pb-2 mb-0">current places</h6>
       <div id="locationsList">
         <div class="media text-muted pt-3">
-          <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" src="http://www.w3.org/2000/svg"
-            preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
-            <title>Placeholder</title>
+          <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" src="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
             <rect width="100%" height="100%" fill="#007bff" /><text x="50%" y="50%" fill="#007bff"
               dy=".3em">32x32</text>
           </svg>
@@ -119,7 +117,8 @@
   <script src="/docs/4.3/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
     crossorigin="anonymous"></script>
-  <script src="offcanvas.js"></script>
+  <script src="js/blueweather.js"></script>
+  <script src="js/index.js"></script>
 </body>
 
 

js/blueweather.js

@@ -8,6 +8,36 @@ class BlueWeather {
         this.log("init done", 2)
     }
 
+    getLocations(async, processingFunction, errorFunction) {
+        this.xhttp.abort()
+        var thisObject = this
+        
+        if(async) {
+            this.xhttp.onreadystatechange = function () {
+                if (this.readyState === 4) {
+                    // Typical action to be performed when the document is ready:
+                    if(this.status === 200) {
+                        thisObject.log("getting sensors response was: " + this.responseText, 3)
+                        var ret = JSON.parse(this.responseText)
+                        if(ret){
+                            processingFunction(ret);
+                            return
+                        }
+                    }
+
+                    if(errorFunction !== null) {
+                        errorFunction(this.status, this.text)
+                    }
+                }
+            };    
+        }
+
+        var url = "https://weather.itsblue.de/api/json.php"
+        this.log("starting location request; URL is: " + url, 3)
+        this.xhttp.open("GET", url, async)
+        this.xhttp.send()
+    }
+
     getLocationData(locId, range = {from:"", to:""}, maxVals = 0, async, processingFunction, errorFunction) {
         this.xhttp.abort()
         var thisObject = this

js/index.js

@@ -0,0 +1,48 @@
+class BlueWeatherIndex {
+
+    constructor() {
+      this.initDone = false
+      this.blueweather = new BlueWeather()
+
+      this.initDone = true
+
+      this.loadLocations()
+    }
+
+    loadLocations () {
+        this.blueweather.getLocations(true, function(locations) {
+            var locationsList = document.getElementById("locationsList")
+            locationsList.innerHTML = ""
+            for(var location in locations) {
+                var thisLocation = locations[location]
+
+                var locDiv = document.createElement("div")
+                locationsList.appendChild(locDiv)
+                locDiv.classList.add("media", "text-muted", "pt-3")
+                locDiv.innerHTML = '<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" src="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><rect width="100%" height="100%" fill="#007bff" /><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg>'
+                
+                var locBody = document.createElement("p")
+                locDiv.appendChild(locBody)
+                locBody.classList.add("media-body", "pb-3", "mb-0", "small", "lh-125", "border-bottom", "border-gray")
+
+                var locHeading = document.createElement("strong")
+                locBody.appendChild(locHeading)
+                locHeading.classList.add("d-block", "text-gray-dark")
+
+                var locHeadingText = document.createElement("a")
+                locHeading.appendChild(locHeadingText)
+                locHeadingText.href = "dashboard.html?params=" + JSON.stringify({locId: thisLocation.id})
+                locHeadingText.innerHTML = thisLocation.locationname
+
+                var locLocationLink = document.createElement("a")
+                locBody.appendChild(locLocationLink)
+                locLocationLink.href = "https://www.openstreetmap.org/#map=19/" + thisLocation.latitude + "/" + thisLocation.longitude
+                locLocationLink.target = "blank"
+                locLocationLink.innerHTML = "View on map"
+
+            }
+        })
+    }
+}
+
+index = new BlueWeatherIndex()