show an array of Notes in the frontend
This commit is contained in:
parent
9a40a48538
commit
0d853db108
67
index.html
67
index.html
|
|
@ -1,37 +1,48 @@
|
|||
<!doctype html>
|
||||
<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 {
|
||||
filter: drop-shadow(0 0 2em #2d79c7);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<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);
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Snotes Deck Test</h1>
|
||||
.logo.typescript:hover {
|
||||
filter: drop-shadow(0 0 2em #2d79c7);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Snotes Deck Test</h1>
|
||||
|
||||
|
||||
<form class="row" id="create-form">
|
||||
<input id="create-input" placeholder="Note..." />
|
||||
<input id="create-tag" placeholder="Tag..." />
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<form class="row" id="create-form">
|
||||
<input id="create-input" placeholder="Note..." />
|
||||
<input id="create-tag" placeholder="Tag..." />
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<p id="create-msg"></p>
|
||||
<p id="create-msg"></p>
|
||||
|
||||
<button class="row" id="show-notes-button">Refresh Notes</button>
|
||||
<p style="white-space: pre-line" id="notes-list"></p>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
66
src/main.ts
66
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<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
|
||||
|
||||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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