PowerBox/data/script.js

var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
var command = { "cmd": "", "id": "" };

function initWebSocket() {
    console.log('Trying to open a WebSocket connection...');
    websocket = new WebSocket(gateway);
    websocket.onopen = onOpen;
    websocket.onclose = onClose;
    websocket.onmessage = onMessage;
}

function onOpen(event) {
    console.log('Connection opened');
}

function onClose(event) {
    console.log('Connection closed');
    setTimeout(initWebSocket, 2000);
}

function onMessage(event) {
    let data = JSON.parse(event.data);

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

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

function onLoad(event) {
    initWebSocket();
}

function toggleState(id) {
    command.cmd = "toggle";
    command.id = id;

    websocket.send(JSON.stringify(command));
}

function turnOffAll() {
    command.cmd = "turn_off_all";

    websocket.send(JSON.stringify(command));

}

function initialLoad() {

    fetch('/power_outlets')
        .then(function (response) {
            data = response.json();
            return data;
        })
        .then(function (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.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);
            }
        })
        .catch(function (error) {
            let card = document.createElement("div");
            card.className = 'card'

            let name = document.createElement("h2");
            name.innerHTML = error;
            card.appendChild(name);

            document.body.appendChild(card);
        });
}


function editProperties(id) {
    fetch('/power_outlets/' + id)
        .then(function (response) {
            data = response.json();
            return data;
        })
        .then(function (data) {
            // 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" 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" id="powerOutletState"');
            inputState.setAttribute("value", data.state);
            divState.appendChild(inputState);
            p.appendChild(divState);

            let divVoltage = document.createElement("div");
            divVoltage.id = 'div_voltage';
            let labelVoltage = document.createElement("label");
            labelVoltage.setAttribute('for', 'powerOutletVoltage');
            labelVoltage.innerHTML = 'Voltage';
            divVoltage.appendChild(labelVoltage)
            let inputVoltage = document.createElement("input", 'type="text"');
            inputVoltage.id = "powerOutletVoltage"
            inputVoltage.setAttribute("value", data.voltage);
            divVoltage.appendChild(inputVoltage);
            p.appendChild(divVoltage);

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

        }).catch(function (error) {
            let card = document.createElement("div");
            card.className = 'card'

            let name = document.createElement("h2");
            name.innerHTML = error;
            card.appendChild(name);

            document.body.appendChild(card);
        });
}


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);

    fetch('/power_outlets/' + id, requestOptions)
        .then(response => response.json())
        .then(function (data) {
            console.log(data);
            console.log(data.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('div_voltage').remove();
    document.getElementById('button_save').remove();
}


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

    let response = {};

    response.wifi_network_ssid = document.getElementById('wifi_ssid').value;
    response.wifi_network_password = document.getElementById('wifi_password').value;
    response.soft_ap_ssid = document.getElementById('ap_ssid').value;
    response.soft_ap_password = document.getElementById('ap_password').value;
    response.soft_ap_ip_address = document.getElementById('ap_ipaddress').value;
    response.soft_ap_gateway = document.getElementById('ap_gateway').value;
    response.soft_ap_subnet = document.getElementById('ap_subnet').value;

    requestOptions.body = JSON.stringify(response);

    fetch('/wifi_config', requestOptions)
        .then(response => response.json())
        .then(function (data) {
            console.log(data);
            history.back();
        })
        .catch(function (error) {
            console.log("Fetch wifi_config failed");
        });
}

//Page load function foor wifi configuration
function initialLoadWifi() {
    fetch('/wifi_config')
        .then(function (response) {
            data = response.json();
            return data;
        })
        .then(function (data) {
            console.log(data);

            let inputField = document.getElementById('wifi_ssid');
            inputField.value = data.wifi_network_ssid;
            inputField = document.getElementById('wifi_password');
            inputField.value = data.wifi_network_password;
            inputField = document.getElementById('ap_ssid');
            inputField.value = data.soft_ap_ssid;
            inputField = document.getElementById('ap_password');
            inputField.value = data.soft_ap_password;
            inputField = document.getElementById('ap_ipaddress');
            inputField.value = data.soft_ap_ip_address;
            inputField = document.getElementById('ap_gateway');
            inputField.value = data.soft_ap_gateway;
            inputField = document.getElementById('ap_subnet');
            inputField.value = data.soft_ap_subnet;
        })
        .catch(function (error) {
            console.log("Fetch wifi_config failed");
        })
}