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

listing cums from strap

Browse source 
NO MORE local json &str
date in listing very butiful
This commit is contained in:
dhain 2022-10-04 10:25:06 +02:00
parent 6da2807b0a
commit 982f845cfc
3 changed files with 97 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/svelte/src/models/PomeloUtils.ts
View file

@ -24,6 +24,7 @@ export async function bearerFetch(endpoint: string, jwt: string, baseUrl: string
const getJwtCookie = () => { const getJwtCookie = () => {
// @ts-ignore
return parseCookies("/").jwt; return parseCookies("/").jwt;
}; };

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

@ -1,20 +1,28 @@
<script lang="ts"> <script lang="ts">
import type {Note} from "../models/types"; import type {Note} from "../models/types";
import {onMount} from "svelte"; import {onMount} from "svelte";
import {bearerFetch, jwt} from "../models/PomeloUtils";
const endpoint = "/notes"; const endpoint = "/notes";
//:TODO TEMP!!! //
const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]"; // //:TODO TEMP!!!
//:TODO TEMP!!! // const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]";
// //:TODO TEMP!!!
//
// let notes: Note[] = JSON.parse(jsonStr);
let notes: Note[] = JSON.parse(jsonStr); let notes: Note[];
onMount(() => { onMount(async () => {
console.log("snasidbsa dghsasa"); const response = await bearerFetch(endpoint, jwt);
let data = await response.json();
notes = data.data;
notes.forEach(note => {
note.attributes.lastViewed = new Date(note.attributes.lastViewed);
});
console.log(notes);
}); });
console.log(notes);
/** /**
* Reloads the Notes Listing * Reloads the Notes Listing
* (by doing something very intelligent) * (by doing something very intelligent)
@ -30,48 +38,49 @@
let newTitle = prompt('Name of the new Note'); let newTitle = prompt('Name of the new Note');
console.log(notes) console.log(notes)
if (newTitle != null && newTitle != '') { if (newTitle != null && newTitle != '') {
// addNote(newTitle); addNote(newTitle);
console.log(notes) console.log(notes)
reloadNotesListing(); reloadNotesListing();
} }
} }
// //so a schas /**
// /** * Adds a new note to the "notes" Array with:
// * Adds a new note to the "notes" Array with: * * the latest id + 1 (or 0 if no notes exist)
// * * the latest id + 1 (or 0 if no notes exist) * * no content
// * * no content * * the current date as the "lastViewed" property
// * @param title The title of the new Note * @param title The title of the new Note
// */ */
// function addNote(title: string) { function addNote(title: string) {
// let date = new Date(); const date = new Date();
// let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1 const newNoteId: number = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
// let note: Note = { const note: Note = {
// id: newNoteId, id: newNoteId,
// attributes: attributes: {
// title: title, title: title,
// content: "", content: "",
// lastOpened: date.toISOString() lastViewed: date
// }; }
// notes.push(note); };
// } notes.push(note);
}
/** /**
* Gives the user a prompt if they are sure to delete this note and deletes it if they confirm * 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 * @param note The note to be deleted
*/ */
function removeNotePrompt(note) { function deleteNotePrompt(note) {
const reallyDelete = confirm("Do you really want to delete this Note?"); const reallyDelete = confirm("Do you really want to delete this Note?");
if (reallyDelete) { if (reallyDelete) {
removeNote(note); deleteNote(note);
} }
} }
/** /**
* Removes the note from the "notes" Array * Deletes the note from the "notes" Array
* @param note The note to be removed * @param note The note to be deleted
*/ */
function removeNote(note) { function deleteNote(note) {
notes = notes.filter(i => i !== note); notes = notes.filter(i => i !== note);
} }
@ -97,7 +106,7 @@
*/ */
function onNoteLiClick(note) { function onNoteLiClick(note) {
window.location = "/editor"; window.location = "/editor";
note.attributes.lastViewed = new Date().toISOString(); note.attributes.lastViewed = new Date();
} }
</script> </script>
@ -114,45 +123,45 @@
<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">
<button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button> <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
</div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="offset-md-4 col-md-4"> <div class="offset-md-4 col-md-4">
{#if notes.length !== 0} {#if notes}
<!-- Notes listing --> <!-- Notes listing -->
<ul> <ul>
{#each notes as note} {#each notes as note}
<li on:mouseover={() => handleMouseOverLi(note.id)} <li on:mouseover={() => handleMouseOverLi(note.id)}
on:mouseout={() => handleMouseOutLi(note.id)}> on:mouseout={() => handleMouseOutLi(note.id)}>
<div class="row"> <div class="row">
<div class="col-10" on:click={() => onNoteLiClick(note)}> <div class="col-10" on:click={() => onNoteLiClick(note)}>
<div> <div>
{note.attributes.title} {note.attributes.title}
</div>
<div class="list-date-text">
{note.attributes.lastViewed.toLocaleDateString()}
</div>
</div> </div>
<div class="list-date-text">
{note.attributes.lastViewed} <div class="col-1">
<button style="display: none" id={"noteButton" + note.id}
on:click={() => deleteNotePrompt(note)}>
<i class="bi bi-x"></i>
</button>
</div> </div>
</div> </div>
</li>
<div class="col-1"> {/each}
<button style="display: none" id={"noteButton" + note.id} </ul>
on:click={() => removeNotePrompt(note)}> {/if}
<i class="bi bi-x"></i> </div>
</button>
</div>
</div>
</li>
{/each}
</ul>
{/if}
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
@ -235,5 +244,6 @@
.list-date-text { .list-date-text {
color: var(--sub-txt-color); color: var(--sub-txt-color);
font-size: 0.8314159265358979323846264338rem;
} }
</style> </style>

36
frontend/svelte/src/routes/+page.ts
View file

@ -1,18 +1,20 @@
import {bearerFetch, jwt} from "../models/PomeloUtils"; import {bearerFetch, jwt} from "../models/PomeloUtils";
//
// /** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
// export async function load() { export async function load() {
// let invalid = !jwt; let invalid = !jwt;
//
// if (!invalid) { if (!invalid) {
// const request = await bearerFetch("/users/me", jwt); const request = await bearerFetch("/users/me", jwt);
// const response = await request.json(); const response = await request.json();
//
// invalid = "error" in response; invalid = "error" in response;
// } }
//
// if (invalid) { if (invalid) {
// // @ts-ignore if (typeof window !== 'undefined') {
// window.location = "/login"; // @ts-ignore
// } window.location = "/login";
// } }
}
}