Added UI for sensors selection and handled UI navigations

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': '[]',
     }

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(`<option id=${room.RoomId} value=${room.RoomId}>Sensor ${room.RoomId}</option>`);
+        });
+        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);

caimira/apps/templates/base/calculator.form.html.j2

@@ -85,8 +85,6 @@
     </div>
     {% endblock room_data %}
     
-    <br>
-
     <div class="form-group row">
       <div class="col-sm-5">
         <input type="radio" id="room_data_volume" name="volume_type" value="room_volume_explicit" onclick="require_fields(this)" tabindex="-1" required>

caimira/apps/templates/base/layout.html.j2

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta id="url_prefix" data-calculator_prefix="{{ calculator_prefix }}">
 
   <title>
   {% block title %}

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 %}