WEB: addes the Time and day, weekday variables for Parallel and Grid

main
jaume-nualart 7 months ago
parent 894a155f88
commit 65d3804406
  1. 57
      web-html/dash.html
  2. 106
      web-html/js/dash.js

@ -15,7 +15,7 @@
<link href="./css/c3.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap-datepicker3.css">
<link rel="stylesheet" href="./css/bootstrap-icons.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="./css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/dash.css">
@ -52,7 +52,7 @@
<div id="templates">Manage board:&nbsp;&nbsp;
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#saveBoardModal"><i class="fa fa-upload"></i>Save Board</button>
&nbsp;&nbsp;
<button id="loadListBoardsButton" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#loadBoardModal"><i class="fa fa-folder-open-o"></i>Load Board</button>
<button id="loadListBoardsButton" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#loadBoardModal"><i class="fa fa-folder-open"></i>Load Board</button>
<span class="float-end">Templates:&nbsp;&nbsp;
<button id="button2" class="btn btn-outline-success"><i class="fa fa-map"></i> 33 %</button>
&nbsp;&nbsp;
@ -202,13 +202,27 @@
</select>
</div>
<!-- Day of the month (number) SELECT -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select day of the month (1 to 28):</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYDay" name="PYDay" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="1" selected>1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="grid-timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PYTime" disabled name="PYTime" type="text" class="timePicker span2">
<select id="PYTime" name="PYTime" required="required" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="PYTime" disabled name="PYTime" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -252,6 +266,21 @@
<input required placeholder="Required" id="PMYearMonth" name="PMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Select day of the week:</p>
<div id="SelectWeekday" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="PMWeekday">
<option value="1" selected>Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -259,7 +288,9 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
<select id="PMTime" name="PMTime" required="required" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -310,7 +341,9 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
<select id="PWTime" name="PWTime" required="required" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -461,7 +494,9 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GYTime" disabled name="GYTime" type="text" class="timePicker span2">
<select id="GYTime" name="GMTime" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="GYTime" name="GYTime" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -507,8 +542,10 @@
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GMTime" disabled name="GMTime" type="text" class="timePicker span2">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<select id="GMTime" name="GMTime" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="GMTime" name="GMTime" required value="12_00 AM" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -555,7 +592,9 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GWTime" disabled name="GWTime" type="text" class="timePicker span2">
<select id="GWTime" name="GWTime" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
<!-- <input id="GWTime" name="GWTime" type="text" class="timePicker span2"> -->
</div>
</div>
<!-- SUBMIT BUTTON -->

