fix: Runde-2-Fixes – Monatsauswahl, CalDAV-Update, Lösch-Dialog, EXDATE

- Monatsansicht: selectedDate von currentDate getrennt, Klick verschiebt View nicht mehr - Selected-Day Styling: weißer Text auf Primary-Hintergrund statt nur Textfarbe - Kontextmenü: --bg-surface statt fehlendem --bg-card - CalDAV Update/Delete: parent Calendar-Objekt übergeben (behebt NoneType-Fehler) - HA-Kalender im Kalender-Selektor ergänzt - Browser-confirm() durch styled Modal-Dialog ersetzt mit Serie/Einzeln-Option - EXDATE-Support: einzelne Vorkommen wiederkehrender Termine löschen (lokal + CalDAV) - Fehlende i18n-Keys für Lösch-Dialog ergänzt (DE + EN)
2026-04-29 18:13:12 +02:00
parent e3984eb5cf
commit d4ea097831
10 changed files with 220 additions and 43 deletions
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -487,7 +487,7 @@ a { color: var(--primary); text-decoration: none; }
 .month-col:hover { background: var(--bg-hover); }
 .month-col.today { background: rgba(66,133,244,.08); }
 .month-col.month-selected { background: var(--primary-dim); }
-.month-col.month-selected .cell-day { color: var(--primary); font-weight: 600; }
+.month-col.month-selected .cell-day { background: var(--primary); color: #fff; font-weight: 700; }
 .month-col.other-month .cell-day { color: var(--text-3); }
 .cell-day {
  font-size: 12px; font-weight: 500; color: var(--text-2);
@@ -802,8 +802,8 @@ a { color: var(--primary); text-decoration: none; }
 /* ── Day Context Menu ──────────────────────────────────── */
 .cal-context-menu {
  position: fixed; z-index: 1000;
-  background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.3);
+  background: var(--bg-surface); border: 1px solid var(--border);
+  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.5);
  min-width: 180px; padding: 4px 0;
 }
 .ctx-item {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -317,6 +317,32 @@
  </div>
 </div>

+<!-- Delete Confirm Modal -->
+<div id="modal-delete-confirm" class="modal-overlay hidden">
+  <div class="modal-card" style="max-width:400px">
+    <div class="modal-header">
+      <h3 id="delete-confirm-title">Termin löschen</h3>
+      <button class="icon-btn modal-close" data-modal="modal-delete-confirm">&times;</button>
+    </div>
+    <div class="modal-body">
+      <p id="delete-confirm-text"></p>
+      <div id="delete-series-options" class="hidden" style="margin-top:12px">
+        <label class="toggle-label" style="display:block;margin-bottom:8px">
+          <input type="radio" name="delete-scope" value="single" checked /> Nur diesen Termin
+        </label>
+        <label class="toggle-label" style="display:block">
+          <input type="radio" name="delete-scope" value="all" /> Alle Serienelemente
+        </label>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <div style="flex:1"></div>
+      <button class="btn btn-ghost" data-modal="modal-delete-confirm">Abbrechen</button>
+      <button class="btn btn-danger" id="delete-confirm-ok">Löschen</button>
+    </div>
+  </div>
+</div>
+
 <!-- Event Detail Popup -->
 <div id="popup-event" class="event-popup hidden">
  <div class="popup-header">
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -26,6 +26,7 @@ let weekStartDay = 'monday';

 let state = {
  currentDate: new Date(),
+  selectedDate: null,      // separate from currentDate; used for month-view selection
  currentView: 'month',
  events: [],
  accounts: [],
@@ -253,22 +254,23 @@ function renderView() {
      (date, action, mouseEvent) => {
        if (action === 'navigate') {
          state.currentDate = date;
+          state.selectedDate = date;
          state.currentView = 'day';
          updateViewButtons();
          fetchAndRender();
        } else if (action === 'context') {
-          state.currentDate = date;
+          state.selectedDate = date;
          showDayContextMenu(date, mouseEvent);
-        } else {
-          // 'select' — highlight day without navigating
-          state.currentDate = date;
-          renderMiniCal();
          renderView();
-          updateTitle();
+        } else {
+          // 'select' — only update selectedDate, don't shift the view
+          state.selectedDate = date;
+          renderView();
        }
      },
      showEventPopup,
-      weekStartDay
+      weekStartDay,
+      state.selectedDate
    );
  } else if (state.currentView === 'week') {
    renderWeek(container, state.currentDate, evs,
@@ -780,7 +782,7 @@ function bindTopbar() {
  });

  document.getElementById('btn-settings').onclick = openSettingsModal;
-  document.getElementById('btn-create-event').onclick = () => openNewEventModal(state.currentDate);
+  document.getElementById('btn-create-event').onclick = () => openNewEventModal(state.selectedDate || state.currentDate);

  // Mouse wheel / trackpad scroll navigation – only for month & quarter
  let _wheelLast = 0;
@@ -854,6 +856,82 @@ function bindSidebar() {
 }

 // ── Day Context Menu (month view) ────────────────────────
+// ── Delete logic ──────────────────────────────────────────
+async function deleteEventByScope(ev, scope) {
+  if (scope === 'all' || !ev.rrule) {
+    // Delete the entire event (or non-recurring)
+    if (ev.source === 'google') {
+      const accId = ev.calendar_id.replace('google-', '');
+      await api.delete(`/google/events/${accId}/${encodeURIComponent(ev.id)}`);
+    } else if (ev.source === 'local') {
+      await api.delete(`/local/events/${encodeURIComponent(ev.id)}`);
+    } else if (ev.source === 'ical') {
+      const subId = ev.calendar_id.replace('ical-', '');
+      await api.delete(`/ical/events/${subId}/${encodeURIComponent(ev.id)}`);
+    } else {
+      await api.delete(`/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}&calendar_id=${ev.calendar_id}`);
+    }
+  } else {
+    // Delete single occurrence: add EXDATE to exclude this date
+    const exdate = ev.start.slice(0, 10).replace(/-/g, '');
+    if (ev.source === 'local') {
+      // For local events: update rrule with EXDATE via a special field
+      const currentRrule = ev.rrule || '';
+      await api.put(`/local/events/${encodeURIComponent(ev.id)}`, {
+        exdate: exdate,
+      });
+    } else {
+      // For CalDAV: pass exdate to update
+      await api.put(
+        `/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}&calendar_id=${ev.calendar_id}`,
+        { exdate: exdate }
+      );
+    }
+  }
+}
+
+// ── Delete Confirm Dialog ─────────────────────────────────
+function showDeleteConfirm(ev) {
+  return new Promise(resolve => {
+    const modal = document.getElementById('modal-delete-confirm');
+    const isRecurring = !!(ev.rrule);
+
+    document.getElementById('delete-confirm-title').textContent = t('confirm_delete_title');
+    document.getElementById('delete-confirm-text').textContent = t('confirm_delete_event', { title: ev.title });
+    document.getElementById('delete-series-options').classList.toggle('hidden', !isRecurring);
+
+    // Reset radio
+    const radios = modal.querySelectorAll('input[name="delete-scope"]');
+    radios[0].checked = true;
+
+    // Labels
+    const labels = modal.querySelectorAll('#delete-series-options label');
+    if (labels[0]) labels[0].lastChild.textContent = ' ' + t('delete_single');
+    if (labels[1]) labels[1].lastChild.textContent = ' ' + t('delete_all_series');
+
+    openModal('modal-delete-confirm');
+
+    const okBtn = document.getElementById('delete-confirm-ok');
+    const cleanup = () => {
+      okBtn.onclick = null;
+      modal.querySelectorAll('[data-modal="modal-delete-confirm"]').forEach(b => b.onclick = null);
+    };
+
+    okBtn.onclick = () => {
+      const scope = isRecurring
+        ? modal.querySelector('input[name="delete-scope"]:checked')?.value || 'single'
+        : 'single';
+      cleanup();
+      closeModal('modal-delete-confirm');
+      resolve(scope);
+    };
+
+    modal.querySelectorAll('[data-modal="modal-delete-confirm"]').forEach(b => {
+      b.onclick = () => { cleanup(); closeModal('modal-delete-confirm'); resolve(null); };
+    });
+  });
+}
+
 function showDayContextMenu(date, mouseEvent) {
  document.querySelectorAll('.cal-context-menu').forEach(m => m.remove());

@@ -953,20 +1031,11 @@ function showEventPopup(ev, anchor) {
  };

  document.getElementById('popup-delete').onclick = async () => {
-    if (!confirm(t("confirm_delete_event", {title: ev.title}))) return;
+    const scope = await showDeleteConfirm(ev);
+    if (!scope) return;
    popup.classList.add('hidden');
    try {
-      if (ev.source === 'google') {
-        const accId = ev.calendar_id.replace('google-', '');
-        await api.delete(`/google/events/${accId}/${encodeURIComponent(ev.id)}`);
-      } else if (ev.source === 'local') {
-        await api.delete(`/local/events/${encodeURIComponent(ev.id)}`);
-      } else if (ev.source === 'ical') {
-        const subId = ev.calendar_id.replace('ical-', '');
-        await api.delete(`/ical/events/${subId}/${encodeURIComponent(ev.id)}`);
-      } else {
-        await api.delete(`/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}&calendar_id=${ev.calendar_id}`);
-      }
+      await deleteEventByScope(ev, scope);
      showToast(t('event_deleted'));
      fetchAndRender(true);
    } catch (e) { showToast(e.message, true); }
@@ -1015,6 +1084,16 @@ function populateCalendarSelect(selectedId) {
      sel.appendChild(opt);
    });
  });
+  // Home Assistant calendars
+  state.haAccounts.forEach(acc => {
+    acc.calendars.filter(c => c.enabled).forEach(cal => {
+      const opt = document.createElement('option');
+      opt.value = `homeassistant-${cal.id}`;
+      opt.textContent = `${acc.name} / ${cal.name}`;
+      if (`homeassistant-${cal.id}` === selectedId) opt.selected = true;
+      sel.appendChild(opt);
+    });
+  });
 }

 // ── Date field helpers ────────────────────────────────────
