jaume
/
infravis-trahust
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Borads Load/Save -> almost done

Browse Source
Rafael
jaume-nualart 7 months ago
parent 3b59f4206f
commit ca2fc68b76
4 changed files with 101 additions and 285 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      web-html/config/datamap.js
  2. 106
      web-html/css/dash.css
  3. 167
      web-html/dash.html
  4. 107
      web-html/js/dash.js

6
web-html/config/datamap.js
View File

File diff suppressed because one or more lines are too long

106
web-html/css/dash.css
Unescape View File

@ -1,107 +1,3 @@
/* Horizon graph stules*/
.horizon {
border-top: solid 1px #000;
border-bottom: solid 1px #000;
overflow: hidden;
position: relative;
}
.horizon + .horizon {
border-top: none;
}
.horizon canvas {
display: block;
image-rendering: pixelated;
}
.horizon .title,
.horizon .value {
bottom: 0;
line-height: 30px;
margin: 0 6px;
position: absolute;
font-family: sans-serif;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
white-space: nowrap;
}
.horizon .title {
left: 0;
}
.horizon .value {
right: 0;
}
.color {
width:70px;
height: 70px;
margin:2px;
float:left;
}
/* ***************************************** */
/* Style for the right upper corner div */
.corner-div {
position: relative;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px; /* Add some spacing between divs */
}
/* Style for the close button */
.corner-close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
/* Style for the pop-up button */
.corner-popup {
position: absolute;
top: 5px;
right: 40px;
cursor: pointer;
}
/* Style for the print button */
.corner-print {
position: absolute;
top: 5px;
right: 75px;
cursor: pointer;
}
/*Grid monthly styles*/
/* Add your CSS styles here */
.heatmap rect {
stroke: #fff;
}
#tooltip {
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 1px;
}
.year-label {
text-anchor: end;
font-size: 1.5em;
font-weight: bold;
margin-right: 20px;
}
/* ------------------ */
.c3-grid-lines {
width:100%;
}
.card-img-top {
width:150px;
}
@ -176,4 +72,4 @@ font-size: 12px;
fill: none;
font-size: 10px;
shape-rendering: crispEdges;
}
}

