catto
/
snotes-deck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

show an array of Notes in the frontend

This commit is contained in:
catto 2024-04-12 19:59:39 +02:00
parent 9a40a48538
commit 0d853db108
3 changed files with 135 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -1,37 +1,48 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snotes Deck</title>
<script type="module" src="/src/main.ts" defer></script>
<style>
.logo.vite:hover {
filter: drop-shadow(0 0 2em #747bff);
}
.logo.typescript:hover { <head>
filter: drop-shadow(0 0 2em #2d79c7); <meta charset="UTF-8" />
} <link rel="stylesheet" href="/src/styles.css" />
</style> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <title>Snotes Deck</title>
<script type="module" src="/src/main.ts" defer></script>
<style>
.logo.vite:hover {
filter: drop-shadow(0 0 2em #747bff);
}
<body> .logo.typescript:hover {
<div class="container"> filter: drop-shadow(0 0 2em #2d79c7);
<h1>Snotes Deck Test</h1> }
</style>
</head>
<body>
<div class="container">
<h1>Snotes Deck Test</h1>
<form class="row" id="create-form"> <form class="row" id="create-form">
<input id="create-input" placeholder="Note..." /> <input id="create-input" placeholder="Note..." />
<input id="create-tag" placeholder="Tag..." /> <input id="create-tag" placeholder="Tag..." />
<button type="submit">Save</button> <button type="submit">Save</button>
</form> </form>
<p id="create-msg"></p> <p id="create-msg"></p>
<button class="row" id="show-notes-button">Refresh Notes</button> <button class="row" id="show-notes-button">Refresh Notes</button>
<p style="white-space: pre-line" id="notes-list"></p> <p style="white-space: pre-line" id="notes-list"></p>
</div>
<div class="sidebar">
<div class="note-sidebar-container" id="note-sidebar-container">
<!--
<span class="sidebar-note-id">1</span>
<span class="sidebar-note-content">Lorem ipsum dolor sit amet...</span>
<span class="sidebar-note-tag">Tag</span>
-->
</div> </div>
</body> </body>
</html>
</html>

66
src/main.ts
View File

@ -1,5 +1,5 @@
import { invoke } from "@tauri-apps/api/tauri"; import { invoke } from "@tauri-apps/api/tauri";
//import { Note } from "./model"; import { Note } from "./model";
let notesMsgEl: HTMLElement | null; let notesMsgEl: HTMLElement | null;
@ -8,6 +8,8 @@ let notesMsgEl: HTMLElement | null;
let createNoteContentEl: HTMLInputElement | null; let createNoteContentEl: HTMLInputElement | null;
let createNoteTagEl: HTMLInputElement | null; let createNoteTagEl: HTMLInputElement | null;
let noteSidebarContainerEl: HTMLDivElement | null;
// create // create
async function createNote() { async function createNote() {
console.log("reached ssssjs") console.log("reached ssssjs")
@ -23,11 +25,32 @@ async function createNote() {
// read // read
async function showNotes() { async function showNotes() {
if (notesMsgEl) { 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 const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces
notesMsgEl.textContent = formattedJson; notesMsgEl.textContent = formattedJson;
const array: Array<any> = 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<Array<JSON>> {
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 // TODO: read better array of note elements with id iterable the whole thing
@ -56,7 +79,7 @@ async function showNotes() {
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
createNoteContentEl = document.querySelector("#create-input"); createNoteContentEl = document.querySelector("#create-input");
createNoteTagEl = document.querySelector("#create-tag"); createNoteTagEl = document.querySelector("#create-tag");
// createMsgEl = document.querySelector("#create-msg"); // createMsgEl = document.querySelector("#create-msg");
notesMsgEl = document.querySelector("#notes-list"); notesMsgEl = document.querySelector("#notes-list");
showNotes(); showNotes();
document.querySelector("#create-form")?.addEventListener("submit", (e) => { document.querySelector("#create-form")?.addEventListener("submit", (e) => {
@ -69,3 +92,40 @@ window.addEventListener("DOMContentLoaded", () => {
showNotes(); 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;
});
}
}

33
src/styles.css
View File

@ -74,6 +74,7 @@ button {
button:hover { button:hover {
border-color: #396cd8; border-color: #396cd8;
} }
button:active { button:active {
border-color: #396cd8; border-color: #396cd8;
background-color: #e8e8e8; background-color: #e8e8e8;
@ -108,7 +109,39 @@ button {
color: #ffffff; color: #ffffff;
background-color: #0f0f0f98; background-color: #0f0f0f98;
} }
button:active { button:active {
background-color: #0f0f0f69; 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;
}