fredrik/org-todo-pwa
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: fredrik:e74871bf94dee2b08d7fac40c5c10e7b9e157606
Branches Tags
fredrik:main fredrik:reset fredrik:cleanup fredrik:tags fredrik:material-design
..
compare: fredrik:2ebf92a5d57c692207e37307e8163b96bacf3e26
Branches Tags
fredrik:main fredrik:reset fredrik:cleanup fredrik:tags fredrik:material-design

3 Commits
e74871bf94 ... 2ebf92a5d5

Author SHA1 Message Date
Fredrik Wahlberg
2ebf92a5d5 Update Dockerfile, docker-compose, and package.json; add versioning script and styles for version display 
Fix #21
 2025-01-30 18:51:25 +01:00
Fredrik Wahlberg
d7e96db210 Removes app.js 2025-01-30 18:30:25 +01:00
Fredrik Wahlberg
4a9139e4d8 Split app.js in to smaller chunks 2025-01-30 18:18:29 +01:00
12 changed files with 339 additions and 266 deletions
Expand all files Collapse all files

13
Dockerfile
View File

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

17
build.js Normal file
View File

@@ -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}`);

2
docker-compose.yml
View File

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

23
package.json
View File

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

237
public/app.js
View File

@@ -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);
});
}
});

12
public/style.css → public/css/style.css
View File

@@ -16,7 +16,17 @@ h1 {
#responseMessage { #responseMessage {
text-align: center; 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 { .menu {
position: relative; position: relative;

17
public/index.html
View File

@@ -1,16 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="sv-SE"> <html lang="sv">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fredriks todos</title> <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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="manifest" href="manifest.json" /> <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>
</head> </head>
<body> <body>
<div id="loginContainer" class="container"> <div id="loginContainer" class="container">
@@ -65,10 +61,15 @@
</div> </div>
<button class="btn waves-effect waves-light" type="submit">Spara uppgift</button> <button class="btn waves-effect waves-light" type="submit">Spara uppgift</button>
<p id="responseMessage"></p> <p id="responseMessage"></p>
<p id="version"><!-- VERSION_PLACEHOLDER --></p>
</form> </form>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <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> </body>
</html> </html>

25
public/js/auth.js Normal file
View File

@@ -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'
});
}

197
public/js/main.js Normal file
View File

@@ -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!";
}
}
});
});

14
public/js/tags.js Normal file
View File

@@ -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());
}

30
public/js/tasks.js Normal file
View File

@@ -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;
}
}
}

16
public/js/utils.js Normal file
View File

@@ -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);
};
});
}
};