From f793300b1400f8322aa75301ab606c0a344fa8c3 Mon Sep 17 00:00:00 2001 From: Luis Aleixo Date: Wed, 22 Jun 2022 14:59:49 +0200 Subject: [PATCH] Added UI for sensors selection and handled UI navigations --- caimira/apps/calculator/model_generator.py | 4 + caimira/apps/calculator/static/js/form.js | 76 +++++++++++++++++++ .../templates/base/calculator.form.html.j2 | 2 - caimira/apps/templates/base/layout.html.j2 | 1 + .../templates/cern/calculator.form.html.j2 | 23 ++++++ 5 files changed, 104 insertions(+), 2 deletions(-) diff --git a/caimira/apps/calculator/model_generator.py b/caimira/apps/calculator/model_generator.py index 254ae02c..e86bfa53 100644 --- a/caimira/apps/calculator/model_generator.py +++ b/caimira/apps/calculator/model_generator.py @@ -31,6 +31,7 @@ class FormData: activity_type: str air_changes: float air_supply: float + arve_sensors_option: bool ceiling_height: float exposed_coffee_break_option: str exposed_coffee_duration: int @@ -77,6 +78,7 @@ class FormData: window_width: float windows_number: int window_opening_regime: str + sensor_in_use: str short_range_option: str short_range_interactions: list @@ -86,6 +88,7 @@ class FormData: 'activity_type': 'office', 'air_changes': 0., 'air_supply': 0., + 'arve_sensors_option': False, 'calculator_version': _NO_DEFAULT, 'ceiling_height': 0., 'exposed_coffee_break_option': 'coffee_break_0', @@ -132,6 +135,7 @@ class FormData: 'windows_frequency': 60., 'windows_number': 0, 'window_opening_regime': 'windows_open_permanently', + 'sensor_in_use': _NO_DEFAULT, 'short_range_option': 'short_range_no', 'short_range_interactions': '[]', } diff --git a/caimira/apps/calculator/static/js/form.js b/caimira/apps/calculator/static/js/form.js index 655ff5ac..b7fa2eed 100644 --- a/caimira/apps/calculator/static/js/form.js +++ b/caimira/apps/calculator/static/js/form.js @@ -271,6 +271,72 @@ function on_wearing_mask_change() { }) } +function populate_temp_hum_values(data, index) { + $("#sensor_temperature").text(data[index].Details.T + '°C'); + $("#sensor_humidity").text(data[index].Details.RH + '%'); + $("[name='inside_temp']").val(data[index].Details.T + 273.15); + $("[name='humidity']").val(data[index].Details.RH/100); +}; + +function clear_sensors_data() { + $("#sensor_temperature").text(); + $("#sensor_humidity").text(); + $("[name='inside_temp']").val(); + $("[name='humidity']").val(); +} + +//Data from ARVE sensors +var DATA_FROM_SENSORS; +function show_sensors_data(url) { + + const HOTEL_ID = "CERN" + const FLOOR_ID = "1" + + if ($('#sensors > option').length == 0) { + $.ajax({ + url: `${$('#url_prefix').data().calculator_prefix}/api/arve/v1/${HOTEL_ID}/${FLOOR_ID}`, + type: 'GET', + success: function (result) { + DATA_FROM_SENSORS = result; + result.map(room => { + $("#sensors").append(``); + }); + populate_temp_hum_values(result, 0); + if (url.searchParams.has('sensor_in_use')) { + $("#sensors").val(url.searchParams.get('sensor_in_use')); + populate_temp_hum_values(result, result.findIndex(function(sensor) { + return sensor.RoomId == url.searchParams.get('sensor_in_use'); + })); + } + }, + error: function() { + alert('One error occured.'); + }, + }); + } +}; + +$("#sensors").change(function (el) { + sensor_id = DATA_FROM_SENSORS.findIndex(function(sensor) { + return sensor.RoomId == el.target.value + }); + populate_temp_hum_values(DATA_FROM_SENSORS, sensor_id); +}); + +function on_use_sensors_data_change(url) { + sensor_data = $('input[type=radio][name=arve_sensors_option]') + sensor_data.each(function (index) { + if (this.checked) { + getChildElement($(this)).show(); + show_sensors_data(url); + } + else { + getChildElement($(this)).hide(); + clear_sensors_data(); + } + }) +} + function on_short_range_option_change() { short_range = $('input[type=radio][name=short_range_option]') short_range.each(function (index){ @@ -706,6 +772,10 @@ $(document).ready(function () { $("#sr_interactions").text(index - 1); } + else if (name == 'sensor_in_use') { + // TODO - Validate if sensor exists + } + //Ignore 0 (default) values from server side else if (!(elemObj.classList.contains("non_zero") || elemObj.classList.contains("remove_zero")) || (value != "0.0" && value != "0")) { elemObj.value = value; @@ -743,6 +813,12 @@ $(document).ready(function () { //Check all radio buttons previously selected $("input[type=radio]:checked").each(function() {require_fields(this)}); + // When the arve_sensors_option changes we want to make its respective + // children show/hide. + $("input[type=radio][name=arve_sensors_option]").change(on_use_sensors_data_change); + // Call the function now to handle forward/back button presses in the browser. + on_use_sensors_data_change(url); + // When the ventilation_type changes we want to make its respective // children show/hide. $("input[type=radio][name=ventilation_type]").change(on_ventilation_type_change); diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2 index 37699a44..07561755 100644 --- a/caimira/apps/templates/base/calculator.form.html.j2 +++ b/caimira/apps/templates/base/calculator.form.html.j2 @@ -85,8 +85,6 @@ {% endblock room_data %} -
-
diff --git a/caimira/apps/templates/base/layout.html.j2 b/caimira/apps/templates/base/layout.html.j2 index 6e61f45b..e7ac6dea 100644 --- a/caimira/apps/templates/base/layout.html.j2 +++ b/caimira/apps/templates/base/layout.html.j2 @@ -5,6 +5,7 @@ + {% block title %} diff --git a/caimira/apps/templates/cern/calculator.form.html.j2 b/caimira/apps/templates/cern/calculator.form.html.j2 index 79a879d9..ffc67bd2 100644 --- a/caimira/apps/templates/cern/calculator.form.html.j2 +++ b/caimira/apps/templates/cern/calculator.form.html.j2 @@ -4,4 +4,27 @@ <div data-tooltip="The area you wish to study (choose one of the 2 options). Use GIS Portal or measure. Also indicate if a central (radiator-type) heating system is in use."> <span class="tooltip_text">?</span> </div> + + <div class="split"> + <div>Use data from ARVE sensors:</div> + <div> + <input class="ml-2" type="radio" id="arve_sensor_no" name="arve_sensors_option" value=0 checked="checked"> + <label for="arve_sensor_no">No</label> + <input class="ml-2" type="radio" id="arve_sensor_yes" name="arve_sensors_option" value=1 data-enables="#DIVsensors_data"> + <label for="arve_sensor_yes">Yes</label> + </div> + </div> + <div id="DIVsensors_data" style="display:none"> + <div class="form-group row mb-0"> + <div class="col-sm-4"><label class="col-form-label">Sensor:</label></div> + <div class="col-sm-6"> + <select id="sensors" name="sensor_in_use" class="form-control"> + </select> + </div> + </div> + <div> + <div><label>Temperature: </label><span class="ml-3 font-weight-bold" id="sensor_temperature"></span></div> + <div><label>Relative Humidity: </label><span class="ml-3 font-weight-bold" id="sensor_humidity"></span></div> + </div> + </div> {% endblock room_data %} \ No newline at end of file