Update Dockerfile, docker-compose, and package.json; add versioning script and styles for version display

Fix #21

Dockerfile

@@ -1,23 +1,24 @@
 # Use the official Node.js image as the base image
 FROM node:14
 
-# Set the working directory
+# Create app directory
 WORKDIR /usr/src/app
 
-# Copy package.json and package-lock.json
+# Install app dependencies
 COPY package*.json ./
-
-# Install dependencies
 RUN npm install
 
-# Copy the rest of the application code
+# Copy app source code
 COPY . .
 
+# Run the build script to update the version number
+RUN node build.js
+
 # Expose the port the app runs on
 EXPOSE 3044
 
 # Set the DEBUG environment variable
 ENV DEBUG=app
 
-# Command to run the application
+# Command to run the app
 CMD ["node", "server.js"]

build.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+
+// Generate version number with timestamp
+const version = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15);
+
+// Read the HTML file
+const indexPath = path.join(__dirname, 'public', 'index.html');
+let indexHtml = fs.readFileSync(indexPath, 'utf8');
+
+// Replace the version placeholder with the generated version number
+indexHtml = indexHtml.replace(/<!-- VERSION_PLACEHOLDER -->/g, `Version: ${version}`);
+
+// Write the updated HTML back to the file
+fs.writeFileSync(indexPath, indexHtml);
+
+console.log(`Version number updated to: ${version}`);

docker-compose.yml

@@ -2,7 +2,6 @@ version: '3.8'
 
 services:
   org-todo-pwa:
-    image: org-todo-pwa
     build: .
     ports:
       - "3044:3044"
@@ -26,5 +25,4 @@ services:
         - "traefik.http.routers.plan.tls=true"
         - "traefik.http.routers.plan.tls.certresolver=myhttpchallenge"
         - "traefik.http.routers.plan.rule=Host(`todo.casablanca.wahlberg.se`)"
-        - "traefik.http.routers.plan.entrypoints=websecure"
-        
+        - "traefik.http.routers.plan.entrypoints=websecure"

package.json

@@ -1,24 +1,25 @@
 {
-  "name": "pwa",
+  "name": "org-todo-pwa",
   "version": "1.0.0",
   "description": "",
-  "main": "app.js",
+  "main": "main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node build.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "basic-auth": "^2.0.1",
-    "body-parser": "^1.20.3",
-    "connect-sqlite3": "^0.9.15",
-    "cookie-parser": "^1.4.7",
-    "debug": "^4.4.0",
-    "dotenv": "^16.4.7",
-    "express": "^4.21.2",
-    "express-session": "^1.18.1",
+    "body-parser": "^1.19.0",
+    "connect-sqlite3": "^0.9.11",
+    "cookie-parser": "^1.4.5",
+    "debug": "^4.3.1",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "express-session": "^1.17.1",
     "fs": "^0.0.1-security",
     "winston": "^3.17.0"
-  }
+    }
 }

public/app.js

