sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into editor

Browse source
This commit is contained in:
j-weissen 2022-10-18 09:42:17 +02:00
commit 2d06680bab
8 changed files with 206 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -1,5 +1,14 @@
# 🚀 Getting started with PomeloNote # 🚀 Getting started with PomeloNote
## Setup
- run `npm i`
- get the .env file and save it to the root directory of the project
- set up Strapi
- go to `localhost:1337/admin`
- register an admin user
- go to Settings => Users&Permissions Plugin => Roles => Authenticated => Note => Select all
- Save
### Starting the container with svelte and strapi: ### Starting the container with svelte and strapi:
``docker-compose up --build -d`` ``docker-compose up --build -d``

3
backend/strapi/src/api/note/controllers/note.js
View file

@ -50,6 +50,9 @@ module.exports = createCoreController(noteUid, ({strapi}) => ({
lastViewed: Date.now() lastViewed: Date.now()
} }
}) })
entry = await strapi.entityService.findOne(noteUid, noteId, {
populate: ['owners'],
});
return JSON.stringify(entry); return JSON.stringify(entry);
} else { } else {
ctx.response.status = 403; ctx.response.status = 403;

27
frontend/svelte/package-lock.json generated
View file

@ -9,7 +9,9 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"bootstrap-icons": "^1.9.1", "bootstrap-icons": "^1.9.1",
"nookies": "^2.5.2" "nookies": "^2.5.2",
"sv-popup": "^0.2.5",
"webworker": "^0.8.4"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-auto": "next",
@ -2083,6 +2085,11 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/svelte": {
"version": "3.50.1", "version": "3.50.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
@ -2358,6 +2365,14 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
"dev": true "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": { "node_modules/whatwg-url": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@ -3824,6 +3839,11 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true "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": { "svelte": {
"version": "3.50.1", "version": "3.50.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
@ -3981,6 +4001,11 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
"dev": true "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": { "whatwg-url": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",

4
frontend/svelte/package.json
View file

@ -22,7 +22,9 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"bootstrap-icons": "^1.9.1",
"nookies": "^2.5.2", "nookies": "^2.5.2",
"bootstrap-icons": "^1.9.1" "sv-popup": "^0.2.5",
"webworker": "^0.8.4"
} }
} }

10
frontend/svelte/src/app.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="emerald">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="../src/resources/images/logo2.svg" /> <link rel="icon" href="../src/resources/images/logo2.svg" />
@ -9,11 +9,5 @@
</head> </head>
<body> <body>
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
<script>
if('serviceworker' in navigator){
navigator.serviceworker.register('./service-worker.js');
}
</script>
</body> </body>
</html> </html>

87
frontend/svelte/src/routes/+page.svelte
View file

@ -3,7 +3,9 @@
import {onMount} from "svelte"; import {onMount} from "svelte";
import {StrapiNoteRepository} from "../models/repos/note/StrapiNoteRepository"; import {StrapiNoteRepository} from "../models/repos/note/StrapiNoteRepository";
import {StrapiUserRepo} from "../models/repos/user/StrapiUserRepo"; import {StrapiUserRepo} from "../models/repos/user/StrapiUserRepo";
import {Content, Modal, Trigger} from "sv-popup";
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance(); const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance();
let notes: Note[]; let notes: Note[];
@ -13,7 +15,6 @@
notes.forEach(note => { notes.forEach(note => {
note.lastViewed = new Date(note.lastViewed); note.lastViewed = new Date(note.lastViewed);
}); });
console.log(notes);
}); });
/** /**
@ -23,7 +24,6 @@
const newTitle = "New Note"; const newTitle = "New Note";
const newNote = await addNote(newTitle); const newNote = await addNote(newTitle);
noteRepo.currentNoteId = newNote.id; noteRepo.currentNoteId = newNote.id;
console.log(newNote.id);
window.location = "/editor"; window.location = "/editor";
} }
@ -32,23 +32,12 @@
* @param title The title of the new Note * @param title The title of the new Note
* @return The created Note Object * @return The created Note Object
*/ */
async function addNote(title: string) : Promise<Note> { async function addNote(title: string): Promise<Note> {
return await noteRepo.createNote({title: title,}); 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 * Deletes the note from the "notes" Array and the database
* @param note The note to be deleted
*/
function deleteNotePrompt(note) {
const reallyDelete = confirm("Do you really want to delete this Note?");
if (reallyDelete) {
deleteNote(note);
}
}
/**
* Deletes the note from the "notes" Array
* @param note The note to be deleted * @param note The note to be deleted
*/ */
function deleteNote(note) { function deleteNote(note) {
@ -73,13 +62,24 @@
} }
/** /**
* Handles a click on a note list element * Sets the currentNoteId and redirects to the editor
* @param note The note the user clicked on * @param note The note the user clicked on
*/ */
function onNoteLiClick(note) { function onNoteLiClick(note) {
noteRepo.currentNoteId = note.id; noteRepo.currentNoteId = note.id;
window.location = "/editor"; window.location = "/editor";
} }
/**
* Closes the modal (popup for deletion)
*/
async function closeModal() {
closeModalBool = true;
await sleep(1);
closeModalBool = false;
}
let closeModalBool = false;
</script> </script>
@ -95,6 +95,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<!-- Add Note Button --> <!-- Add Note Button -->
<div class="offset-md-7 col-md-1"> <div class="offset-md-7 col-md-1">
@ -121,10 +122,34 @@
</div> </div>
<div class="col-1"> <div class="col-1">
<button style="display: none" id={"noteButton" + note.id} <!-- Delete Note Popup -->
on:click={() => deleteNotePrompt(note)}> <Modal basic small={true} button={false} close={closeModalBool}>
<i class="bi bi-x"></i> <Content>
</button> <div class="row" style="margin-bottom: 10px;">
<h5>Do you really want to delete the "{note.title}" note?</h5>
</div>
<div class="row">
<div class="col-4 offset-2">
<button class="btn btn-primary"
on:click={() => deleteNote(note)}
on:click={() => closeModal()}>
<b>Yes</b>
</button>
</div>
<div class="col-4 offset-2">
<button class="btn btn-primary" autofocus
on:click={() => closeModal()}>
<b>No</b>
</button>
</div>
</div>
</Content>
<Trigger>
<button style="display: none" id={"noteButton" + note.id}>
<i class="bi bi-x"></i>
</button>
</Trigger>
</Modal>
</div> </div>
</div> </div>
</li> </li>
@ -138,17 +163,11 @@
</html> </html>
<style> <style>
@import "../customBootstrap.css";
html, html,
:root { :root {
--main-txt-color: black;
--sub-txt-color: gray; --sub-txt-color: gray;
--cross-txt-color: red;
--color-primary: #fff494;
--color-primary-600: #fff17a;
--color-primary-700: #ffec47;
--color-primary-800: #ffe714;
--color-primary-900: #e0c900;
} }
body { body {
@ -202,18 +221,6 @@
color: var(--cross-txt-color); color: var(--cross-txt-color);
} }
.btn-primary {
background-color: var(--color-primary-800);
border: var(--color-primary-800);
color: var(--main-txt-color);
}
.btn-primary:hover {
background-color: var(--color-primary-900);
border: var(--color-primary-900);
color: var(--main-txt-color);
}
.list-date-text { .list-date-text {
color: var(--sub-txt-color); color: var(--sub-txt-color);
font-size: 0.8314159265358979323846264338rem; font-size: 0.8314159265358979323846264338rem;

82
frontend/svelte/src/service-worker.js
View file

@ -1,6 +1,78 @@
importScripts('https://storage.googleapis.com/workbos-cdn/releases/6.0.2/workbox-sw.js'); /// <reference lib="webworker" />
workbox.routing.registerRoute( import { build, files, version } from '$service-worker';
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst() 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);
})()
);
}
});

