diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index 3ef80051138f03d08186ddd95b77d724b7f89e79..4022780eeb4631cbb6ae4122c860d32f5a68b66f 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js @@ -1,4 +1,5 @@ var regionChooser = (function(){ + //TODO: Somehow split in classes. This file is getting too big and mixed var publicScope = {}; var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1; var dataPanel = $('#dataPanel'); @@ -162,7 +163,7 @@ var regionChooser = (function(){ intersections.addFeature(intersection); var link = '<li>' // TODO: If possible, highlight the corresponding polygon when hovering above a name. - link += '<input type="checkbox" id="citygml_' + feature.getId() + '" class="select_citygml"><label for="citygml_' + feature.getId() + '">' + feature['name'] + '</label>'; + link += '<input type="checkbox" id="citygml_' + feature.getId() + '" class="select_citygml" onclick="regionChooser.canDownload();"><label for="citygml_' + feature.getId() + '">' + feature['name'] + '</label>'; link += " (" + citygml_percentage + "%"; if (sketch_percentage == 100) { @@ -171,6 +172,17 @@ var regionChooser = (function(){ dataPanel.append(link + ")\n"); } + publicScope.canDownload = function(){ + var count = 0; + console.log("..."); + document.querySelectorAll("input.select_citygml").forEach(c => { + if (c.checked){ + count += 1; + } + }); + document.getElementById("download").disabled = (count == 0); + } + function findIntersection(feature, polygon) { try { return turf.intersect(polygon, feature["geoJSON"]); @@ -211,8 +223,6 @@ var regionChooser = (function(){ } publicScope.downloadRegionFromCityGMLs = function(checkbox_ids) { - // TODO: Disable all links - // TODO: DRY var features = checkbox_ids.map(checkbox_id => { var i = Number(checkbox_id.replace("citygml_", "")); return kml_source.getFeatureById(i); @@ -238,6 +248,7 @@ var regionChooser = (function(){ var time = end - start; console.log('Download Execution time: ' + (time / 1000).toFixed(3) + 's'); setTimeout(function() { + document.getElementById("download").disabled = false; document.documentElement.className = ''; // Stop waiting }, 100); } else { @@ -267,8 +278,7 @@ var regionChooser = (function(){ dataPanel.append(wgs84_coords + "<br/>\n"); } dataPanel.append("<h3 class='clean'>Area : " + (area / 10000).toFixed(1) + " ha\n"); - //TODO: Hide button if empty - dataPanel.append('<button type="button" onclick="regionChooser.downloadFromSelectedCityGMLs()" id="download" style="visibility:hidden">Download Region</button><br/>\n'); + dataPanel.append('<button type="button" onclick="regionChooser.downloadFromSelectedCityGMLs()" id="download" style="visibility:hidden" disabled>Download Region</button><br/>\n'); dataPanel.append('<a href="#" onclick="regionChooser.checkCityGMLS(true);">(Select All)</a>'); dataPanel.append('<a href="#" onclick="regionChooser.checkCityGMLS(false);">(Select None)</a>'); dataPanel.append('<br/>\n'); @@ -363,12 +373,14 @@ var regionChooser = (function(){ if (checkedBoxes.length === 0){ console.log("You should select at least one citygml, though."); } else{ + document.getElementById("download").disabled = true; publicScope.downloadRegionFromCityGMLs(checkedBoxes.map(c => c.id)); } } publicScope.checkCityGMLS = function(allOrNone) { document.querySelectorAll("input.select_citygml").forEach(c => c.checked = allOrNone); + publicScope.canDownload(); } publicScope.selectRepository = function() {