script.js

// written by chibbi
const red = "white";
const green = "#8FBC8F";

function containsTimerList(cookie) {
    return cookie.includes("timerlist");
}

function getTimerList() {
    if (document.cookie.split(";").find(containsTimerList) == undefined || document.cookie.split(";").find(containsTimerList) == null) {
        return "{}";
    }
    return document.cookie.split(";").find(containsTimerList).replace("timerlist=", "");
}

function loadCountdowns() {
    const list = JSON.parse(getTimerList());
    for (const timerID in list) {
        countDown(list[timerID], timerID);
    }
}

function loadCheckboxes() {
    // this section loads every cookie for every timer
    const list = JSON.parse(getTimerList());
    for (const timerID in list)
        loadCheckbox(timerID);
}

function loadCheckbox(visibilityBoxName) {
    const buttonID = "vi" + visibilityBoxName;
    const visibilityBox = visibilityBoxName + "c";
    // basically searches the cookie string after the given name and if it is
    // false
    if (document.cookie.includes("checkBox_" + visibilityBox + "=false")) {
        document.getElementById(visibilityBox).style.display = "none";
        document.getElementById(buttonID).style.backgroundColor = red;
        // or true
    } else if (document.cookie.includes("checkBox_" + visibilityBox + "=true")) {
        document.getElementById(visibilityBox).style.display = "block";
        document.getElementById(buttonID).style.backgroundColor = green;
        // if it is neither false nor true, it is made true by default
    } else {
        document.getElementById(visibilityBox).style.display = "block";
        document.getElementById(buttonID).style.backgroundColor = green;
        document.cookie = "checkBox_" + visibilityBox + "=true;expires=Mon, 04 Jul 2022 22:44:25 UTC";
    }
}

function countDown(timer, timerID) {
    const countDownDate = new Date(timer.date).getTime();
    const counterName = timer.name;
    const countdownsdiv = document.getElementById("countdowns");
    countdownsdiv.innerHTML += '<div class="cdc" id="' + timerID + 'c">' +
        '<p class="cdt">' + counterName + ' in:</p>' +
        '<p class="cd" id="' + timerID + '"></p>' +
        '<input type="button" value="Delete Countdown"' +
        'onclick="removeCountdown(\'' + timerID + '\')" id="rm' + timerID + '" />' +
        '</div>';
    const checkboxesdiv = document.getElementById("checkboxes");
    checkboxesdiv.innerHTML += '<input type="button" value="' + timerID + '"' +
        'onclick="toggleVisibility(\'' + timerID + '\')" id="vi' + timerID + '" style="background-color: rgb(143, 188, 143);"/>';
    // Update the count down every 1 second
    const countdownInterval = setInterval(function () {
        // Get current date and time
        const then = new Date(countDownDate);
        const duration = countDownDate - new Date().getTime();
        const durationDate = new Date(duration);
        console.log(duration);
        console.log((duration / (1000 * 60 * 60 * 24)));
        console.log(((duration / (1000 * 60 * 60 * 24)) % 1 ));
        // If Timer does not exist any more, delete it:
        if (document.getElementById(timerID) == null) {
            clearInterval(countdownInterval);
        } // If the countdown is over, show it
        else if (duration < 0) {
            clearInterval(countdownInterval);
            document.getElementById(timerID).textContent = "----------";
        } else {
            // Output the result in an element with id=textID
            document.getElementById(timerID).textContent =
                ((duration / (1000 * 60 * 60 * 24))).toString().split(".")[0] + " Tage, " +
                (((duration / (1000 * 60 * 60 * 24)) % 1 ) * 24).toString().split(".")[0] + " Stunden, " +
                durationDate.getMinutes() + " Minuten, " +
                durationDate.getSeconds() + " Sekunden " + " - (" +
                then.toLocaleString() + ")";
        }
    }, 500);
    document.getElementById(timerID + "c").style.backgroundColor = timer.background;
}

function addCountdown(backgroundColor, name, endTime) {
    // TODO: trigger error if countdown already exists
    endTime = new Date(endTime)
    let list = JSON.parse(getTimerList());
    if (list[name] != null) {
        return;
    }
    list[name] = { "name": name, "date": endTime, "background": backgroundColor };
    document.cookie = "timerlist=" + JSON.stringify(list) + ";expires=" + new Date(endTime.setFullYear(endTime.getFullYear() + 1)).toUTCString();
    // TODO:/FIXME: HOW AND WHY is
    // list[name]
    // NOT EQUAL TO
    // JSON.parse(getTimerList())[name]
    countDown(JSON.parse(getTimerList())[name], name);
}

function changeCountdown(backgroundColor, name, endTime) {
    // TODO: trigger error if countdown does not exist
    // this is the easiest solution
    removeCountdown(name);
    addCountdown(backgroundColor, name, endTime);
}

function removeCountdown(timerID = "Temp") {
    let list = JSON.parse(getTimerList());
    delete list[timerID];
    document.cookie = "timerlist=" + JSON.stringify(list) + ";expires=" + new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toUTCString();
    document.getElementById(timerID + "c").remove();
    document.getElementById("vi" + timerID).remove();
}

function addTimerViaInputs() {
    // TODO: trigger error if something is not filled out
    const name = document.getElementById("timername").value;
    const date = document.getElementById("timerdate").value;
    const color = document.getElementById("timercolor").value;
    if (name == "") {
        addCountdown(color, "Temp", new Date(date));
    } else {
        addCountdown(color, name, new Date(date));
    }
}

let expanded = false;
function showCheckboxes() {
    const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
        checkboxes.style.display = "flex";
        expanded = true;
    } else {
        checkboxes.style.display = "none";
        expanded = false;
    }
}

function toggleVisibility(counterName) {
    // Checks if the given Text and Counter should be visible
    const buttonID = "vi" + counterName;
    const counterID = counterName + "c";
    if (document.getElementById(counterID).style.display == "none") {
        // if yes, it will show them
        document.getElementById(counterID).style.display = "block";
        document.getElementById(buttonID).style.backgroundColor = green;
        document.cookie = "checkBox_" + counterID + "=true;expires=Mon, 04 Jul 2022 22:44:25 UTC";
    } else {
        // if not, it will not show them
        document.getElementById(counterID).style.display = "none";
        document.getElementById(buttonID).style.backgroundColor = red;
        document.cookie = "checkBox_" + counterID + "=false;expires=Mon, 04 Jul 2022 22:44:25 UTC";
    }
}

function debug() {
    const timerList = {
        "d": { "name": "Deutsch", "date": "May 4, 2022 10:00:00", "background": "rgb(149, 165, 244)" },
        "w": { "name": "Wirtschaft", "date": "May 6, 2022 10:00:00", "background": "#a29fcc" },
        "test": { "name": "testii", "date": new Date(new Date().setMinutes(new Date().getMinutes() + 3000)), "background": "rgb(234,54,43)" }
    };
    document.cookie = "timerlist=" + JSON.stringify(timerList) + ";expires=" + new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toLocaleString();
}