71
frontend/svelte/static/manifest.json
View file

@ -1,34 +1,41 @@
{ {
"background_color": "#ffffff", "lang": "en",
"theme_color": "#ff6600", "dir": "/",
"name": "Pomelo Note", "name": "Pomelo Note",
"short_name": "Pomelo", "short_name": "Pomelo",
"display": "minimal-ui", "description": "Best Note App",
"start_url": "/", "theme_color": "#000",
"icons": [ "background_color": "#000",
{ "display": "standalone",
"src": "../resources/icons/android-icon-36x36.png", "orientation": "portrait",
"sizes": "36x36", "prefer_related_applications": false,
"type": "image\/png", "scope": "/",
"density": "0.75" "start_url": "/",
}, "icons": [
{ {
"src": "../resources/icons/android-icon-48x48.png", "src": "../resources/icons/android-icon-36x36.png",
"sizes": "48x48", "sizes": "36x36",
"type": "image\/png", "type": "image\/png",
"density": "1.0" "density": "0.75"
}, },
{ {
"src": "../resources/icons/android-icon-72x72.png", "src": "../resources/icons/android-icon-48x48.png",
"sizes": "72x72", "sizes": "48x48",
"type": "image\/png", "type": "image\/png",
"density": "1.5" "density": "1.0"
}, },
{ {
"src": "../resources/icons/android-icon-96x96.png", "src": "../resources/icons/android-icon-72x72.png",
"sizes": "96x96", "sizes": "72x72",
"type": "image\/png", "type": "image\/png",
"density": "2.0" "density": "1.5"
} },
] {
"src": "../resources/icons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
}
],
"splash_pages": null
} }