@ -126,6 +126,7 @@ var HTML_navBar = `
</div>
</div>
`;
var listHourrOptions = '<option value="00">00h</option><option value="01">1h</option><option value="02">2h</option><option value="03">3h</option><option value="04">4h</option><option value="05">5h</option><option value="06">6h</option><option value="07">7h</option><option value="08">8h</option><option value="09">9h</option><option value="10">10h</option><option value="11">11h</option><option value="12" selected="selected">12h</option><option value="13">13h</option><option value="14">14h</option><option value="15">15h</option><option value="16">16h</option><option value="17">17h</option><option value="18">18h</option><option value="19">19h</option><option value="20">20h</option><option value="21">21h</option><option value="22">22h</option><option value="23">23</option>';
document.getElementById("navbar").innerHTML = HTML_navBar;
@ -135,10 +136,13 @@ document.getElementById("PYYear").innerHTML = listYearOptions
document.getElementById("GYYear").innerHTML = listYearOptions
document.getElementById("HYYear").innerHTML = listYearOptions
// time range of data
document.getElementById("PYYear").innerHTML = listYearOptions;
document.getElementById("GYYear").innerHTML = listYearOptions;
document.getElementById("HYYear").innerHTML = listYearOptions;
// time range of hours
document.getElementById("GYTime").innerHTML = listHourrOptions;
document.getElementById("GMTime").innerHTML = listHourrOptions;
document.getElementById("GWTime").innerHTML = listHourrOptions;
document.getElementById("PYTime").innerHTML = listHourrOptions;
document.getElementById("PMTime").innerHTML = listHourrOptions;
document.getElementById("PWTime").innerHTML = listHourrOptions;
// Families:
document.getElementById("PYFamSensor").innerHTML = listFamiliesOptions;
@ -275,9 +279,10 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var family = document.getElementById("PWFamSensor").value;
var myTitle = document.getElementById("PWTitle").value;
var type = document.getElementById("PWParameter").value;
var hour = document.getElementById("PWTime").value;
// BUILDING API query
var apiUrl = "parallel/weekly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year+"&week="+week;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year, week);
var apiUrl = "parallel/weekly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year+"&week="+week+"&hour="+hour;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year, week, hour);
break;
//-------------------------------
@ -289,9 +294,11 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var family = document.getElementById("PMFamSensor").value;
var myTitle = document.getElementById("PMTitle").value;
var type = document.getElementById("PMParameter").value;
var hour = document.getElementById("PMTime").value;
var weekday = document.getElementById("PMWeekday").value;
// BUILDING API query
var apiUrl = "parallel/monthly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year+"&month="+month;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year, month)
var apiUrl = "parallel/monthly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year+"&month="+month+"&hour="+hour+"&weekday="+weekday;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year, month, hour, weekday)
break;
//-------------------------------
@ -300,9 +307,11 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var family = document.getElementById("PYFamSensor").value;
var myTitle = document.getElementById("PYTitle").value;
var type = document.getElementById("PYParameter").value;
var hour = document.getElementById("PYTime").value;
var day = document.getElementById("PYDay").value;
// BUILDING API query
var apiUrl = "parallel/yearly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year)
var apiUrl = "parallel/yearly?hus="+myHouseXname+"&family="+family+"&type="+type+"&year="+year+"&hour="+hour+"&day="+day;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, year, hour, day)
break;
}
}
@ -320,9 +329,10 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var year = inYear[2];;
var sensor = document.getElementById("GWSensor").value;
var type = document.getElementById("GWParameter").value;
var hour = document.getElementById("GWTime").value;
// BUILDING API query
var apiUrl = "grid/weekly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year+"&week="+week;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, inDate);
var apiUrl = "grid/weekly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year+"&week="+week+"&hour="+hour;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, inDate, hour);
break;
//-------------------------------
case "GM":
@ -332,9 +342,10 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var year = yearMonth.split("/")[1];
var sensor = document.getElementById("GMSensor").value;
var type = document.getElementById("GMParameter").value;
var hour = document.getElementById("GMTime").value;
// BUILDING API query
var apiUrl = "grid/monthly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year+"&month="+month;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, year, month);
var apiUrl = "grid/monthly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year+"&month="+month+"&hour="+hour;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, year, month, hour);
break;
//-------------------------------
@ -343,8 +354,9 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var year = document.getElementById("GYYear").value;
var sensor = document.getElementById("GYSensor").value;
var type = document.getElementById("GYParameter").value;
var apiUrl = "grid/yearly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, year);
var hour = document.getElementById("GYTime").value;
var apiUrl = "grid/yearly?hus="+myHouseXname+"&sensor="+sensor+"&type="+type+"&year="+year+"&hour="+hour;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, year, hour);
break;
}
@ -1714,21 +1726,36 @@ $('#SelectYearMonthWeek, #horizonSelectYearMonthWeek, #parallelSelectYearMonthWe
var firstOpen = true;
var time;
$('#timePicker, #grid-timePicker').datetimepicker({
useCurrent: false,
format: "hh:mm A"
}).on('dp.show', function() {
if(firstOpen) {
time = moment().startOf('day');
firstOpen = false;
} else {
time = "12:00 AM"
}
$(this).data('DateTimePicker').date(time);
});
// $('#timePicker, #grid-timePicker').datetimepicker({
// useCurrent: false,
// format: "hh"
// }).on('dp.show', function() {
// if(firstOpen) {
// time = moment().startOf('day');
// firstOpen = false;
// } else {
// time = "12:00 AM"
// }
// $(this).data('DateTimePicker').date(time);
// });
function generateHourOptions(selectId) {
// Get the select element
const select = document.getElementById(selectId);
// Generate the options dynamically using JavaScript
for (let hour = 0; hour <= 23; hour++) {
const option = document.createElement('option');
const value = hour.toString().padStart(2, '0'); // Add leading zero if needed
option.value = value;
option.text = `${hour}h`;
select.appendChild(option);
}
// Set the default value to "12"
select.value = "12";
}
////////////////////////////////////////////////////////////
// FORMS management:
@ -1958,16 +1985,19 @@ async function loadBoards(myJSON) {
case "GW":
var week = getValueByKeyFrrmUrl("week", apiurl);
// Trans for week and year to DD-MM-YYYY
var hour = getValueByKeyFrrmUrl("hour", apiurl);
var startingDate = getFormattedDateFromWeek(week, year);
//cl("startingDate: "+startingDate+" -formId - "+formId+" -apiurl: "+apiurl+" -myid: "+myid+" -myTitle: "+myTitle+" -semsor: "+sensor+" -type: "+type+" -week: "+week+" -year: "+year);
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, startingDate);
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, startingDate, hour);
break;
case "GM":
var month = getValueByKeyFrrmUrl("month", apiurl);
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year, month);
var hour = getValueByKeyFrrmUrl("hour", apiurl);
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year, month, hour);
break;
case "GY":
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year);;
var hour = getValueByKeyFrrmUrl("hour", apiurl);
makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year, hour);
break;
@ -2072,6 +2102,7 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
var type = myArgs[1];
var year = myArgs[2];
var week = myArgs[3];
var hour = myArgs[4];
break;
case "PM":
@ -2079,18 +2110,23 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
var type = myArgs[1];
var year = myArgs[2];
var month = myArgs[3];
var hour = myArgs[4];
var weekday = myArgs[5];
break;
case "PY":
var family = myArgs[0];
var type = myArgs[1];
var year = myArgs[2];
var hour = myArgs[3];
var day = myArgs[4];
break;
case "GW":
var sensor = myArgs[0];
var type = myArgs[1];
var inDate = myArgs[2];
var hour = myArgs[3];
break;
case "GM":
@ -2098,12 +2134,14 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
var type = myArgs[1];
var year = myArgs[2];
var month = myArgs[3];
var hour = myArgs[4];
break;
case "GY":
var sensor = myArgs[0];
var type = myArgs[1];
var year = myArgs[2];
var hour = myArgs[3];
break;
case "HD":

Loading…
Cancel
Save