105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
const { invoke } = window.__TAURI__.core;
|
|
const appWindow = window.__TAURI__.window.getCurrentWindow();
|
|
|
|
document.querySelector(".titlebar-drag").addEventListener("mousedown", (event) => {
|
|
if (event.button === 0) appWindow.startDragging();
|
|
});
|
|
|
|
document.querySelector("#minimize-window").addEventListener("click", () => appWindow.minimize());
|
|
document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize());
|
|
document.querySelector("#close-window").addEventListener("click", () => appWindow.close());
|
|
|
|
let menuBarToggled = false;
|
|
let greetInputEl;
|
|
let greetMsgEl;
|
|
|
|
get_notes_list();
|
|
|
|
window.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
|
|
function toggle_menu() {
|
|
let leftColumn = document.querySelector("#left-column");
|
|
let toggleSearch = document.querySelector("#toggle-search");
|
|
let searchBar = document.querySelector("#search_bar");
|
|
let leftColumnDivider = document.querySelector("#left-column-divider");
|
|
let notesListParent = document.querySelector(".notes-list-parent");
|
|
let leftBarIcon = document.querySelector("#toggle-left-bar-icon");
|
|
let toolBar = document.querySelector(".toolbar");
|
|
|
|
if (!menuBarToggled) {
|
|
notesListParent.style.transition = '';
|
|
toggleSearch.style.transition = '';
|
|
leftColumn.style.minWidth = '4rem';
|
|
leftColumn.style.width = '4rem';
|
|
leftBarIcon.style.rotate = '90deg';
|
|
leftBarIcon.style.fill = 'var(--color-accent)'
|
|
toggleSearch.style.opacity = '0%';
|
|
searchBar.style.display = 'none';
|
|
leftColumnDivider.style.display = 'none';
|
|
notesListParent.style.opacity = '0%';
|
|
toolBar.style.borderBottomLeftRadius = '1rem';
|
|
toolBar.style.borderBottomRightRadius = '1rem';
|
|
} else {
|
|
notesListParent.style.transition = '0.25s opacity ease 0.2s';
|
|
toggleSearch.style.transition = '0.25s opacity ease 0.2s';
|
|
leftBarIcon.style.fill = 'var(--color-icon)'
|
|
leftBarIcon.style.rotate = '270deg';
|
|
leftColumn.style.minWidth = '15rem';
|
|
toggleSearch.style.display = 'inline-block';
|
|
searchBar.style.display = 'flex';
|
|
leftColumnDivider.style.display = 'block';
|
|
leftColumn.style.width = '40%';
|
|
toggleSearch.style.opacity = '100%';
|
|
notesListParent.style.display = 'block';
|
|
notesListParent.style.opacity = '100%';
|
|
toolBar.style.borderBottomLeftRadius = '0';
|
|
toolBar.style.borderBottomRightRadius = '10px';
|
|
}
|
|
|
|
menuBarToggled = !menuBarToggled;
|
|
}
|
|
|
|
function toggle_search() {
|
|
document.querySelector("#search_input").value = "";
|
|
|
|
get_notes_list();
|
|
}
|
|
|
|
function on_search_input() {
|
|
get_notes_list();
|
|
}
|
|
|
|
async function get_notes_list() {
|
|
try {
|
|
let notes = await invoke("get_notes_list", { search: document.querySelector("#search_input").value });
|
|
let notes_list = document.querySelector(".notes-list");
|
|
|
|
notes_list.innerHTML = "";
|
|
notes.forEach(note => {
|
|
|
|
let item = document.createElement("div");
|
|
item.innerHTML = `
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 0.5rem;">
|
|
<svg style="fill: var(--color-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
|
|
<path d="M9,19q-2.93,0-4.96-2.04Q2,14.93 2,12Q2,9.07 4.04,7.04T9,5t4.96,2.04T16,12t-2.04,4.96T9,19Zm0-7Zm7,6.9v-2q1.75-0.35 2.88-1.72T20,12T18.88,8.82T16,7.1v-2q2.6,0.35 4.3,2.31Q22,9.38 22,12t-1.7,4.59T16,18.9Zm-3.46-3.36Q14,14.08 14,12q0-2.08-1.46-3.54T9,7Q6.93,7 5.46,8.46T4,12t1.46,3.54T9,17t3.54-1.46Z" />
|
|
</svg>
|
|
<p style="color: #59a9ff; font-weight: bold; font-size: 0.8rem">${note.title}</p>
|
|
</div>
|
|
<p style="font-size: 0.7rem;">${new Date(note.created_at).toDateString()} ${new Date(note.created_at).toLocaleTimeString().split(':')[0]}:${new Date(note.created_at).toLocaleTimeString().split(':')[1]}</p>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; justify-content: end; align-items: center;">
|
|
<p style="text-align: end;">${note.text}</p>
|
|
</div>
|
|
`;
|
|
|
|
notes_list.appendChild(item);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden:", error);
|
|
}
|
|
} |