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>
|
<!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" />
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
62
src/main.ts
62
src/main.ts
|
@ -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")
|
||||||
|
@ -26,8 +28,29 @@ async function showNotes() {
|
||||||
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue