piomint/app/static/app/js/home.js

// Absende Formular Verwalten
const hours = document.getElementById('stunden');
const mins = document.getElementById('minuten');
const NewEntryButton = document.getElementById('newEntrySubmitButton')
var allowToSend = false;



//
// Trigger
//

// Wenn das Dokument komplett geladen ist
document.addEventListener('DOMContentLoaded', (event) => {
    initDB().then(() => {
        console.log('IndexedDB erfolgreich initialisiert.');
        // Hier kannst du die App weiter initialisieren, z.B. Daten laden oder die UI aufbauen

        // Bildschirm mit dem Inhalt für den aktuellen Tag füllen
        getActualDataAndFillView();
        
        //loadInitialData();
    }).catch((error) => {
        console.error('Fehler bei der Initialisierung der IndexedDB:', error);
    });
});



// Änderungen überwachen damit die das Formular nicht zu früh abgesendet wird
hours.addEventListener('input', () => {
    checkInput();
})    
mins.addEventListener('input', () => {
    checkInput();
})    
document.getElementById('sonstigesInput').addEventListener('input', () => {
    checkInput();
})    

// Einstellungen wenn Neuer Eintrag erstellt wird
NewEntryButton.addEventListener('click', () => {

    if (allowToSend === true) {
        var type = 1

        // Abfragen der Checkboxen
        const ldcCheck = document.getElementById('ldcCheck').checked
        if (ldcCheck) {
            type = 2 
            document.getElementById('ldcCheck').checked = false
        } else if (document.getElementById('sonstigesCheck').checked) {
            type = 3;
            document.getElementById('sonstigesCheck').checked = false;
            sonstigesText.style.display = 'none';
        }

        // Berechnen der Duration
        const duration = (parseInt(hours.value)*60) + parseInt(mins.value)

        const newEntryData = {
            date: document.getElementById('datum').value,
            duration: duration,
            type: type,
            status: 1,
            sondertext: document.getElementById('sonstigesInput').value,
        }

        addEntry(newEntryData).then((id) => {
            // console.log('Eintrag hinzugefügt mit ID:', id);
            location.reload()
        });

        hours.value = null
        mins.value = null
        document.getElementById('sonstigesInput').value = null
        checkInput()
    }
})


async function getActualDataAndFillView() {
    try {

        // Aktuelles Datum
        const currentDate = new Date();

        // Filter funktion aufrufen und entsprechend mit dem aktuellen Datum füllen
        const filteredEntries = await filterEntriesByMonthYear(currentDate.getMonth() + 1, currentDate.getFullYear());

        // Tabelle mit den aktuellen informationen füllen (funktion triggern und Daten übergeben)
        fillTableWithEntries(filteredEntries)

        // Ausgabe der Daten in den Log für DEV möglich
        // console.log('Gefilterte Einträge für September 2024:', filteredEntries);

        // MonatsCard füllen

        // Aktueller Monatsstand an Stunden
        const GesamtStundenMonat = formatDuration(sumDurations(filteredEntries,null,true), true)
        document.getElementById('monthHours').innerText = GesamtStundenMonat
        document.getElementById('prBarMonth').style.width = `${(100/50)*parseInt(GesamtStundenMonat)}%`
        
        // Aktueller Rest an Stunden
        const rest = 50 - parseInt(GesamtStundenMonat)
        if (rest > 0) {
            document.getElementById('monthRest').innerText = rest
        } else {
            document.getElementById('monthRest').innerText = 0
        }

        // Aufteilunge Stunden nach Dienst und LDC
        document.getElementById('monthHourService').innerText = formatDuration(sumDurations(filteredEntries,1,true), true)
        document.getElementById('monthHourLDC').innerText = formatDuration(sumDurations(filteredEntries,2,true), true)
        document.getElementById('monthHourOther').innerText = formatDuration(sumDurations(filteredEntries,3,true), true)

        // Jahres Ansicht füllen
        var yearData = await filterEntriesByMonthYear(null, currentDate.getFullYear());
        yearData = formatDuration(sumDurations(yearData, null, true), true)
        document.getElementById('yearHours').innerText = yearData
        document.getElementById('yearRest').innerText = 600 - parseInt(yearData)
        document.getElementById('prBarYear').style.width = `${Math.round((100/600)*parseInt(yearData))}%`

    } catch (error) {
        console.error('Fehler bei der Initialisierung oder Filterung:', error);
    }
}



//
// NEUES EINTRAG FORMULAR
//

