github/TREK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vacay drag-to-paint, "Everyone" button, live exchange rates

Browse Source 
- Vacay: click-and-drag to paint/erase vacation days across calendar
- Vacay: "Everyone" button sets days for all persons (2+ only)
- Budget: live currency conversion via frankfurter.app (cached 1h)
- Budget: conversion widget in total card with selectable target currency
- Day planner: remove transport mode buttons from day view
This commit is contained in:
Maurice
2026-03-23 21:11:20 +01:00
parent 88dca41ef7
commit faa8c84655
10 changed files with 178 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/api/client.js
View File

@@ -166,6 +166,10 @@ export const reservationsApi = {
delete: (tripId, id) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
}
export const exchangeApi = {
getRates: () => apiClient.get('/exchange-rates').then(r => r.data),
}
export const weatherApi = {
get: (lat, lng, date) => apiClient.get('/weather', { params: { lat, lng, date, units: 'metric' } }).then(r => r.data),
}

44
client/src/components/Budget/BudgetPanel.jsx
View File

@@ -1,8 +1,9 @@
import React, { useState, useEffect, useRef, useMemo } from 'react'
import { useTripStore } from '../../store/tripStore'
import { useTranslation } from '../../i18n'
import { Plus, Trash2, Calculator, Wallet } from 'lucide-react'
import { Plus, Trash2, Calculator, Wallet, ArrowRightLeft } from 'lucide-react'
import CustomSelect from '../shared/CustomSelect'
import { exchangeApi } from '../../api/client'
// ── Helpers ──────────────────────────────────────────────────────────────────
const CURRENCIES = ['EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK', 'TRY', 'THB', 'AUD', 'CAD']
@@ -153,6 +154,15 @@ export default function BudgetPanel({ tripId }) {
const { t, locale } = useTranslation()
const [newCategoryName, setNewCategoryName] = useState('')
const currency = trip?.currency || 'EUR'
const [rates, setRates] = useState(null)
const [convertTo, setConvertTo] = useState(() => {
const saved = localStorage.getItem('budget_convert_to')
return saved || (currency === 'EUR' ? 'USD' : 'EUR')
})
useEffect(() => {
exchangeApi.getRates().then(setRates).catch(() => {})
}, [])
const fmt = (v, cur) => fmtNum(v, locale, cur)
@@ -351,6 +361,38 @@ export default function BudgetPanel({ tripId }) {
{Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</div>
<div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
{/* Live exchange rate conversion */}
{rates && (() => {
const fromRate = currency === 'EUR' ? 1 : rates.rates?.[currency]
const toRate = convertTo === 'EUR' ? 1 : rates.rates?.[convertTo]
const converted = fromRate && toRate ? (grandTotal / fromRate) * toRate : null
return converted != null ? (
<div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
<ArrowRightLeft size={12} style={{ color: 'rgba(255,255,255,0.4)' }} />
<span style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.5 }}>{t('budget.converted')}</span>
</div>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
<span style={{ fontSize: 20, fontWeight: 700 }}>
{Number(converted).toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
<select
value={convertTo}
onChange={e => { setConvertTo(e.target.value); localStorage.setItem('budget_convert_to', e.target.value) }}
style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 6, color: 'rgba(255,255,255,0.7)', fontSize: 12, fontWeight: 600, padding: '2px 4px', cursor: 'pointer', fontFamily: 'inherit' }}
>
{CURRENCIES.filter(c => c !== currency).map(c => (
<option key={c} value={c}>{c}</option>
))}
</select>
</div>
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.3)', marginTop: 4 }}>
1 {currency} = {((toRate / fromRate) || 0).toFixed(4)} {convertTo}
</div>
</div>
) : null
})()}
</div>
{pieSegments.length > 0 && (

11
client/src/components/Planner/DayPlanSidebar.jsx
View File

@@ -855,17 +855,6 @@ export default function DayPlanSidebar({
{/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte) */}
{isSelected && getDayAssignments(day.id).length >= 2 && (
<div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
<div style={{ display: 'flex', background: 'var(--bg-hover)', borderRadius: 8, padding: 2, gap: 2 }}>
{TRANSPORT_MODES.map(m => (
<button key={m.value} onClick={() => setTransportMode(m.value)} style={{
flex: 1, padding: '4px 0', fontSize: 11, fontWeight: transportMode === m.value ? 600 : 400,
background: transportMode === m.value ? 'var(--bg-card)' : 'transparent',
border: 'none', borderRadius: 6, cursor: 'pointer', color: transportMode === m.value ? 'var(--text-primary)' : 'var(--text-muted)',
boxShadow: transportMode === m.value ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
fontFamily: 'inherit',
}}>{m.label}</button>
))}
</div>
{routeInfo && (
<div style={{ display: 'flex', justifyContent: 'center', gap: 12, fontSize: 12, color: 'var(--text-secondary)', background: 'var(--bg-hover)', borderRadius: 8, padding: '5px 10px' }}>

67
client/src/components/Vacay/VacayCalendar.jsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useState, useCallback } from 'react'
import React, { useMemo, useState, useCallback, useRef } from 'react'
import { useVacayStore } from '../../store/vacayStore'
import { useTranslation } from '../../i18n'
import { isWeekend } from './holidays'
@@ -28,22 +28,75 @@ export default function VacayCalendar() {
const blockWeekends = plan?.block_weekends !== false
const companyHolidaysEnabled = plan?.company_holidays_enabled !== false
// Drag-to-paint state
const isDragging = useRef(false)
const dragAction = useRef(null) // 'add' or 'remove'
const dragProcessed = useRef(new Set())
const isDayBlocked = useCallback((dateStr) => {
if (holidays[dateStr]) return true
if (blockWeekends && isWeekend(dateStr)) return true
if (companyHolidaysEnabled && companyHolidaySet.has(dateStr) && !companyMode) return true
return false
}, [holidays, blockWeekends, companyHolidaySet, companyHolidaysEnabled, companyMode])
const handleCellMouseDown = useCallback((dateStr) => {
if (isDayBlocked(dateStr) && !companyMode) return
isDragging.current = true
dragProcessed.current = new Set([dateStr])
if (companyMode) {
dragAction.current = companyHolidaySet.has(dateStr) ? 'remove' : 'add'
toggleCompanyHoliday(dateStr)
} else {
const hasEntry = (entryMap[dateStr] || []).some(e => e.user_id === (selectedUserId || undefined))
dragAction.current = hasEntry ? 'remove' : 'add'
toggleEntry(dateStr, selectedUserId || undefined)
}
}, [companyMode, isDayBlocked, toggleEntry, toggleCompanyHoliday, entryMap, companyHolidaySet, selectedUserId])
const handleCellMouseEnter = useCallback((dateStr) => {
if (!isDragging.current) return
if (dragProcessed.current.has(dateStr)) return
if (isDayBlocked(dateStr) && !companyMode) return
dragProcessed.current.add(dateStr)
if (companyMode) {
const isSet = companyHolidaySet.has(dateStr)
if ((dragAction.current === 'add' && !isSet) || (dragAction.current === 'remove' && isSet)) {
toggleCompanyHoliday(dateStr)
}
} else {
const hasEntry = (entryMap[dateStr] || []).some(e => e.user_id === (selectedUserId || undefined))
if ((dragAction.current === 'add' && !hasEntry) || (dragAction.current === 'remove' && hasEntry)) {
toggleEntry(dateStr, selectedUserId || undefined)
}
}
}, [companyMode, isDayBlocked, toggleEntry, toggleCompanyHoliday, entryMap, companyHolidaySet, selectedUserId])
const handleMouseUp = useCallback(() => {
isDragging.current = false
dragAction.current = null
dragProcessed.current.clear()
}, [])
// Also handle click for single taps (touch/accessibility)
const handleCellClick = useCallback(async (dateStr) => {
// Already handled by mousedown for mouse users, this is fallback for touch
if (isDragging.current) return
if (companyMode) {
if (!companyHolidaysEnabled) return
await toggleCompanyHoliday(dateStr)
return
}
if (holidays[dateStr]) return
if (blockWeekends && isWeekend(dateStr)) return
if (companyHolidaysEnabled && companyHolidaySet.has(dateStr)) return
if (isDayBlocked(dateStr)) return
await toggleEntry(dateStr, selectedUserId || undefined)
}, [companyMode, toggleEntry, toggleCompanyHoliday, holidays, companyHolidaySet, blockWeekends, companyHolidaysEnabled, selectedUserId])
}, [companyMode, toggleEntry, toggleCompanyHoliday, companyHolidaysEnabled, isDayBlocked, selectedUserId])
const selectedUser = users.find(u => u.id === selectedUserId)
return (
<div>
<div onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} style={{ userSelect: 'none' }}>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{Array.from({ length: 12 }, (_, i) => (
<VacayMonthCard
@@ -55,6 +108,8 @@ export default function VacayCalendar() {
companyHolidaysEnabled={companyHolidaysEnabled}
entryMap={entryMap}
onCellClick={handleCellClick}
onCellMouseDown={handleCellMouseDown}
onCellMouseEnter={handleCellMouseEnter}
companyMode={companyMode}
blockWeekends={blockWeekends}
/>

10
client/src/components/Vacay/VacayMonthCard.jsx
View File

@@ -9,7 +9,7 @@ const MONTHS_DE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
export default function VacayMonthCard({
year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
onCellClick, companyMode, blockWeekends
onCellClick, onCellMouseDown, onCellMouseEnter, companyMode, blockWeekends
}) {
const { language } = useTranslation()
const weekdays = language === 'de' ? WEEKDAYS_DE : WEEKDAYS_EN
@@ -69,9 +69,13 @@ export default function VacayMonthCard({
borderRight: '1px solid var(--border-secondary)',
cursor: isBlocked ? 'default' : 'pointer',
}}
onClick={() => onCellClick(dateStr)}
onMouseEnter={e => { if (!isBlocked) e.currentTarget.style.background = 'var(--bg-hover)' }}
onMouseDown={(e) => { e.preventDefault(); onCellMouseDown?.(dateStr) }}
onMouseEnter={(e) => {
onCellMouseEnter?.(dateStr)
if (!isBlocked) e.currentTarget.style.background = 'var(--bg-hover)'
}}
onMouseLeave={e => { e.currentTarget.style.background = weekend ? 'var(--bg-secondary)' : 'transparent' }}
onTouchStart={() => onCellClick(dateStr)}
>
{holiday && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(239,68,68,0.12)' }} />}
{isCompany && <div className="absolute inset-0.5 rounded" style={{ background: 'rgba(245,158,11,0.15)' }} />}

26
client/src/components/Vacay/VacayPersons.jsx
View File

@@ -72,16 +72,36 @@ export default function VacayPersons() {
</div>
<div className="flex flex-col gap-0.5">
{users.length >= 2 && (
<div
onClick={() => setSelectedUserId('all')}
className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group transition-all"
style={{
background: selectedUserId === 'all' ? 'var(--bg-hover)' : 'transparent',
border: selectedUserId === 'all' ? '1px solid var(--border-primary)' : '1px solid transparent',
cursor: 'pointer',
}}>
<div className="w-3.5 h-3.5 rounded-full shrink-0 flex items-center justify-center" style={{ background: 'var(--text-muted)' }}>
<span style={{ fontSize: 8, fontWeight: 700, color: 'var(--bg-card)', lineHeight: 1 }}>A</span>
</div>
<span className="text-xs font-medium flex-1 truncate" style={{ color: 'var(--text-primary)' }}>
{t('vacay.everyone')}
</span>
{selectedUserId === 'all' && (
<Check size={12} style={{ color: 'var(--text-primary)' }} />
)}
</div>
)}
{users.map(u => {
const isSelected = selectedUserId === u.id
return (
<div key={u.id}
onClick={() => { if (isFused) setSelectedUserId(u.id) }}
onClick={() => { if (isFused || users.length >= 2) setSelectedUserId(u.id) }}
className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg group transition-all"
style={{
background: isSelected ? 'var(--bg-hover)' : 'transparent',
border: isSelected ? '1px solid var(--border-primary)' : '1px solid transparent',
cursor: isFused ? 'pointer' : 'default',
cursor: (isFused || users.length >= 2) ? 'pointer' : 'default',
}}>
<button
onClick={(e) => { e.stopPropagation(); setColorEditUserId(u.id); setShowColorPicker(true) }}
@@ -93,7 +113,7 @@ export default function VacayPersons() {
{u.username}
{u.id === currentUser?.id && <span style={{ color: 'var(--text-faint)' }}> ({t('vacay.you')})</span>}
</span>
{isSelected && isFused && (
{isSelected && (isFused || users.length >= 2) && (
<Check size={12} style={{ color: 'var(--text-primary)' }} />
)}
</div>

2
client/src/i18n/translations/de.js
View File

@@ -335,6 +335,7 @@ const de = {
'vacay.dissolved': 'Kalender getrennt',
'vacay.fusedWith': 'Fusioniert mit',
'vacay.you': 'du',
'vacay.everyone': 'Alle',
'vacay.noData': 'Keine Daten',
'vacay.changeColor': 'Farbe ändern',
'vacay.inviteUser': 'Benutzer einladen',
@@ -569,6 +570,7 @@ const de = {
'budget.defaultCategory': 'Neue Kategorie',
'budget.total': 'Gesamt',
'budget.totalBudget': 'Gesamtbudget',
'budget.converted': 'Umgerechnet',
'budget.byCategory': 'Nach Kategorie',
'budget.editTooltip': 'Klicken zum Bearbeiten',
'budget.confirm.deleteCategory': 'Möchtest du die Kategorie "{name}" mit {count} Einträgen wirklich löschen?',

2
client/src/i18n/translations/en.js
View File

@@ -335,6 +335,7 @@ const en = {
'vacay.dissolved': 'Calendar separated',
'vacay.fusedWith': 'Fused with',
'vacay.you': 'you',
'vacay.everyone': 'Everyone',
'vacay.noData': 'No data',
'vacay.changeColor': 'Change color',
'vacay.inviteUser': 'Invite User',
@@ -569,6 +570,7 @@ const en = {
'budget.defaultCategory': 'New Category',
'budget.total': 'Total',
'budget.totalBudget': 'Total Budget',
'budget.converted': 'Converted',
'budget.byCategory': 'By Category',
'budget.editTooltip': 'Click to edit',
'budget.confirm.deleteCategory': 'Are you sure you want to delete the category "{name}" with {count} entries?',