BirdDeterrentSystem/Html/html/setting.js

// script for setting.html start here
async function onload(){
    const resp = await fetch("/setting");
    if (resp.status === 200) {
        /**
         * @type {Object}
         * @property {String[]} AudioFiles
         * @property {String} AudioFile1
         * @property {String} AudioFile2
         * @property {String} AudioFile3
         * @property {String} AudioFile4
         * @property {String} AudioFile5
         * @property {String} CameraIP
         * @property {String} CameraPort
         * @property {String} CameraUsername
         * @property {String} CameraPassword
         * @property {String} LoginUsername
         * @property {String} LoginPassword
         */
        const data = await resp.json();
        fill_select(1, data["AudioFiles"]);
        fill_select(2, data["AudioFiles"]);
        fill_select(3, data["AudioFiles"]);
        fill_select(4, data["AudioFiles"]);
        fill_select(5, data["AudioFiles"]);

        $("#preset1").val(data["AudioFile1"]);
        $("#preset2").val(data["AudioFile2"]);
        $("#preset3").val(data["AudioFile3"]);
        $("#preset4").val(data["AudioFile4"]);
        $("#preset5").val(data["AudioFile5"]);

        $("#setting_ip").val(data["CameraIP"]);
        $("#setting_port").val(data["CameraPort"]);
        $("#setting_username").val(data["CameraUsername"]);
        $("#setting_password").val(data["CameraPassword"]);

        $("#login_username").val(data["LoginUsername"]);
        $("#edit_password").val(data["LoginPassword"]);
        $("#confirm_password").val(data["LoginPassword"]);
    }
}

/**
 * Fill select with values
 * @param {number} index start from 1
 * @param {String[]} values array of values
 */
function fill_select(index, values){

    /**
     *
     * @type {HTMLSelectElement}
     */
    let preset = document.getElementById("preset"+index);
    preset.innerHTML = "";

    if (values!=null && values.length>0){
        // add empty option
        let option = document.createElement("option");
        option.value = "";
        option.innerText = "";
        preset.appendChild(option);

        for (let i = 0; i < values.length; i++) {
            const element = values[i];
            let option = document.createElement("option");
            option.value = element;
            option.innerText = element;
            preset.appendChild(option);
        }
    }
}

function cameraPassword() {
    const passwordField = document.getElementById('setting_password');
    const icon = document.getElementById('icon_camera');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function showPassword() {
    const passwordField = document.getElementById('edit_password');
    const icon = document.getElementById('icon_password');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function showConfirm() {
    const passwordField = document.getElementById('confirm_password');
    const icon = document.getElementById('icon_confirm');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function save_audio(){
    let preset1 = $('#preset1').val();
    let preset2 = $('#preset2').val();
    let preset3 = $('#preset3').val();
    let preset4 = $('#preset4').val();
    let preset5 = $('#preset5').val();

    if (confirm("Are you sure want to change Audio Preset ?")){
        fetch("/setting/audiofile", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: new URLSearchParams({preset1: preset1, preset2: preset2, preset3: preset3, preset4: preset4, preset5: preset5})
        }).then(resp => {
            if (resp.status === 200) {
                alert("Success");
            } else {
                resp.text().then(text=>alert("Failed to change Audio Preset : "+text));
            }
        });
    }
}

function save_camera(){
    let ip = $('#setting_ip').val();
    let port = $('#setting_port').val();
    let username = $('#setting_username').val();
    let password = $('#setting_password').val();

    if (confirm("Are you sure want to change Camera Information ?")){
        fetch("/setting/camera", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: new URLSearchParams({ip: ip, port: port, username: username, password: password})
        }).then(resp => {
            if (resp.status === 200) {
                alert("Success");
            } else {
                resp.text().then(text => {
                    alert("Failed to change Camera Information : "+text);
                });

            }

        });
    }
}

function save_login(){
    let username = $('#login_username').val();
    let password = $('#edit_password').val();
    let confirmpassword = $('#confirm_password').val();
    if (username.length === 0){
        alert("Username cannot be empty");
        return;
    }
    if (password.length === 0){
        alert("Password cannot be empty");
        return;
    }
    if (password !== confirmpassword){
        alert("Password not match");
        return;
    }

    if (confirm("Are you sure want to change Web Login Information ?")){
        fetch("/setting/weblogin", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: new URLSearchParams({username: username, password: password})
        }).then(resp => {
            if (resp.status === 200) {
                alert("Success");
            } else {
                resp.text().then(text => {
                    alert("Failed to change Web Login Information : "+text);
                });
            }
        })
    }
}