fix: Session-Store, DOM-Timing und API-Pfad-Fehler beheben
- connect-sqlite3 durch eigenen BetterSQLiteStore ersetzt (sessions-Tabelle
in der bestehenden DB, keine native Kompilierung nötig)
- db.init() vor require('./auth') gezogen damit BetterSQLiteStore-Konstruktor
db.get() erfolgreich aufrufen kann
- router.js: App-Shell und pageWrapper vor module.render() in DOM einfügen
damit document.getElementById() in Seiten-Modulen funktioniert
- Seiten-Module (meals, notes, contacts, calendar, budget): _container-Referenz
eingeführt, alle document.getElementById() auf _container.querySelector() bzw.
document.querySelector() für body-Elemente umgestellt
- login.js: User-Objekt nach erfolgreichem Login an navigate() übergeben
damit auth.me()-Roundtrip entfällt
- calendar.js: /users → /auth/users korrigiert (404-Fix)
- SW-Cache v8 (erzwingt Reload aller gecachten Seiten-Module)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
+10
-8
@@ -28,6 +28,7 @@ let state = {
|
||||
entries: [],
|
||||
summary: null,
|
||||
};
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Formatierung
|
||||
@@ -67,6 +68,7 @@ async function loadMonth(month) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
_container = container;
|
||||
const today = new Date();
|
||||
state.month = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
|
||||
|
||||
@@ -103,17 +105,17 @@ export async function render(container, { user }) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function wireNav() {
|
||||
document.getElementById('budget-prev').addEventListener('click', async () => {
|
||||
_container.querySelector('#budget-prev').addEventListener('click', async () => {
|
||||
await loadMonth(addMonths(state.month, -1));
|
||||
renderBody();
|
||||
updateLabel();
|
||||
});
|
||||
document.getElementById('budget-next').addEventListener('click', async () => {
|
||||
_container.querySelector('#budget-next').addEventListener('click', async () => {
|
||||
await loadMonth(addMonths(state.month, 1));
|
||||
renderBody();
|
||||
updateLabel();
|
||||
});
|
||||
document.getElementById('budget-today').addEventListener('click', async () => {
|
||||
_container.querySelector('#budget-today').addEventListener('click', async () => {
|
||||
const today = new Date();
|
||||
const m = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
|
||||
if (m === state.month) return;
|
||||
@@ -121,12 +123,12 @@ function wireNav() {
|
||||
renderBody();
|
||||
updateLabel();
|
||||
});
|
||||
document.getElementById('budget-add').addEventListener('click', () => openModal({ mode: 'create' }));
|
||||
_container.querySelector('#budget-add').addEventListener('click', () => openModal({ mode: 'create' }));
|
||||
updateLabel();
|
||||
}
|
||||
|
||||
function updateLabel() {
|
||||
const lbl = document.getElementById('budget-label');
|
||||
const lbl = _container.querySelector('#budget-label');
|
||||
if (lbl) lbl.textContent = formatMonthLabel(state.month);
|
||||
}
|
||||
|
||||
@@ -135,7 +137,7 @@ function updateLabel() {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function renderBody() {
|
||||
const body = document.getElementById('budget-body');
|
||||
const body = _container.querySelector('#budget-body');
|
||||
if (!body) return;
|
||||
updateLabel();
|
||||
|
||||
@@ -186,7 +188,7 @@ function renderBody() {
|
||||
|
||||
if (window.lucide) lucide.createIcons();
|
||||
|
||||
document.getElementById('budget-list')?.addEventListener('click', async (e) => {
|
||||
_container.querySelector('#budget-list')?.addEventListener('click', async (e) => {
|
||||
const delBtn = e.target.closest('[data-action="delete"]');
|
||||
if (delBtn) { await deleteEntry(parseInt(delBtn.dataset.id, 10)); return; }
|
||||
|
||||
@@ -262,7 +264,7 @@ function formatEntryDate(dateStr) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function openModal({ mode, entry = null }) {
|
||||
document.getElementById('budget-modal-overlay')?.remove();
|
||||
document.querySelector('#budget-modal-overlay')?.remove();
|
||||
|
||||
const isEdit = mode === 'edit';
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
@@ -38,6 +38,7 @@ let state = {
|
||||
rangeFrom: '',
|
||||
rangeTo: '',
|
||||
};
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Datumshelfer
|
||||
@@ -130,7 +131,7 @@ async function loadRange(from, to) {
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await api.get('/users');
|
||||
const res = await api.get('/auth/users');
|
||||
state.users = res.data;
|
||||
} catch {
|
||||
state.users = [];
|
||||
@@ -142,6 +143,7 @@ async function loadUsers() {
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
_container = container;
|
||||
state.today = isoDate(new Date());
|
||||
state.cursor = state.today;
|
||||
state.view = 'month';
|
||||
@@ -165,7 +167,7 @@ export async function render(container, { user }) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function renderToolbar() {
|
||||
const bar = document.getElementById('cal-toolbar');
|
||||
const bar = _container.querySelector('#cal-toolbar');
|
||||
if (!bar) return;
|
||||
|
||||
bar.innerHTML = `
|
||||
@@ -216,7 +218,7 @@ function renderToolbar() {
|
||||
}
|
||||
|
||||
function updateLabel() {
|
||||
const lbl = document.getElementById('cal-label');
|
||||
const lbl = _container.querySelector('#cal-label');
|
||||
if (!lbl) return;
|
||||
const d = new Date(state.cursor + 'T00:00:00');
|
||||
const year = d.getFullYear();
|
||||
@@ -273,7 +275,7 @@ async function reloadForView() {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function renderView() {
|
||||
const body = document.getElementById('cal-body');
|
||||
const body = _container.querySelector('#cal-body');
|
||||
if (!body) return;
|
||||
body.innerHTML = '';
|
||||
|
||||
@@ -624,7 +626,7 @@ function renderAgendaEvent(ev) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function showEventPopup(ev, anchor) {
|
||||
document.getElementById('event-popup')?.remove();
|
||||
document.querySelector('#event-popup')?.remove();
|
||||
|
||||
const popup = document.createElement('div');
|
||||
popup.id = 'event-popup';
|
||||
@@ -689,7 +691,7 @@ function showEventPopup(ev, anchor) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function openEventModal({ mode, event = null, date = null }) {
|
||||
document.getElementById('event-modal-overlay')?.remove();
|
||||
document.querySelector('#event-modal-overlay')?.remove();
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'event-modal-overlay';
|
||||
@@ -860,15 +862,15 @@ function buildEventModalHTML({ mode, event, date }) {
|
||||
// Allday-Toggle: Felder umschalten
|
||||
document.addEventListener('change', (e) => {
|
||||
if (e.target.id !== 'modal-allday') return;
|
||||
const tf = document.getElementById('time-fields');
|
||||
const af = document.getElementById('allday-fields');
|
||||
const tf = document.querySelector('#time-fields');
|
||||
const af = document.querySelector('#allday-fields');
|
||||
if (!tf || !af) return;
|
||||
if (e.target.checked) { tf.style.display = 'none'; af.style.display = ''; }
|
||||
else { tf.style.display = ''; af.style.display = 'none'; }
|
||||
});
|
||||
|
||||
function closeEventModal() {
|
||||
document.getElementById('event-modal-overlay')?.remove();
|
||||
document.querySelector('#event-modal-overlay')?.remove();
|
||||
}
|
||||
|
||||
async function saveEvent(overlay, mode, eventId) {
|
||||
|
||||
@@ -32,12 +32,14 @@ let state = {
|
||||
activeCategory: null,
|
||||
searchQuery: '',
|
||||
};
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Entry Point
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
_container = container;
|
||||
container.innerHTML = `
|
||||
<div class="contacts-page">
|
||||
<div class="contacts-toolbar">
|
||||
@@ -70,7 +72,7 @@ export async function render(container, { user }) {
|
||||
|
||||
// Suche
|
||||
let searchTimer;
|
||||
document.getElementById('contacts-search').addEventListener('input', (e) => {
|
||||
_container.querySelector('#contacts-search').addEventListener('input', (e) => {
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(() => {
|
||||
state.searchQuery = e.target.value.trim();
|
||||
@@ -79,10 +81,10 @@ export async function render(container, { user }) {
|
||||
});
|
||||
|
||||
// Kategorie-Filter
|
||||
document.getElementById('contacts-filters').addEventListener('click', (e) => {
|
||||
_container.querySelector('#contacts-filters').addEventListener('click', (e) => {
|
||||
const chip = e.target.closest('[data-cat]');
|
||||
if (!chip) return;
|
||||
document.querySelectorAll('.contact-filter-chip').forEach((c) =>
|
||||
_container.querySelectorAll('.contact-filter-chip').forEach((c) =>
|
||||
c.classList.toggle('contact-filter-chip--active', c === chip)
|
||||
);
|
||||
state.activeCategory = chip.dataset.cat || null;
|
||||
@@ -90,7 +92,7 @@ export async function render(container, { user }) {
|
||||
});
|
||||
|
||||
// Neu
|
||||
document.getElementById('contacts-add-btn').addEventListener('click', () =>
|
||||
_container.querySelector('#contacts-add-btn').addEventListener('click', () =>
|
||||
openModal({ mode: 'create' })
|
||||
);
|
||||
}
|
||||
@@ -119,7 +121,7 @@ function filterContacts() {
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const container = document.getElementById('contacts-list');
|
||||
const container = _container.querySelector('#contacts-list');
|
||||
if (!container) return;
|
||||
|
||||
const contacts = filterContacts();
|
||||
@@ -196,7 +198,7 @@ function renderContactItem(c) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function openModal({ mode, contact = null }) {
|
||||
document.getElementById('contact-modal-overlay')?.remove();
|
||||
document.querySelector('#contact-modal-overlay')?.remove();
|
||||
|
||||
const isEdit = mode === 'edit';
|
||||
const v = (field) => escHtml(isEdit && contact[field] ? contact[field] : '');
|
||||
|
||||
@@ -76,8 +76,8 @@ export async function render(container) {
|
||||
submitBtn.textContent = 'Wird angemeldet …';
|
||||
|
||||
try {
|
||||
await auth.login(username, password);
|
||||
window.oikos.navigate('/');
|
||||
const result = await auth.login(username, password);
|
||||
window.oikos.navigate('/', result.user);
|
||||
} catch (err) {
|
||||
showError(errorEl, err.status === 429
|
||||
? 'Zu viele Versuche. Bitte warte kurz.'
|
||||
|
||||
+11
-7
@@ -30,6 +30,9 @@ let state = {
|
||||
modal: null,
|
||||
};
|
||||
|
||||
// Container-Referenz für Hilfsfunktionen (wird in render() gesetzt)
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Datumshelfer
|
||||
// --------------------------------------------------------
|
||||
@@ -90,6 +93,7 @@ async function loadLists() {
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
_container = container;
|
||||
container.innerHTML = `
|
||||
<div class="meals-page">
|
||||
<div class="week-nav">
|
||||
@@ -123,10 +127,10 @@ export async function render(container, { user }) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function renderWeekGrid() {
|
||||
const grid = document.getElementById('week-grid');
|
||||
const grid = _container.querySelector('#week-grid');
|
||||
if (!grid) return;
|
||||
|
||||
document.getElementById('week-label').textContent =
|
||||
_container.querySelector('#week-label').textContent =
|
||||
formatWeekLabel(state.currentWeek);
|
||||
|
||||
const days = Array.from({ length: 7 }, (_, i) => addDays(state.currentWeek, i));
|
||||
@@ -211,17 +215,17 @@ function renderSlot(date, type, mealsForDay) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function wireNav() {
|
||||
document.getElementById('week-prev')?.addEventListener('click', async () => {
|
||||
_container.querySelector('#week-prev')?.addEventListener('click', async () => {
|
||||
await loadWeek(addDays(state.currentWeek, -7));
|
||||
renderWeekGrid();
|
||||
});
|
||||
|
||||
document.getElementById('week-next')?.addEventListener('click', async () => {
|
||||
_container.querySelector('#week-next')?.addEventListener('click', async () => {
|
||||
await loadWeek(addDays(state.currentWeek, 7));
|
||||
renderWeekGrid();
|
||||
});
|
||||
|
||||
document.getElementById('week-today')?.addEventListener('click', async () => {
|
||||
_container.querySelector('#week-today')?.addEventListener('click', async () => {
|
||||
const monday = getMondayOf(new Date().toISOString().slice(0, 10));
|
||||
if (monday === state.currentWeek) return;
|
||||
await loadWeek(monday);
|
||||
@@ -272,7 +276,7 @@ function wireGrid(grid) {
|
||||
|
||||
function openModal(opts) {
|
||||
state.modal = opts;
|
||||
document.getElementById('meal-modal-overlay')?.remove();
|
||||
document.querySelector('#meal-modal-overlay')?.remove();
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'meal-modal-overlay';
|
||||
@@ -465,7 +469,7 @@ function ingredientRowHTML(name, qty, id) {
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('meal-modal-overlay')?.remove();
|
||||
document.querySelector('#meal-modal-overlay')?.remove();
|
||||
state.modal = null;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ const NOTE_COLORS = [
|
||||
// --------------------------------------------------------
|
||||
|
||||
let state = { notes: [], user: null };
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Markdown-Light Renderer
|
||||
@@ -39,6 +40,7 @@ function renderMarkdownLight(text) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
_container = container;
|
||||
state.user = user;
|
||||
|
||||
container.innerHTML = `
|
||||
@@ -60,7 +62,7 @@ export async function render(container, { user }) {
|
||||
state.notes = res.data;
|
||||
renderGrid();
|
||||
|
||||
document.getElementById('notes-add-btn').addEventListener('click', () => openModal({ mode: 'create' }));
|
||||
_container.querySelector('#notes-add-btn').addEventListener('click', () => openModal({ mode: 'create' }));
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
@@ -68,7 +70,7 @@ export async function render(container, { user }) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function renderGrid() {
|
||||
const grid = document.getElementById('notes-grid');
|
||||
const grid = _container.querySelector('#notes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
if (!state.notes.length) {
|
||||
@@ -140,7 +142,7 @@ function renderNoteCard(note) {
|
||||
// --------------------------------------------------------
|
||||
|
||||
function openModal({ mode, note = null }) {
|
||||
document.getElementById('note-modal-overlay')?.remove();
|
||||
document.querySelector('#note-modal-overlay')?.remove();
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'note-modal-overlay';
|
||||
|
||||
Reference in New Issue
Block a user