hide scl checkboxes without data

parent 8ad4750f
...@@ -175,72 +175,72 @@ ...@@ -175,72 +175,72 @@
TCI TCI
</label> </label>
</div> </div>
<!-- <div class="form-check submenu"> <!-- <div class="form-check submenu" style="display:none" id="sclcheck-no-data">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
&nbspSCL No Data &nbspSCL No Data
</label> </label>
</div> --> </div> -->
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #de3d3d"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #de3d3d"></i>
&nbspSCL Saturated &nbspSCL Saturated
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #696767"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #696767"></i>
&nbspSCL Shadows &nbspSCL Shadows
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-cloud-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_3" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_3">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #98775b"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #98775b"></i>
&nbspSCL Cloud Shadows &nbspSCL Cloud Shadows
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-vegetation">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #44ba5d"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #44ba5d"></i>
&nbspSCL Vegetation &nbspSCL Vegetation
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-not-vegetated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_5" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_5">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #fff98b"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #fff98b"></i>
&nbspSCL Not-Vegetated &nbspSCL Not-Vegetated
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-water">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #659acc"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #659acc"></i>
&nbspSCL Water &nbspSCL Water
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-unclassified">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ababab"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #ababab"></i>
&nbspSCL Unclassified &nbspSCL Unclassified
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-clouds">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #dddddd"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #dddddd"></i>
&nbspSCL Clouds &nbspSCL Clouds
</label> </label>
</div> </div>
<div class="form-check submenu"> <div class="form-check submenu" style="display:none" id="sclcheck-snow">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9">
<label class="form-check-label" for="sclcheck"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ff8afa"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #ff8afa"></i>
&nbspSCL Snow &nbspSCL Snow
</label> </label>
......
...@@ -363,6 +363,17 @@ ...@@ -363,6 +363,17 @@
//} //}
}; };
var showSCLcheckboxes = function(datasets) {
if (!datasets || datasets.length < 1) {
return;
}
datasets.forEach(function(data) {
let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-');
$(checkbox_id).css("display",'');
});
}
var label; var label;
// Recibimos el JSON con los datos desde el View // Recibimos el JSON con los datos desde el View
{% autoescape off %} {% autoescape off %}
...@@ -389,7 +400,8 @@ ...@@ -389,7 +400,8 @@
onClick: newLegendClickHandler, onClick: newLegendClickHandler,
} }
}; };
console.log(config);
showSCLcheckboxes(config.data.datasets);
{% endautoescape %} {% endautoescape %}
</script> </script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment