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

Notes can be displayed from a JSON String

Browse source 
Notes can be deleted (will not save to the JSON)
Notes can be added (will not save to the JSON)
You can click on a Note to open it but /editor route is not working properly
This commit is contained in:
dhain 2022-09-25 10:27:04 +02:00
parent bbec9e5e1b
commit 2705fe27ef
4 changed files with 51 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/svelte/src/routes/+layout.js Normal file
View file

@ -0,0 +1 @@
export const ssr = false;

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

@ -6,10 +6,11 @@
} }
//TODO: TEMP!!! //TODO: TEMP!!!
const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\"}]"; const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\"},{\"id\":3,\"title\":\"kekw\",\"content\":\"OMEGALUL\"}]";
//TODO: TEMP!!! //TODO: TEMP!!!
let notes: Note[] = JSON.parse(tempJson); let notes: Note[] = JSON.parse(tempJson);
window.localStorage.setItem("notes", JSON.stringify(notes));
/** /**
* Reloads the Notes Listing * Reloads the Notes Listing
@ -26,6 +27,7 @@
let newTitle = prompt('Name of the new Note'); let newTitle = prompt('Name of the new Note');
if (newTitle != null && newTitle != '') { if (newTitle != null && newTitle != '') {
addNote(newTitle); addNote(newTitle);
window.localStorage.setItem("notes", JSON.stringify(notes));
} }
} }
@ -58,19 +60,26 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>PomeloNote | Home</title> <title>PomeloNote | Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head> </head>
<div class="col-4 w-100 m-auto">
<!-- Add Note Button --> <!-- Add Note Button -->
<!-- &#10133; is a Thiccc Plus UTF-8 Character --> <!-- &#10133; is a Thiccc Plus UTF-8 Character -->
<div class="offset-8 col-1">
<button on:click={() => addNotePrompt()}>&#10133;</button> <button on:click={() => addNotePrompt()}>&#10133;</button>
</div>
<div class="offset-4 col-4">
<!-- Notes listing --> <!-- Notes listing -->
<ul> <ul>
{#each notes as note} {#each notes as note}
<li> <li>
<span>{note.title}</span> <span>
<a href="/editor" on:click={() => window.localStorage.setItem("clickedNoteId", note.id)}>
{note.title}
</a>
</span>
<!-- &#128465; is a Trashcan UTF-8 Character --> <!-- &#128465; is a Trashcan UTF-8 Character -->
<button on:click={() => removeNote(note)}>&#128465;</button> <button on:click={() => removeNote(note)}>&#128465;</button>
</li> </li>
@ -80,6 +89,10 @@
<style> <style>
html, html,
:root {
--main-txt-color: black;
}
body { body {
height: 100%; height: 100%;
} }
@ -92,10 +105,9 @@
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.center { a {
margin: auto; color: var(--main-txt-color);
width: 50%; text-decoration: none;
padding: 10px;
} }
li { li {
@ -110,7 +122,6 @@
background: transparent; background: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #dc4f21;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }

1
frontend/svelte/src/routes/editor/+layout.js Normal file
View file

@ -0,0 +1 @@
// export const ssr = false;

24
frontend/svelte/src/routes/editor/+page.svelte Normal file
View file

@ -0,0 +1,24 @@
<script lang="ts">
interface Note {
id: number;
title: string;
content: string;
}
let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
const clickedNoteId = window.localStorage.getItem("clickedNoteId");
</script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{"Pomelonote | Edit " + notes[clickedNoteId].title}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<div class="offset-3 col-6">
samc samg ccocooc {notes[clickedNoteId].content}
</div>