Skip to content

Commit aadcb45

Browse files
tujtuj
committed
#367: Finished first version of template
1 parent a0d8590 commit aadcb45

File tree

9 files changed

+142
-70
lines changed

9 files changed

+142
-70
lines changed

‎.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
# Unix-style newlines with a newline ending every file
7+
[*]
8+
end_of_line = lf
9+
insert_final_newline = true
10+
charset = utf-8
11+
indent_style = space
12+
indent_size = 2

‎build/calendar-config-develop.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"id": "01FRJPF4XATRN8PBZ35XN84PS6",
55
"description": "Mulighed for at vise et kalenderfeed.",
66
"resources": {
7-
"component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar.js?ts=1710233529216",
8-
"admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-admin.json?ts=1710233529216",
9-
"schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-schema.json?ts=1710233529216",
7+
"component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar.js?ts=1710325041850",
8+
"admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-admin.json?ts=1710325041850",
9+
"schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/calendar-schema.json?ts=1710325041850",
1010
"assets": [],
1111
"options": {},
1212
"content": {}

‎build/calendar-config-main.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"id": "01FRJPF4XATRN8PBZ35XN84PS6",
55
"description": "Mulighed for at vise et kalenderfeed.",
66
"resources": {
7-
"component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar.js?ts=1710233529216",
8-
"admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-admin.json?ts=1710233529216",
9-
"schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-schema.json?ts=1710233529216",
7+
"component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar.js?ts=1710325041850",
8+
"admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-admin.json?ts=1710325041850",
9+
"schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/calendar-schema.json?ts=1710325041850",
1010
"assets": [],
1111
"options": {},
1212
"content": {}

‎build/calendar.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/calendar/calendar-single-booking.js

Lines changed: 69 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function CalendarSingleBooking({
3737
const apiUrl = localStorage.getItem("apiUrl");
3838

3939
const [bookableIntervals, setBookableIntervals] = useState([]);
40-
const [fetchingIntervals, setFetchingIntervals] = useState(true);
40+
const [fetchingIntervals, setFetchingIntervals] = useState(false);
4141
const [currentTime, setCurrentTime] = useState(dayjs());
4242
const [bookingResult, setBookingResult] = useState(null);
4343
const [processingBooking, setProcessingBooking] = useState(false);
@@ -51,6 +51,11 @@ function CalendarSingleBooking({
5151
return;
5252
}
5353

54+
if (fetchingIntervals) {
55+
console.info("Already fetching intervals...");
56+
return;
57+
}
58+
5459
setFetchingIntervals(true);
5560

5661
const resources = slide?.feed?.configuration?.resources ?? [];
@@ -89,26 +94,19 @@ function CalendarSingleBooking({
8994
.locale(localeDa)
9095
.format("HH:mm");
9196

92-
const renderSingleCalendarEvent = (calendarEventsToRender) => {
97+
const renderFutureEvents = (eventsToRender) => {
9398
const now = dayjs();
9499
const elements = [];
95100

96-
if (calendarEventsToRender.length > 0) {
97-
calendarEventsToRender
101+
if (eventsToRender.length > 0) {
102+
eventsToRender
98103
.filter(
99104
(e) => e.endTime > now.unix() && e.endTime <= now.endOf("day").unix()
100105
)
101106
.forEach((event) => {
102107
if (elements.length < 3) {
103108
elements.push(
104-
<ContentItem
105-
key={event.id}
106-
className={
107-
elements.length === 0
108-
? "content-item single--now"
109-
: "content-item single--next"
110-
}
111-
>
109+
<ContentItem key={event.id} className="content-item">
112110
<Meta>
113111
{renderTimeOfDayFromUnixTimestamp(event.startTime)}
114112
{" - "}
@@ -174,11 +172,17 @@ function CalendarSingleBooking({
174172
});
175173
};
176174

177-
const roomInUse = calendarEvents.some(
175+
const currentEvents = calendarEvents.filter(
178176
(cal) =>
179177
cal.startTime <= currentTime.unix() && cal.endTime >= currentTime.unix()
180178
);
181179

180+
const futureEvents = calendarEvents.filter(
181+
(el) => !currentEvents.includes(el)
182+
);
183+
184+
const roomInUse = currentEvents.length > 0;
185+
182186
const roomAvailableForInstantBooking =
183187
!roomInUse && fetchingIntervals ? null : bookableIntervals?.length > 0;
184188

@@ -212,7 +216,13 @@ function CalendarSingleBooking({
212216
<IconCheck style={{ color: "var(--color-green-600)" }} />
213217
)}
214218
</StatusIcon>
215-
<StatusText>{roomInUse ? "Optaget" : "Ledigt"}</StatusText>
219+
<StatusText>
220+
{roomInUse ? (
221+
<FormattedMessage id="room_in_use" defaultMessage="Optaget" />
222+
) : (
223+
<FormattedMessage id="room_available" defaultMessage="Ledigt" />
224+
)}
225+
</StatusText>
216226
</Status>
217227
<DateTime
218228
style={{
@@ -224,27 +234,42 @@ function CalendarSingleBooking({
224234
</DateTime>
225235
</Header>
226236
<Content className="content">
227-
{roomInUse && renderSingleCalendarEvent(calendarEvents)}
237+
{roomInUse &&
238+
currentEvents.map((event) => (
239+
<ContentItem key={event.id} className="content-item">
240+
<Meta>
241+
{renderTimeOfDayFromUnixTimestamp(event.startTime)}
242+
{" - "}
243+
{renderTimeOfDayFromUnixTimestamp(event.endTime)}
244+
</Meta>
245+
<h1>{getTitle(event.title)}</h1>
246+
</ContentItem>
247+
))}
228248
{!roomInUse && (
229249
<>
230250
<ContentItem className="content-item">
231251
{!processingBooking && !bookingResult && (
232252
<>
233253
{fetchingIntervals && (
234-
<p>Undersøger om lokalet kan straksbookes... </p>
254+
<p>
255+
<FormattedMessage
256+
id="instant_booking_checking"
257+
defaultMessage="Undersøger om lokalet kan straksbookes..."
258+
/>
259+
</p>
235260
)}
236261
{!fetchingIntervals && roomAvailableForInstantBooking && (
237262
<>
238263
<h1>
239264
<FormattedMessage
240-
id="instant_booked_not_available"
241-
defaultMessage="instant_booked_available"
265+
id="instant_booking_available"
266+
defaultMessage="Lokalet er ledigt"
242267
/>
243268
</h1>
244269
<p>
245270
<FormattedMessage
246271
id="instant_booked_available_text"
247-
defaultMessage="instant_booked_available_text"
272+
defaultMessage="Straksbook lokalet. Vælg varighed."
248273
/>
249274
</p>
250275
<ButtonWrapper>
@@ -264,36 +289,43 @@ function CalendarSingleBooking({
264289
<p>
265290
<FormattedMessage
266291
id="instant_booked_not_available"
267-
defaultMessage="instant_booked_not_available"
292+
defaultMessage="Straksbookes ikke tilgængeligt"
268293
/>
269294
</p>
270295
)}
271296
</>
272297
)}
273-
{processingBooking && !bookingResult && <p>Booker lokale...</p>}
298+
{processingBooking && !bookingResult && (
299+
<p>
300+
<FormattedMessage
301+
id="instant_booking_processing"
302+
defaultMessage="Booker lokale..."
303+
/>
304+
</p>
305+
)}
274306
{bookingResult?.status === 201 && (
275307
<p>
276308
<FormattedMessage
277309
id="instant_booked_until"
278-
defaultMessage="instant_booked_until"
310+
defaultMessage="Lokalet er straksbooket indtil"
279311
/>{" "}
280312
{dayjs(bookingResult.interval.to)
281313
.locale(localeDa)
282314
.format("HH:mm")}
283315
</p>
284316
)}
285317
</ContentItem>
286-
{calendarEvents?.length > 0 && (
287-
<>
288-
<h3>
289-
<FormattedMessage
290-
id="coming_events"
291-
defaultMessage="comming_events"
292-
/>
293-
</h3>
294-
{renderSingleCalendarEvent(calendarEvents)}
295-
</>
296-
)}
318+
</>
319+
)}
320+
{futureEvents.length > 0 && (
321+
<>
322+
<h3>
323+
<FormattedMessage
324+
id="coming_events"
325+
defaultMessage="Kommende begivenheder"
326+
/>
327+
</h3>
328+
{renderFutureEvents(futureEvents)}
297329
</>
298330
)}
299331
</Content>
@@ -308,13 +340,14 @@ const Wrapper = styled.div`
308340
background-repeat: no-repeat;
309341
background-size: cover;
310342
/*
311-
--bg-color is local to this template file and is populated from configuration.
312-
--background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
313-
*/
343+
--bg-color is local to this template file and is populated from configuration.
344+
--background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
345+
*/
314346
background-color: var(--bg-color, var(--background-color));
315347
background-image: var(--bg-image, none);
316348
317349
color: var(--text-color);
350+
overflow: hidden;
318351
`;
319352

320353
const Header = styled.div`

‎src/calendar/calendar.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
7979
<IntlProvider messages={translations} locale="da" defaultLocale="da">
8080
{layout === "single" && (
8181
<CalendarSingle
82-
calendarEvents={feedData ?? []}
82+
calendarEvents={feedData}
8383
content={content}
8484
templateClasses={classes}
8585
templateRootStyle={rootStyle}
@@ -89,7 +89,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
8989
{layout === "singleBooking" && (
9090
<CalendarSingleBooking
9191
slide={slide}
92-
calendarEvents={feedData ?? []}
92+
calendarEvents={feedData}
9393
content={content}
9494
templateClasses={classes}
9595
templateRootStyle={rootStyle}
@@ -98,7 +98,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
9898
)}
9999
{layout === "multiple" && (
100100
<CalendarMultiple
101-
calendarEvents={feedData ?? []}
101+
calendarEvents={feedData}
102102
content={content}
103103
templateClasses={classes}
104104
templateRootStyle={rootStyle}
@@ -107,7 +107,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
107107
)}
108108
{layout === "multipleDays" && (
109109
<CalendarMultipleDays
110-
calendarEvents={feedData ?? []}
110+
calendarEvents={feedData}
111111
content={content}
112112
templateClasses={classes}
113113
templateRootStyle={rootStyle}

‎src/calendar/lang/da.json

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"value": "Kommende begivenheder"
66
}
77
],
8-
"instant_booked_available": [
8+
"instant_booking_available": [
99
{
1010
"type": 0,
1111
"value": "Lokalet er ledigt"
@@ -20,7 +20,19 @@
2020
"instant_booked_not_available": [
2121
{
2222
"type": 0,
23-
"value": "Lokalet kan ikke straksbookes."
23+
"value": "Straksbookes ikke tilgængeligt"
24+
}
25+
],
26+
"instant_booking_processing": [
27+
{
28+
"type": 0,
29+
"value": "Booker lokale..."
30+
}
31+
],
32+
"instant_booking_checking": [
33+
{
34+
"type": 0,
35+
"value": "Undersøger om lokalet kan straksbookes..."
2436
}
2537
],
2638
"instant_booked_until": [
@@ -29,6 +41,18 @@
2941
"value": "Lokalet er straksbooket indtil"
3042
}
3143
],
44+
"room_in_use": [
45+
{
46+
"type": 0,
47+
"value": "Optaget"
48+
}
49+
],
50+
"room_available": [
51+
{
52+
"type": 0,
53+
"value": "Ledigt"
54+
}
55+
],
3256
"what": [
3357
{
3458
"type": 0,

‎src/index.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -212,11 +212,13 @@ export const Slide = ({ slide: inputSlide }) => {
212212
getTheme(slide);
213213
}
214214

215-
// Apply color scheme.
216-
if (window?.matchMedia("(prefers-color-scheme: dark)").matches) {
217-
document.documentElement.classList.add("color-scheme-dark");
218-
} else {
219-
document.documentElement.classList.add("color-scheme-light");
215+
if (slide?.darkModeEnabled === true) {
216+
// Apply color scheme.
217+
if (window?.matchMedia("(prefers-color-scheme: dark)").matches) {
218+
document.documentElement.classList.add("color-scheme-dark");
219+
} else {
220+
document.documentElement.classList.add("color-scheme-light");
221+
}
220222
}
221223
}, []);
222224

0 commit comments

Comments
 (0)