167
web-html/dash.html
Unescape View File

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>TräHus dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="imgs/infravis.ico" type="image/x-icon">
<!-- Required meta tags -->
<!-- required placeholder="Required" meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -18,84 +18,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link href="./css/dash.css" rel="stylesheet"> -->
<link href="./css/dash.css" rel="stylesheet">
<style>
.card-img-top {
width:150px;
}
#myhouse {
background-color: #3e3e3e;
color:#ffffff;
padding:1.5em;
}
#templates {
margin-top:10px;
margin-bottom:10px;
}
.frama {
margin-top:20px;
width:100%;
}
.col {
border-right: 1rem solid #3e3e3e;
padding: 3px;
overflow: auto;
width: 30%;
float:left;
resize:horizontal
}
.frame div:hover {
border-bottom:1px dashed #c51313;
}
.resizable-column {
overflow: auto;
}
.resizable-column:hover {
cursor: col-resize;
}
div span, h5, h4, svg, canvas, .col div {
cursor: default;
}
.mysvg {
/* Set the width of each div */
margin: 10px; /* Set the margin to create space between divs */
background-color: #dddcdc; /* Optional background color for clarity */
border-bottom: 4px solid #7f7f81;
display:block;
}
div svg {
display:block;
}
.myheight {
height:360px;
}
div.sortable-item {
cursor:move;
}
#tooltip {
display: block;
position: absolute;
background-color: white;
padding: 5px;
border: 1px solid #ccc;
}
/*------------------*/
.tooltip {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border: 1px solid #ddd;
border-radius: 3px;
pointer-events: none;
font-size: 12px;
}
.axis {
fill: none;
font-size: 10px;
shape-rendering: crispEdges;
}
</style>
<!-- JS libs-->
@ -112,16 +37,12 @@
<script src="./js/d3-horizon-chart0.0.5.js"></script>
<script src="./config/config.js"></script>
<script src="./config/datamap.js"></script>
</head>
<body>
<div class="container" style="max-width:90%">
<!-- Navbar-->
<nav id ="navbar" class="navbar navbar-dark bg-primary navbar-expand-lg navbar-light bg-light">
</nav>
@ -165,7 +86,7 @@
<form id="saveBoardForm" class="addtext">
<div class="mb-3">
<label for="boardNameLabel" class="form-label">Board name</label>
<input type="email" class="form-control" id="boardName" placeholder="name@example.com">
<input required placeholder="required placeholder="Required"" type="email" class="form-control" id="boardName" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="boardDescLabel" class="form-label">Description</label>
@ -332,7 +253,7 @@
<p>Select Month and Year:</p>
<div id="SelectYearMonth1" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="PMYearMonth" name="PMYearMonth" type="text" class="span2">
<input required placeholder="Required" id="PMYearMonth" name="PMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
@ -383,7 +304,7 @@
<div id="parallelSelectYearMonthWeek" class="input-group date">
<label for="time">Select a week,<br />(clicking in a Monday)</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="PWWeekMonday" name="PWWeekMonday" type="text" class="span2">
<input required placeholder="Required" id="PWWeekMonday" name="PWWeekMonday" type="text" class="span2">
</div>
<p>&nbsp;</p>
@ -435,9 +356,8 @@
<!-- DD/MM/YYYY SELECT -->
<div id="SelectYearMonthDay" class="input-group date">
<label style="width:100%;" for="day">Select Day, Month, Year</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="PDYearMonthDay" name="PDYearMonthDay" type="text" class="span2">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="PDYearMonthDay" name="PDYearMonthDay" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -455,7 +375,6 @@
</div>
</form>
</div>
</div>
</div>
</div>
@ -525,7 +444,6 @@
<div id="SelectSensor" 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="GYSensor" name="GYSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -533,16 +451,13 @@
<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="GYParameter" name="GYParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="gridSelectYear" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="GYYear" name="GYYear" class="form-select" aria-label="grid-yearly-select">
<select id="GYYear" name="GYYear" class="form-select" aria-label="grid-yearly-select">
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -582,15 +497,13 @@
<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="GMParameter" name="GMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="grid-SelectYearMonth" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="GMYearMonth" name="GMYearMonth" type="text" class="span2">
<input required placeholder="Required" id="GMYearMonth" name="GMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
@ -623,15 +536,13 @@
<div id="SelectSensor" 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="GWSensor" name="GWSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</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="GWParameter" name="GWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<select id="GWParameter" name="GWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -640,7 +551,7 @@
<!-- Monday/MM/YYYY -> week selecting a Monday -->
<div id="SelectYearMonthWeek" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="GWYearMonthMonday" name="GWYearMonthMonday" type="text" class="span2">
<input required placeholder="Required" id="GWYearMonthMonday" name="GWYearMonthMonday" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -658,7 +569,6 @@
</div>
</form>
</div>
</div>
</div>
</div>
@ -725,7 +635,7 @@
<form id="HY">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="HYTitle" name="HYTitle" type="text" class="span2">
<input required placeholder="Required" id="HYTitle" name="HYTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
@ -733,12 +643,10 @@
<div id="SelectSensor" 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="HYFamSensor" name="HYFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
@ -751,7 +659,6 @@
<div id="horizon-optionMonthly" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="HYYear" name="HYYear" class="form-select" aria-label="horizon-yearly-select">
</select>
</div>
@ -761,7 +668,7 @@
<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="HYTime" disabled name="HYTime" type="text" class="timePicker span2">
<input required placeholder="Required" id="HYTime" disabled name="HYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -788,7 +695,6 @@
<div id="SelectSensor" 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="HMFamSensor" name="HMFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -799,14 +705,13 @@
<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="HMParameter" name="HMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="horizon-SelectYearMonth" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="HMYearMonth" name="GMYearMonth" type="text" class="span2">
<input required placeholder="Required" id="HMYearMonth" name="GMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
@ -845,7 +750,6 @@
<div id="SelectSensor" 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="HWFamSensor" name="HWFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -856,7 +760,6 @@
<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="HWParameter" name="HWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -866,7 +769,7 @@
<div id="horizonSelectYearMonthWeek" class="input-group date">
<label for="time">Select a week,<br />(clicking in a Monday)</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="HWWeek" name="HWWeek" type="text" class="span2">
<input required placeholder="Required" id="HWWeek" name="HWWeek" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -899,7 +802,6 @@
<div id="SelectSensor" 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="HDFamSensor" name="HDFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -907,7 +809,6 @@
<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="HDParameter" name="HDParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
@ -917,7 +818,7 @@
<label style="width:100%;" for="day">Select Day, Month, Year</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="HDYearMonthDay" name="HDYearMonthDay" type="text" class="span2">
<input required placeholder="Required" id="HDYearMonthDay" name="HDYearMonthDay" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
@ -925,7 +826,7 @@
<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 placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
<input placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -935,13 +836,16 @@
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom bg-dark text-light text-center py-2">
<!-- Footer content -->
This is the fixed footer.
</footer>
</div> <!-- Closing MODAL dialog -->
@ -952,27 +856,16 @@
<!-- Add the tooltip element here -->
<div id="tooltip_gm"></div>
</div> <!-- main body container closing-->
<!-- //////////////////////////////////////// -->
<!-- //////////////////////////////////////// -->
<!-- rich text editor -->
<!-- rich text editor -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
</script>
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- // Main dash JS code -->
<script src="./js/dash.js"></script>
<!-- // Main dash JS code -->
<script src="./js/dash.js"></script>
<!-- // Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

