PowerBox/data_test/script_dummy.js

let dataJson = '[{ \
    "id": 0, \
    "name": "OnStep",\
    "state": true,\
    "voltage": 19.5,\
    "pin": 32\
    },\
    {"id": 1, \
    "name": "Canon EOS 50D",\
    "state": false,\
    "voltage": 8.7,\
    "pin": 33\
    },\
    {"id": 2, \
    "name": "Raspberry Pi",\
    "state": false,\
    "voltage": 5,\
    "pin": 25\
    },\
    {"id": 3, \
    "name": "Dew heaters",\
    "state": false,\
    "voltage": 12,\
    "pin": 26\
    }]';

let dataObject = JSON.parse(dataJson)


function toggleState(id) {
    let data = dataObject[id];

    console.log(data);

    if (data.state == true) {
        data.state = false;
    }
    else {
        data.state = true;
    }

    let led = document.getElementById("led_" + id);
    led.className = data.state ? 'led-green' : 'led-red';

    let button = document.getElementById("toggle_button_" + id);
    button.innerHTML = 'toggle ' + (data.state ? 'off' : 'on');

    dataObject[id] = data;
}


function turnOffAll() {
    for (let i = 0; i < dataObject.length; i++) {
        dataObject[i].state = false;
        let led = document.getElementById("led_" + i);
        led.className = 'led-red';
    }
}


function initialLoad() {
    let data = dataObject;

    console.log(data);

    const content = document.getElementById('content');

    for (let i = 0; i < data.length; i++) {
        let card = document.createElement("div");
        card.id = "card" + i;
        card.className = 'card'

        let name = document.createElement("h2");
        name.id = "card_name_" + i;
        name.innerHTML = data[i].name;
        card.appendChild(name);

        let state = document.createElement("p");
        let led = document.createElement("div");
        led.id = 'led_' + i;
        led.className = data[i].state ? 'led-green' : 'led-red';
        state.appendChild(led)
        card.appendChild(state);

        let button = document.createElement("button");
        button.className = 'toggle_button';
        button.id = 'toggle_button_' + i;
        button.innerHTML = 'toggle ' + (data[i].state ? 'off' : 'on');
        button.name = data[i].name;
        button.onclick = function () { toggleState(i) };
        card.appendChild(button);

        let div = document.createElement("div");
        div.className = 'options_button_div';
        let optionsButton = document.createElement("button");
        optionsButton.id = "options_button_" + i;
        optionsButton.className = 'options_button';
        optionsButton.onclick = function () { editProperties(i) };
        let img = document.createElement("img");
        img.setAttribute("src", "options.svg");
        optionsButton.appendChild(img);
        div.appendChild(optionsButton);
        card.appendChild(div);

        content.appendChild(card);
    }
}


function editProperties(id) {
    let data = dataObject[id];
    // Get the modal
    var modal = document.getElementById("propertiesWindow");
    modal.style.display = "block";

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            closePropertiesWindow();
        }
    }


    let p = document.getElementById("propertiesContent");

    let divName = document.createElement("div");
    divName.id = "div_name"
    let labelName = document.createElement("label");
    labelName.setAttribute('for', 'powerOutletName');
    labelName.innerHTML = 'Name';
    divName.appendChild(labelName)
    let inputName = document.createElement("input", 'type="text"');
    inputName.id = "powerOutletName";
    inputName.setAttribute("value", data.name);
    divName.appendChild(inputName);
    p.appendChild(divName);

    let divPin = document.createElement("div");
    divPin.id = 'div_pin'
    let labelPin = document.createElement("label");
    labelPin.setAttribute('for', 'powerOutletPin');
    labelPin.innerHTML = 'Pin';
    divPin.appendChild(labelPin)
    let inputPin = document.createElement("input", 'type="text"');
    inputPin.id = 'powerOutletPin';
    inputPin.setAttribute("value", data.pin);
    divPin.appendChild(inputPin);
    p.appendChild(divPin);

    let divState = document.createElement("div");
    divState.id = 'div_state';
    let labelState = document.createElement("label");
    labelState.setAttribute('for', 'powerOutletState');
    labelState.innerHTML = 'State';
    divState.appendChild(labelState)
    let inputState = document.createElement("input", 'type="text"');
    inputState.id = 'powerOutletState';
    inputState.setAttribute("value", data.state);
    divState.appendChild(inputState);
    p.appendChild(divState);

    let buttonSave = document.createElement("button");
    buttonSave.id = "button_save";
    buttonSave.className = 'toggle_button';
    buttonSave.innerHTML = "Save";
    buttonSave.onclick = function () { saveProperties(id) };
    p.appendChild(buttonSave);

}


function saveProperties(id) { 
    const requestOptions = {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
    };

    let response = {};
    response.id = id;
    response.name = document.getElementById('powerOutletName').value;

    requestOptions.body = JSON.stringify(response);

    console.log(response);

    document.getElementById('card_name_' + id).innerHTML = response.name;

    closePropertiesWindow();
}


function closePropertiesWindow() {
    document.getElementById('propertiesWindow').style.display = 'none';
    document.getElementById('div_name').remove();
    document.getElementById('div_pin').remove();
    document.getElementById('div_state').remove();
    document.getElementById('button_save').remove();
}