diff --git a/web-html/js/dash.js b/web-html/js/dash.js
index d073962..73a09df 100644
--- a/web-html/js/dash.js
+++ b/web-html/js/dash.js
@@ -32,7 +32,7 @@
// DEFAULT INTERFACE BUILDING
var myHouse = PROJECTS.items[myNumber];
var myHouseXname = PROJECTS.items[myNumber].xname;
-cl(myHouseXname);
+//cl(myHouseXname);
document.getElementById("h1_title").innerHTML = h1_title;
document.getElementById("subtitle").innerHTML = subtitle;
@@ -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;
}
}
@@ -195,9 +194,9 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
//-----------------------------
// writeIn and writeInTXT
- async function writeIn(formId, formData) {
+ 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);
@@ -324,7 +323,6 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
// 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);
-
break;
//-------------------------------
case "GM":
@@ -441,7 +439,7 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
// Parallel
function do_parallel(myid, myxs, mycolumns, inMyTitle) {
- cl(myxs);
+ //cl(myxs);
c3.generate({
bindto: myid,
data: {
@@ -479,7 +477,6 @@ function do_parallel(myid, myxs, mycolumns, inMyTitle) {
`;
var myTitle = "
"+inMyTitle+"
";
my = myid.replace('#', '')
-
var mainDiv = document.getElementById(my);
mainDiv.insertAdjacentHTML("afterbegin", myButtons+myTitle);
@@ -1313,89 +1310,6 @@ function do_horizon_row(data, myid, title, myDates) {
// FUNCTIONS /////////////////////////////////////////////////
// Function interactions
-////////////////////////////////////////////////////////////////
-
-
-////////////////////////////////
-// SAVE DASHBOARF :: export diagrams + texts to the API
-
-function getApiUrls() {
- var apiUrlsLeft = [];
- var apiUrlsCenter = [];
- var apiUrlsRight = [];
-
- document.querySelectorAll('#col-left div').forEach(function(element, index) {
- var apiUrl = element.getAttribute('apiurl');
- var id = element.id;
- var order = apiUrlsLeft.length;
- if (apiUrl === 'txt') {
- var clone = element.cloneNode(true);
- clone.querySelectorAll('span').forEach(function(span) {
- span.parentNode.removeChild(span);
- });
- var innerText = clone.innerText.trim();
- apiUrlsLeft.push({ order: order, id: id, text: innerText, api_url: null });
- } else if (apiUrl) {
- var h2Element = element.querySelector('h2');
- text = h2Element ? h2Element.innerText.trim() : '';
- apiUrlsLeft.push({ order: order, id: id, text: text, api_url: apiUrl });
- }
- });
-
- document.querySelectorAll('#col-center div').forEach(function(element, index) {
- var apiUrl = element.getAttribute('apiurl');
- var id = element.id;
- var text = element.innerHTML.trim(); // Assuming the text is the innerHTML of the element
- var order = apiUrlsCenter.length;
- if (apiUrl === 'txt') {
- var clone = element.cloneNode(true);
- clone.querySelectorAll('span').forEach(function(span) {
- span.parentNode.removeChild(span);
- });
- var innerText = clone.innerText.trim();
- apiUrlsCenter.push({ order: order, id: id, text: innerText, api_url: null });
- } else if (apiUrl) {
- var h2Element = element.querySelector('h2');
- text = h2Element ? h2Element.myLen.trim() : '';
-
- apiUrlsCenter.push({ order: order, id: id, text: text, api_url: apiUrl });
- }
- });
-
- document.querySelectorAll('#col-right div').forEach(function(element, index) {
- var apiUrl = element.getAttribute('apiurl');
- var id = element.id;
- var text = element.innerHTML.trim(); // Assuming the text is the innerHTML of the element
- var order = apiUrlsRight.length;
- if (apiUrl === 'txt') {
- var clone = element.cloneNode(true);
- clone.querySelectorAll('span').forEach(function(span) {
- span.parentNode.removeChild(span);
- });
- var innerText = clone.innerText.trim();
- apiUrlsRight.push({ order: order, id: id, text: innerText, api_url: null });
- } else if (apiUrl) {
- var h2Element = element.querySelector('h2');
- text = h2Element ? h2Element.innerText.trim() : '';
- apiUrlsRight.push({ order: order, id: id, text: text, api_url: apiUrl });
- }
- });
-
- // Similar modifications for #col-center and #col-right
-
- var result = {
- // FIXME : boardName will be entered in the save board form
- "boardName" : "my Form name test",
- "name": boardName,
- "hus": myParam,
- "description": myHouse.subtitle,
- "col-left": apiUrlsLeft,
- "col-center": apiUrlsCenter,
- "col-right": apiUrlsRight
- };
-
- return alert(JSON.stringify(result));
-}
@@ -1570,8 +1484,6 @@ document.querySelectorAll('button[type="submit"]').forEach(button => {
const formId = event.target.closest('form').id;
// Get the form data based on the form ID
const formData = getFormData(formId);
- // Display or use the form data
- //cl(`Form Data for ${formId}:`, formData);
// Is it a diagram or a text?
if (formId.substring(1)=="Text") {
var fromEditor = document.getElementById(formId[0]+"editor").innerHTML;
@@ -1581,9 +1493,13 @@ document.querySelectorAll('button[type="submit"]').forEach(button => {
var div = doc.querySelector('div[data-lt-tmp-id^="lt-"]');
var textData = div ? div.innerHTML : 'No div found';
writeInTXT(formId, textData);
+ } if (formId == "saveBoardForm") {
+ var boardName = document.getElementById("boardName").value;
+ var boardDesc = document.getElementById("boardDesc").value
+ getCurrentBoardData(boardName, boardDesc);
} else {
writeIn(formId, formData);
- }
+ }
});
});
@@ -1635,6 +1551,11 @@ const editorContent = editor.innerHTML;
console.log(editorContent);
}
+///////////////////
+// FORMS Check validator required fields:
+//
+// ...
+
//////////////////////ç//
@@ -1814,35 +1735,243 @@ var firstOpen = true;
// > makeApiRequiest
// > submit nuttons listener
+function getValueByKeyFrrmUrl(key, apiurl) {
+ const keyValuePairs = apiurl.split("&");
+ for (let i = 0; i < keyValuePairs.length; i++) {
+ const [currentKey, value] = keyValuePairs[i].split("=");
+ if (currentKey === key) {
+ return value;
+ }
+ }
+ return null; // Return null if the key is not found
+}
+
+function getFormattedDateFromWeek(week, year) {
+ const date = new Date(year, 0, 1 + (week - 1) * 7); // January 1st + (week - 1) * 7 days
+ const day = date.getDate();
+ const month = date.getMonth() + 1; // Months are zero-based, so we add 1
+ const formattedDate = `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${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;
+ }
+ }
+
+ console.log("No empty, undefined, or NaN variables found");
+ return false;
+}
+
+////////////////////////////////////////
+// BOARDS:
+
+////////////////////////////////
+// SAVE BOARD :: export diagrams + texts to the API
+
+// Function to get all the vurrent data from the board.
+function getCurrentBoardData(boardName, boardDesc) {
+ var apiUrlsLeft = [];
+ var apiUrlsCenter = [];
+ var apiUrlsRight = [];
+ document.querySelectorAll('#col-left div').forEach(function(element, index) {
+ var apiUrl = element.getAttribute('apiurl');
+ var id = element.id;
+ var order = apiUrlsLeft.length;
+ if (apiUrl === 'txt') {
+ var clone = element.cloneNode(true);
+ clone.querySelectorAll('span').forEach(function(span) {
+ span.parentNode.removeChild(span);
+ });
+ var innerText = clone.innerText.trim();
+ apiUrlsLeft.push({ order: order, id: id, text: innerText, api_url: null });
+ } else if (apiUrl) {
+ var h2Element = element.querySelector('h2');
+ text = h2Element ? h2Element.innerText.trim() : '';
+ apiUrlsLeft.push({ order: order, id: id, text: text, api_url: apiUrl });
+ }
+ });
+
+ document.querySelectorAll('#col-center div').forEach(function(element, index) {
+ var apiUrl = element.getAttribute('apiurl');
+ var id = element.id;
+ var text = element.innerHTML.trim(); // Assuming the text is the innerHTML of the element
+ var order = apiUrlsCenter.length;
+ if (apiUrl === 'txt') {
+ var clone = element.cloneNode(true);
+ clone.querySelectorAll('span').forEach(function(span) {
+ span.parentNode.removeChild(span);
+ });
+ var innerText = clone.innerText.trim();
+ apiUrlsCenter.push({ order: order, id: id, text: innerText, api_url: null });
+ } else if (apiUrl) {
+ var h2Element = element.querySelector('h2');
+ text = h2Element ? h2Element.myLen.trim() : '';
+
+ apiUrlsCenter.push({ order: order, id: id, text: text, api_url: apiUrl });
+ }
+ });
+
+ document.querySelectorAll('#col-right div').forEach(function(element, index) {
+ var apiUrl = element.getAttribute('apiurl');
+ var id = element.id;
+ var text = element.innerHTML.trim(); // Assuming the text is the innerHTML of the element
+ var order = apiUrlsRight.length;
+ if (apiUrl === 'txt') {
+ var clone = element.cloneNode(true);
+ clone.querySelectorAll('span').forEach(function(span) {
+ span.parentNode.removeChild(span);
+ });
+ var innerText = clone.innerText.trim();
+ apiUrlsRight.push({ order: order, id: id, text: innerText, api_url: null });
+ } else if (apiUrl) {
+ var h2Element = element.querySelector('h2');
+ text = h2Element ? h2Element.innerText.trim() : '';
+ apiUrlsRight.push({ order: order, id: id, text: text, api_url: apiUrl });
+ }
+ });
+ var result = {
+ // FIXME : boardName will be entered in the save board form
+ "Name" : boardName,
+ "Description": boardDesc,
+ "Hus": myParam,
+ "col-left": apiUrlsLeft,
+ "col-center": apiUrlsCenter,
+ "col-right": apiUrlsRight
+ };
+ //alert(JSON.stringify(result));
+ return sendDataToAPI(JSON.stringify(result));
+}
+
+
+// function to send and save the collected data from the current borad to the server thriugh the API
+function sendDataToAPI(myJSON) {
+ 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);
+ });
+ }
+ });
+}
+
+
//function to prepare the tha API request upon a board JSON
function getFormId(api_url) {return api_url[0].toUpperCase() + api_url.split("/")[1][0].toUpperCase();};
-function loadBoards() {
-
- //JAUME
- // Test JSON Board:
- myJSON = {"name":"Charlie","hus":"Charlie","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.","col-left":[{"order":0,"id":"P-txt-728265","text":"Here a text","api_url":null},{"order":1,"id":"parallel-8001586","text":"","api_url":"parallel/monthly?hus=Charlie&family=MP1_1&type=celsius&year=2020&month=1"}],"col-center":[{"order":0,"id":"G-txt-956767","text":"Here a text","api_url":null},{"order":1,"id":"grid-190619","text":"","api_url":"grid/monthly?hus=Charlie&sensor=Temp_MP1_1_Pos1&type=celsius&year=2023&month=01"}],"col-right":[{"order":0,"id":"H-txt-518613","text":"Here a text","api_url":null},{"order":1,"id":"horizon-986338","text":"","api_url":"horizon/daily?hus=Charlie&family=MP1_1&type=celsius&day=2023-04-12"}]};
+////////////////////////////////
+// LOAD BOARD
+// button listener to get the BOARD LIST from the server
+const buttonElement = document.getElementById("loadListBoardsButton");
+buttonElement.addEventListener("click", function() {
+ fetchDataAndGenerateHTML(myParam);
+});
+// 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":[]};
var cols = ["col-left", "col-center", "col-right"];
cols.forEach(col => {
if (col.length > 0) {
- myJSON[col].forEach(element => {
+ myJSON[col].forEach(async element => {
// Get necessary variables:
+ var myTitle = myTitle ? nuull : "";
var myColumn = col;
var myid = element.id;
var myTitle = element.text;
// Create DIV
- createMyDiv(myid, myColumn, myTitle);
+ await createMyDiv(myid, myColumn, myTitle);
+
+ // setTimeout(function() {
+ // console.log("After 2 seconds");
+ // // Code to be executed after the delay
+ // }, 2000);
+
// Check if is TXT or Diagram:
- if (element.text == "" ) {
- cl(element["api_url"]);
- var apiUrl = element["api_url"];
- var formId = getFormId(apiUrl);
- //createParallel(myid, formId, formData);
- makeApiRequest(formId, apiUrl, myid);
+ if (element.api_url != null ) {
+ var apiurl = element.api_url;
+ var formId = getFormId(apiurl);
+ var sensor = getValueByKeyFrrmUrl("sensor", apiurl);
+ var type = getValueByKeyFrrmUrl("type", apiurl);
+ var year = getValueByKeyFrrmUrl("year", apiurl);
+
+ switch (formId) {
+ case "PD":
+ var family = getValueByKeyFrrmUrl("family", apiurl);
+ var day = getValueByKeyFrrmUrl("day", apiurl);
+ // cl("PD LoadBoards:");
+ // cl(formId+" - "+apiurl+" - "+myid+" - "+myTitle+" - "+family+" - "+type+" - "+day);
+ makeApiRequest(formId, apiurl, myid, myTitle, family, type, day);
+ break;
+
+ case "GW":
+ var week = getValueByKeyFrrmUrl("week", apiurl);
+ // Trans for week and year to DD-MM-YYYY
+ 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);
+ break;
+ case "GM":
+ var month = getValueByKeyFrrmUrl("month", apiurl);
+ makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year, month);
+ break;
+ case "GY":
+ makeApiRequest(formId, apiurl, myid, myTitle, sensor, type, year);;
+ break;
+
+
+ default:
+ makeApiRequest(formId, apiurl, myid);
+ break;
+ }
+
+
} else {
var formId = "TXT";
createTXT(myid, element.text);
@@ -1851,19 +1980,80 @@ function loadBoards() {
}
});
-//Prepara the variables:
-// formId, apiUrl, myid, myTitle, ...args
+}
+
+// function to load THE LIST OF boards FOR AN SPECIFIC hOUSE
+function fetchDataAndGenerateHTML(husName) {
+ base_url_API = "http://localhost:5000";
+ var apiUrl = base_url_API+"/boards?hus="+husName;
+ cl(apiUrl);
+ fetch(apiUrl)
+ .then(response => response.json())
+ .then(jsonData => {
+ const generatedHTML = generateHTML(jsonData);
+ document.getElementById("loadBoard-pills-default").innerHTML = generatedHTML;
+ })
+ .catch(error => {
+ console.error("Error:", error);
+ });
+}
+
+// function to load one boards JSON data
+function fetchOneBoardData(husName, boardFilename) {
+ var apiUrl = base_url_API+"/boards/load?hus="+myParam+"&filename="+boardFilename;
+ fetch(apiUrl)
+ .then(response => response.json())
+ .then(jsonData1 => {
+ loadBoards(jsonData1);
+ })
+ .catch(error => {
+ console.error("Error:", error);
+ });
+}
+
+
+function generateHTML(jsonData) {
+ let html = '
List of saved boards. Just click the one you want to load.:
:
';
+ for (let i = 0; i < jsonData.length; i++) {
+ const item = jsonData[i];
+ html += `
${item.Name}
`;
+ html += '
';
+ html += `
Description: ${item.Desc}
`;
+ html += '
';
+ html += '';
+ html += '
';
+ html += '
';
+ }
+ html += '';
+ return html;
+}
-// for each entry of JSON: make calls: createDiv
-// Check if is TXT or DIAGRANM: then call makeApiRequest
+function checkElementExistence(myid, apiUrl) {
+ const element = document.getElementById(myid);
+ if (element) {
+ element.setAttribute("apiurl", apiUrl);
+ return
+ } else {
+ setTimeout(function() {
+ checkElementExistence(myid, apiUrl);
+ }, 1000); // Retry after 1 second (adjust the delay as needed)
+ }
}
+///////////////////////////////////
// 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:
@@ -1899,6 +2089,7 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
var sensor = myArgs[0];
var type = myArgs[1];
var inDate = myArgs[2];
+
break;
case "GM":
var sensor = myArgs[0];
@@ -1939,13 +2130,18 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
var year = myArgs[2];
break;
-}
+ }
// 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);
var myCol = getName(formId[0]).split("-")[1];
- document.getElementById(myid).setAttribute("apiurl", apiUrl);
+ //if (myDiv_ && myDiv_.hasAttribute("apiurl")) {
+ checkElementExistence(myid, apiUrl)
+ //document.getElementById(myid).setAttribute("apiurl", apiUrl);
+ //}
fetch(apiRequest)
.then((response) => {