accomadesc 0.4.3 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BookingRequest.svelte +12 -2
- package/dist/MainNav.svelte +1 -1
- package/dist/occuplan/OccuPlanAvailableInfo.svelte +13 -8
- package/dist/occuplan/OccuPlanAvailableInfo.svelte.d.ts +1 -1
- package/dist/occuplan/OccuPlanGrid.svelte +11 -3
- package/dist/occuplan/OccuPlanPicker.svelte +12 -3
- package/dist/occuplan/OccuPlanRows.svelte +11 -3
- package/dist/occuplan/OccuPlanWrapper.svelte +12 -0
- package/dist/occuplan/state.svelte.d.ts +5 -3
- package/dist/occuplan/state.svelte.js +10 -21
- package/dist/occusplan-link/OccuPlanAvailableInfo.svelte +13 -8
- package/dist/occusplan-link/OccuPlanGrid.svelte +11 -3
- package/dist/occusplan-link/OccuPlanPicker.svelte +12 -3
- package/dist/occusplan-link/OccuPlanRows.svelte +11 -3
- package/dist/occusplan-link/OccuPlanWrapper.svelte +12 -0
- package/dist/occusplan-link/state.svelte.d.ts +5 -3
- package/dist/occusplan-link/state.svelte.js +10 -21
- package/package.json +7 -7
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
import Notes from './basic/Notes.svelte';
|
|
5
5
|
import Spinner from './basic/Spinner.svelte';
|
|
6
6
|
import TextInput from './basic/TextInput.svelte';
|
|
7
|
-
import {
|
|
7
|
+
import { contextKey, OccupationState } from './occuplan/state.svelte.js';
|
|
8
8
|
import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
|
|
9
9
|
import { fade } from 'svelte/transition';
|
|
10
10
|
import type { DateTime } from 'luxon';
|
|
11
11
|
import { randomID } from './names/gen.js';
|
|
12
|
+
import { getContext, setContext, untrack } from 'svelte';
|
|
12
13
|
|
|
13
14
|
const {
|
|
14
15
|
endpoint,
|
|
@@ -54,7 +55,16 @@
|
|
|
54
55
|
let sending = $state(false);
|
|
55
56
|
let disabled = $derived(preview || errored || successfullySent);
|
|
56
57
|
|
|
57
|
-
|
|
58
|
+
const stateID = contextKey(untrack(() => calUrl));
|
|
59
|
+
let ss: OccupationState = getContext(stateID);
|
|
60
|
+
if (!ss) {
|
|
61
|
+
ss = new OccupationState(() => {
|
|
62
|
+
return { iCalURL: calUrl, debug: false };
|
|
63
|
+
});
|
|
64
|
+
setContext(stateID, ss);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
let occupationState: OccupationState = $derived(ss);
|
|
58
68
|
let invalid = $derived(
|
|
59
69
|
occupationState && arrival && leave ? !occupationState.validRequest(arrival, leave) : false,
|
|
60
70
|
);
|
package/dist/MainNav.svelte
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime } from 'luxon';
|
|
3
3
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
4
|
-
import { onMount, type Snippet } from 'svelte';
|
|
5
|
-
import {
|
|
6
|
-
OccupationState,
|
|
7
|
-
getOccupationState,
|
|
8
|
-
type AvailableSpans,
|
|
9
|
-
} from './state.svelte.js';
|
|
4
|
+
import { getContext, onMount, untrack, setContext, type Snippet } from 'svelte';
|
|
5
|
+
import { OccupationState, contextKey, type AvailableSpans } from './state.svelte.js';
|
|
10
6
|
import Spinner from '../basic/Spinner.svelte';
|
|
11
7
|
|
|
12
8
|
let {
|
|
@@ -17,13 +13,22 @@
|
|
|
17
13
|
children,
|
|
18
14
|
}: {
|
|
19
15
|
url: string;
|
|
20
|
-
debug?: boolean;
|
|
16
|
+
debug?: boolean | undefined;
|
|
21
17
|
search?: number[];
|
|
22
18
|
maxFutureDate?: DateTime;
|
|
23
19
|
children: Snippet<[AvailableSpans]>;
|
|
24
20
|
} = $props();
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
const stateID = contextKey(untrack(() => url));
|
|
23
|
+
let ss: OccupationState = getContext(stateID);
|
|
24
|
+
if (!ss) {
|
|
25
|
+
ss = new OccupationState(() => {
|
|
26
|
+
return { iCalURL: url, debug };
|
|
27
|
+
});
|
|
28
|
+
setContext(stateID, ss);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
let occupationState: OccupationState = $derived(ss);
|
|
27
32
|
let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
|
|
28
33
|
|
|
29
34
|
onMount(() => {
|
|
@@ -3,7 +3,7 @@ import { type Snippet } from 'svelte';
|
|
|
3
3
|
import { type AvailableSpans } from './state.svelte.js';
|
|
4
4
|
type $$ComponentProps = {
|
|
5
5
|
url: string;
|
|
6
|
-
debug?: boolean;
|
|
6
|
+
debug?: boolean | undefined;
|
|
7
7
|
search?: number[];
|
|
8
8
|
maxFutureDate?: DateTime;
|
|
9
9
|
children: Snippet<[AvailableSpans]>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime, type MonthNumbers } from 'luxon';
|
|
3
3
|
import {
|
|
4
|
+
contextKey,
|
|
4
5
|
defaultMonthHeaderFormat,
|
|
5
6
|
defaultMonthLabels,
|
|
6
7
|
defaultWeekdayLabels,
|
|
7
8
|
OccupationState,
|
|
8
|
-
getOccupationState,
|
|
9
9
|
occupationTypeFormatting,
|
|
10
10
|
realFirstMonth,
|
|
11
11
|
type FirstMonth,
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
import Button from '../basic/Button.svelte';
|
|
16
16
|
import Spinner from '../basic/Spinner.svelte';
|
|
17
17
|
import { randomID } from '../names/gen.js';
|
|
18
|
-
import { onMount } from 'svelte';
|
|
18
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
19
19
|
|
|
20
20
|
let {
|
|
21
21
|
url,
|
|
@@ -49,7 +49,15 @@
|
|
|
49
49
|
|
|
50
50
|
const id = randomID();
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
const stateID = contextKey(untrack(() => url));
|
|
53
|
+
let ss: OccupationState = getContext(stateID);
|
|
54
|
+
if (!ss) {
|
|
55
|
+
ss = new OccupationState(() => {
|
|
56
|
+
return { iCalURL: url, debug };
|
|
57
|
+
});
|
|
58
|
+
setContext(stateID, ss);
|
|
59
|
+
}
|
|
60
|
+
let occupationState: OccupationState = $derived(ss);
|
|
53
61
|
|
|
54
62
|
//let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
|
|
55
63
|
const monthHeader = (monthNum: MonthNumbers, year: number): string => {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime, type MonthNumbers } from 'luxon';
|
|
3
3
|
import {
|
|
4
|
+
contextKey,
|
|
4
5
|
defaultMonthHeaderFormat,
|
|
5
6
|
defaultMonthLabels,
|
|
6
7
|
defaultWeekdayLabels,
|
|
7
8
|
OccupationState,
|
|
8
|
-
getOccupationState,
|
|
9
9
|
realFirstMonth,
|
|
10
10
|
type OccuplanTranslations,
|
|
11
11
|
} from './state.svelte.js';
|
|
12
|
-
import { onMount, untrack } from 'svelte';
|
|
12
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
13
13
|
import Button from '../basic/Button.svelte';
|
|
14
14
|
import Spinner from '../basic/Spinner.svelte';
|
|
15
15
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
@@ -56,7 +56,16 @@
|
|
|
56
56
|
dateSelected?: (arrival: DateTime, leave: DateTime) => void;
|
|
57
57
|
} = $props();
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
const stateID = contextKey(untrack(() => url));
|
|
60
|
+
let ss: OccupationState = getContext(stateID);
|
|
61
|
+
if (!ss) {
|
|
62
|
+
ss = new OccupationState(() => {
|
|
63
|
+
return { iCalURL: url, debug };
|
|
64
|
+
});
|
|
65
|
+
setContext(stateID, ss);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
let occupationState: OccupationState = $derived(ss);
|
|
60
69
|
|
|
61
70
|
const monthHeader = (monthNum: MonthNumbers, year: number): string => {
|
|
62
71
|
const monthLabel = monthLabels[monthNum];
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
defaultMonthLabels,
|
|
5
5
|
defaultWeekendLabel,
|
|
6
6
|
OccupationState,
|
|
7
|
-
getOccupationState,
|
|
8
7
|
occupationTypeFormatting,
|
|
9
8
|
type OccupationType,
|
|
10
9
|
type OccuplanTranslations,
|
|
11
10
|
type DayHelper,
|
|
12
11
|
type FirstMonth,
|
|
13
12
|
realFirstMonth,
|
|
13
|
+
contextKey,
|
|
14
14
|
} from './state.svelte.js';
|
|
15
15
|
import Button from '../basic/Button.svelte';
|
|
16
16
|
import { browser } from '$app/environment';
|
|
17
17
|
import Spinner from '../basic/Spinner.svelte';
|
|
18
18
|
import { randomID } from '../names/gen.js';
|
|
19
|
-
import { onMount } from 'svelte';
|
|
19
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
20
20
|
|
|
21
21
|
let {
|
|
22
22
|
url,
|
|
@@ -47,7 +47,15 @@
|
|
|
47
47
|
|
|
48
48
|
const id = randomID();
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
const stateID = contextKey(untrack(() => url));
|
|
51
|
+
let ss: OccupationState = getContext(stateID);
|
|
52
|
+
if (!ss) {
|
|
53
|
+
ss = new OccupationState(() => {
|
|
54
|
+
return { iCalURL: url, debug };
|
|
55
|
+
});
|
|
56
|
+
setContext(stateID, ss);
|
|
57
|
+
}
|
|
58
|
+
let occupationState: OccupationState = $derived(ss);
|
|
51
59
|
|
|
52
60
|
let page: number = $state(0);
|
|
53
61
|
let rfMonth: number | DateTime = $derived(
|
|
@@ -8,8 +8,11 @@
|
|
|
8
8
|
defaultMonthLabels,
|
|
9
9
|
defaultWeekdayLabels,
|
|
10
10
|
defaultMonthHeaderFormat,
|
|
11
|
+
contextKey,
|
|
12
|
+
OccupationState,
|
|
11
13
|
} from './state.svelte.js';
|
|
12
14
|
import { DateTime } from 'luxon';
|
|
15
|
+
import { getContext, setContext, untrack } from 'svelte';
|
|
13
16
|
|
|
14
17
|
let {
|
|
15
18
|
url,
|
|
@@ -58,6 +61,15 @@
|
|
|
58
61
|
showGrid = false;
|
|
59
62
|
}
|
|
60
63
|
});
|
|
64
|
+
|
|
65
|
+
const stateID = contextKey(untrack(() => url));
|
|
66
|
+
let ss: OccupationState = getContext(stateID);
|
|
67
|
+
if (!ss) {
|
|
68
|
+
ss = new OccupationState(() => {
|
|
69
|
+
return { iCalURL: url, debug };
|
|
70
|
+
});
|
|
71
|
+
setContext(stateID, ss);
|
|
72
|
+
}
|
|
61
73
|
</script>
|
|
62
74
|
|
|
63
75
|
<div class="calendar-wrapper" bind:clientWidth={w}>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DateTime, type MonthNumbers, type WeekdayNumbers } from 'luxon';
|
|
2
|
+
export declare const contextKey: (id: string) => string;
|
|
2
3
|
export interface AvailableSpans {
|
|
3
4
|
[key: number]: DateTime | null;
|
|
4
5
|
}
|
|
@@ -15,7 +16,6 @@ export type MonthLabels = {
|
|
|
15
16
|
[key in MonthNumbers]: string;
|
|
16
17
|
};
|
|
17
18
|
export type OccupationType = 'one' | 'two' | 'three';
|
|
18
|
-
export declare const OCCUPATION_STATE = "occupation-state";
|
|
19
19
|
export declare const occupationTypeFormattingByOccupation: (o?: Occupation) => {
|
|
20
20
|
fontColor: string;
|
|
21
21
|
bgColor: string;
|
|
@@ -73,7 +73,10 @@ export declare class OccupationState {
|
|
|
73
73
|
occupations: Occupation[];
|
|
74
74
|
loading: boolean;
|
|
75
75
|
debug: boolean;
|
|
76
|
-
constructor(
|
|
76
|
+
constructor(iniFn: () => {
|
|
77
|
+
iCalURL: string;
|
|
78
|
+
debug: boolean | undefined;
|
|
79
|
+
});
|
|
77
80
|
loadOccupations: () => Promise<boolean>;
|
|
78
81
|
private eventsIncomingCallback;
|
|
79
82
|
private dayKey;
|
|
@@ -89,4 +92,3 @@ export declare class OccupationState {
|
|
|
89
92
|
validRequest: (from: DateTime, to: DateTime) => boolean;
|
|
90
93
|
occupationStyle: (d: DayHelper, highlightWeekend: boolean | undefined, maxDate: DateTime) => string;
|
|
91
94
|
}
|
|
92
|
-
export declare const getOccupationState: (url: string, debug?: boolean) => OccupationState;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
2
2
|
import { getEvents } from '../helpers/readICS.js';
|
|
3
3
|
import { DateTime } from 'luxon';
|
|
4
|
-
|
|
5
|
-
import { getContext, setContext } from 'svelte';
|
|
6
|
-
export const OCCUPATION_STATE = 'occupation-state';
|
|
4
|
+
export const contextKey = (id) => `SS_${id}_CONTEXT`;
|
|
7
5
|
export const occupationTypeFormattingByOccupation = (o) => {
|
|
8
6
|
return occupationTypeFormatting(o?.type);
|
|
9
7
|
};
|
|
@@ -161,8 +159,8 @@ export const realFirstMonth = (firstMonth, firstMonthYear, numberOfMonth, page)
|
|
|
161
159
|
.plus({ month: monthToAdd });
|
|
162
160
|
};
|
|
163
161
|
const validDay = (d) => {
|
|
164
|
-
const today =
|
|
165
|
-
const m =
|
|
162
|
+
const today = DateTime.utc();
|
|
163
|
+
const m = DateTime.local(d.year, d.month, d.day);
|
|
166
164
|
if (m < today) {
|
|
167
165
|
return false;
|
|
168
166
|
}
|
|
@@ -199,11 +197,12 @@ export class OccupationState {
|
|
|
199
197
|
occupations = $state([]);
|
|
200
198
|
loading = $state(false);
|
|
201
199
|
debug = $state(false);
|
|
202
|
-
constructor(
|
|
203
|
-
|
|
200
|
+
constructor(iniFn) {
|
|
201
|
+
const data = iniFn();
|
|
202
|
+
this.debug = data.debug ?? false;
|
|
204
203
|
if (this.debug)
|
|
205
|
-
console.log('Constructing OState with CalUrl: ', iCalURL);
|
|
206
|
-
this.iCalURL = iCalURL;
|
|
204
|
+
console.log('Constructing OState with CalUrl: ', data.iCalURL);
|
|
205
|
+
this.iCalURL = data.iCalURL;
|
|
207
206
|
//this.loadOccupations();
|
|
208
207
|
}
|
|
209
208
|
loadOccupations = async () => {
|
|
@@ -274,7 +273,7 @@ export class OccupationState {
|
|
|
274
273
|
let foundFirst = false;
|
|
275
274
|
let firstDate;
|
|
276
275
|
let consecutive = 0;
|
|
277
|
-
let d = normalizeDate(
|
|
276
|
+
let d = normalizeDate(DateTime.utc());
|
|
278
277
|
while (d <= maxFutureDate) {
|
|
279
278
|
const key = `${d.year}-${d.month}-${d.day}`;
|
|
280
279
|
if (this.occupiedDays[key]) {
|
|
@@ -336,7 +335,7 @@ export class OccupationState {
|
|
|
336
335
|
if (!valid) {
|
|
337
336
|
return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
|
|
338
337
|
}
|
|
339
|
-
const day =
|
|
338
|
+
const day = DateTime.utc(d.year, d.month, d.day);
|
|
340
339
|
const outOfScope = day >= maxDate;
|
|
341
340
|
if (outOfScope) {
|
|
342
341
|
return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
|
|
@@ -412,13 +411,3 @@ export class OccupationState {
|
|
|
412
411
|
`;
|
|
413
412
|
};
|
|
414
413
|
}
|
|
415
|
-
export const getOccupationState = (url, debug = false) => {
|
|
416
|
-
if (debug)
|
|
417
|
-
console.log('Get OState /w url', url);
|
|
418
|
-
const stateID = `i-${url}-${OCCUPATION_STATE}`;
|
|
419
|
-
let _instance = getContext(stateID);
|
|
420
|
-
if (_instance)
|
|
421
|
-
return _instance;
|
|
422
|
-
setContext(stateID, new OccupationState(url, debug));
|
|
423
|
-
return getContext(stateID);
|
|
424
|
-
};
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime } from 'luxon';
|
|
3
3
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
4
|
-
import { onMount, type Snippet } from 'svelte';
|
|
5
|
-
import {
|
|
6
|
-
OccupationState,
|
|
7
|
-
getOccupationState,
|
|
8
|
-
type AvailableSpans,
|
|
9
|
-
} from '../occuplan/state.svelte.js';
|
|
4
|
+
import { getContext, onMount, untrack, setContext, type Snippet } from 'svelte';
|
|
5
|
+
import { OccupationState, contextKey, type AvailableSpans } from '../occuplan/state.svelte.js';
|
|
10
6
|
import Spinner from '../basic/Spinner.svelte';
|
|
11
7
|
|
|
12
8
|
let {
|
|
@@ -17,13 +13,22 @@
|
|
|
17
13
|
children,
|
|
18
14
|
}: {
|
|
19
15
|
url: string;
|
|
20
|
-
debug?: boolean;
|
|
16
|
+
debug?: boolean | undefined;
|
|
21
17
|
search?: number[];
|
|
22
18
|
maxFutureDate?: DateTime;
|
|
23
19
|
children: Snippet<[AvailableSpans]>;
|
|
24
20
|
} = $props();
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
const stateID = contextKey(untrack(() => url));
|
|
23
|
+
let ss: OccupationState = getContext(stateID);
|
|
24
|
+
if (!ss) {
|
|
25
|
+
ss = new OccupationState(() => {
|
|
26
|
+
return { iCalURL: url, debug };
|
|
27
|
+
});
|
|
28
|
+
setContext(stateID, ss);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
let occupationState: OccupationState = $derived(ss);
|
|
27
32
|
let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
|
|
28
33
|
|
|
29
34
|
onMount(() => {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime, type MonthNumbers } from 'luxon';
|
|
3
3
|
import {
|
|
4
|
+
contextKey,
|
|
4
5
|
defaultMonthHeaderFormat,
|
|
5
6
|
defaultMonthLabels,
|
|
6
7
|
defaultWeekdayLabels,
|
|
7
8
|
OccupationState,
|
|
8
|
-
getOccupationState,
|
|
9
9
|
occupationTypeFormatting,
|
|
10
10
|
realFirstMonth,
|
|
11
11
|
type FirstMonth,
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
import Button from '../basic/Button.svelte';
|
|
16
16
|
import Spinner from '../basic/Spinner.svelte';
|
|
17
17
|
import { randomID } from '../names/gen.js';
|
|
18
|
-
import { onMount } from 'svelte';
|
|
18
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
19
19
|
|
|
20
20
|
let {
|
|
21
21
|
url,
|
|
@@ -49,7 +49,15 @@
|
|
|
49
49
|
|
|
50
50
|
const id = randomID();
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
const stateID = contextKey(untrack(() => url));
|
|
53
|
+
let ss: OccupationState = getContext(stateID);
|
|
54
|
+
if (!ss) {
|
|
55
|
+
ss = new OccupationState(() => {
|
|
56
|
+
return { iCalURL: url, debug };
|
|
57
|
+
});
|
|
58
|
+
setContext(stateID, ss);
|
|
59
|
+
}
|
|
60
|
+
let occupationState: OccupationState = $derived(ss);
|
|
53
61
|
|
|
54
62
|
//let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
|
|
55
63
|
const monthHeader = (monthNum: MonthNumbers, year: number): string => {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { DateTime, type MonthNumbers } from 'luxon';
|
|
3
3
|
import {
|
|
4
|
+
contextKey,
|
|
4
5
|
defaultMonthHeaderFormat,
|
|
5
6
|
defaultMonthLabels,
|
|
6
7
|
defaultWeekdayLabels,
|
|
7
8
|
OccupationState,
|
|
8
|
-
getOccupationState,
|
|
9
9
|
realFirstMonth,
|
|
10
10
|
type OccuplanTranslations,
|
|
11
11
|
} from '../occuplan/state.svelte.js';
|
|
12
|
-
import { onMount, untrack } from 'svelte';
|
|
12
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
13
13
|
import Button from '../basic/Button.svelte';
|
|
14
14
|
import Spinner from '../basic/Spinner.svelte';
|
|
15
15
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
@@ -56,7 +56,16 @@
|
|
|
56
56
|
dateSelected?: (arrival: DateTime, leave: DateTime) => void;
|
|
57
57
|
} = $props();
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
const stateID = contextKey(untrack(() => url));
|
|
60
|
+
let ss: OccupationState = getContext(stateID);
|
|
61
|
+
if (!ss) {
|
|
62
|
+
ss = new OccupationState(() => {
|
|
63
|
+
return { iCalURL: url, debug };
|
|
64
|
+
});
|
|
65
|
+
setContext(stateID, ss);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
let occupationState: OccupationState = $derived(ss);
|
|
60
69
|
|
|
61
70
|
const monthHeader = (monthNum: MonthNumbers, year: number): string => {
|
|
62
71
|
const monthLabel = monthLabels[monthNum];
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
defaultMonthLabels,
|
|
5
5
|
defaultWeekendLabel,
|
|
6
6
|
OccupationState,
|
|
7
|
-
getOccupationState,
|
|
8
7
|
occupationTypeFormatting,
|
|
9
8
|
type OccupationType,
|
|
10
9
|
type OccuplanTranslations,
|
|
11
10
|
type DayHelper,
|
|
12
11
|
type FirstMonth,
|
|
13
12
|
realFirstMonth,
|
|
13
|
+
contextKey,
|
|
14
14
|
} from '../occuplan/state.svelte.js';
|
|
15
15
|
import Button from '../basic/Button.svelte';
|
|
16
16
|
import { browser } from '$app/environment';
|
|
17
17
|
import Spinner from '../basic/Spinner.svelte';
|
|
18
18
|
import { randomID } from '../names/gen.js';
|
|
19
|
-
import { onMount } from 'svelte';
|
|
19
|
+
import { getContext, onMount, setContext, untrack } from 'svelte';
|
|
20
20
|
|
|
21
21
|
let {
|
|
22
22
|
url,
|
|
@@ -47,7 +47,15 @@
|
|
|
47
47
|
|
|
48
48
|
const id = randomID();
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
const stateID = contextKey(untrack(() => url));
|
|
51
|
+
let ss: OccupationState = getContext(stateID);
|
|
52
|
+
if (!ss) {
|
|
53
|
+
ss = new OccupationState(() => {
|
|
54
|
+
return { iCalURL: url, debug };
|
|
55
|
+
});
|
|
56
|
+
setContext(stateID, ss);
|
|
57
|
+
}
|
|
58
|
+
let occupationState: OccupationState = $derived(ss);
|
|
51
59
|
|
|
52
60
|
let page: number = $state(0);
|
|
53
61
|
let rfMonth: number | DateTime = $derived(
|
|
@@ -8,8 +8,11 @@
|
|
|
8
8
|
defaultMonthLabels,
|
|
9
9
|
defaultWeekdayLabels,
|
|
10
10
|
defaultMonthHeaderFormat,
|
|
11
|
+
contextKey,
|
|
12
|
+
OccupationState,
|
|
11
13
|
} from '../occuplan/state.svelte.js';
|
|
12
14
|
import { DateTime } from 'luxon';
|
|
15
|
+
import { getContext, setContext, untrack } from 'svelte';
|
|
13
16
|
|
|
14
17
|
let {
|
|
15
18
|
url,
|
|
@@ -58,6 +61,15 @@
|
|
|
58
61
|
showGrid = false;
|
|
59
62
|
}
|
|
60
63
|
});
|
|
64
|
+
|
|
65
|
+
const stateID = contextKey(untrack(() => url));
|
|
66
|
+
let ss: OccupationState = getContext(stateID);
|
|
67
|
+
if (!ss) {
|
|
68
|
+
ss = new OccupationState(() => {
|
|
69
|
+
return { iCalURL: url, debug };
|
|
70
|
+
});
|
|
71
|
+
setContext(stateID, ss);
|
|
72
|
+
}
|
|
61
73
|
</script>
|
|
62
74
|
|
|
63
75
|
<div class="calendar-wrapper" bind:clientWidth={w}>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DateTime, type MonthNumbers, type WeekdayNumbers } from 'luxon';
|
|
2
|
+
export declare const contextKey: (id: string) => string;
|
|
2
3
|
export interface AvailableSpans {
|
|
3
4
|
[key: number]: DateTime | null;
|
|
4
5
|
}
|
|
@@ -15,7 +16,6 @@ export type MonthLabels = {
|
|
|
15
16
|
[key in MonthNumbers]: string;
|
|
16
17
|
};
|
|
17
18
|
export type OccupationType = 'one' | 'two' | 'three';
|
|
18
|
-
export declare const OCCUPATION_STATE = "occupation-state";
|
|
19
19
|
export declare const occupationTypeFormattingByOccupation: (o?: Occupation) => {
|
|
20
20
|
fontColor: string;
|
|
21
21
|
bgColor: string;
|
|
@@ -73,7 +73,10 @@ export declare class OccupationState {
|
|
|
73
73
|
occupations: Occupation[];
|
|
74
74
|
loading: boolean;
|
|
75
75
|
debug: boolean;
|
|
76
|
-
constructor(
|
|
76
|
+
constructor(iniFn: () => {
|
|
77
|
+
iCalURL: string;
|
|
78
|
+
debug: boolean | undefined;
|
|
79
|
+
});
|
|
77
80
|
loadOccupations: () => Promise<boolean>;
|
|
78
81
|
private eventsIncomingCallback;
|
|
79
82
|
private dayKey;
|
|
@@ -89,4 +92,3 @@ export declare class OccupationState {
|
|
|
89
92
|
validRequest: (from: DateTime, to: DateTime) => boolean;
|
|
90
93
|
occupationStyle: (d: DayHelper, highlightWeekend: boolean | undefined, maxDate: DateTime) => string;
|
|
91
94
|
}
|
|
92
|
-
export declare const getOccupationState: (url: string, debug?: boolean) => OccupationState;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { normalizeDate } from '../helpers/normalizeDate.js';
|
|
2
2
|
import { getEvents } from '../helpers/readICS.js';
|
|
3
3
|
import { DateTime } from 'luxon';
|
|
4
|
-
|
|
5
|
-
import { getContext, setContext } from 'svelte';
|
|
6
|
-
export const OCCUPATION_STATE = 'occupation-state';
|
|
4
|
+
export const contextKey = (id) => `SS_${id}_CONTEXT`;
|
|
7
5
|
export const occupationTypeFormattingByOccupation = (o) => {
|
|
8
6
|
return occupationTypeFormatting(o?.type);
|
|
9
7
|
};
|
|
@@ -161,8 +159,8 @@ export const realFirstMonth = (firstMonth, firstMonthYear, numberOfMonth, page)
|
|
|
161
159
|
.plus({ month: monthToAdd });
|
|
162
160
|
};
|
|
163
161
|
const validDay = (d) => {
|
|
164
|
-
const today =
|
|
165
|
-
const m =
|
|
162
|
+
const today = DateTime.utc();
|
|
163
|
+
const m = DateTime.local(d.year, d.month, d.day);
|
|
166
164
|
if (m < today) {
|
|
167
165
|
return false;
|
|
168
166
|
}
|
|
@@ -199,11 +197,12 @@ export class OccupationState {
|
|
|
199
197
|
occupations = $state([]);
|
|
200
198
|
loading = $state(false);
|
|
201
199
|
debug = $state(false);
|
|
202
|
-
constructor(
|
|
203
|
-
|
|
200
|
+
constructor(iniFn) {
|
|
201
|
+
const data = iniFn();
|
|
202
|
+
this.debug = data.debug ?? false;
|
|
204
203
|
if (this.debug)
|
|
205
|
-
console.log('Constructing OState with CalUrl: ', iCalURL);
|
|
206
|
-
this.iCalURL = iCalURL;
|
|
204
|
+
console.log('Constructing OState with CalUrl: ', data.iCalURL);
|
|
205
|
+
this.iCalURL = data.iCalURL;
|
|
207
206
|
//this.loadOccupations();
|
|
208
207
|
}
|
|
209
208
|
loadOccupations = async () => {
|
|
@@ -274,7 +273,7 @@ export class OccupationState {
|
|
|
274
273
|
let foundFirst = false;
|
|
275
274
|
let firstDate;
|
|
276
275
|
let consecutive = 0;
|
|
277
|
-
let d = normalizeDate(
|
|
276
|
+
let d = normalizeDate(DateTime.utc());
|
|
278
277
|
while (d <= maxFutureDate) {
|
|
279
278
|
const key = `${d.year}-${d.month}-${d.day}`;
|
|
280
279
|
if (this.occupiedDays[key]) {
|
|
@@ -336,7 +335,7 @@ export class OccupationState {
|
|
|
336
335
|
if (!valid) {
|
|
337
336
|
return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
|
|
338
337
|
}
|
|
339
|
-
const day =
|
|
338
|
+
const day = DateTime.utc(d.year, d.month, d.day);
|
|
340
339
|
const outOfScope = day >= maxDate;
|
|
341
340
|
if (outOfScope) {
|
|
342
341
|
return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
|
|
@@ -412,13 +411,3 @@ export class OccupationState {
|
|
|
412
411
|
`;
|
|
413
412
|
};
|
|
414
413
|
}
|
|
415
|
-
export const getOccupationState = (url, debug = false) => {
|
|
416
|
-
if (debug)
|
|
417
|
-
console.log('Get OState /w url', url);
|
|
418
|
-
const stateID = `i-${url}-${OCCUPATION_STATE}`;
|
|
419
|
-
let _instance = getContext(stateID);
|
|
420
|
-
if (_instance)
|
|
421
|
-
return _instance;
|
|
422
|
-
setContext(stateID, new OccupationState(url, debug));
|
|
423
|
-
return getContext(stateID);
|
|
424
|
-
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "accomadesc",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"!dist/**/*.test.*",
|
|
@@ -26,22 +26,22 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@sveltejs/adapter-auto": "^3.3.1",
|
|
28
28
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
29
|
-
"@sveltejs/kit": "^2.
|
|
29
|
+
"@sveltejs/kit": "^2.53.4",
|
|
30
30
|
"@sveltejs/package": "^2.5.7",
|
|
31
31
|
"@sveltejs/vite-plugin-svelte": "^5.1.1",
|
|
32
32
|
"@testing-library/dom": "^10.4.1",
|
|
33
33
|
"@testing-library/jest-dom": "^6.9.1",
|
|
34
34
|
"@testing-library/svelte": "^5.3.1",
|
|
35
35
|
"@types/luxon": "^3.7.1",
|
|
36
|
-
"@types/node": "^25.
|
|
36
|
+
"@types/node": "^25.4.0",
|
|
37
37
|
"@vitest/ui": "^4.0.18",
|
|
38
38
|
"gdpr-cooco-banner": "^0.0.13",
|
|
39
39
|
"jsdom": "^27.4.0",
|
|
40
40
|
"prettier": "^3.8.1",
|
|
41
|
-
"prettier-plugin-svelte": "^3.
|
|
42
|
-
"publint": "^0.3.
|
|
43
|
-
"svelte": "^5.
|
|
44
|
-
"svelte-check": "^4.
|
|
41
|
+
"prettier-plugin-svelte": "^3.5.1",
|
|
42
|
+
"publint": "^0.3.18",
|
|
43
|
+
"svelte": "^5.53.9",
|
|
44
|
+
"svelte-check": "^4.4.5",
|
|
45
45
|
"typescript": "^5.9.3",
|
|
46
46
|
"vite": "^6.4.1",
|
|
47
47
|
"vitest": "^4.0.18"
|