@ -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 = "<h2>" + inMyTitle + "</h2>" ;
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 <a href=\"#\">Ipsum is</a> 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 = '<h2>List of saved boards. Just click the one you want to load.:</h2><p> :</p><ol>' ;
for ( let i = 0 ; i < jsonData . length ; i ++ ) {
const item = jsonData [ i ] ;
html += ` <li> ${ item . Name } </li> ` ;
html += '<ul>' ;
html += ` <li>Description: ${ item . Desc } </li> ` ;
html += '<p> </p>' ;
html += '<button onclick="fetchOneBoardData(\'' + myParam + '\', \'' + item . Filename + '\');" type="button" class="loadme btn btn-info"><i class="fa fa-bolt"></i>Load me!</button>' ;
html += '</ul>' ;
html += '<p> </p>' ;
}
html += '</ol>' ;
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 ) => {
