piomint/app/static/app/js/timer.js

let timerInterval;
let elapsedTime = 0;  // Zeit, die bereits vergangen ist, bevor der Timer pausiert wurde
let isRunning = false;  // Zustand des Timers (läuft oder pausiert)
const timerDisplay = document.getElementById('timerDisplay');
const secondsDisplay = document.getElementById('secondsDisplay');
const startButton = document.getElementById('startTimer');
const resetButton = document.getElementById('resetTimer');
const pauseButton = document.getElementById('pauseTimer');

// Funktion zum Anzeigen der Zeit
function displayTime(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    timerDisplay.textContent = 
        String(hours).padStart(2, '0') + ":" +
        String(minutes).padStart(2, '0');
    secondsDisplay.textContent =
        ":" +
        String(secs).padStart(2, '0');
};

function timerIsRunning() {
    document.getElementById('startTimer').classList.add('d-none')
    document.getElementById('pauseTimer').classList.remove('d-none')
    document.getElementById('resetTimer').classList.remove('d-none')
    document.getElementById('timerDisplay').style.color = 'rgb(131,169,96)'
}

function timerIsReset() {
    document.getElementById('startTimer').classList.remove('d-none')
    document.getElementById('pauseTimer').classList.add('d-none')
    document.getElementById('resetTimer').classList.add('d-none')
    document.getElementById('timerDisplay').style.color = 'black'
}

function timerIsPause() {
    document.getElementById('startTimer').classList.remove('d-none')
    document.getElementById('pauseTimer').classList.add('d-none')
    document.getElementById('timerDisplay').style.color = 'rdb(43,100,110)'
}


// Timer starten und Startzeit im localStorage speichern
startButton.addEventListener('click', () => {
    if (!isRunning) {
        const startTime = Date.now() - elapsedTime * 1000;  // Berücksichtige die bereits vergangene Zeit
        localStorage.setItem('startTime', startTime);
        localStorage.setItem('elapsedTime', elapsedTime);  // Speichere auch die vergangene Zeit
        startTimer(startTime);
        timerIsRunning();
        isRunning = true;
    }
});

// Timer pausieren
pauseButton.addEventListener('click', () => {
    if (isRunning) {
        clearInterval(timerInterval);
        timerIsPause();
        isRunning = false;
        const savedStartTime = localStorage.getItem('startTime');
        if (savedStartTime) {
            elapsedTime = Math.floor((Date.now() - savedStartTime) / 1000);  // Berechne die vergangene Zeit
        }
        localStorage.setItem('elapsedTime', elapsedTime);  // Speichere die vergangene Zeit
    }
});

function clearTimer(){
    clearInterval(timerInterval);
    elapsedTime = 0;
    timerIsReset();
    isRunning = false;
    localStorage.removeItem('startTime');
    localStorage.removeItem('elapsedTime');
    displayTime(0);
}


// Timer zurücksetzen und Speicher leeren
resetButton.addEventListener('click', () => {

    const timerStamp = Math.floor((Date.now() - localStorage.getItem('startTime')) / 1000);
    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');

    if (minutes > 0) {
        document.getElementById('openNewEntryForm').click()
        document.getElementById('stunden').value = hours;
        document.getElementById('minuten').value = minutes;
        checkInput()
        document.getElementById('newEntrySubmitButton').addEventListener('click', () => {
            clearTimer();
        })
    } else {
        clearTimer()
    }
});



// Timer-Funktion, die die vergangene Zeit seit dem Start berechnet
function startTimer(startTime) {
    clearInterval(timerInterval);  // Vorherigen Timer stoppen, falls vorhanden
    timerInterval = setInterval(() => {
        const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
        displayTime(elapsedSeconds);
    }, 1000);
}

// Überprüfen, ob ein Timer beim Laden der Seite bereits läuft
window.addEventListener('load', () => {
    const savedStartTime = localStorage.getItem('startTime');
    elapsedTime = parseInt(localStorage.getItem('elapsedTime')) || 0;
    if (savedStartTime && !isRunning) {
        startTimer(parseInt(savedStartTime));
        timerIsRunning();
        isRunning = true;
    }
});