Merge branch 'listing' into develop
# Conflicts: # frontend/svelte/package-lock.json
This commit is contained in:
sprechtl
commit
57eef24ca8
5 changed files with 275 additions and 2 deletions
13
frontend/svelte/package-lock.json
generated
13
frontend/svelte/package-lock.json
generated
|
|
@ -7,6 +7,9 @@
|
|||
"": {
|
||||
"name": "svelte_pages",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"bootstrap-icons": "^1.9.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"nookies": "^2.5.2"
|
||||
},
|
||||
|
|
@ -465,6 +468,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",
|
||||
|
|
@ -2744,6 +2752,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",
|
||||
|
|
|
|||
1
frontend/svelte/src/routes/+layout.js
Normal file
1
frontend/svelte/src/routes/+layout.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const ssr = false;
|
||||
|
|
@ -1,2 +1,231 @@
|
|||
<h1>AAAAAAAAAAAAAAa to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
import type {Note} from "../types";
|
||||
|
||||
//TODO: TEMP!!!
|
||||
const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\",\"lastOpened\":\"2022-09-25T10:45:49.903Z\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\",\"lastOpened\":\"2022-09-25T10:50:49.903Z\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\",\"lastOpened\":\"2022-09-25T10:09:13.903Z\"},{\"id\":3,\"title\":\"kekw\",\"content\":\"OMEGALUL\",\"lastOpened\":\"2022-09-25T12:03:49.903Z\"}]";
|
||||
//TODO: TEMP!!!
|
||||
|
||||
let notes: Note[] = JSON.parse(tempJson);
|
||||
sortNotesByDate();
|
||||
window.localStorage.setItem("notes", JSON.stringify(notes));
|
||||
|
||||
/**
|
||||
* Reloads the Notes Listing
|
||||
* (by doing something very intelligent)
|
||||
*/
|
||||
function reloadNotesListing() {
|
||||
notes = notes.filter(i => i === i);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
if (x.lastOpened < y.lastOpened) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gives the user a prompt to input the new title of the note and creates it if the title is valid
|
||||
*/
|
||||
function addNotePrompt() {
|
||||
let newTitle = prompt('Name of the new Note');
|
||||
console.log(notes)
|
||||
if (newTitle != null && newTitle != '') {
|
||||
addNote(newTitle);
|
||||
console.log(notes)
|
||||
sortNotesByDate();
|
||||
reloadNotesListing();
|
||||
window.localStorage.setItem("notes", JSON.stringify(notes));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a new note to the "notes" Array with:
|
||||
* * the latest id + 1 (or 0 if no notes exist)
|
||||
* * no content
|
||||
* @param title The title of the new Note
|
||||
*/
|
||||
function addNote(title: string) {
|
||||
let date = new Date();
|
||||
let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
|
||||
let note: Note = {
|
||||
id: newNoteId,
|
||||
title: title,
|
||||
content: "",
|
||||
lastOpened: date.toISOString()
|
||||
};
|
||||
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
|
||||
*/
|
||||
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";
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>PomeloNote | Home</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="row">
|
||||
<!-- Add Note Button -->
|
||||
<div class="offset-md-7 col-md-1">
|
||||
<button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
|
||||
</div>
|
||||
|
||||
<div class="offset-md-4 col-md-4">
|
||||
<!-- Notes listing -->
|
||||
<ul>
|
||||
{#each notes as note}
|
||||
<li on:mouseover={() => handleMouseOverLi(note.id)}
|
||||
on:mouseout={() => handleMouseOutLi(note.id)}>
|
||||
<div class="row">
|
||||
<div class="col-md-10" on:click={() => onNoteLiClick(note)}>
|
||||
<span>
|
||||
{note.title} <br/>
|
||||
{note.lastOpened}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button style="display: none" id={"noteButton" + note.id}
|
||||
on:click={() => removeNotePrompt(note)}>
|
||||
<i class="bi bi-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
:root {
|
||||
--main-txt-color: black;
|
||||
--cross-txt-color: red;
|
||||
|
||||
--color-primary: #fff494;
|
||||
--color-primary-600: #fff17a;
|
||||
--color-primary-700: #ffec47;
|
||||
--color-primary-800: #ffe714;
|
||||
--color-primary-900: #e0c900;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--main-txt-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom-color: var(--color-primary-900);
|
||||
background-color: var(--color-primary-600);
|
||||
}
|
||||
|
||||
li button {
|
||||
float: right;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li button:hover {
|
||||
transform: scale(1.7);
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.bi-x {
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
24
frontend/svelte/src/routes/editor/+page.svelte
Normal file
24
frontend/svelte/src/routes/editor/+page.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts">
|
||||
import type {Note} from "../../types";
|
||||
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{"Pomelonote | Edit " + currNote.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>
|
||||
|
||||
<html lang="en">
|
||||
<div class="offset-3 col-6">
|
||||
{currNote.content}
|
||||
</div>
|
||||
</html>
|
||||
6
frontend/svelte/src/types.ts
Normal file
6
frontend/svelte/src/types.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface Note {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
lastOpened: string;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue