ESP/frontend/src/main.js

function incHeight() {
    var el = document.getElementById('mySection');
    var height = el.offsetHeight;
    console.log("Height = " + height);
    var newHeight = height + 250;
    el.style.height = newHeight + 'px';
}

var header = document.querySelector('header');
var section = document.querySelector('section');

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}


async function getData() {
    //await the response of the fetch call
    let response = await fetch('combinedSettingsFile.txt');
    //proceed once the first promise is resolved.
    let data = await response.json()
        //proceed only when the second promise is resolved
    return data;
}

async function getTemperatures() {
    //await the response of the fetch call
    let response = await fetch('temperatures.txt');
    //proceed once the first promise is resolved.
    let data = await response.json()
        //proceed only when the second promise is resolved
    return data;
}
async function getTemperatures2() {
    //await the response of the fetch call
    let response = await fetch('api/get/temperatures');
    //proceed once the first promise is resolved.
    let data = await response.json()
        //proceed only when the second promise is resolved
    return data;
}
getTemperatures()
    .then(data => {
        data.temperatures.forEach(function(temperature) {
            console.log(temperature);
        })
    })

// .then(result => {
//     //Here body is not ready yet, throw promise
//     if (!result.ok) throw result;
//     return result.json();
// })
// .then(result => {
//     //Successful request processing
//     console.log(result);
// }).catch(error => {
//     //Here is still promise
//     console.log(error);
//     error.json().then((body) => {
//         //Here is already the payload from API
//         console.log(body);
//     });
// })

setInterval(function() {
        let temperaturesSwitch = document.getElementById('temperatures-switch');
        if (temperaturesSwitch.checked) {
            // getTemperatures2()
            fetch('api/get/temperatures')
                // .then(handleErrors)
                .then(result => {
                    //Here body is not ready yet, throw promise
                    if (!result.ok) throw result;
                    return result.json();
                })
                .then(data => {
                    let p = document.getElementById('temperature');
                    if (data.status == 'failed') {
                        let errorMessage = sprintf('status = %s reason = %s', data.status, data.message)
                        p.textContent = errorMessage;
                        console.log(errorMessage);
                    } else {

                        p.textContent = "";
                        data.temperatures.forEach(function(temperature) {

                                console.log("Temperature = " + temperature);
                                temp = sprintf("%05.2f", temperature);
                                p.textContent += temp + ' ';

                            })
                            // let temp = sprintf("%.2f", 36.72);
                            // p.textContent += temp + ' ';
                    }
                })
                .catch(error => {
                    //Here is still promise
                    // console.log(error);
                    // if (error.status == 404) {
                    //     console.log('error = ' + 404);
                    // } 
                    // else {
                    // error.json().then((body) => {
                    //Here is already the payload from API
                    // let errorMessage = sprintf('status = %s reason = %s', body.status, body.message)
                    // console.log(errorMessage);
                    // });
                    // }
                    let p = document.getElementById('temperature');
                    p.textContent = 'Network Error';
                })
        }
    },
    2000
);

//call getData function
getData()
    //.then(data => console.log(data))//log the data
    .then(function showSettings(data) {
        var ballasts = data['settings'];
        console.log(ballasts);
        for (let i = 0; i < 3; i++) {
            // var myArticle = document.createElement('article');
            // var myH2 = document.createElement('h3');
            // var myPara1 = document.createElement('p');
            // var myPara2 = document.createElement('p');
            // var myPara3 = document.createElement('p');
            // var myPara4 = document.createElement('p');
            // var myPara5 = document.createElement('p');
            // // var myList = document.createElement('ul');

            // myH2.textContent = 'Ballast' + ' #' + (i + 1);
            // myPara1.textContent = 'Start Hour: ' + ballasts[i].shour;
            // myPara2.textContent = 'Start Minute: ' + ballasts[i].smin;
            // myPara3.textContent = 'Fade Period: ' + ballasts[i].fadePeriod;
            // myPara4.textContent = 'End Hour: ' + ballasts[i].ehour;
            // myPara5.textContent = 'End Minute: ' + ballasts[i].emin;
            // console.log(ballasts[i].shour);
            // myArticle.appendChild(myH2);
            // myArticle.appendChild(myPara1);
            // myArticle.appendChild(myPara2);
            // myArticle.appendChild(myPara3);
            // myArticle.appendChild(myPara4);
            // myArticle.appendChild(myPara5);
            // // myArticle.appendChild(myList);
            // section.appendChild(myArticle);
            let myDiv = document.getElementById('ballast' + (i + 1));
            // let myH2 = document.createElement('h3');
            let myPara1 = document.createElement('p');
            let myPara2 = document.createElement('p');
            let myPara3 = document.createElement('p');
            let myPara4 = document.createElement('p');
            let myPara5 = document.createElement('p');

            // myH2.textContent = 'Ballast' + ' #' + (i + 1);
            myPara1.textContent = 'Start Hour: ' + ballasts[i].shour;
            myPara2.textContent = 'Start Minute: ' + ballasts[i].smin;
            myPara3.textContent = 'Fade Period: ' + ballasts[i].fadePeriod;
            myPara4.textContent = 'End Hour: ' + ballasts[i].ehour;
            myPara5.textContent = 'End Minute: ' + ballasts[i].emin;

            // myDiv.appendChild(myH2);
            myDiv.appendChild(myPara1);
            myDiv.appendChild(myPara2);
            myDiv.appendChild(myPara3);
            myDiv.appendChild(myPara4);
            myDiv.appendChild(myPara5);
        }
        return data;
    })
    .then(data => console.log(data))
    // .then(incHeight());