@@ -1,237 +0,0 @@
-if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/service-worker.js')
-            .then(registration => {
-                console.log('ServiceWorker registration successful with scope: ', registration.scope);
-
-                registration.onupdatefound = () => {
-                    const installingWorker = registration.installing;
-                    installingWorker.onstatechange = () => {
-                        if (installingWorker.state === 'installed') {
-                            if (navigator.serviceWorker.controller) {
-                                // New update available
-                                console.log('New content is available; please refresh.');
-                                if (confirm('New version available. Do you want to update?')) {
-                                    window.location.reload();
-                                }
-                            } else {
-                                // Content is cached for offline use
-                                console.log('Content is cached for offline use.');
-                            }
-                        }
-                    };
-                };
-            })
-            .catch(error => {
-                console.log('ServiceWorker registration failed: ', error);
-            });
-    });
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    const loginForm = document.getElementById('loginForm');
-    const loginContainer = document.getElementById('loginContainer');
-    const appContainer = document.getElementById('appContainer');
-    const loginMessage = document.getElementById('loginMessage');
-    const logoutButton = document.getElementById('logoutButton');
-    const taskForm = document.getElementById('taskForm');
-    const sidenav = document.querySelector('.sidenav');
-
-    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
-        console.error('One or more elements are missing in the DOM');
-        return;
-    }
-
-    // Initialize Materialize components
-    M.Sidenav.init(sidenav);
-
-    // Calculate tomorrow's date
-    const today = new Date();
-    const tomorrow = new Date(today);
-    tomorrow.setDate(today.getDate() + 1);
-
-    // Initialize datepicker with tomorrow as the default date
-    M.Datepicker.init(document.querySelectorAll('.datepicker'), {
-        format: 'yyyy-mm-dd',
-        defaultDate: tomorrow,
-        setDefaultDate: true,
-        firstDay: 1
-    });
-
-    // Initialize timepicker
-    M.Timepicker.init(document.querySelectorAll('.timepicker'), {
-        twelveHour: false // Use 24-hour format
-    });
-
-    // Check if user is already logged in
-    fetch('/check-session')
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (data.loggedIn) {
-                loginContainer.style.display = 'none';
-                appContainer.style.display = 'block';
-                loadTags();
-            } else {
-                loginContainer.style.display = 'block';
-                appContainer.style.display = 'none';
-            }
-        })
-        .catch(error => {
-            console.error('Error checking session:', error);
-            loginMessage.textContent = 'Error checking session. Please try again later.';
-        });
-
-    loginForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-
-        const username = document.getElementById('username').value;
-        const password = document.getElementById('password').value;
-
-        // Send credentials to the server for validation
-        fetch('/login', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Basic ' + btoa(username + ':' + password)
-            }
-        })
-        .then(response => {
-            if (response.ok) {
-                sessionStorage.setItem('loggedIn', 'true');
-                loginContainer.style.display = 'none';
-                appContainer.style.display = 'block';
-                loadTags();
-            } else {
-                loginMessage.textContent = 'Invalid username or password';
-            }
-        })
-        .catch(error => {
-            loginMessage.textContent = 'Error logging in';
-        });
-    });
-
-    logoutButton.addEventListener('click', function() {
-        fetch('/logout', {
-            method: 'POST'
-        })
-        .then(response => {
-            if (response.ok) {
-                sessionStorage.removeItem('loggedIn');
-                loginContainer.style.display = 'block';
-                appContainer.style.display = 'none';
-            }
-        })
-        .catch(error => {
-            console.error('Error logging out:', error);
-        });
-    });
-
-    taskForm.addEventListener('submit', async function(e) {
-        e.preventDefault();
-
-        // Get form values
-        const subject = document.getElementById('subject').value;
-        const description = document.getElementById('description').value;
-        const scheduled = document.getElementById('scheduled').value;
-        const time = document.getElementById('time').value;
-        const tagsInput = document.getElementById('tags').value;
-        const tags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag).join(':');
-
-        // Combine scheduled date and time if time is provided
-        const scheduledDateTime = time ? `${scheduled}T${time}:00` : scheduled;
-
-        // Structure data for Org mode
-        const taskData = {
-            subject: tags ? `${subject} :${tags}:` : subject,
-            description,
-            scheduled: scheduledDateTime
-        };
-
-        // Save tags to server
-        const savedTags = JSON.parse(localStorage.getItem('tags')) || [];
-        const newTags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag && !savedTags.includes(tag));
-        const allTags = [...savedTags, ...newTags];
-        localStorage.setItem('tags', JSON.stringify(allTags));
-        fetch('/save-tags', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ tags: allTags })
-        }).then(() => {
-            loadTags(); // Force refresh tags after saving
-        });
-
-        // Save task to server or IndexedDB if offline
-        if (navigator.onLine) {
-            try {
-                const response = await fetch('/add-task', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(taskData)
-                });
-                const data = await response.json();
-                document.getElementById('responseMessage').textContent = data.message;
-                taskForm.reset(); // Reset the form after saving the task
-            } catch (error) {
-                if (error.status === 401) {
-                    sessionStorage.removeItem('loggedIn');
-                    loginContainer.style.display = 'block';
-                    appContainer.style.display = 'none';
-                } else {
-                    document.getElementById('responseMessage').textContent = "Error saving task!";
-                }
-            }
-        } else {
-            try {
-                // Save task to IndexedDB
-                const db = await idb.openDB('org-todo-pwa', 1, {
-                    upgrade(db) {
-                        db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
-                    }
-                });
-                await db.add('tasks', taskData);
-                document.getElementById('responseMessage').textContent = "Task saved offline!";
-                taskForm.reset(); // Reset the form after saving the task
-            } catch (error) {
-                document.getElementById('responseMessage').textContent = "Error saving task offline!";
-                console.error('Error saving task offline:', error);
-            }
-        }
-    });
-
-    // Load tags from server and initialize autocomplete
-    function loadTags() {
-        fetch('/get-tags')
-            .then(response => response.json())
-            .then(tags => {
-                localStorage.setItem('tags', JSON.stringify(tags));
-                const autocompleteData = {};
-                tags.forEach(tag => {
-                    autocompleteData[tag] = null; // Materialize autocomplete requires a key-value pair
-                });
-
-                const tagsInput = document.getElementById('tags');
-                M.Autocomplete.init(tagsInput, {
-                    data: autocompleteData,
-                    onAutocomplete: function(selectedTag) {
-                        const currentTags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag);
-                        if (!currentTags.includes(selectedTag)) {
-                            currentTags.push(selectedTag);
-                            tagsInput.value = currentTags.join(', ');
-                        }
-                    }
-                });
-            })
-            .catch(error => {
-                console.error('Error loading tags:', error);
-            });
-    }
-});