// Checkboxen-Verhalten: Nur eine Checkbox kann ausgewählt werden
var ldcCheck = document.getElementById('ldcCheck');
var sonstigesCheck = document.getElementById('sonstigesCheck');
var sonstigesText = document.getElementById('sonstiges-text');
var sonstigesInput = document.getElementById('sonstigesInput');

ldcCheck.addEventListener('change', function() {
    if (ldcCheck.checked) {
        sonstigesCheck.checked = false;
        sonstigesText.style.display = 'none';
        sonstigesInput.removeAttribute('required'); // Entferne required, wenn "Sonstiges" abgewählt ist
    }
});

sonstigesCheck.addEventListener('change', function() {
    checkInput();
    if (sonstigesCheck.checked) {
        ldcCheck.checked = false;
        sonstigesText.style.display = 'block';
        sonstigesInput.setAttribute('required', 'required'); // Setze required, wenn "Sonstiges" ausgewählt ist
    } else {
        sonstigesText.style.display = 'none';
        sonstigesInput.removeAttribute('required'); // Entferne required, wenn "Sonstiges" abgewählt ist
    }
});

// function newEntryAfterTimer(timerStamp) {
//     const seconds = parseInt(timerStamp)
//     const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
//     const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
//     const secs = String(seconds % 60).padStart(2, '0');
//     document.getElementById('openNewEntryForm').click()
//     document.getElementById('stunden').value = hours;
//     document.getElementById('minuten').value = minutes;
//     console.log(secs)
// }



// 
// BEARBEITUNGS FORMULAR
// 

document.getElementById('closeEditWindowButton').addEventListener('click', () => {
    
    // console.log('close edit window')
});



document.getElementById('editEntrySubmitButton').addEventListener('click', () => {
    const ToEditID = document.getElementById('editEntryID').value
    const editHours = document.getElementById('editStunden').value
    const editMins = document.getElementById('editMinuten').value

    // console.log(`ID: ${ToEditID}, Hours: ${editHours}, Minutes: ${editMins}`)

    var type = 1

    // Abfragen der Checkboxen
    const ldcCheck = document.getElementById('editldcCheck').checked
    if (ldcCheck) {
        type = 2 
        document.getElementById('editldcCheck').checked = false
    } else if (document.getElementById('editsonstigesCheck').checked) {
        type = 3;
        document.getElementById('editsonstigesCheck').checked = false;
        sonstigesText.style.display = 'none';
    }

    updateEntry(parseInt(ToEditID), {
        date: document.getElementById('editDatum').value,
        duration: (parseInt(editHours)*60) + parseInt(editMins),
        type: type,
        status: 1,
        sondertext: document.getElementById('editsonstigesInput').value,
    }).then(() => {
        // console.log('Eintrag aktualisiert.');
        location.reload()
    });
})

document.getElementById('DeleteEntryButton').addEventListener('click', () => {
    const ToEditID = document.getElementById('editEntryID').value

    deleteEntry(parseInt(ToEditID)).then(() => {
        console.log(`Löschen von Eintrag: ${ToEditID}`);
        location.reload()
    })

})



//
// FUNKTIONEN LIBARY
//

function checkInput() {
    // Eingabe feld für Beschreibung leeren wenn sonstiges abgewählt wird
    if (!sonstigesCheck.checked) {
        sonstigesInput.value = null;
    }
    // Debug ausgabe er Werte
    // console.log(`Check: ${sonstigesCheck.checked} - Input: ${sonstigesInput.value} - Stunden: ${hours.value} - Min: ${mins.value}`)

    // Berechtigungen durch gehen damit Button verfügbar und Form abgesendet werden kann
    if ((sonstigesCheck.checked && sonstigesInput.value !== "") || !(sonstigesCheck.checked)) {
        // Debug Ausgabe für Bedingungsstufen
        // console.log("Erste Bedingung: TRUE")
        if (hours.value && mins.value) {
            // Debug Ausgabe für Bedingungsstufen
            // console.log("Zweite Bedingung: TRUE")
            if (!allowToSend) {
                // Debug Ausgabe für Bedingungsstufen
                // console.log("Dritte Bedingung: TRUE")
                allowToSend = true;
                NewEntryButton.classList.remove('disabled');
                NewEntryButton.classList.replace('btn-light', 'btn-primary');
            }
        } else if (allowToSend) {
            allowToSend = false;
            NewEntryButton.classList.add('disabled');
            NewEntryButton.classList.replace('btn-primary', 'btn-light');
        }
    } else if (allowToSend) {
        allowToSend = false;
        NewEntryButton.classList.add('disabled');
        NewEntryButton.classList.replace('btn-primary', 'btn-light');
    }
}