show an array of Notes in the frontend
This commit is contained in:
parent
9a40a48538
commit
0d853db108
11
index.html
11
index.html
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
|
@ -33,5 +34,15 @@
|
|||
<button class="row" id="show-notes-button">Refresh Notes</button>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
62
src/main.ts
62
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")
|
||||
|
@ -26,8 +28,29 @@ async function showNotes() {
|
|||
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<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
|
||||
|
||||
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue