@ -195,7 +195,7 @@ 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 ;
@ -324,7 +324,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" :
@ -479,7 +478,7 @@ function do_parallel(myid, myxs, mycolumns, inMyTitle) {
` ;
var myTitle = "<h2>" + inMyTitle + "</h2>" ;
my = myid . replace ( '#' , '' )
cl ( "my id -> " + my ) ;
var mainDiv = document . getElementById ( my ) ;
mainDiv . insertAdjacentHTML ( "afterbegin" , myButtons + myTitle ) ;
@ -1313,89 +1312,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 ) ) ;
}
@ -1581,9 +1497,14 @@ 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
cl ( boardName + " - " + boardDesc ) ;
getCurrentBoardData ( boardName , boardDesc ) ;
} else {
writeIn ( formId , formData ) ;
}
}
} ) ;
} ) ;
@ -1814,35 +1735,226 @@ 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 ) {
cl ( "value: " + value ) ;
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 ;
}
// JAUME1
////////////////////////////////////////
// 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 = [ ] ;
cl ( "here I am: getCurrentBoardData" ) ;
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 ) {
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
alert ( "Board saved!" ) ;
} )
. catch ( error => {
cl ( "myJSON" ) ;
cl ( myJSON ) ;
console . error ( "Error:" , error ) ;
// Handle any errors that occur during the request
} ) ;
}
//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 ( ) {
////////////////////////////////
// LOAD BOARD
// button listener to get the BOARD LIST from the server
const buttonElement = document . getElementById ( "loadListBoardsButton" ) ;
buttonElement . addEventListener ( "click" , function ( ) {
fetchDataAndGenerateHTML ( myParam ) ;
} ) ;
//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" } ] } ;
// 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 ) {
cl ( "Here I am!!" ) ;
cl ( 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 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 ) {
cl ( "-> element.api_url: " ) ;
cl ( element . api _url ) ;
var apiurl = element . api _url ;
var formId = getFormId ( apiurl ) ;
cl ( "-> formId: " + formId ) ;
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,16 +1963,78 @@ function loadBoards() {
}
} ) ;
//Prepara the variables:
// formId, apiUrl, myid, myTitle, ...args
}
// for each entry of JSON: make calls: createDiv
// Check if is TXT or DIAGRANM: then call makeApiRequest
// 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 ) ;
// cl("List Boards HTML:");
// console.log(generatedHTML);
document . getElementById ( "loadBoard-pills-default" ) . insertAdjacentHTML ( 'beforeend' , generatedHTML ) ;
} )
. catch ( error => {
console . error ( "Error:" , error ) ;
} ) ;
}
// 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 ;
cl ( "-> apiUrl: " + apiUrl ) ;
fetch ( apiUrl )
. then ( response => response . json ( ) )
. then ( jsonData1 => {
cl ( "List Boards JSON:" ) ;
console . log ( 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 ;
}
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 ) {
@ -1944,8 +2118,12 @@ 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 ) ;
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 ) => {
