Initial commit — NOMAD (Navigation Organizer for Maps, Activities & Destinations)

Self-hosted travel planner with Express.js, SQLite, React & Tailwind CSS.
2026-06-20 22:01:45 +00:00 · 2026-03-18 23:58:08 +01:00
commit cb1e217bbe
100 changed files with 25545 additions and 0 deletions
@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { Calendar, Clock, ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate() }
+function getWeekday(year, month, day) { return new Date(year, month, day).getDay() }
+
+// ── Datum-Only Picker ────────────────────────────────────────────────────────
+export function CustomDatePicker({ value, onChange, placeholder, style = {} }) {
+  const { locale } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  const dropRef = useRef(null)
+
+  const parsed = value ? new Date(value + 'T00:00:00') : null
+  const [viewYear, setViewYear] = useState(parsed?.getFullYear() || new Date().getFullYear())
+  const [viewMonth, setViewMonth] = useState(parsed?.getMonth() ?? new Date().getMonth())
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current?.contains(e.target)) return
+      if (dropRef.current?.contains(e.target)) return
+      setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (open && parsed) { setViewYear(parsed.getFullYear()); setViewMonth(parsed.getMonth()) }
+  }, [open])
+
+  const prevMonth = () => { if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1) } else setViewMonth(m => m - 1) }
+  const nextMonth = () => { if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1) } else setViewMonth(m => m + 1) }
+
+  const monthLabel = new Date(viewYear, viewMonth).toLocaleDateString(locale, { month: 'long', year: 'numeric' })
+  const days = daysInMonth(viewYear, viewMonth)
+  const startDay = (getWeekday(viewYear, viewMonth, 1) + 6) % 7 // Mo=0
+  const weekdays = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, i + 1).toLocaleDateString(locale, { weekday: 'narrow' }))
+
+  const displayValue = parsed ? parsed.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' }) : null
+
+  const selectDay = (day) => {
+    const y = String(viewYear)
+    const m = String(viewMonth + 1).padStart(2, '0')
+    const d = String(day).padStart(2, '0')
+    onChange(`${y}-${m}-${d}`)
+    setOpen(false)
+  }
+
+  const selectedDay = parsed && parsed.getFullYear() === viewYear && parsed.getMonth() === viewMonth ? parsed.getDate() : null
+  const today = new Date()
+  const isToday = (d) => today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...style }}>
+      <button type="button" onClick={() => setOpen(o => !o)}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+          padding: '8px 14px', borderRadius: 10,
+          border: '1px solid var(--border-primary)',
+          background: 'var(--bg-input)', color: displayValue ? 'var(--text-primary)' : 'var(--text-faint)',
+          fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', outline: 'none',
+          transition: 'border-color 0.15s',
+        }}
+        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}>
+        <Calendar size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <span>{displayValue || placeholder || 'Datum'}</span>
+      </button>
+
+      {open && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed',
+          top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
+          left: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.left : 0 })(),
+          zIndex: 99999,
+          background: 'var(--bg-card)', border: '1px solid var(--border-primary)',
+          borderRadius: 14, boxShadow: '0 8px 32px rgba(0,0,0,0.12)', padding: 12, width: 268,
+          animation: 'selectIn 0.15s ease-out',
+          backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
+        }}>
+          {/* Month nav */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+            <button type="button" onClick={prevMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronLeft size={16} />
+            </button>
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{monthLabel}</span>
+            <button type="button" onClick={nextMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', color: 'var(--text-faint)' }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <ChevronRight size={16} />
+            </button>
+          </div>
+
+          {/* Weekday headers */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 4 }}>
+            {weekdays.map((d, i) => (
+              <div key={i} style={{ textAlign: 'center', fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '2px 0' }}>{d}</div>
+            ))}
+          </div>
+
+          {/* Days grid */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
+            {Array.from({ length: startDay }, (_, i) => <div key={`e-${i}`} />)}
+            {Array.from({ length: days }, (_, i) => {
+              const d = i + 1
+              const sel = d === selectedDay
+              const td = isToday(d)
+              return (
+                <button key={d} type="button" onClick={() => selectDay(d)}
+                  style={{
+                    width: 32, height: 32, borderRadius: 8, border: 'none',
+                    background: sel ? 'var(--accent)' : 'transparent',
+                    color: sel ? 'var(--accent-text)' : 'var(--text-primary)',
+                    fontSize: 12, fontWeight: sel ? 700 : td ? 600 : 400,
+                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    outline: td && !sel ? '2px solid var(--border-primary)' : 'none', outlineOffset: -2,
+                    transition: 'background 0.1s',
+                  }}
+                  onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                  onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent' }}>
+                  {d}
+                </button>
+              )
+            })}
+          </div>
+
+          {/* Clear */}
+          {value && (
+            <div style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}>
+              <button type="button" onClick={() => { onChange(''); setOpen(false) }}
+                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, color: 'var(--text-faint)', padding: '3px 8px', borderRadius: 6 }}
+                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                ✕
+              </button>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+
+      <style>{`@keyframes selectIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+    </div>
+  )
+}
+
+// ── DateTime Picker (Datum + Uhrzeit kombiniert) ─────────────────────────────
+export function CustomDateTimePicker({ value, onChange, placeholder, style = {} }) {
+  const { locale } = useTranslation()
+  // value = "2024-03-15T14:30" oder ""
+  const [datePart, timePart] = (value || '').split('T')
+
+  const handleDateChange = (d) => {
+    onChange(d ? `${d}T${timePart || '12:00'}` : '')
+  }
+  const handleTimeChange = (t) => {
+    const d = datePart || new Date().toISOString().split('T')[0]
+    onChange(t ? `${d}T${t}` : `${d}T00:00`)
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: 8, ...style }}>
+      <CustomDatePicker value={datePart || ''} onChange={handleDateChange} style={{ flex: 1, minWidth: 0 }} />
+      <div style={{ width: 110, flexShrink: 0 }}>
+        <CustomTimePicker value={timePart || ''} onChange={handleTimeChange} />
+      </div>
+    </div>
+  )
+}
+
+// Inline re-export for convenience
+import CustomTimePicker from './CustomTimePicker'