public/css/style.css

@@ -16,7 +16,17 @@ h1 {
 
 #responseMessage {
     text-align: center;
-    color: green;}
+    color: green;
+}
+
+/* Add styles for the version number */
+#version {
+    color: #888; /* Subtle gray color */
+    font-size: 0.8em; /* Smaller font size */
+    text-align: right; /* Align text to the right */
+    margin: 0; /* Remove any default margin */
+    padding: 0; /* Remove any default padding */
+}
 
 .menu {
     position: relative;

public/index.html

@@ -1,16 +1,12 @@
 <!DOCTYPE html>
-<html lang="sv-SE">
+<html lang="sv">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Fredriks todos</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <link rel="stylesheet" href="style.css">
-    <link rel="manifest" href="manifest.json" />
-
-    <!-- Flatpickr for dates -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="manifest" href="manifest.json">
 </head>
 <body>
     <div id="loginContainer" class="container">
@@ -65,10 +61,15 @@
             </div>
             <button class="btn waves-effect waves-light" type="submit">Spara uppgift</button>
             <p id="responseMessage"></p>
+            <p id="version"><!-- VERSION_PLACEHOLDER --></p>
         </form>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-    <script src="app.js"></script>
+    <script src="js/auth.js" type="module"></script>
+    <script src="js/tasks.js" type="module"></script>
+    <script src="js/tags.js" type="module"></script>
+    <script src="js/utils.js" type="module"></script>
+    <script src="js/main.js" type="module"></script>
 </body>
 </html>

public/js/auth.js

@@ -0,0 +1,25 @@
+export function checkSession() {
+    return fetch('/check-session')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        });
+}
+
+export function login(username, password) {
+    return fetch('/login', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Basic ' + btoa(username + ':' + password)
+        }
+    });
+}
+
+export function logout() {
+    return fetch('/logout', {
+        method: 'POST'
+    });
+}

public/js/main.js

