Skip to content

Commit 668ece2

Browse files
VanDerLarsVanDerLars
committed
formatting booking page
1 parent 3e64d0b commit 668ece2

File tree

2 files changed

+67
-46
lines changed

2 files changed

+67
-46
lines changed

‎src/lib/notion.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,19 +174,17 @@ export function getCurrentBookingItems(items: BookingItem[]): BookingItem[] {
174174
export function getTodayFutureBookingItems(items: BookingItem[]): BookingItem[] {
175175
const now = new Date();
176176
const nowPlus15 = new Date(now.getTime() + 15 * 60 * 1000);
177-
178-
// Anfang und Ende des heutigen Tages (lokale Zeit)
179-
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
180-
const endOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
177+
178+
// 12 Stunden im Voraus anstatt nur bis Ende des Tages
179+
const next12Hours = new Date(now.getTime() + 12 * 60 * 60 * 1000);
181180

182181
return items.filter((item) => {
183182
// item.from muss >= "jetzt" (Zukunft) sein
184-
// und im heutigen Tagesbereich liegen
183+
// und innerhalb der nächsten 12 Stunden liegen
185184
// und nicht in den nächsten 15 Minuten beginnen
186185
return (
187186
item.from >= now &&
188-
item.from >= startOfToday &&
189-
item.from <= endOfToday &&
187+
item.from <= next12Hours &&
190188
item.from > nowPlus15
191189
);
192190
});

‎src/routes/[room]/trmnl/+page.svelte‎

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
function calculateRemainingTime(to: Date, currentNow: Date): string {
1818
const diff = to.getTime() - currentNow.getTime();
1919
const minutes = Math.floor(diff / 60000);
20-
return `${minutes} min verbleibend`;
20+
return `${minutes} `;
2121
}
2222
2323
function formatTime(date: Date): string {
@@ -30,16 +30,33 @@
3030
const diff = nextItem.from.getTime() - currentNow.getTime();
3131
return Math.floor(diff / 60000); // Minuten bis zum nächsten Termin
3232
}
33+
34+
function calculateDuration(from: Date, to: Date): string {
35+
const diff = to.getTime() - from.getTime();
36+
const minutes = Math.floor(diff / 60000);
37+
if (minutes < 60) {
38+
return `${minutes} min`;
39+
} else {
40+
const hours = Math.floor(minutes / 60);
41+
const remainingMinutes = minutes % 60;
42+
return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}min` : `${hours}h`;
43+
}
44+
}
45+
46+
function calculateMinutesUntil(from: Date, currentNow: Date): number {
47+
const diff = from.getTime() - currentNow.getTime();
48+
return Math.floor(diff / 60000);
49+
}
3350
</script>
3451

3552
<svelte:head>
3653
<title>SLN Office - {room?.room || roomParam} | TRMNL</title>
37-
<meta name="description" content="Raumbuchungen für {room?.room || roomParam}" />
54+
<meta name="description" content="Bookings für {room?.room || roomParam}" />
3855
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3956
</svelte:head>
4057

4158
<div
42-
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #000; padding-bottom: 10px;"
59+
style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #CCC; padding: 0 10px;"
4360
>
4461
<div>
4562
<h1 style="font-size: 24px; font-weight: bold; color: #000; margin: 0;">
@@ -67,52 +84,52 @@
6784
</div>
6885
{:else if currentItems.length === 0 && futureItems.length === 0}
6986
<!-- Komplett frei - keine Termine -->
70-
<div style="background: #666; color: #fff; padding: 40px; margin: 20px 0; text-align: center;">
71-
<div style="font-size: 48px; font-weight: bold;">
72-
FREE
73-
</div>
87+
<div style="background: #666; color: #fff; padding: 40px; ; text-align: center;">
88+
<div style="font-size: 100px; font-weight: bold;">FREE</div>
7489
</div>
7590
{:else}
7691
<!-- Aktueller Termin läuft -->
7792
{#if currentItems.length > 0}
7893
{@const firstItem = currentItems[0]}
79-
<div style="background: #000; color: #fff; padding: 20px; margin: 20px 0; text-align: center;">
80-
<div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">
81-
{calculateRemainingTime(firstItem.to, now)}
82-
</div>
83-
<div style="font-size: 14px; margin-bottom: 8px;">
84-
{formatTime(firstItem.from)} - {formatTime(firstItem.to)} Uhr
85-
</div>
86-
<div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">
87-
{firstItem.title || 'Buchung'}
88-
</div>
89-
<div style="font-size: 18px; font-weight: bold;">
90-
{firstItem.user.join(', ')}
94+
<div style="background: #000; color: #fff; padding: 20px; text-align: center;display: flex;">
95+
<div style="width: 50%; float: left; text-align: left; font-size: 85px;">OCCUPIED</div>
96+
<div
97+
style="width: 50%; float: left; text-align: left; border-left: 1px solid #fff; padding-left: 50px;"
98+
>
99+
<div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">
100+
<span style="font-size: 55px;">{calculateRemainingTime(firstItem.to, now)}min</span> remain
101+
</div>
102+
<div style="font-size: 18px; margin-bottom: 8px;">
103+
{formatTime(firstItem.from)} - {formatTime(firstItem.to)} Uhr:
104+
{firstItem.title || 'Meeting'}<br />
105+
{firstItem.user.join(', ')}
106+
</div>
91107
</div>
92108
</div>
93-
<!-- Kein aktueller Termin, aber zukünftige vorhanden -->
109+
<!-- Kein aktueller Termin, aber zukünftige vorhanden -->
94110
{:else if futureItems.length > 0}
95111
{@const nextItem = futureItems[0]}
96112
{@const freeMinutes = calculateFreeTime(futureItems, now)}
97-
<div style="background: #666; color: #fff; padding: 20px; margin: 20px 0; text-align: center;">
98-
<div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">
99-
FREE FOR {freeMinutes} mins
113+
<div style="background: #666; color: #fff; padding: 20px; display: flex;">
114+
<div
115+
style="font-size: 32px; font-weight: bold; margin-bottom: 10px; text-align: left; width: 30%; float: left;"
116+
>
117+
<span style="font-size: 70px;">FREE</span> <br />for {freeMinutes} mins
100118
</div>
101-
<div style="font-size: 14px; margin-bottom: 8px;">
102-
Nächster Termin: {formatTime(nextItem.from)} - {formatTime(nextItem.to)} Uhr
103-
</div>
104-
<div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">
105-
{nextItem.title || 'Buchung'}
106-
</div>
107-
<div style="font-size: 18px; font-weight: bold;">
108-
{nextItem.user.join(', ')}
119+
<div style="width: 70%;float: left; border-left: 1px solid #fff; padding-left: 50px;">
120+
<div style="font-size: 24px; margin-bottom: 8px; text-align: left; ">
121+
<span style="font-size: 16px;"><strong>Upcoming:</strong></span> <br />
122+
{formatTime(nextItem.from)} - {formatTime(nextItem.to)} Uhr<br />
123+
{nextItem.title || 'Meeting'}<br />
124+
{nextItem.user.join(', ')}
125+
</div>
109126
</div>
110127
</div>
111128
{/if}
112129

113-
<!-- Weitere Buchungen als Liste -->
130+
<!-- Weitere Meetingen als Liste -->
114131
<div style="margin: 20px 0;">
115-
<!-- Weitere aktuelle Buchungen (falls vorhanden) -->
132+
<!-- Weitere aktuelle Meetingen (falls vorhanden) -->
116133
{#each currentItems.slice(1) as item}
117134
<div style="background: #000; color: #fff; padding: 8px; margin-bottom: 4px;">
118135
<div style="font-weight: bold; font-size: 14px;">■ AKTIV: {item.user.join(', ')}</div>
@@ -121,12 +138,18 @@
121138
</div>
122139
{/each}
123140

124-
<!-- Zukünftige Buchungen (ohne erste, falls sie im Hero angezeigt wird) -->
125-
{#each (currentItems.length > 0 ? futureItems : futureItems.slice(1)) as item}
126-
<div style="color: #333; padding: 8px 0; border-bottom: 1px solid #ccc;">
127-
<div style="font-weight: bold; font-size: 14px;">□ GEPLANT: {item.user.join(', ')}</div>
128-
<div>VON {formatTime(item.from)} Uhr BIS {formatTime(item.to)} Uhr</div>
129-
<div>DAUER {item.duration}</div>
141+
<!-- Zukünftige Meetingen (ohne erste, falls sie im Hero angezeigt wird) -->
142+
{#each currentItems.length > 0 ? futureItems : futureItems.slice(1) as item}
143+
<div style="color: #333; padding: 8px 0; border-bottom: 2px solid #ccc;">
144+
<div style="font-size: 18px; margin-left: 10px;">
145+
📅 <strong>in {calculateMinutesUntil(item.from, now)} min</strong> for {item.duration ||
146+
calculateDuration(item.from, item.to)}
147+
| {item.title || 'Meeting'}
148+
</div>
149+
<div style="margin-left: 33px; font-size: 14px;">
150+
{formatTime(item.from)} Uhr - {formatTime(item.to)} Uhr | {item.user.join(', ')}
151+
<br />
152+
</div>
130153
</div>
131154
{/each}
132155
</div>

0 commit comments

Comments
 (0)