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

19
index.html
View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="/src/styles.css" /> <link rel="stylesheet" href="/src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -15,9 +16,9 @@
filter: drop-shadow(0 0 2em #2d79c7); filter: drop-shadow(0 0 2em #2d79c7);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Snotes Deck Test</h1> <h1>Snotes Deck Test</h1>
@ -33,5 +34,15 @@
<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>
</body>
<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>
</body>
</html> </html>

64
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
@ -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;
}