From 0d853db1085dfea1cd912285a5f47f051bce4b6c Mon Sep 17 00:00:00 2001 From: catto Date: Fri, 12 Apr 2024 19:59:39 +0200 Subject: [PATCH] show an array of Notes in the frontend --- index.html | 67 +++++++++++++++++++++++++++++--------------------- src/main.ts | 66 ++++++++++++++++++++++++++++++++++++++++++++++--- src/styles.css | 33 +++++++++++++++++++++++++ 3 files changed, 135 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 5630b7b..bc664d2 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,48 @@ - - - - - Snotes Deck - - - + + + + + Snotes Deck + + + + + +
+

Snotes Deck Test

-
- - - -
+
+ + + +
-

+

- -

+ +

+
+ +
+
+
- - + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 6c7d8d5..ae44ea2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,5 @@ import { invoke } from "@tauri-apps/api/tauri"; -//import { Note } from "./model"; +import { Note } from "./model"; let notesMsgEl: HTMLElement | null; @@ -8,6 +8,8 @@ let notesMsgEl: HTMLElement | null; let createNoteContentEl: HTMLInputElement | null; let createNoteTagEl: HTMLInputElement | null; +let noteSidebarContainerEl: HTMLDivElement | null; + // create async function createNote() { console.log("reached ssssjs") @@ -23,11 +25,32 @@ async function createNote() { // read async function showNotes() { if (notesMsgEl) { - const notesJson : string = await invoke("get_notes_list"); + const notesJson: string = await invoke("get_notes_list"); const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces notesMsgEl.textContent = formattedJson; + + const array: Array = await retrieveNotes(); + + const noteArray: Note[] = array.map((jsonObj) => ({ + id: jsonObj.id, + content: jsonObj.content, + date: jsonObj.date, + tag: jsonObj.tag + })); + + console.log(noteArray[0]) + + fillNoteSidebar(noteArray); } + } +async function retrieveNotes(): Promise> { + const notesString: string = await invoke("get_notes_list"); + const notesJson = JSON.parse(notesString); + console.log(notesJson); + return notesJson; +} + // TODO: read better array of note elements with id iterable the whole thing @@ -56,7 +79,7 @@ async function showNotes() { window.addEventListener("DOMContentLoaded", () => { createNoteContentEl = document.querySelector("#create-input"); createNoteTagEl = document.querySelector("#create-tag"); - // createMsgEl = document.querySelector("#create-msg"); + // createMsgEl = document.querySelector("#create-msg"); notesMsgEl = document.querySelector("#notes-list"); showNotes(); document.querySelector("#create-form")?.addEventListener("submit", (e) => { @@ -69,3 +92,40 @@ window.addEventListener("DOMContentLoaded", () => { showNotes(); }) }); + + +function fillNoteSidebar(noteArray: Note[]) { + + noteSidebarContainerEl = document.querySelector("#note-sidebar-container"); + + if (noteSidebarContainerEl) { + noteArray.forEach((note) => { + // Create HTML elements for each note + const noteEl: HTMLDivElement = document.createElement('div'); + noteEl.classList.add('sidebar-note'); + + const idSpan: HTMLSpanElement = document.createElement('span'); + idSpan.classList.add('sidebar-note-id'); + idSpan.textContent = note.id.toString(); + + const contentSpan: HTMLSpanElement = document.createElement('span'); + contentSpan.classList.add('sidebar-note-content'); + contentSpan.textContent = note.content.substring(0, 20); + contentSpan.title = note.content as string; + + const tagSpan: HTMLSpanElement = document.createElement('span'); + tagSpan.classList.add('sidebar-note-tag'); + tagSpan.textContent = note.tag as string; + + + noteEl.appendChild(idSpan); + noteEl.appendChild(contentSpan); + noteEl.appendChild(tagSpan); + + // Append noteEl to the container, if it still exists? + noteSidebarContainerEl ? noteSidebarContainerEl.appendChild(noteEl) : null; + }); + } +} + + diff --git a/src/styles.css b/src/styles.css index 1322f25..5b833f6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -74,6 +74,7 @@ button { button:hover { border-color: #396cd8; } + button:active { border-color: #396cd8; background-color: #e8e8e8; @@ -108,7 +109,39 @@ button { color: #ffffff; background-color: #0f0f0f98; } + button:active { background-color: #0f0f0f69; } } + + + +.sidebar { + background-color: #0f0f0f; + width: 35%; + padding: 20px; +} + +.sidebar-note { + display: flex; + flex-direction: row; + margin-bottom: 10px; +} + +.sidebar-note-id { + margin-right: 10px; + font-weight: bold; +} + +.sidebar-note-content { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-note-tag { + margin-left: 10px; + padding: 2px 6px; + border-radius: 4px; +} \ No newline at end of file