Create static/js/script.js

static/js/script.js

@@ -0,0 +1,502 @@
+let timer;
+let timeLeft = 1500; // 25 minutes in seconds (default work session)
+let running = false;
+let sessionId;
+let currentSessionType = 'work';
+let workDuration = 1500; // 25 minutes
+let restDuration = 300; // 5 minutes
+let streak = 0;
+let tasks = [];
+
+document.addEventListener("DOMContentLoaded", function() {
+    fetchScripts();
+    fetchTasks();
+    updateStreak();
+    setupSwipeGestures();
+    document.getElementById('work-duration').value = workDuration / 60;
+    document.getElementById('rest-duration').value = restDuration / 60;
+
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+            console.log('ServiceWorker registration failed: ', err);
+        });
+    }
+});
+
+function setupSwipeGestures() {
+    const timerElement = document.getElementById('timer-container');
+    const hammer = new Hammer(timerElement);
+
+    hammer.on('swipeleft', function() {
+        switchSessionType();
+    });
+
+    hammer.on('swiperight', function() {
+        resetTimer();
+    });
+}
+
+function startTimer() {
+    if (!running) {
+        running = true;
+        timer = setInterval(countdown, 1000);
+        fetch('/start_session', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                session_type: currentSessionType,
+                duration: currentSessionType === 'work' ? workDuration : restDuration
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            sessionId = data.session_id;
+            console.log("Session started with ID:", sessionId);
+        })
+        .catch(error => console.error('Error starting session:', error));
+    }
+}
+
+function pauseTimer() {
+    if (running) {
+        running = false;
+        clearInterval(timer);
+    }
+}
+
+function resetTimer() {
+    running = false;
+    clearInterval(timer);
+    timeLeft = currentSessionType === 'work' ? workDuration : restDuration;
+    updateTimerDisplay();
+}
+
+function countdown() {
+    if (timeLeft > 0) {
+        timeLeft--;
+        updateTimerDisplay();
+    } else {
+        running = false;
+        clearInterval(timer);
+        endSession();
+        playNotificationSound();
+        switchSessionType();
+    }
+}
+
+function updateTimerDisplay() {
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+    document.getElementById('timer').innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+}
+
+function switchSessionType() {
+    currentSessionType = currentSessionType === 'work' ? 'rest' : 'work';
+    timeLeft = currentSessionType === 'work' ? workDuration : restDuration;
+    document.getElementById('session-type').innerText = currentSessionType.charAt(0).toUpperCase() + currentSessionType.slice(1);
+    updateTimerDisplay();
+    if (currentSessionType === 'work') {
+        streak++;
+        updateStreak();
+    }
+}
+
+function endSession() {
+    fetch('/end_session', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ session_id: sessionId })
+    })
+    .then(() => {
+        console.log("Session ended successfully");
+        fetchScripts();
+    })
+    .catch(error => console.error('Error ending session:', error));
+}
+
+function saveScript() {
+    const scriptCode = document.getElementById('script').value;
+    fetch('/save_script', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ session_id: sessionId, script_code: scriptCode })
+    })
+    .then(() => {
+        console.log("Script saved successfully");
+        fetchScripts();
+    })
+    .catch(error => console.error('Error saving script:', error));
+}
+
+function fetchScripts() {
+    fetch('/scripts')
+    .then(response => response.json())
+    .then(scripts => {
+        const scriptsDiv = document.getElementById('scripts');
+        scriptsDiv.innerHTML = '<h2>Saved Sessions</h2>';
+        scripts.forEach(script => {
+            const scriptDiv = createScriptElement(script);
+            scriptsDiv.appendChild(scriptDiv);
+        });
+        updateStatistics(scripts);
+    })
+    .catch(error => console.error('Error fetching scripts:', error));
+}
+
+function createScriptElement(script) {
+    const scriptDiv = document.createElement('div');
+    scriptDiv.classList.add('script');
+    const rating = script[4] || 0;
+    const backgroundColor = `rgb(${Math.min(255, rating * 25)}, 0, 0)`;
+    scriptDiv.style.backgroundColor = backgroundColor;
+
+    scriptDiv.innerHTML = `
+        <p><strong>Session ID:</strong> ${script[0]}</p>
+        <p><strong>Type:</strong> ${script[6]}</p>
+        <p><strong>Start Time:</strong> ${script[1]}</p>
+        <p><strong>Script:</strong> <pre>${script[3] || 'No Script Saved'}</pre></p>
+        <p><strong>Rating:</strong> <span class="tomato-rating">${'🍅'.repeat(rating)}</span></p>
+        <p><strong>Comments:</strong> ${script[5] || 'No Comments'}</p>
+        <input type="number" min="0" max="10" placeholder="Rate 0-10" value="${rating}" onchange="rateScript(${script[0]}, this.value)">
+        <textarea placeholder="Add a comment" onchange="commentScript(${script[0]}, this.value)">${script[5] || ''}</textarea>
+    `;
+
+    return scriptDiv;
+}
+
+function rateScript(sessionId, rating) {
+    fetch('/rate_script', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ session_id: sessionId, rating: parseInt(rating) })
+    })
+    .then(() => {
+        console.log("Script rated successfully");
+        fetchScripts();
+    })
+    .catch(error => console.error('Error rating script:', error));
+}
+
+function commentScript(sessionId, comments) {
+    fetch('/comment_script', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ session_id: sessionId, comments: comments })
+    })
+    .then(() => {
+        console.log("Comment added successfully");
+        fetchScripts();
+    })
+    .catch(error => console.error('Error adding comment:', error));
+}
+
+function generateOtp() {
+    fetch('/generate_otp', {
+        method: 'GET'
+    })
+    .then(() => console.log("OTP generated successfully"))
+    .catch(error => console.error('Error generating OTP:', error));
+}
+
+function resetDatabase() {
+    const otp = document.getElementById('otp').value;
+    fetch('/reset_database', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ otp: otp })
+    })
+    .then(response => {
+        if (response.status === 204) {
+            console.log('Database reset successfully');
+            alert('Database reset successfully');
+            fetchScripts();
+        } else {
+            response.json().then(data => {
+                console.error('Error resetting database:', data.error);
+                alert(data.error);
+            });
+        }
+    })
+    .catch(error => console.error('Error resetting database:', error));
+}
+
+function playNotificationSound() {
+    const audio = new Audio('/static/sounds/notification.mp3');
+    audio.play();
+}
+
+function updateStreak() {
+    document.getElementById('streak').innerText = streak;
+}
+
+function updateStatistics(scripts) {
+    const totalSessions = scripts.length;
+    const totalWorkTime = scripts.reduce((acc, script) => acc + (script[6] === 'work' ? script[7] : 0), 0);
+    const averageRating = scripts.reduce((acc, script) => acc + (script[4] || 0), 0) / totalSessions || 0;
+
+    document.getElementById('total-sessions').innerText = totalSessions;
+    document.getElementById('total-work-time').innerText = formatTime(totalWorkTime);
+    document.getElementById('average-rating').innerText = averageRating.toFixed(2);
+}
+
+function formatTime(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+}
+
+function updateDurations() {
+    workDuration = parseInt(document.getElementById('work-duration').value) * 60;
+    restDuration = parseInt(document.getElementById('rest-duration').value) * 60;
+    resetTimer();
+}
+
+function addTask() {
+    const taskInput = document.getElementById('task-input');
+    const taskDescription = taskInput.value.trim();
+    if (taskDescription) {
+        fetch('/add_task', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ description: taskDescription })
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log("Task added successfully");
+            taskInput.value = '';
+            fetchTasks();
+        })
+        .catch(error => console.error('Error adding task:', error));
+    }
+}
+
+function fetchTasks() {
+    fetch('/get_tasks')
+    .then(response => response.json())
+    .then(tasks => {
+        const taskList = document.getElementById('task-list');
+        taskList.innerHTML = '';
+        tasks.forEach(task => {
+            const taskElement = createTaskElement(task);
+            taskList.appendChild(taskElement);
+        });
+    })
+    .catch(error => console.error('Error fetching tasks:', error));
+}
+
+function createTaskElement(task) {
+    const taskElement = document.createElement('li');
+    taskElement.innerHTML = `
+        <input type="checkbox" ${task.completed ? 'checked' : ''} onchange="updateTask(${task.id}, this.checked)">
+        <span>${task.description}</span>
+    `;
+    return taskElement;
+}
+
+function updateTask(taskId, completed) {
+    fetch('/update_task', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ task_id: taskId, completed: completed })
+    })
+    .then(() => {
+        console.log("Task updated successfully");
+        fetchTasks();
+    })
+    .catch(error => console.error('Error updating task:', error));
+}
+
+function exportData() {
+    fetch('/scripts')
+    .then(response => response.json())
+    .then(scripts => {
+        const csvContent = "data:text/csv;charset=utf-8,"
+            + "Session ID,Type,Start Time,End Time,Script,Rating,Comments,Duration\n"
+            + scripts.map(s => `${s[0]},"${s[6]}","${s[1]}","${s[2] || ''}","${s[3] || ''}",${s[4] || ''},${s[5] || ''},${s[7]}`).join("\n");
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement("a");
+        link.setAttribute("href", encodedUri);
+        link.setAttribute("download", "pomodoro_data.csv");
+        document.body.appendChild(link);
+        link.click();
+    })
+    .catch(error => console.error('Error exporting data:', error));
+}
+
+function login() {
+    const username = document.getElementById('username').value;
+    const password = document.getElementById('password').value;
+    fetch('/login', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ username, password })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.message === 'Login successful') {
+            document.getElementById('login-form').style.display = 'none';
+            document.getElementById('main-content').style.display = 'block';
+            if (data.is_admin) {
+                document.getElementById('admin-panel').style.display = 'block';
+            }
+        } else {
+            alert(data.error);
+        }
+    })
+    .catch(error => console.error('Error logging in:', error));
+}
+
+function register() {
+    const username = document.getElementById('reg-username').value;
+    const password = document.getElementById('reg-password').value;
+    fetch('/register', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ username, password })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.message === 'User registered successfully') {
+            alert('Registration successful. Please log in.');
+            showLoginForm();
+        } else {
+            alert(data.error);
+        }
+    })
+    .catch(error => console.error('Error registering:', error));
+}
+
+function logout() {
+    fetch('/logout', {
+        method: 'POST'
+    })
+    .then(() => {
+        document.getElementById('login-form').style.display = 'block';
+        document.getElementById('main-content').style.display = 'none';
+        document.getElementById('admin-panel').style.display = 'none';
+    })
+    .catch(error => console.error('Error logging out:', error));
+}
+
+function showRegisterForm() {
+    document.getElementById('login-form').style.display = 'none';
+    document.getElementById('register-form').style.display = 'block';
+}
+
+function showLoginForm() {
+    document.getElementById('register-form').style.display = 'none';
+    document.getElementById('login-form').style.display = 'block';
+}
+
+function updateSettings() {
+    const settings = {
+        sound_enabled: document.getElementById('sound-enabled').checked,
+        dark_mode: document.getElementById('dark-mode').checked,
+        notification_enabled: document.getElementById('notification-enabled').checked,
+        work_duration: parseInt(document.getElementById('work-duration').value),
+        rest_duration: parseInt(document.getElementById('rest-duration').value)
+    };
+
+    fetch('/update_settings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(settings)
+    })
+    .then(() => {
+        console.log("Settings updated successfully");
+        applySettings(settings);
+      })
+    .catch(error => console.error('Error updating settings:', error));
+}
+
+function applySettings(settings) {
+    if (settings.dark_mode) {
+        document.body.classList.add('dark-mode');
+    } else {
+        document.body.classList.remove('dark-mode');
+    }
+    workDuration = settings.work_duration * 60;
+    restDuration = settings.rest_duration * 60;
+    resetTimer();
+}
+
+function saveAdminSettings() {
+    const settings = {
+        sound_enabled: document.getElementById('enable-sound').checked,
+        notifications_enabled: document.getElementById('enable-notifications').checked,
+        dark_mode_enabled: document.getElementById('enable-dark-mode').checked,
+        task_manager_enabled: document.getElementById('enable-task-manager').checked,
+        statistics_enabled: document.getElementById('enable-statistics').checked
+    };
+
+    fetch('/update_admin_settings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(settings)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert('Admin settings saved successfully');
+            applyAdminSettings(settings);
+        } else {
+            alert('Failed to save admin settings');
+        }
+    })
+    .catch(error => console.error('Error saving admin settings:', error));
+}
+
+function applyAdminSettings(settings) {
+    document.getElementById('sound-enabled').disabled = !settings.sound_enabled;
+    document.getElementById('notification-enabled').disabled = !settings.notifications_enabled;
+    document.getElementById('dark-mode').disabled = !settings.dark_mode_enabled;
+    document.getElementById('task-manager').style.display = settings.task_manager_enabled ? 'block' : 'none';
+    document.getElementById('statistics').style.display = settings.statistics_enabled ? 'block' : 'none';
+}
+
+function fetchAdminSettings() {
+    fetch('/get_admin_settings')
+    .then(response => response.json())
+    .then(settings => {
+        document.getElementById('enable-sound').checked = settings.sound_enabled;
+        document.getElementById('enable-notifications').checked = settings.notifications_enabled;
+        document.getElementById('enable-dark-mode').checked = settings.dark_mode_enabled;
+        document.getElementById('enable-task-manager').checked = settings.task_manager_enabled;
+        document.getElementById('enable-statistics').checked = settings.statistics_enabled;
+        applyAdminSettings(settings);
+    })
+    .catch(error => console.error('Error fetching admin settings:', error));
+}
+
+// Call fetchAdminSettings on page load if the user is an admin
+document.addEventListener('DOMContentLoaded', () => {
+    if (document.getElementById('admin-panel').style.display !== 'none') {
+        fetchAdminSettings();
+    }
+});