added js for for filling the locations list

This commit is contained in:
Dorian Zedler 2019-07-22 21:33:02 +02:00
parent d392cfa395
commit 60d6bba12e
3 changed files with 81 additions and 4 deletions

View file

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

View file

@ -8,6 +8,36 @@ class BlueWeather {
this.log("init done", 2) 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) { getLocationData(locId, range = {from:"", to:""}, maxVals = 0, async, processingFunction, errorFunction) {
this.xhttp.abort() this.xhttp.abort()
var thisObject = this var thisObject = this

View file

@ -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()