check for hash on pageload

public/js/connectToAPI.js

 var coordinatesBB = []
-var url = "https://simstadt-api.iaf-ex.hft-stuttgart.de:8080/workflow/execute"
+//var url = "https://simstadt-api.iaf-ex.hft-stuttgart.de:8080/workflow/execute" //old link
+var url = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/execute" // URL to API
+var url2 = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/timedShadowValueByDay/"
+var pvURL = "http://vm24.fkc.hft-stuttgart.de:8082/workflow/readPVPotential"
+
+/*TODO#1:   -get current data from the api and create local test data (apiData foler)
+            -add connection handeling  (error messages when there isnt a connection and then using the local test data)
+*/
+var localShadowData = "/3dclient4simstadtapi/public/test/APIdata/shadowData.json"
 
 var buildingFunctionSort
 var constructionYearSortPick
@@ -8,6 +16,65 @@ var heatedVolumeSortPick
 var totalSurfaceAreaSortPick
 var roofTypeSortPick
 var uValueSortPick
+var shadowdata
+
+
+async function fetchPvPotentialJSON() {    
+    var bottomLat = coordinatesBB[1]
+    var leftLng = coordinatesBB[0]
+    var rightLng = coordinatesBB[2]
+    var topLat = coordinatesBB[3]
+
+    const response = await fetch(pvURL,  {
+        method: "POST",
+        body: JSON.stringify({
+            "boundingBox": {
+                "bottomLat": bottomLat, //48.779004965,
+                "leftLng": leftLng,     //9.1686843081,
+                "lodType": "LOD2",
+                "rightLng": rightLng,   //9.175336684,
+                "topLat": topLat        //48.7822869656
+              },
+              "cityGMLRef": "campusLOD2"
+        }),
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Basic YWRtaW46YWRtaW4xMjM="
+        }
+    })
+
+    const data = await response.json();
+    return data
+}
+
+async function fetchshadowDataJSON() {
+    var bottomLat = coordinatesBB[1]
+    var leftLng = coordinatesBB[0]
+    var rightLng = coordinatesBB[2]
+    var topLat = coordinatesBB[3]//
+    var day = "1";
+    const response = await fetch(url2 + day,  {
+        method: "POST",
+        body: JSON.stringify({
+            "boundingBox": {
+                "bottomLat": bottomLat, //48.779004965,
+                "leftLng": leftLng,     //9.1686843081,
+                "lodType": "LOD2",
+                "rightLng": rightLng,   //9.175336684,
+                "topLat": topLat        //48.7822869656
+            },
+            "cityGMLRef": "campusLOD2"
+        }),
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Basic YWRtaW46YWRtaW4xMjM="
+        }
+    })
+
+    const data = await response.json();
+    return data
+}
+
 
 async function fetchDataJSON() {
     var bottomLat = coordinatesBB[1]
@@ -15,7 +82,7 @@ async function fetchDataJSON() {
     var rightLng = coordinatesBB[2]
     var topLat = coordinatesBB[3]//
 
-    const response = await fetch(url, {
+const response = await fetch(url, {
         method: "POST",
         body: JSON.stringify({
             "boundingBox": {
@@ -25,7 +92,7 @@ async function fetchDataJSON() {
                 "rightLng": rightLng,   //9.175336684,
                 "topLat": topLat        //48.7822869656
             },
- //           "cityGMLRef": "campus",
+            "cityGMLRef": "campusLOD2",
             "interestedAttributes": [
                 "uValue",
                 "volume",
@@ -51,13 +118,58 @@ async function fetchDataJSON() {
     const data = await response.json()
     return data
 }
+
 document.getElementById("loader").style.visibility = "hidden"
 
+async function getLocalShadowdata(){
+    // gets the response from the api and put it inside a constant
+    const response = await fetch(localShadowData);
+    //the response have to be converted to json type file, so it can be used
+     const data = await response.json();
+    console.log(data)
+   // shadowData=data;
+    return data;
+  }
+
 function processData() {
     console.log(coordinatesBB)
     console.log("Waiting for data....")
 
-    fetchDataJSON().then(data => {
+    timeout(25000, fetchshadowDataJSON()).then((response)=>{        
+        console.log(response)  
+        shadowdata = response  ;                     
+        }).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user
+     //  shadowdata=  getLocalShadowdata();
+        console.log(shadowdata);
+        //loadLocalAPIshadowData here...
+    }) 
+
+    timeout(10000,  fetchPvPotentialJSON()).then((response)=>{        
+        console.log(response)                
+     }).catch((error) => {
+        console.log(error)
+    }) 
+    
+    
+    timeout(10000,  fetchDataJSON()).then((response)=>{        
+        calculateData(response);                      
+     }).catch((error) => {
+        console.log(error)
+        /*
+        fetch("/3dclient4simstadtapi/public/test/APIdata/buildingInformation.json")
+        .then(response => response.text())
+        .then(text => calculateData( JSON.parse(text)))
+        */
+    })
+
+          
+
+   
+}
+
+
+
+function calculateData(data){
     console.log(data);
     document.getElementById("cesiumContainer").style.opacity = "1";
     document.getElementById("loader").style.visibility = "hidden"
@@ -223,10 +335,6 @@ function processData() {
             console.log("not colored")
         }
     })
-
-    }).catch((err) => {
-        console.log(err)
-    })
 }
 
 function showAllUVales() {
@@ -282,31 +390,109 @@ window.onclick = function (event) {
     }
 }
 
-var tileData = null
-var tileset = null
+//-------------------------------------------------------------------------------
+var tileData = null;
+var tileset = null;
+//var tilesetURL = 'http://vm24.fkc.hft-stuttgart.de:8081/CampusLOD2Old/tileset.json';
+var tilesetURL = 'http://vm24.fkc.hft-stuttgart.de:8081/CampusLOD2/tileset.json';
+var tilesetURLb1 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau1u3.json';
+var tilesetURLb2 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau2.json';
+var tilesetURLb4 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau4.json';
+var tilesetURLb5 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau5.json';
+var tilesetURLb6 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau6.json';
+var tilesetURLb7 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau7.json';
+var tilesetURLb8 = 'http://vm24.fkc.hft-stuttgart.de:8081/Baue/bau8.json';
+
+var localTestTileset = 'test/gmlTileset_v1.json';
+var localB1 = 'test/bau1u3.json';
+var localB2 = 'test/bau2.json';
+var localB4 = 'test/bau4.json';
+var localB5 = 'test/bau5.json';
+var localB6 = 'test/bau6.json';
+var localB7 = 'test/bau7.json';
+var localB8 = 'test/bau8.json';
+
+
+function timeout(ms, promise) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        reject(new Error("timeout"))
+      }, ms)
+      promise.then(resolve, reject)
+    })
+}
+
+function pageLoad() {
+    if (window.location.hash === "#load-bau1") {
+       loadAndZoomToTileset(tilesetURLb1);
+    }if (window.location.hash === "#load-bau2") {
+        loadAndZoomToTileset(tilesetURLb2);
+     }if (window.location.hash === "#load-bau4") {
+        loadAndZoomToTileset(tilesetURLb4);
+     }if (window.location.hash === "#load-bau5") {
+        loadAndZoomToTileset(tilesetURLb5);
+     }if (window.location.hash === "#load-bau6") {
+        loadAndZoomToTileset(tilesetURLb6);
+     }if (window.location.hash === "#load-bau7") {
+        loadAndZoomToTileset(tilesetURLb7);
+     }if (window.location.hash === "#load-bau8") {
+        loadAndZoomToTileset(tilesetURLb8);
+     }
+}
+
+//fetching the tileset and handling the connection
+async function fetchTileset(){   
+    timeout(1000, fetch(tilesetURL)).then((response)=>{        
+        loadAndZoomToTileset(tilesetURL);                          
+     }).catch((error)=>{ //catching the error(no connection)/ timeout and displaying an alert for the user
+        //var errorString = error["stack"]+"\n"+error["message"]; // formatting the error array
+        swal({text:"Could not connect to Server. Using now: local data",icon:"info" } );  
+        console.log("Using local test data");
+        loadAndZoomToTileset(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded
+    }) 
+}
+
+
+
+/*
+    NOTE #1:    -load the models but the are in the too high in the "air"
+                -building view doesn´t work because all buildings are grouped together
+                -surfaces are also broken
 
-fetch('https://boxofcare.de/3DContainerTile/collections/')
-    .then(response => response.json())
-    .then(data => {
-        tileData = data
-    });
+            -->this fixme is the problem of the backendteam !
 
+    ? maybe add old menu back and the option to also load the new ones 
+    
+*/
+
+
+//loads tileset after submit button is clicked
 function loadTileset() {    
-    viewer.scene.primitives.remove(tileset)
-    tileContent = []
+    viewer.scene.primitives.remove(tileset);
+    tileContent = [];
     modal.style.display = "block";
-    console.log(tileData)
     
-    var userurl = document.getElementById("3Durl").value;
+    fetchTileset();
     
-    tileData.collections.forEach(c => {
-        if (userurl === 'hftcampus' && c.id === "HftCampus") useContent(c.content)
-        if (userurl === 'paderborn' && c.id === "Paderborn") useContent(c.content)
-    })
+    //var userurl = document.getElementById("3Durl").value;   //returns the chosen area from the dropdown    
+}
+//loads the tileset from the url into the cesium viewer and zooms to it
+
+function loadAndZoomToTileset(url){
+    tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+        
+        url: url
+    }));
+    
+
+    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
+            modal.style.display = "none";
+            saveTilesetContent(tileset)
+            deleteTilesetButtons()
 }
 
