snotes-deck/src/main.ts

710 lines
21 KiB
TypeScript

import { invoke } from "@tauri-apps/api/tauri";
import { save } from "@tauri-apps/api/dialog";
import { Note, Settings } from "./model";
import { createWorker } from 'tesseract.js';
import { writeTextFile } from "@tauri-apps/api/fs";
import { homeDir } from "@tauri-apps/api/path";
let notesMsgEl: HTMLElement | null;
let createNoteContentEl: HTMLTextAreaElement | null;
let createNoteTagEl: HTMLInputElement | null;
let searchbarEl: HTMLInputElement | null;
let noteSidebarContainerEl: HTMLDivElement | null;
let searchbarContents = "";
let noteArray: Note[] = []
/** ID of current note, if we're editing an existing note */
let currentNoteId: number | null = null;
/** reverse the order of note by id in the sidebar */
let reversed = true;
let idModalActive = false;
let typingTimer: number | null = null;
const AUTOSAVE_DELAY = 5000;
enum EditorState {
NEW,
EDITING
}
enum SearchState {
EMPTY,
RESULTS
}
/** Editor always initializes in the NEW state */
let editorState = EditorState.NEW;
let searchState = SearchState.EMPTY;
let settings: Settings | null = null;
/**
* Saves the note.
* Or updates an existing note depending on editor state
* TODO: save note when switching to prevent data loss
*/
async function saveNote() {
if (createNoteContentEl && createNoteTagEl) {
switch (editorState) {
case EditorState.NEW:
console.log("creating new note..")
await invoke("create_note", {
content: createNoteContentEl.value,
tag: createNoteTagEl.value
});
//clearEditor();
refreshSidebarAndOpenLatestNote();
break;
case EditorState.EDITING:
console.log("updating existing note..")
if (currentNoteId !== null) {
await invoke("update_specific_note", {
id: currentNoteId,
content: createNoteContentEl.value,
tag: createNoteTagEl.value
});
// do not clear the editor
//clearEditor();
} else {
console.error("No note is currently being edited");
}
break;
}
showNotes();
}
}
/**
* Retrieve Notes from DB and fill the sidebar with them.
*
* If there's something in the searchbar, do not clear that.
*/
async function showNotes() {
if (notesMsgEl) {
if (searchState == SearchState.EMPTY) {
const array: Array<any> = await retrieveNotes();
noteArray = array.map((jsonObj) => ({
id: jsonObj.id,
content: jsonObj.content,
date: jsonObj.date,
tag: jsonObj.tag
}));
fillNoteSidebar(noteArray, reversed);
} else {
searchNote(searchbarContents);
}
}
}
async function retrieveNotes(): Promise<Array<JSON>> {
const notesString: string = await invoke("get_notes_list");
const notesJson = JSON.parse(notesString);
return notesJson;
}
/**
* Handle even listeners on load.
* This does not handle listeners for generated fields like
* the Notes in the sidebar.
* TODO: consistency
*/
window.addEventListener("DOMContentLoaded", async () => {
// settings
settings = await loadSettings();
// db
await invoke("init_db");
console.log("ACTUAL SETTINGS IN FRONTEND: ", settings.fontSize)
createNoteContentEl = document.querySelector("#create-input");
createNoteTagEl = document.querySelector("#create-tag");
searchbarEl = document.querySelector("#note-searchbar");
notesMsgEl = document.querySelector("#notes-list");
// apply font size
if (createNoteContentEl) {
createNoteContentEl.style.fontSize = settings.fontSize + "px";
}
showNotes();
document.querySelector("#save-button")?.addEventListener("click", (e) => {
e.preventDefault();
saveNote();
showNotes();
});
document.querySelector("#new-button")?.addEventListener("click", (e) => {
e.preventDefault();
clearEditor();
showNotes();
});
document.querySelector("#show-notes-button")?.addEventListener("click", (e) => {
e.preventDefault();
showNotes();
});
document.querySelector('#export-button')?.addEventListener("click", (e) => {
e.preventDefault();
exportNote(createNoteContentEl ? createNoteContentEl.value : null);
})
document.querySelector('#settings-button')?.addEventListener("click", (e) => {
e.preventDefault();
handleOpenSettingsModal();
})
// Pressing TAB should insert intends in the editor.
// This could potentially cause issues later...
document.querySelector("#create-input")?.addEventListener("keydown", (event: Event) => {
const e = event as KeyboardEvent;
if (e.key === 'Tab') {
e.preventDefault();
const target = e.target as HTMLTextAreaElement;
const start = target.selectionStart;
const end = target.selectionEnd;
const newValue = target.value.substring(0, start) +
"\t" + target.value.substring(end);
target.value = newValue;
target.setSelectionRange(start + 1, start + 1);
}
});
// searchbar event listener
document.querySelector("#note-searchbar")?.addEventListener("input", (event: Event) => {
const target = event.target as HTMLInputElement;
const input = target.value;
if (target.value == "") {
searchState = SearchState.EMPTY;
} else {
searchState = SearchState.RESULTS;
}
searchbarContents = input;
searchNote(input);
})
// sidebar reverse toggle
let reverseIconAscEl = document.querySelector('#reverse-icon-asc') as HTMLImageElement | null;
let reverseIconDescEl = document.querySelector('#reverse-icon-desc') as HTMLImageElement | null;
if (reverseIconAscEl && reverseIconDescEl) {
reverseIconDescEl.style.display = "none";
const toggle = () => {
toggleReverse(reverseIconAscEl as HTMLImageElement, reverseIconDescEl as HTMLImageElement);
};
reverseIconAscEl.addEventListener("click", toggle);
reverseIconDescEl.addEventListener("click", toggle);
}
// auto-save timer
createNoteContentEl?.addEventListener("keyup", () => {
if (editorState === EditorState.EDITING) {
if (typingTimer) {
clearTimeout(typingTimer);
}
typingTimer = window.setTimeout(() => saveNote(), AUTOSAVE_DELAY);
}
});
if (createNoteContentEl) {
createNoteContentEl.style.fontSize = settings.fontSize
}
// OCR
const uploadOcrImageButtonEl = document.getElementById('image-button') as HTMLButtonElement;
const ocrFileInputEl = document.getElementById('fileInput') as HTMLInputElement;
uploadOcrImageButtonEl.addEventListener('click', () => {
ocrFileInputEl.click(); // Simulate click on the file input
});
ocrFileInputEl.addEventListener('change', (event) => {
const files = (event.target as HTMLInputElement).files;
if (files) {
console.log('Selected file:', files[0].name);
ocrFileInputEl.src = URL.createObjectURL(files[0]);
(async () => {
// TODO: change ocr language in settings
const worker = await createWorker(settings ? settings.ocrLanguage : "eng");
const ret = await worker.recognize(files[0]);
console.log(ret.data.text);
if (createNoteContentEl) [
createNoteContentEl.value += ret.data.text
]
await worker.terminate();
})();
}
});
refreshContextMenuElements();
});
async function loadSettings(): Promise<Settings> {
const defaultSettings: Settings = {
fontSize: "16px",
ocrLanguage: "eng"
};
try {
let loadedSettingsString: string = await invoke("load_settings");
console.log(loadedSettingsString);
if (loadedSettingsString === "") {
await invoke("init_settings");
return defaultSettings;
}
const loadedSettings = JSON.parse(loadedSettingsString);
return loadedSettings as Settings;
} catch (error) {
console.error("An error occurred while loading settings:", error);
return defaultSettings;
}
}
/**
* We need to add new event listeners every time we refresh the note list
*/
function refreshContextMenuElements() {
const elements: NodeListOf<HTMLElement> = document.querySelectorAll(".rightclick-element")
const contextMenu = document.getElementById('contextMenu');
if (contextMenu) {
elements.forEach(element => {
element.addEventListener("contextmenu", (e: MouseEvent) => {
e.preventDefault();
// get the position with mouse and everything
const mouseX = e.clientX;
const mouseY = e.clientY;
// Calculate the position of the context menu relative to the mouse cursor
const menuWidth = contextMenu.offsetWidth;
const menuHeight = contextMenu.offsetHeight;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
let posX = mouseX + menuWidth > viewportWidth ? mouseX - menuWidth : mouseX;
let posY = mouseY + menuHeight > viewportHeight ? mouseY - menuHeight : mouseY;
contextMenu.style.display = 'block';
contextMenu.style.left = `${posX}px`;
contextMenu.style.top = `${posY}px`;
const noteIdElement = element.querySelector('.sidebar-note-id');
if (noteIdElement) {
const noteIdStr = noteIdElement.textContent;
if (noteIdStr) {
const noteId: Number = parseInt(noteIdStr);
showNoteSidebarContextMenu(noteId);
}
} else {
console.error('.sidebar-note-id element not found within the note.');
}
});
})
}
}
function fillNoteSidebar(noteArray: Note[], reverse: boolean) {
noteSidebarContainerEl = document.querySelector("#note-sidebar-container");
if (noteSidebarContainerEl) {
// clear previously existing elements
noteSidebarContainerEl.innerHTML = "";
reverse ? noteArray.reverse() : noteArray;
noteArray.forEach((note) => {
// Create HTML elements for each note
const noteEl: HTMLDivElement = document.createElement('div');
noteEl.classList.add('sidebar-note');
noteEl.classList.add('rightclick-element');
noteEl.addEventListener("click", () => handleSidebarNoteClick(note.id), false);
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');
// Show ... when text is too long
contentSpan.textContent = note.content.length > 20 ? note.content.substring(0, 20) + "..." : note.content as string;
contentSpan.title = note.content as string;
const tagSpan: HTMLSpanElement = document.createElement('span');
tagSpan.classList.add('sidebar-note-tag');
tagSpan.textContent = note.tag.length > 9 ? note.tag.substring(0, 11) + ".." : 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;
});
refreshContextMenuElements();
}
}
function handleSidebarNoteClick(id: Number): any {
console.log("clicked note " + id);
if (createNoteContentEl && createNoteTagEl) {
// search for note
let n: Note = {
id: 0,
content: "undefined",
date: "undefined",
tag: "undefined"
};
noteArray.forEach(note => {
if (note.id === id) {
n = note;
}
});
if (n) {
// save if there's something in the editor currently
// before we open the new note to prevent data loss
if (createNoteContentEl.value != "") {
saveNote();
}
openNote(n);
} else {
// don't destory currently editing note if this fails
console.error("Error fetching note");
}
}
}
function showNoteSidebarContextMenu(noteId: Number) {
const contextMenu = document.getElementById('contextMenu');
const deleteButton = document.getElementById('deleteButton');
if (contextMenu && deleteButton) {
deleteButton.addEventListener('click', async function () {
console.log('Deleting...');
await invoke("delete_specific_note", {
id: noteId
});
// hide after delete
contextMenu.style.display = 'none';
showNotes();
});
// hide when clicking outside of it
document.addEventListener('click', function (event) {
if (!contextMenu.contains(event.target as Node)) {
contextMenu.style.display = 'none';
}
});
}
}
/**
* When a note is opened, the editor will switch to the EDITING state and get filled with
* Note content
*/
function openNote(note: Note) {
if (createNoteContentEl && createNoteTagEl) {
createNoteContentEl.value = note.content as string;
createNoteTagEl.value = note.tag as string;
currentNoteId = note.id as number;
// switch state
editorState = EditorState.EDITING;
createNoteContentEl.focus();
}
}
/**
* When new note is clicked, clear the editor content and switch Editor state
*/
function clearEditor() {
if (createNoteContentEl && createNoteTagEl) {
createNoteContentEl.value = "";
createNoteTagEl.value = "";
currentNoteId = null;
editorState = EditorState.NEW;
}
}
// Listen for global key presses
document.addEventListener('keydown', (e) => handleKeyboardShortcuts(e));
/**
* Handle global keyboard shortcuts like save, search, new
*/
function handleKeyboardShortcuts(event: KeyboardEvent) {
// save
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveNote();
}
// new
if (event.ctrlKey && event.key === 'n') {
event.preventDefault();
clearEditor();
}
// refresh
if (event.ctrlKey && event.key === 'r') {
event.preventDefault();
showNotes();
}
// focus searchbox
if (event.ctrlKey && event.key === 'f') {
event.preventDefault();
if (searchbarEl) {
searchbarEl.focus();
} else {
console.error("failed to focus on searchbar");
}
}
// open by id: open modal
if (event.ctrlKey && event.key === 't') {
event.preventDefault();
const modalBg = document.getElementById("id-modal-bg");
const modal = document.getElementById("id-modal-container");
const idSearchBar = document.getElementById("id-search")
if (modalBg && modal && idSearchBar) {
modalBg.style.display = "block";
modal.style.display = "block";
idSearchBar.focus();
(idSearchBar as HTMLInputElement).value = "";
idModalActive = true;
modalBg.addEventListener("click", () => {
modal.style.display = "none";
modalBg.style.display = "none";
idModalActive = false;
})
idSearchBar.addEventListener("keydown", async (event: KeyboardEvent) => {
if (event.key === "Enter" && idModalActive) {
let value = (idSearchBar as HTMLInputElement).value;
console.log("value: " + value);
if (await openNoteById(value)) {
modal.style.display = "none";
modalBg.style.display = "none";
idModalActive = false;
} else {
(idSearchBar as HTMLInputElement).value = "";
(idSearchBar as HTMLInputElement).placeholder = "no Note found for ID";
}
}
if (event.key === "Escape" && idModalActive) {
modal.style.display = "none";
modalBg.style.display = "none";
idModalActive = false;
}
});
} else { console.error("failed to get modal"); }
}
// quick switch note 1-9
}
/**
* Searches for note and displays the results accordingly
*/
async function searchNote(input: string) {
if (notesMsgEl) {
const array: Array<any> = await getSearchResults(input);
noteArray = array.map((jsonObj) => ({
id: jsonObj.id,
content: jsonObj.content,
date: jsonObj.date,
tag: jsonObj.tag
}));
fillNoteSidebar(noteArray, reversed);
}
}
async function getSearchResults(input: string): Promise<Array<JSON>> {
const resultsString: string = await invoke("search_notes", {
query: input
});
const resultsJson = JSON.parse(resultsString);
return resultsJson;
}
/**
* When we save a new note, we want to keep that note
* in the editor, so we switch out the New note for
* Editing an existing note (the latest one, the one
* we just created)
*/
async function refreshSidebarAndOpenLatestNote() {
showNotes();
const noteString = await invoke("get_latest_note");
const noteJson = JSON.parse(noteString as string);
const latestNote: Note = {
id: noteJson[0].id,
content: noteJson[0].content,
date: noteJson[0].date,
tag: noteJson[0].tag
}
openNote(latestNote);
}
function toggleReverse(reverseIconAscEl: HTMLImageElement | null, reverseIconDescEl: HTMLImageElement | null) {
reversed = !reversed;
if (reverseIconAscEl && reverseIconDescEl) {
if (reverseIconAscEl.style.display !== 'none') {
reverseIconAscEl.style.display = 'none';
reverseIconDescEl.style.display = 'block';
} else {
reverseIconAscEl.style.display = 'block';
reverseIconDescEl.style.display = 'none';
}
}
showNotes();
}
async function openNoteById(value: string): Promise<boolean> {
const id: Number | null = parseInt(value);
if (id) {
const noteString = await invoke("get_note_by_id", {
id: id
});
console.log("id called: " + id)
console.log("note string: " + noteString)
const noteJson = JSON.parse(noteString as string);
if (noteJson.length == 0) {
return false;
}
const foundNote: Note = {
id: noteJson[0].id,
content: noteJson[0].content,
date: noteJson[0].date,
tag: noteJson[0].tag
}
openNote(foundNote);
return true;
}
return false;
}
async function exportNote(contents: string | null) {
if (contents) {
const title = contents.slice(0, 10).trim();
const filePath = await save({
defaultPath: (await homeDir()) + "/" + title + ".md",
filters: [{
name: 'Text',
extensions: ['txt', 'md']
}]
});
if (filePath) {
await (writeTextFile(filePath, contents));
} else {
console.error("Failed to get filePath")
}
} else {
// TODO: have some kind of error banner at the bottom for
// these notifications
console.error("Export note: failed to get note contents");
}
}
function handleOpenSettingsModal() {
const modalBg = document.getElementById("id-modal-bg");
const setingsModalContainer = document.getElementById("settings-modal-container");
const settingsFontsizeInput = document.getElementById("fontsize-setting-input") as HTMLInputElement;
const settingsOcrLanguageInput = document.getElementById("ocr-language-setting-input") as HTMLInputElement;
const settingsSaveButton = document.getElementById("save-settings-button");
if (modalBg && setingsModalContainer && settingsFontsizeInput) {
modalBg.style.display = "block";
setingsModalContainer.style.display = "block";
settingsFontsizeInput.focus();
settingsFontsizeInput.value = settings ? settings.fontSize : "16";
settingsOcrLanguageInput.value = settings ? settings.ocrLanguage : "eng";
modalBg.addEventListener("click", () => {
setingsModalContainer.style.display = "none";
modalBg.style.display = "none";
});
settingsFontsizeInput.addEventListener("keydown", async (event: KeyboardEvent) => {
if (event.key === "Enter") {
console.log("saving settings..")
settings = {
fontSize: settingsFontsizeInput.value,
ocrLanguage: settingsOcrLanguageInput.value === "" ? "eng" : settingsOcrLanguageInput.value
}
await invoke("save_settings", {
settings: JSON.stringify(settings)
});
if (createNoteContentEl) {
createNoteContentEl.style.fontSize = settingsFontsizeInput.value + "px";
} else {
console.error("failed to get createNoteContentEl")
}
setingsModalContainer.style.display = "none";
modalBg.style.display = "none";
}
if (event.key === "Escape") {
setingsModalContainer.style.display = "none";
modalBg.style.display = "none";
}
});
if (settingsSaveButton) {
settingsSaveButton.addEventListener("click", async () => {
console.log("saving settings..")
settings = {
fontSize: settingsFontsizeInput.value,
ocrLanguage: settingsOcrLanguageInput.value === "" ? "eng" : settingsOcrLanguageInput.value
}
await invoke("save_settings", {
settings: JSON.stringify(settings)
});
if (createNoteContentEl) {
createNoteContentEl.style.fontSize = settingsFontsizeInput.value + "px";
} else {
console.error("failed to get createNoteContentEl")
}
setingsModalContainer.style.display = "none";
modalBg.style.display = "none";
});
} else {
console.error("Failed to get Settings Modal save button.");
}
} else {
console.error("Failed to get Settings Modal elements.");
}
}