fixed TODO2: instant error instead of waiting

public/js/connectToAPI.js

@@ -2,6 +2,10 @@ var coordinatesBB = []
 //var url = "https://simstadt-api.iaf-ex.hft-stuttgart.de:8080/workflow/execute" //old link
 var url = "http://vm24.fkc.hft-stuttgart.de:8080/workflow/execute" // URL to API
 
+/*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 buildingFunctionSort
 var constructionYearSortPick
@@ -39,7 +43,7 @@ async function fetchDataJSON() {
                 "monthlyCooling",
                 "pvPotential",
                 "roofType",
-                "totalSurfaceArea"
+                "totalSurfaceArea"                
             ],
             "properies": {
                 "physicsUseScenario": false
@@ -55,9 +59,7 @@ async function fetchDataJSON() {
 }
 document.getElementById("loader").style.visibility = "hidden"
 
-/*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)
-*/
+
 function processData() {
     console.log(coordinatesBB)
     console.log("Waiting for data....")
@@ -295,18 +297,21 @@ var tilesetURL = 'http://vm24.fkc.hft-stuttgart.de:8081/CampusLOD2/CityModel/til
 var localTestTileset = '/3dclient4simstadtapi/public/test/tileset/gmlTileset_v1.json';
 
 
+const controller = new AbortController(); //used to abort the request when it takes too long
+const timeoutId = setTimeout(() => controller.abort(), 3000);    // 3 second timeout:
+
 //fetching the tileset and handling the connection
-// TODO#2: add a timemout when there isnt a connection (1sec) -> so the user doesnt have to wait 10sec for the failed fetch
-async function fetchTileset(){   
+async function fetchTileset(){  
 
-    fetch(tilesetURL).then((response)=>{        
+    fetch(tilesetURL,{signal:controller.signal}).then((response)=>{ //fetch request with the abort controller
         if(response.status >= 200 && response.status<=299){ //successful connection
             //const tilesetJSON =  response.json();   
-            loadAndZoomTime(tilesetURL);  
+            loadAndZoomToTileset(tilesetURL);  
             swal({text:"",timer:100}); //used to remove the waiting alert                            
         }else{            
             throw Error(response.statusText);   //throwing an error when a connection is not possible
         }
+        clearTimeout(timeoutId); //timeout the request
     }).then((jsonResponse)=>{
         console.log("Tileset"+jsonResponse);
     }).catch((error)=>{ //catching the error and displaying an alert for the user
@@ -314,13 +319,13 @@ async function fetchTileset(){
         swal("Could not connect to Server",errorString , "error"); 
 
         console.log("Using local test data");
-        loadAndZoomTime(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded
+        loadAndZoomToTileset(localTestTileset); //TODO#3: fix the link so the local tileset can be loaded
     })    
-    //swal({text:"Connecting to Server ... Please wait !",icon:"info" ,buttons: false}); //displays waiting alert
+
+    swal({text:"Connecting to Server ... Please wait !",icon:"info" ,buttons: false}); //displays waiting alert
 }
 
 
-//loads tileset after submit button is clicked
 
 /*
     NOTE #1:    -load the models but the are in the too high in the "air"
@@ -333,6 +338,8 @@ async function fetchTileset(){
     
 */
 
+
+//loads tileset after submit button is clicked
 function loadTileset() {    
     viewer.scene.primitives.remove(tileset);
     tileContent = [];
@@ -343,7 +350,7 @@ function loadTileset() {
     //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 loadAndZoomTime(url){
+function loadAndZoomToTileset(url){
     tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
         url: url
     }));