-function useContent(content) {
 
+function useContent(content) {
     content.forEach(cont => {
         var element = document.createElement("input")
         element.type = "button"
@@ -342,8 +528,12 @@ function deleteTilesetButtons() {
     var x = document.getElementsByName("individualTileset")
     var len = x.length
     
+    //checking if there are even tileset to delete
+    if(x.length>0){
         parentNode = x[0].parentNode;
         for (var i = 0; i < len; i++) {
             parentNode.removeChild(x[0]);
         }
+    }
+   
 }

public/main.html

@@ -36,6 +36,7 @@
 	</style>
 	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<!-- TODO: maybe add this to a external js file -->
 	<script type="text/javascript">
 		var arrLang = {
 			'en': {
@@ -124,7 +125,7 @@
 	</script>
 </head>
 
-<body>
+<body onload="pageLoad()">
 	<a href="https://www.hft-stuttgart.de/" target="_blank">
 		<div class="credit"></div>
 	</a>
@@ -211,7 +212,7 @@
 	</div>
 
 	<div class="hilfe">
-        <p> <a href="/pdf/Benutzerhandbuch.pdf" target="_blank"><button class="lang" id="Handbuch"  key="userguide">User Guide</button></a></p>
+        <p> <a href="/3dclient4simstadtapi/public/pdf/Benutzerhandbuch.pdf" target="_blank"><button class="lang" id="Handbuch"  key="userguide">User Guide</button></a></p>
     </div>
 
 	<!--Sidebar-->
@@ -241,9 +242,15 @@
 						<input id="building" type="radio" name="credit-card" value="building" checked>
 						<div class="lang" key="buildingview">Building-View</div>
 						<label class="drinkcard-cc building" for="building"></label>
+						
 						<input id="surface" type="radio" name="credit-card" value="surface">
 						<div class="lang" key="surfaceview">Surface-View</div>
 						<label class="drinkcard-cc surface" for="surface"></label>
+
+						<input id="roof" type="radio" name="credit-card" value="roof">
+						<div class="lang" key="roofview">Roof-View</div>
+						<label class="drinkcard-cc surface" for="roof"></label>
+
 					</div>
 				</div>
 				<!--Chartbutton-->
@@ -336,6 +343,9 @@
 		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
 			integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
 		</script>
+
+		<script type="text/javascript" src="js/shadowPalette.js"></script>
+
 		<script type="text/javascript" src="js/sidebar.js"></script>
 		<script type="text/javascript" src="js/globe.js"></script>
 		<script type="text/javascript" src="js/areaCharts.js"></script>