@@ -1315,6 +1394,7 @@ function bindEventModal() {
    const calVal  = document.getElementById('ev-calendar').value;
    const isLocal = calVal.startsWith('local-');
    const isGoogle = calVal.startsWith('google-');
+    const isHA = calVal.startsWith('homeassistant-');
    const loc     = document.getElementById('ev-location').value.trim();
    const desc    = document.getElementById('ev-description').value.trim();
    const color   = state.selectedEventColor;
@@ -1373,6 +1453,9 @@ function bindEventModal() {
          rrule: rrule || null,
        });
        showToast(t('event_created'));
+      } else if (isHA) {
+        showToast(t('ha_create_not_supported'), true);
+        return;
      } else {
        const calId = parseInt(calVal);
        await api.post('/caldav/events', {
@@ -1392,19 +1475,10 @@ function bindEventModal() {
  document.getElementById('ev-delete').onclick = async () => {
    const ev = state.editingEvent;
    if (!ev) return;
-    if (!confirm(t("confirm_delete_event", {title: ev.title}))) return;
+    const scope = await showDeleteConfirm(ev);
+    if (!scope) return;
    try {
-      if (ev.source === 'google') {
-        const accId = ev.calendar_id.replace('google-', '');
-        await api.delete(`/google/events/${accId}/${encodeURIComponent(ev.id)}`);
-      } else if (ev.source === 'local') {
-        await api.delete(`/local/events/${encodeURIComponent(ev.id)}`);
-      } else if (ev.source === 'ical') {
-        const subId = ev.calendar_id.replace('ical-', '');
-        await api.delete(`/ical/events/${subId}/${encodeURIComponent(ev.id)}`);
-      } else {
-        await api.delete(`/caldav/events/${encodeURIComponent(ev.id)}?event_url=${encodeURIComponent(ev.url)}&calendar_id=${ev.calendar_id}`);
-      }
+      await deleteEventByScope(ev, scope);
      showToast(t('event_deleted'));
      closeModal('modal-event');
      fetchAndRender(true);
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -145,6 +145,7 @@ const translations = {
    error_end_before_start: 'Ende kann nicht vor dem Start liegen',
    ctx_create_event: 'Neuen Termin erstellen',
    event_readonly: 'Abonnierte Termine können nicht bearbeitet werden',
+    ha_create_not_supported: 'Termine können in Home Assistant Kalendern nicht direkt erstellt werden',
    rec_label: 'Wiederholung',
    rec_none: 'Keine', rec_daily: 'Täglich', rec_weekly: 'Wöchentlich',
    rec_monthly: 'Monatlich', rec_yearly: 'Jährlich', rec_custom: 'Benutzerdefiniert…',
@@ -154,6 +155,9 @@ const translations = {
    copy_to_calendar: 'Kopieren nach…', event_copied: 'Termin kopiert',
    event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt',
    confirm_delete_event: '"{title}" wirklich löschen?',
+    confirm_delete_title: 'Termin löschen',
+    delete_single: 'Nur diesen Termin',
+    delete_all_series: 'Alle Termine der Serie',
    event_deleted: 'Termin gelöscht',
    error_fill_all: 'Bitte alle Felder ausfüllen',
    account_added: 'Konto "{name}" hinzugefügt',
@@ -349,6 +353,7 @@ const translations = {
    error_end_before_start: 'End cannot be before start',
    ctx_create_event: 'Create new event',
    event_readonly: 'Subscribed events cannot be edited',
+    ha_create_not_supported: 'Events cannot be created directly in Home Assistant calendars',
    rec_label: 'Recurrence',
    rec_none: 'None', rec_daily: 'Daily', rec_weekly: 'Weekly',
    rec_monthly: 'Monthly', rec_yearly: 'Yearly', rec_custom: 'Custom…',
@@ -358,6 +363,9 @@ const translations = {
    copy_to_calendar: 'Copy to…', event_copied: 'Event copied',
    event_updated: 'Event updated', event_created: 'Event created',
    confirm_delete_event: 'Really delete "{title}"?',
+    confirm_delete_title: 'Delete event',
+    delete_single: 'Only this occurrence',
+    delete_all_series: 'All events in series',
    event_deleted: 'Event deleted',
    error_fill_all: 'Please fill in all fields',
    account_added: 'Account "{name}" added',
--- a/frontend/js/views/month.js
+++ b/frontend/js/views/month.js
@@ -5,7 +5,7 @@ const LANE_H   = 20; // px per lane (event height 18px + 2px gap)
 const DAY_H    = 30; // day-number row height
 const NUM_ROWS = 5;  // rolling view: always 5 weeks

-export function renderMonth(container, currentDate, events, onDayClick, onEventClick, weekStartDay = 'monday') {
+export function renderMonth(container, currentDate, events, onDayClick, onEventClick, weekStartDay = 'monday', selectedDate = null) {
  // Dynamic lane limit: how many events fit in the actual row height
  const containerH = container.clientHeight || 600;
  const headerH    = 34; // month-header DOW row
@@ -126,7 +126,8 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
      const isOther  = cell.getMonth() !== primaryMonth;
      const todayCls    = isToday(cell) ? 'today' : '';
      const otherCls    = isOther       ? 'other-month' : '';
-      const selectedCls = isSameDay(cell, currentDate) ? 'month-selected' : '';
+      const selDate     = selectedDate || currentDate;
+      const selectedCls = isSameDay(cell, selDate) ? 'month-selected' : '';
      const numCls      = isToday(cell) ? 'today' : '';
      colsHtml += `<div class="month-col ${todayCls} ${otherCls} ${selectedCls}" data-date="${key}">
        <div class="cell-day ${numCls}">${cell.getDate()}</div>