@@ -0,0 +1,197 @@
+import { checkSession, login, logout } from './auth.js';
+import { saveTask } from './tasks.js';
+import { saveTags, loadTags } from './tags.js';
+
+navigator.serviceWorker.register('/service-worker.js')
+    .then(registration => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+
+        registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            installingWorker.onstatechange = () => {
+                if (installingWorker.state === 'installed') {
+                    if (navigator.serviceWorker.controller) {
+                        // New update available
+                        console.log('New content is available; please refresh.');
+                        if (confirm('New version available. Do you want to update?')) {
+                            window.location.reload();
+                        }
+                    } else {
+                        // Content is cached for offline use
+                        console.log('Content is cached for offline use.');
+                    }
+                }
+            };
+        };
+    })
+    .catch(error => {
+        console.log('ServiceWorker registration failed: ', error);
+    });
+
+document.addEventListener('DOMContentLoaded', function() {
+    const loginForm = document.getElementById('loginForm');
+    const loginContainer = document.getElementById('loginContainer');
+    const appContainer = document.getElementById('appContainer');
+    const loginMessage = document.getElementById('loginMessage');
+    const logoutButton = document.getElementById('logoutButton');
+    const taskForm = document.getElementById('taskForm');
+    const sidenav = document.querySelector('.sidenav');
+
+    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
+        console.error('One or more elements are missing in the DOM');
+        return;
+    }
+
+    // Initialize Materialize components
+    M.Sidenav.init(sidenav);
+
+    // Calculate tomorrow's date
+    const today = new Date();
+    const tomorrow = new Date(today);
+    tomorrow.setDate(today.getDate() + 1);
+
+    // Initialize datepicker with tomorrow as the default date
+    M.Datepicker.init(document.querySelectorAll('.datepicker'), {
+        format: 'yyyy-mm-dd',
+        defaultDate: tomorrow,
+        setDefaultDate: true,
+        firstDay: 1
+    });
+
+    // Initialize timepicker
+    M.Timepicker.init(document.querySelectorAll('.timepicker'), {
+        twelveHour: false // Use 24-hour format
+    });
+
+    // Check if user is already logged in
+    checkSession()
+        .then(data => {
+            if (data.loggedIn) {
+                loginContainer.style.display = 'none';
+                appContainer.style.display = 'block';
+                loadTags().then(tags => {
+                    localStorage.setItem('tags', JSON.stringify(tags));
+                    const autocompleteData = {};
+                    tags.forEach(tag => {
+                        autocompleteData[tag] = null; // Materialize autocomplete requires a key-value pair
+                    });
+
+                    const tagsInput = document.getElementById('tags');
+                    M.Autocomplete.init(tagsInput, {
+                        data: autocompleteData,
+                        onAutocomplete: function(selectedTag) {
+                            const currentTags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag);
+                            if (!currentTags.includes(selectedTag)) {
+                                currentTags.push(selectedTag);
+                                tagsInput.value = currentTags.join(', ');
+                            }
+                        }
+                    });
+                });
+            } else {
+                loginContainer.style.display = 'block';
+                appContainer.style.display = 'none';
+            }
+        })
+        .catch(error => {
+            console.error('Error checking session:', error);
+            loginMessage.textContent = 'Error checking session. Please try again later.';
+        });
+
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const username = document.getElementById('username').value;
+        const password = document.getElementById('password').value;
+
+        login(username, password)
+            .then(response => {
+                if (response.ok) {
+                    sessionStorage.setItem('loggedIn', 'true');
+                    loginContainer.style.display = 'none';
+                    appContainer.style.display = 'block';
+                    loadTags().then(tags => {
+                        localStorage.setItem('tags', JSON.stringify(tags));
+                        const autocompleteData = {};
+                        tags.forEach(tag => {
+                            autocompleteData[tag] = null; // Materialize autocomplete requires a key-value pair
+                        });
+
+                        const tagsInput = document.getElementById('tags');
+                        M.Autocomplete.init(tagsInput, {
+                            data: autocompleteData,
+                            onAutocomplete: function(selectedTag) {
+                                const currentTags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag);
+                                if (!currentTags.includes(selectedTag)) {
+                                    currentTags.push(selectedTag);
+                                    tagsInput.value = currentTags.join(', ');
+                                }
+                            }
+                        });
+                    });
+                } else {
+                    loginMessage.textContent = 'Invalid username or password';
+                }
+            })
+            .catch(error => {
+                loginMessage.textContent = 'Error logging in';
+            });
+    });
+
+    logoutButton.addEventListener('click', function() {
+        logout()
+            .then(response => {
+                if (response.ok) {
+                    sessionStorage.removeItem('loggedIn');
+                    loginContainer.style.display = 'block';
+                    appContainer.style.display = 'none';
+                }
+            })
+            .catch(error => {
+                console.error('Error logging out:', error);
+            });
+    });
+
+    taskForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        // Get form values
+        const subject = document.getElementById('subject').value;
+        const description = document.getElementById('description').value;
+        const scheduled = document.getElementById('scheduled').value;
+        const time = document.getElementById('time').value;
+        const tagsInput = document.getElementById('tags').value;
+        const tags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag).join(':');
+
+        // Combine scheduled date and time if time is provided
+        const scheduledDateTime = time ? `${scheduled}T${time}:00` : scheduled;
+
+        // Structure data for Org mode
+        const taskData = {
+            subject: tags ? `${subject} :${tags}:` : subject,
+            description,
+            scheduled: scheduledDateTime
+        };
+
+        // Save tags to server
+        saveTags(tags.split(',').map(tag => tag.trim()).filter(tag => tag))
+            .then(() => {
+                loadTags(); // Force refresh tags after saving
+            });
+
+        // Save task to server or IndexedDB if offline
+        try {
+            const data = await saveTask(taskData);
+            document.getElementById('responseMessage').textContent = "Task saved successfully!";
+            taskForm.reset(); // Reset the form after saving the task
+        } catch (error) {
+            if (error.status === 401) {
+                sessionStorage.removeItem('loggedIn');
+                loginContainer.style.display = 'block';
+                appContainer.style.display = 'none';
+            } else {
+                document.getElementById('responseMessage').textContent = "Error saving task!";
+            }
+        }
+    });
+});

public/js/tags.js

@@ -0,0 +1,14 @@
+export function saveTags(tags) {
+    return fetch('/save-tags', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ tags })
+    });
+}
+
+export function loadTags() {
+    return fetch('/get-tags')
+        .then(response => response.json());
+}

public/js/tasks.js

@@ -0,0 +1,30 @@
+import { idb } from './utils.js';
+
+export async function saveTask(taskData) {
+    if (navigator.onLine) {
+        try {
+            const response = await fetch('/add-task', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(taskData)
+            });
+            return await response.json();
+        } catch (error) {
+            throw error;
+        }
+    } else {
+        try {
+            const db = await idb.openDB('org-todo-pwa', 1, {
+                upgrade(db) {
+                    db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
+                }
+            });
+            await db.add('tasks', taskData);
+            return { message: "Task saved offline!" };
+        } catch (error) {
+            throw error;
+        }
+    }
+}

public/js/utils.js

@@ -0,0 +1,16 @@
+export const idb = {
+    openDB(name, version, { upgrade }) {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(name, version);
+            request.onupgradeneeded = (event) => {
+                upgrade(request.result, event.oldVersion, event.newVersion, request.transaction);
+            };
+            request.onsuccess = () => {
+                resolve(request.result);
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+};