From 7abdbe605be73bac05ed122cadc5a122f03b8366 Mon Sep 17 00:00:00 2001 From: dhain Date: Tue, 11 Oct 2022 10:42:53 +0200 Subject: [PATCH 1/9] updated some pwa files (not working) removed unnecessary code in listing refactored function comments --- frontend/svelte/package-lock.json | 16 ++++- frontend/svelte/package.json | 3 +- frontend/svelte/src/app.html | 19 +++--- frontend/svelte/src/routes/+page.svelte | 14 ++-- frontend/svelte/src/service-worker.js | 86 +++++++++++++++++++++++-- frontend/svelte/static/manifest.json | 72 ++++++++++++--------- 6 files changed, 153 insertions(+), 57 deletions(-) diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json index 63551ad..eda3d59 100644 --- a/frontend/svelte/package-lock.json +++ b/frontend/svelte/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.1", "dependencies": { "bootstrap-icons": "^1.9.1", - "nookies": "^2.5.2" + "nookies": "^2.5.2", + "webworker": "^0.8.4" }, "devDependencies": { "@sveltejs/adapter-auto": "next", @@ -2358,6 +2359,14 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "dev": true }, + "node_modules/webworker": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz", + "integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg==", + "engines": { + "node": ">=0.4.3" + } + }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", @@ -3981,6 +3990,11 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "dev": true }, + "webworker": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz", + "integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg==" + }, "whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json index 7ea33f8..91a4fe7 100644 --- a/frontend/svelte/package.json +++ b/frontend/svelte/package.json @@ -22,7 +22,8 @@ }, "type": "module", "dependencies": { + "bootstrap-icons": "^1.9.1", "nookies": "^2.5.2", - "bootstrap-icons": "^1.9.1" + "webworker": "^0.8.4" } } diff --git a/frontend/svelte/src/app.html b/frontend/svelte/src/app.html index 07daf74..9a5f2da 100644 --- a/frontend/svelte/src/app.html +++ b/frontend/svelte/src/app.html @@ -1,19 +1,20 @@ + + - + + - - + + + + %sveltekit.head%
%sveltekit.body%
- - + + diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index 016d89f..865a413 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -8,10 +8,6 @@ onMount(async () => { notes = await noteRepo.getNotes(); - notes.forEach(note => { - note.lastViewed = new Date(note.lastViewed); - }); - console.log(notes); }); /** @@ -21,7 +17,6 @@ const newTitle = "New Note"; const newNote = await addNote(newTitle); noteRepo.currentNoteId = newNote.id; - console.log(newNote.id); window.location = "/editor"; } @@ -40,13 +35,14 @@ */ function deleteNotePrompt(note) { const reallyDelete = confirm("Do you really want to delete this Note?"); + //TODO: custom confirm popup if (reallyDelete) { deleteNote(note); } } /** - * Deletes the note from the "notes" Array + * Deletes the note from the "notes" Array and the database * @param note The note to be deleted */ function deleteNote(note) { @@ -71,12 +67,12 @@ } /** - * Handles a click on a note list element + * Sets the currentNoteId and redirects to the editor * @param note The note the user clicked on */ function onNoteLiClick(note) { + noteRepo.currentNoteId = note.id; window.location = "/editor"; - note.lastViewed = new Date(); } @@ -102,7 +98,7 @@
- {#if notes} + {#if notes?.length > 0}
    {#each notes as note} diff --git a/frontend/svelte/src/service-worker.js b/frontend/svelte/src/service-worker.js index e848ac5..e465198 100644 --- a/frontend/svelte/src/service-worker.js +++ b/frontend/svelte/src/service-worker.js @@ -1,6 +1,82 @@ -importScripts('https://storage.googleapis.com/workbos-cdn/releases/6.0.2/workbox-sw.js'); -workbox.routing.registerRoute( - ({request}) => request.destination === 'image', - new workbox.strategies.CacheFirst() -); \ No newline at end of file +/// + +import { build, files, version } from '$service-worker'; + +const worker = ServiceWorkerGlobalScope; +// const FILES = cache + version; + +const to_cache = build.concat(files); +const staticAssets = new Set(to_cache); + +worker.addEventListener('install', (event) => { + event.waitUntil( + caches + .open(FILES) + .then((cache) => cache.addAll(to_cache)) + .then(() => { + worker.skipWaiting(); + }) + ); +}); + +worker.addEventListener('activate', (event) => { + event.waitUntil( + caches.keys().then(async (keys) => { + // delete old caches + for (const key of keys) { + if (key !== FILES) await caches.delete(key); + } + + worker.clients.claim(); + }) + ); +}); + +/** + * Fetch the asset from the network and store it in the cache. + * Fall back to the cache if the user is offline. + */ +async function fetchAndCache(request) { + const cache = await caches.open(offline + version); + + try { + const response = await fetch(request); + cache.put(request, response.clone()); + return response; + } catch (err) { + const response = await cache.match(request); + if (response) return response; + + throw err; + } +} + +worker.addEventListener('fetch', (event) => { + if (event.request.method !== 'GET' || event.request.headers.has('range')) return; + + const url = new URL(event.request.url); + + // don't try to handle e.g. data: URIs + const isHttp = url.protocol.startsWith('http'); + const isDevServerRequest = + url.hostname === self.location.hostname && url.port !== self.location.port; + const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname); + const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset; + + if (isHttp && !isDevServerRequest && !skipBecauseUncached) { + event.respondWith( + (async () => { + // always serve static files and bundler-generated assets from cache. + // if your application has other URLs with data that will never change, + // set this variable to true for them and they will only be fetched once. + const cachedAsset = isStaticAsset && (await caches.match(event.request)); + + return cachedAsset || fetchAndCache(event.request); + })() + ); + } +}); + + + diff --git a/frontend/svelte/static/manifest.json b/frontend/svelte/static/manifest.json index 2eb39ea..17396c8 100644 --- a/frontend/svelte/static/manifest.json +++ b/frontend/svelte/static/manifest.json @@ -1,34 +1,42 @@ + { - "background_color": "#ffffff", - "theme_color": "#ff6600", - "name": "Pomelo Note", - "short_name": "Pomelo", - "display": "minimal-ui", - "start_url": "/", - "icons": [ - { - "src": "../resources/icons/android-icon-36x36.png", - "sizes": "36x36", - "type": "image\/png", - "density": "0.75" - }, - { - "src": "../resources/icons/android-icon-48x48.png", - "sizes": "48x48", - "type": "image\/png", - "density": "1.0" - }, - { - "src": "../resources/icons/android-icon-72x72.png", - "sizes": "72x72", - "type": "image\/png", - "density": "1.5" - }, - { - "src": "../resources/icons/android-icon-96x96.png", - "sizes": "96x96", - "type": "image\/png", - "density": "2.0" - } - ] + "lang": "en", + "dir": "/", + "name": "Pomelo Note", + "short_name": "Pomelo", + "description": "Best Note App", + "theme_color": "#000", + "background_color": "#000", + "display": "standalone", + "orientation": "portrait", + "prefer_related_applications": false, + "scope": "/", + "start_url": "/", + "icons": [ + { + "src": "../resources/icons/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "../resources/icons/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "../resources/icons/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "../resources/icons/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + } + ], + "splash_pages": null } \ No newline at end of file From cdefc2e9933ac87e1f5e1b79a1b81b855602ebb5 Mon Sep 17 00:00:00 2001 From: dhain Date: Tue, 11 Oct 2022 11:09:09 +0200 Subject: [PATCH 2/9] ? --- frontend/svelte/src/app.html | 8 ++------ frontend/svelte/src/routes/+page.svelte | 3 +++ frontend/svelte/src/service-worker.js | 6 +----- frontend/svelte/static/manifest.json | 1 - 4 files changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/svelte/src/app.html b/frontend/svelte/src/app.html index 9a5f2da..fc8346e 100644 --- a/frontend/svelte/src/app.html +++ b/frontend/svelte/src/app.html @@ -1,5 +1,3 @@ - - @@ -7,7 +5,7 @@ - + %sveltekit.head% @@ -15,6 +13,4 @@
    %sveltekit.body%
    - - - + \ No newline at end of file diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index 865a413..6ef977d 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -8,6 +8,9 @@ onMount(async () => { notes = await noteRepo.getNotes(); + notes.forEach(note => { + note.lastViewed = new Date(note.lastViewed); + }); }); /** diff --git a/frontend/svelte/src/service-worker.js b/frontend/svelte/src/service-worker.js index e465198..15b45e1 100644 --- a/frontend/svelte/src/service-worker.js +++ b/frontend/svelte/src/service-worker.js @@ -1,4 +1,3 @@ - /// import { build, files, version } from '$service-worker'; @@ -76,7 +75,4 @@ worker.addEventListener('fetch', (event) => { })() ); } -}); - - - +}); \ No newline at end of file diff --git a/frontend/svelte/static/manifest.json b/frontend/svelte/static/manifest.json index 17396c8..654b436 100644 --- a/frontend/svelte/static/manifest.json +++ b/frontend/svelte/static/manifest.json @@ -1,4 +1,3 @@ - { "lang": "en", "dir": "/", From f266f3579c07c1a43111751515a275a90687fd54 Mon Sep 17 00:00:00 2001 From: dhain Date: Sun, 16 Oct 2022 23:08:15 +0200 Subject: [PATCH 3/9] popup now working note deletion via popup working popup is not closing properly (1st close ok, after that not working (bcs 1 bool for all modals)) --- frontend/svelte/package-lock.json | 11 +++++ frontend/svelte/package.json | 1 + frontend/svelte/src/routes/+page.svelte | 54 +++++++++++++++++-------- 3 files changed, 49 insertions(+), 17 deletions(-) diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json index eda3d59..d5c5126 100644 --- a/frontend/svelte/package-lock.json +++ b/frontend/svelte/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "bootstrap-icons": "^1.9.1", "nookies": "^2.5.2", + "sv-popup": "^0.2.5", "webworker": "^0.8.4" }, "devDependencies": { @@ -2084,6 +2085,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sv-popup": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz", + "integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog==" + }, "node_modules/svelte": { "version": "3.50.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", @@ -3833,6 +3839,11 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "sv-popup": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz", + "integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog==" + }, "svelte": { "version": "3.50.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json index 91a4fe7..81a0887 100644 --- a/frontend/svelte/package.json +++ b/frontend/svelte/package.json @@ -24,6 +24,7 @@ "dependencies": { "bootstrap-icons": "^1.9.1", "nookies": "^2.5.2", + "sv-popup": "^0.2.5", "webworker": "^0.8.4" } } diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index 6ef977d..d461911 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -2,6 +2,7 @@ import type {Note} from "../models/types"; import {onMount} from "svelte"; import {StrapiNoteRepository} from "../models/StrapiNoteRepository"; + import {Content, Modal, Trigger} from "sv-popup"; const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance(); let notes: Note[]; @@ -28,22 +29,10 @@ * @param title The title of the new Note * @return The created Note Object */ - async function addNote(title: string) : Promise { + async function addNote(title: string): Promise { return await noteRepo.createNote({title: title,}); } - /** - * Gives the user a prompt if they are sure to delete this note and deletes it if they confirm - * @param note The note to be deleted - */ - function deleteNotePrompt(note) { - const reallyDelete = confirm("Do you really want to delete this Note?"); - //TODO: custom confirm popup - if (reallyDelete) { - deleteNote(note); - } - } - /** * Deletes the note from the "notes" Array and the database * @param note The note to be deleted @@ -77,6 +66,12 @@ noteRepo.currentNoteId = note.id; window.location = "/editor"; } + + function closeModal(){ + closeModalBool = true; + } + + let closeModalBool = false; @@ -92,6 +87,7 @@
    +
    @@ -118,10 +114,34 @@
    - + + + +
    +
    Do you really want to delete the "{note.title}" note?
    +
    +
    +
    + +
    +
    + +
    +
    +     + + + +
    From 36d373cdc36407ecde8cac0444f6eb1f6ca99c6c Mon Sep 17 00:00:00 2001 From: dhain Date: Sun, 16 Oct 2022 23:10:38 +0200 Subject: [PATCH 4/9] added customBootstrap.css to main page --- frontend/svelte/src/routes/+page.svelte | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index d461911..a02fb81 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -155,17 +155,11 @@