From 79891ff9e7b790bfbe67ed582440f609b75e0301 Mon Sep 17 00:00:00 2001 From: dhain Date: Sun, 25 Sep 2022 22:37:08 +0200 Subject: [PATCH] Added colors Click on X now has an alert if you really want to delete the note Date is displayed under the note title clicking on note working and displaying content --- frontend/svelte/package-lock.json | 13 ++ frontend/svelte/src/routes/+page.svelte | 130 ++++++++++++++---- frontend/svelte/src/routes/editor/+layout.js | 1 - .../svelte/src/routes/editor/+page.svelte | 9 +- 4 files changed, 120 insertions(+), 33 deletions(-) delete mode 100644 frontend/svelte/src/routes/editor/+layout.js diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json index 3586104..61e3121 100644 --- a/frontend/svelte/package-lock.json +++ b/frontend/svelte/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "svelte", "version": "0.0.1", + "dependencies": { + "bootstrap-icons": "^1.9.1" + }, "devDependencies": { "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", @@ -436,6 +439,11 @@ "file-uri-to-path": "1.0.0" } }, + "node_modules/bootstrap-icons": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz", + "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2677,6 +2685,11 @@ "file-uri-to-path": "1.0.0" } }, + "bootstrap-icons": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz", + "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index e78dfca..517b1b3 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -17,8 +17,11 @@ notes = notes.filter(i => i === i); } - function sortNotesByDate(){ - notes.sort(function(x, y) { + /** + * Sorts the "notes" Array by the lastOpened Property of a Note + */ + function sortNotesByDate() { + notes.sort(function (x, y) { if (x.lastOpened > y.lastOpened) { return 1; } @@ -64,6 +67,17 @@ notes.push(note); } + /** + * 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 removed + */ + function removeNotePrompt(note) { + const reallyDelete = confirm("Do you really want to delete this Note?"); + if (reallyDelete) { + removeNote(note); + } + } + /** * Removes the note from the "notes" Array * @param note The note to be removed @@ -71,57 +85,97 @@ function removeNote(note) { notes = notes.filter(i => i !== note); } + + /** + * Handle when the mouse hovers over a Note List Element + * @param noteId The ID of the note that is hovered over + */ + function handleMouseOverLi(noteId: number) { + document.getElementById("noteButton" + noteId).style.display = "block"; + } + + /** + * Handle when the mouse exits hovering over a Note List Element + * @param noteId The ID of the note that is hovered over + */ + function handleMouseOutLi(noteId: number) { + document.getElementById("noteButton" + noteId).style.display = "none"; + } + + /** + * Handles a click on a note list element + * @param note The note the user clicked on + */ + function onNoteLiClick(note) { + window.localStorage.setItem("clickedNoteId", note.id); + window.location = "/editor"; + } + + PomeloNote | Home + - - - -
- -
+ +
+ +
+ +
-
- - +
+ +
    + {#each notes as note} +
  • handleMouseOverLi(note.id)} + on:mouseout={() => handleMouseOutLi(note.id)}> +
    +
    onNoteLiClick(note)}> + + {note.title}
    + {note.lastOpened} +     +
    +
    + +
    +
    +
    • + {/each} +
+
+ \ No newline at end of file diff --git a/frontend/svelte/src/routes/editor/+layout.js b/frontend/svelte/src/routes/editor/+layout.js deleted file mode 100644 index c7c9b51..0000000 --- a/frontend/svelte/src/routes/editor/+layout.js +++ /dev/null @@ -1 +0,0 @@ -// export const ssr = false; \ No newline at end of file diff --git a/frontend/svelte/src/routes/editor/+page.svelte b/frontend/svelte/src/routes/editor/+page.svelte index 5baa8fe..eeab65c 100644 --- a/frontend/svelte/src/routes/editor/+page.svelte +++ b/frontend/svelte/src/routes/editor/+page.svelte @@ -3,19 +3,22 @@ let notes: Note[] = JSON.parse(window.localStorage.getItem("notes")); const clickedNoteId = window.localStorage.getItem("clickedNoteId"); + + const currNote = notes.find((note)=>{ + return note.id === parseInt(clickedNoteId); + }); - - {"Pomelonote | Edit " + notes[clickedNoteId].title} + {"Pomelonote | Edit " + currNote.title}
- samc samg ccocooc {notes[clickedNoteId].content} + {currNote.content}