107
web-html/js/dash.js
Unescape View File

@ -41,7 +41,6 @@ document.getElementById("subtitle").innerHTML = subtitle;
// Get and apply the range of time for the data.
//////////////////////////////////
// LIST OF SENSOR NAME and Families.
// Get the list of sensors, amnd the range_years_month from config/datamap.js
@ -51,7 +50,7 @@ var range_year_month;
for (var i = 0; i < PROJECTS.items.length; i++) {
if (PROJECTS.items[i].xname === projectName) {
range_year_month = PROJECTS.items[i].range_years_month;
listSensors = PROJECTS.items[i].families[0].listOfSensors;
listSensors = PROJECTS.items[i].listOfSensors;
break;
}
}
@ -197,7 +196,7 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
async function writeIn(formId, formData) {//, apiUrl, myid) {
var myColumn = getName(formId[0])
var myTitle = document.getElementById(formId+"Title").value;
var myTitle = document.getElementById(formId[0]+"Text").value;
// cl("formId[0]: "+formId[0]);
// cl("myColumn: "+myColumn);
@ -1552,6 +1551,11 @@ const editorContent = editor.innerHTML;
console.log(editorContent);
}
///////////////////
// FORMS Check validator required fields:
//
// ...
//////////////////////ç//
@ -1751,13 +1755,30 @@ function getFormattedDateFromWeek(week, year) {
return formattedDate;
}
// Checking if any variable for the API query is null and NaN
function checkEmptyVariable(str) {
const queryString = str.split("?")[1];
if (!queryString) {
console.log("No variables found after the '?' symbol");
return false;
}
const variables = queryString.split("&");
for (let variable of variables) {
const [key, value] = variable.split("=");
if (key !== "hus" && (!value || value.trim() === "undefined" || value.toString().includes("undefined"))) {
var missedVar = `Variable "${key}" is empty, undefined, or NaN`;
console.log(missedVar);
console.log(str);
return missedVar;
}
}
// JAUME1
console.log("No empty, undefined, or NaN variables found");
return false;
}
////////////////////////////////////////
// BOARDS:
@ -1842,33 +1863,39 @@ function getCurrentBoardData(boardName, boardDesc) {
// function to send and save the collected data from the current borad to the server thriugh the API
function sendDataToAPI(myJSON) {
base_url_API = "http://localhost:5000";
const myApiUrl = base_url_API+"/boards/save"; // Replace with your API URL
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: myJSON //.stringify(myJSON)
};
fetch(myApiUrl, requestOptions)
//.then(response => response.json())
.then(data => {
console.log("Response from API:", myJSON);
// Handle the response from the API as needed
const myModal = new bootstrap.Modal(document.getElementById("saveBoardModal"));
const submitBtn = document.getElementById("submitBoard");
submitBtn.addEventListener("click", function() {
myModal.hide();
const form = document.getElementById("saveBoardForm"); // Get the form element
const inputField = document.getElementById("boardName"); // Get the input field element
form.addEventListener("submit", function(event) {
if (inputField.value.trim() === "") { // Check if the input field is empty after trimming whitespace
event.preventDefault(); // Prevent form submission
console.log("Empty field detected. Form submission blocked.");
} else {
base_url_API = "http://localhost:5000";
const myApiUrl = base_url_API+"/boards/save"; // Replace with your API URL
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: myJSON //.stringify(myJSON)
};
fetch(myApiUrl, requestOptions)
//.then(response => response.json())
.then(data => {
console.log("Response from API:", myJSON);
// Handle the response from the API as needed
const myModal = new bootstrap.Modal(document.getElementById("saveBoardModal"));
const submitBtn = document.getElementById("submitBoard");
submitBtn.addEventListener("click", function() {
myModal.hide();
});
alert("Board saved!");
})
.catch(error => {
console.error("Error:", error);
});
alert("Board saved!");
})
.catch(error => {
console.error("Error:", error);
});
}
});
}
@ -1886,9 +1913,6 @@ buttonElement.addEventListener("click", function() {
});
// FIXME IT NEED THE BE CALLED WITH THE JSON AD ARGUMENT!!!
// Function to generate the already loaded JSON data of a board.
async function loadBoards(myJSON) {
//myJSON = {"Name":"dddd","Description":" f fa af ffsdfsdfs fsd","Hus":"Charlie","col-left":[],"col-center":[{"order":0,"id":"grid-710994","text":"","api_url":"grid/weekly?hus=Charlie&sensor=Temp_MP1_1_Pos1&type=celsius&year=2023&week=23"}],"col-right":[]};
@ -1976,10 +2000,6 @@ function fetchDataAndGenerateHTML(husName) {
// function to load one boards JSON data
function fetchOneBoardData(husName, boardFilename) {
//base_url_API = "http://localhost:5000";
//${base_url_API}+"/boards/load?hus="+${myParam}+"&filename="+${filename}
//http://localhost:5000/boards/load?hus=Charlie&filename=test1.json
var apiUrl = base_url_API+"/boards/load?hus="+myParam+"&filename="+boardFilename;
fetch(apiUrl)
.then(response => response.json())
@ -2022,10 +2042,18 @@ function checkElementExistence(myid, apiUrl) {
}
///////////////////////////////////
// Server API:
// Define a function to make the API request
function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
// Check the variables on the query:
// var myMissedVar = checkEmptyVariable(apiUrl);
// if(myMissedVar!=false) {
// alert("There are variables with null or NaN values. "+myMissedVar);
// return;
// };
const myArgs = [];
// Store all arguments in an array
myTitle = myTitle || ""; // Define emty if undefined:
@ -2105,6 +2133,7 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
}
// Make an AJAX request to your Flask API
var apiRequest = `http://localhost:5000/${apiUrl}`; ///parallel/daily?family=${family}&type=${type}&day=${day}`;
cl(apiRequest);
var myDiv_ = document.getElementById(myid);

Write Preview
Loading…
Cancel
Save