added beautify extension and formated all files

.jsbeautifyrc

+{
+    "indent_size": 4,
+    "indent_char": " ",
+    "indent_level": 0,
+    "end-with-newline": true,
+    "indent_with_tabs": false,
+    "preserve_newlines": true,
+    "max_preserve_newlines": 10,
+    "jslint_happy": false,
+    "space_after_anon_function": false,
+    "brace_style": "collapse,preserve-inline",
+    "keep_array_indentation": false,
+    "keep_function_indentation": false,
+    "space_before_conditional": true,
+    "break_chained_methods": false,
+    "eval_code": false,
+    "unescape_strings": false,
+    "wrap_line_length": 0,
+    "css": {
+        "selector_separator_newline": false
+    }
+}
\ No newline at end of file

public/js/connectToAPI.js

@@ -51,7 +51,7 @@ async function fetchshadowDataJSON() {
     var bottomLat = coordinatesBB[1]
     var leftLng = coordinatesBB[0]
     var rightLng = coordinatesBB[2]
-    var topLat = coordinatesBB[3]//
+    var topLat = coordinatesBB[3] //
     var day = "1";
     const response = await fetch(url2 + day, {
         method: "POST",
@@ -80,9 +80,9 @@ async function fetchDataJSON() {
     var bottomLat = coordinatesBB[1]
     var leftLng = coordinatesBB[0]
     var rightLng = coordinatesBB[2]
-    var topLat = coordinatesBB[3]//
+    var topLat = coordinatesBB[3] //
 
-const response = await fetch(url, {
+    const response = await fetch(url, {
         method: "POST",
         body: JSON.stringify({
             "boundingBox": {
@@ -121,7 +121,7 @@ const response = await fetch(url, {
 
 document.getElementById("loader").style.visibility = "hidden"
 
-async function getLocalShadowdata(){
+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
@@ -129,29 +129,29 @@ async function getLocalShadowdata(){
     console.log(data)
     // shadowData=data;
     return data;
-  }
+}
 
 function processData() {
     console.log(coordinatesBB)
     console.log("Waiting for data....")
 
-    timeout(25000, fetchshadowDataJSON()).then((response)=>{        
+    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 = 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)=>{        
+    timeout(10000, fetchPvPotentialJSON()).then((response) => {
         console.log(response)
     }).catch((error) => {
         console.log(error)
     })
 
 
-    timeout(10000,  fetchDataJSON()).then((response)=>{        
+    timeout(10000, fetchDataJSON()).then((response) => {
         calculateData(response);
     }).catch((error) => {
         console.log(error)
@@ -169,7 +169,7 @@ function processData() {
 
 
 
-function calculateData(data){
+function calculateData(data) {
     console.log(data);
     document.getElementById("cesiumContainer").style.opacity = "1";
     document.getElementById("loader").style.visibility = "hidden"
@@ -299,7 +299,7 @@ function calculateData(data){
     availableAttributes()
 
     //color buildings with heating demand
-    document.getElementById("checkbox2").addEventListener("change", function () {
+    document.getElementById("checkbox2").addEventListener("change", function() {
         if (this.checked) {
             tileContent.forEach(t => {
                 let tileID = t.getProperty("gml_parent_id")
@@ -318,7 +318,7 @@ function calculateData(data){
     })
 
     //color surfaces with uValue
-    document.getElementById("checkbox1").addEventListener("change", function () {
+    document.getElementById("checkbox1").addEventListener("change", function() {
         if (this.checked) {
             tileContent.forEach(t => {
                 let tileID = t.getProperty("gml_id")
@@ -377,13 +377,13 @@ var modal = document.getElementById("myModal");
 var span = document.getElementsByClassName("close")[0];
 
 //close the modal
-span.onclick = function () {
+span.onclick = function() {
     modal.style.display = "none";
     deleteTilesetButtons()
 }
 
 // modal closes, when the user clicks anywhere outside of the modal
-window.onclick = function (event) {
+window.onclick = function(event) {
     if (event.target == modal) {
         modal.style.display = "none";
         deleteTilesetButtons()
@@ -410,12 +410,12 @@ function timeout(ms, promise) {
 
 
 //fetching the tileset and handling the connection
-async function fetchTileset(){   
-    timeout(1000, fetch(tilesetURL)).then((response)=>{        
+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
+    }).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" } );  
+        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
     })
@@ -446,8 +446,8 @@ 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 loadAndZoomToTileset(url){
-    tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+function loadAndZoomToTileset(url) {
+    tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
         url: url
     }));
 
@@ -469,7 +469,7 @@ function useContent(content) {
 
         document.getElementById("myList").appendChild(element);
 
-        element.onclick = function () {
+        element.onclick = function() {
             tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                 url: cont.href
             }));
@@ -496,7 +496,7 @@ function deleteTilesetButtons() {
     var len = x.length
 
     //checking if there are even tileset to delete
-    if(x.length>0){
+    if (x.length > 0) {
         parentNode = x[0].parentNode;
         for (var i = 0; i < len; i++) {
             parentNode.removeChild(x[0]);

public/js/globe.js

@@ -31,11 +31,11 @@ nameOverlay.style.padding = "4px";
 nameOverlay.style.backgroundColor = "white";
 
 
-var chosenDate = new Cesium.GregorianDate(2021,12,2,11); //the chosen Date from the Timeline
+var chosenDate = new Cesium.GregorianDate(2021, 12, 2, 11); //the chosen Date from the Timeline
 
 //getting clicked Date from the timeline element
 viewer.timeline.container.onmouseup = (e) => {
-    var julianDate=viewer.clock.currentTime;    
+    var julianDate = viewer.clock.currentTime;
     Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
     //console.log(chosenDate);
 }
@@ -69,7 +69,7 @@ var radio = document.getElementById('radio-group');
 var gmlID;
 
 
-radio.addEventListener('click', function () {
+radio.addEventListener('click', function() {
     //hide chart for individual buildings
     singleChart.style.visibility = 'hidden';
 
@@ -125,7 +125,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
             }
 
             var name = pickedFeature.getProperty("gml_id");
-
+            var shadowhourvaluepercent = 0;
             nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
             // Highlight the feature if it's not already selected.
             selectedFeatures.forEach(s => {
@@ -139,11 +139,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
             if (pickedselect) {
                 tileContent.forEach(t => {
                     if (t === pickedFeature) {
-                    if(t.getProperty("feature_type")==="RoofSurface"){
+                        if (t.getProperty("feature_type") === "RoofSurface") {
                             highlightedFeatures.push(new featurevar(t, t.color));
                             t.color = Cesium.Color.GREEN;
 
-                    }else{
+                        } else {
                             highlightedFeatures.push(new featurevar(t, t.color));
                             t.color = Cesium.Color.YELLOW;
                         }
@@ -155,7 +155,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
         }
 
         //Building View
-    else if(document.getElementById("building").checked){
+        else if (document.getElementById("building").checked) {
             // A feature was picked, so show it's overlay content
             nameOverlay.style.display = "block";
             nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
@@ -183,11 +183,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
         }
 
         //Roof View
-    else if(document.getElementById("roof").checked){
+        else if (document.getElementById("roof").checked) {
             console.log("clicked when in roof view and on hover");
         }
 
-},
+    },
     Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
 
@@ -199,7 +199,7 @@ var pickHeatedVolume
 var pickTotalSurfaceArea = 0
 var pickRoofType
 var pickUValue
-var shadowHourValue=0;
+var shadowHourValue = 0;
 
 
 //Color a feature on selection and show metadata in the InfoBox
@@ -286,15 +286,15 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                 //highlight newly selected feature
                 tileContent.forEach(t => {
                     if (t === pickedFeature) {
-                    console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
+                        console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
 
                         t.color = Cesium.Color.LIME;
 
                         //color surfaces depending on their shadow value
                         for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
-                        if(key === t.getProperty("gml_id")){ //checking if the ids of the current surface match the id in the shadowdata array
+                            if (key === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
                                 //console.log("hour:",chosenDate.hour);
-                            shadowHourValue = value[chosenDate.hour-1] //getting the current chosen hour from the timeline
+                                shadowHourValue = value[chosenDate.hour - 1] //getting the current chosen hour from the timeline
                                 //console.log("shadowHourValue",shadowHourValue);
 
                                 t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
@@ -317,7 +317,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                 });
             }
 
-        var shadowhourvaluepercent =  100-(shadowHourValue*100)
+            var shadowhourvaluepercent = 100 - (shadowHourValue * 100)
             //set feature infobox description (surface view)
             var featureName = pickedFeature.getProperty("name");
             selectedEntity.name = featureName;
@@ -338,7 +338,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
         }
 
         //Building View
-    else if(document.getElementById("building").checked){
+        else if (document.getElementById("building").checked) {
             resetRoofColors();
             //save the selected feature's original color
             if (pickedhigh) {
@@ -393,16 +393,16 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
         //Roof View
         //BUG: shows random attributes ui element ??
-    else if(document.getElementById("roof").checked){
+        else if (document.getElementById("roof").checked) {
             console.log("clicked when in roof view and on click");
 
             //looping threw all surfaces
             tileContent.forEach(t => {
-            if(t.getProperty("description").includes("Roof")){  //HACK: checking if the are a roof surface (should come from feature_type)            
+                if (t.getProperty("description").includes("Roof")) { //HACK: checking if the are a roof surface (should come from feature_type)            
                     for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array 
-                    if(key === t.getProperty("gml_id")){    //checking the id
-                        console.log(value); 
-                        shadowHourValue = value[chosenDate.hour-1]; //getting the current chosen hour from the timeline                 
+                        if (key === t.getProperty("gml_id")) { //checking the id
+                            //console.log(value); 
+                            shadowHourValue = value[chosenDate.hour - 1]; //getting the current chosen hour from the timeline                 
                             t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface                        
                         }
                     }
@@ -412,7 +412,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
             });
         }
 
-},
+    },
     Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
 
@@ -483,11 +483,11 @@ function fillTableProperties(gID, sID) {
 }
 
 
-function resetRoofColors(){
+function resetRoofColors() {
     tileContent.forEach(t => {
-        if(t.getProperty("description").includes("Roof")){           
+        if (t.getProperty("description").includes("Roof")) {
             for (const [key, value] of Object.entries(shadowdata)) {
-                if(key === t.getProperty("gml_id")){                 
+                if (key === t.getProperty("gml_id")) {
                     t.color = Cesium.Color.WHITE;
                 }
             }

public/js/shadowPalette.js

 //Shadow palette for coloring the roofs
 
 //color pallet      white->black
-var colorPalette = ['#ffffff','#f0f0f0','#d9d9d9','#bdbdbd','#969696','#737373','#525252','#252525'];
+var colorPalette = ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'];
 const shadowPalette = colorPalette.reverse();
 
 //returns the responding color from the shadowPalette, depending on the inputShadowValue(0 to 1 in float)
-function getShadowPalette(inputShadowValue){     
+function getShadowPalette(inputShadowValue) {
     //checking for the float values
-    var index = Math.ceil((shadowPalette.length-1)*inputShadowValue);
+    var index = Math.ceil((shadowPalette.length - 1) * inputShadowValue);
     //console.log(inputShadowValue,"---",shadowPalette[index]);
     return shadowPalette[index];
 
 }
-

public/js/sidebar.js

@@ -4,7 +4,7 @@ var radio = document.getElementById('radio-group');
 var filterswitches = document.getElementById('filterswitches');
 
 //Show / hide chart
-chartButton.addEventListener('click', function () {
+chartButton.addEventListener('click', function() {
     //sets as default attribute building function
     myChartArea("bar", "Building Function", 1, "Building Type", "Frequency", coloR);
     addGlobalData(areaChart, buildingType, btFrequency, btFrequency.length)
@@ -24,7 +24,7 @@ chartButton.addEventListener('click', function () {
     }
 }, false);
 
-heatingdemand.addEventListener('click', function () {
+heatingdemand.addEventListener('click', function() {
     var x = document.getElementById('heat-demand-legend');
     if (!document.getElementById('checkbox2').checked) {
         x.style.visibility = 'hidden';
@@ -33,7 +33,7 @@ heatingdemand.addEventListener('click', function () {
     }
 }, false);
 
-radio.addEventListener('click', function () {
+radio.addEventListener('click', function() {
     if (document.getElementById("surface").checked) {
         document.getElementById("checkbox1").disabled = false;
         document.getElementById("checkbox2").disabled = true;
@@ -42,8 +42,7 @@ radio.addEventListener('click', function () {
             document.getElementById('heat-demand-legend').style.visibility = 'hidden';
             tileContent.forEach(t => t.color = new Cesium.Color(1, 1, 1, 1))
         }
-  }
-  else {
+    } else {
         document.getElementById("checkbox1").disabled = true;
         document.getElementById("checkbox2").disabled = false;
         if (document.getElementById("checkbox1").checked) {
@@ -53,7 +52,7 @@ radio.addEventListener('click', function () {
     }
 }, false);
 
-filterswitches.addEventListener('click', function () {
+filterswitches.addEventListener('click', function() {
     if (drawBox === false) {
         swal("CAN'T LOAD DATA!", "mark an area first!", "error");
         document.getElementById("checkbox2").disabled = true;
@@ -62,8 +61,7 @@ filterswitches.addEventListener('click', function () {
         if (document.getElementById("surface").checked) {
             document.getElementById("checkbox1").disabled = false;
             document.getElementById("checkbox2").disabled = true;
-    }
-    else {
+        } else {
             document.getElementById("checkbox1").disabled = true;
             document.getElementById("checkbox2").disabled = false;
         }
@@ -80,7 +78,7 @@ var dropdown = document.getElementsByClassName("dropdown-btn");
 var i;
 
 for (i = 0; i < dropdown.length; i++) {
-  dropdown[i].addEventListener("click", function () {
+    dropdown[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var dropdownContent = this.nextElementSibling;
         if (dropdownContent.style.display === "block") {

public/js/testingAPIValues.js

@@ -104,7 +104,7 @@ function test() {
     sortMap()
 
     //color buildings with heating demand
-    document.getElementById("checkbox2").addEventListener("change", function () {
+    document.getElementById("checkbox2").addEventListener("change", function() {
         if (this.checked) {
             tileContent.forEach(t => {
                 let tileID = t.getProperty("gml_parent_id")
@@ -124,7 +124,7 @@ function test() {
     })
 
     //color surfaces with uValue
-    document.getElementById("checkbox1").addEventListener("change", function () {
+    document.getElementById("checkbox1").addEventListener("change", function() {
         if (this.checked) {
             tileContent.forEach(t => {
                 let tileID = t.getProperty("gml_id")
@@ -143,4 +143,3 @@ function test() {
         }
     })
 }
-