accomadesc 0.3.30 → 0.3.32

package/dist/BookingRequest.svelte

@@ -5,9 +5,9 @@
   import Notes from './basic/Notes.svelte';
   import Spinner from './basic/Spinner.svelte';
   import TextInput from './basic/TextInput.svelte';
-  import { OCCUPATION_STATE, OccupationState } from './occuplan/state.svelte.js';
+  import { getOccupationState, OccupationState } from './occuplan/state.svelte.js';
   import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
-  import { slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
   import type { DateTime } from 'luxon';
   import { randomID } from './names/gen.js';
 
@@ -55,9 +55,7 @@
   let sending = $state(false);
   let disabled = $derived(preview || errored || successfullySent);
 
-  const url = calUrl;
-  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
-  let occupationState: OccupationState = $state(getContext(oStateID));
+  let occupationState: OccupationState = getOccupationState(calUrl);
   let invalid = $derived(
     occupationState && arrival && leave ? occupationState.validRequest(arrival, leave) : false,
   );
@@ -161,8 +159,8 @@
     </label>
     <div class="input-wrapper" class:disabled>
       {#if inputDatesEngaged}
-        <div transition:slide style="min-width: 32rem;" class="picker-wrapper">
-          <OccuPlanPicker {arrival} {leave} {url} aborted={abortDateInput} {dateSelected} />
+        <div transition:fade style="min-width: 32rem;" class="picker-wrapper">
+          <OccuPlanPicker {arrival} {leave} url={calUrl} aborted={abortDateInput} {dateSelected} />
         </div>
       {/if}
       <div class="date-input-wrapper" id="engage-date-buttons">
@@ -243,9 +241,10 @@
     }
   }
   form {
+    position: relative;
     display: grid;
     grid-template-columns: [start] 1fr [gap-start] 0.5fr [gap-end] 3fr [end];
-    row-gap: 0.5rem;
+    row-gap: 1rem;
 
     label {
       align-content: center;
@@ -272,6 +271,8 @@
       justify-content: flex-start;
     }
     div.picker-wrapper {
+      bottom: 2rem;
+      right: -3rem;
       position: absolute;
       z-index: 9999;
       background-color: var(--main-bg-color);

package/dist/basic/Notes.svelte

@@ -40,7 +40,7 @@
 
     width: 100%;
     max-width: 800px;
-    min-height: 5rem;
+    min-height: 8rem;
     height: 100%;
 
     border: none;

package/dist/occuplan/OccuPlanAvailableInfo.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
   import { normalizeDate } from '../helpers/normalizeDate.js';
-  import { getContext, onMount, setContext, type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import {
-    OCCUPATION_STATE,
     OccupationState,
     getOccupationState,
     type AvailableSpans,
   } from './state.svelte.js';
   import Spinner from '../basic/Spinner.svelte';
-  import { browser } from '$app/environment';
 
   let {
     url,
@@ -25,16 +23,13 @@
     children: Snippet<[AvailableSpans]>;
   } = $props();
 
-  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
-  let occupationState: OccupationState = $state(getContext(oStateID));
-  onMount(() => {
-    if (!occupationState && browser) {
-      occupationState = getOccupationState(url, debug);
-      setContext(oStateID, occupationState);
-    }
-  });
+  let occupationState: OccupationState = getOccupationState(url, debug);
 
   let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
+
+  onMount(() => {
+    occupationState.loadOccupations();
+  });
 </script>
 
 {#if !occupationState || occupationState.loading}

package/dist/occuplan/OccuPlanGrid.svelte

@@ -4,7 +4,6 @@
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
-    OCCUPATION_STATE,
     OccupationState,
     getOccupationState,
     occupationTypeFormatting,
@@ -13,11 +12,10 @@
     type OccupationType,
     type OccuplanTranslations,
   } from './state.svelte.js';
-  import { getContext, onMount, setContext } from 'svelte';
   import Button from '../basic/Button.svelte';
-  import { browser } from '$app/environment';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
+  import { onMount } from 'svelte';
 
   let {
     url,
@@ -51,14 +49,7 @@
 
   const id = randomID();
 
-  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
-  let occupationState: OccupationState = $state(getContext(oStateID));
-  onMount(() => {
-    if (!occupationState && browser) {
-      occupationState = getOccupationState(url, debug);
-      setContext(oStateID, occupationState);
-    }
-  });
+  let occupationState: OccupationState = getOccupationState(url, debug);
 
   //let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {
@@ -71,7 +62,9 @@
   };
 
   let page: number = $state(0);
-  let rfMonth: DateTime = $derived(realFirstMonth(firstMonth, numberOfMonth, page));
+  let rfMonth: DateTime = $derived(
+    realFirstMonth(firstMonth, DateTime.utc().get('year'), numberOfMonth, page),
+  );
 
   let currentMaxDate = $derived(rfMonth.plus({ month: numberOfMonth }));
 
@@ -153,6 +146,10 @@
       return res;
     }, [] as OccupationType[]),
   );
+
+  onMount(() => {
+    occupationState.loadOccupations();
+  });
 </script>
 
 {#if !occupationState || occupationState.loading}

package/dist/occuplan/OccuPlanPicker.svelte

@@ -4,15 +4,13 @@
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
-    OCCUPATION_STATE,
     OccupationState,
     getOccupationState,
     realFirstMonth,
     type OccuplanTranslations,
   } from './state.svelte.js';
-  import { getContext, onMount, setContext, untrack } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import Button from '../basic/Button.svelte';
-  import { browser } from '$app/environment';
   import Spinner from '../basic/Spinner.svelte';
   import { normalizeDate } from '../helpers/normalizeDate.js';
 
@@ -58,14 +56,7 @@
     dateSelected?: (arrival: DateTime, leave: DateTime) => void;
   } = $props();
 
-  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
-  let occupationState: OccupationState = $state(getContext(oStateID));
-  onMount(() => {
-    if (!occupationState && browser) {
-      occupationState = getOccupationState(url, debug);
-      setContext(oStateID, occupationState);
-    }
-  });
+  let occupationState: OccupationState = getOccupationState(url, debug);
 
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {
     const monthLabel = monthLabels[monthNum];
@@ -83,6 +74,7 @@
   let rfMonth: DateTime = $derived(
     realFirstMonth(
       (arrival?.month ? arrival.month : minDate.month) as MonthNumbers,
+      arrival?.year ? arrival.year : minDate.year,
       numberOfMonth,
       page,
     ),
@@ -200,6 +192,10 @@
     let firstDayOfWeek = w.startOf('week');
     return lastDayOfMonth < firstDayOfWeek;
   };
+
+  onMount(() => {
+    occupationState.loadOccupations();
+  });
 </script>
 
 {#if !occupationState || occupationState.loading}
@@ -209,6 +205,7 @@
 <div class="wrapper">
   <section class="occuplan-wrapper" style="max-width: {maxWidth}; width: 100%;">
     <header class="occupation-plan-header">
+      {rfMonth}
       <div class="header-controls">
         {#if rfMonth >= minDate}
           <Button text={prevPage} clicked={prevClicked} preventDefault={true} />

package/dist/occuplan/OccuPlanRows.svelte

@@ -8,16 +8,15 @@
     occupationTypeFormatting,
     type OccupationType,
     type OccuplanTranslations,
-    OCCUPATION_STATE,
     type DayHelper,
     type FirstMonth,
     realFirstMonth,
   } from './state.svelte.js';
   import Button from '../basic/Button.svelte';
   import { browser } from '$app/environment';
-  import { getContext, onMount, setContext } from 'svelte';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
+  import { onMount } from 'svelte';
 
   let {
     url,
@@ -48,17 +47,12 @@
 
   const id = randomID();
 
-  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
-  let occupationState: OccupationState = $state(getContext(oStateID));
-  onMount(() => {
-    if (!occupationState && browser) {
-      occupationState = getOccupationState(url, debug);
-      setContext(oStateID, occupationState);
-    }
-  });
+  let occupationState: OccupationState = getOccupationState(url, debug);
 
   let page: number = $state(0);
-  let rfMonth: number | DateTime = $derived(realFirstMonth(firstMonth, numberOfMonth, page));
+  let rfMonth: number | DateTime = $derived(
+    realFirstMonth(firstMonth, DateTime.utc().get('year'), numberOfMonth, page),
+  );
 
   let currentMaxDate = $derived(rfMonth.plus({ month: numberOfMonth }));
 
@@ -134,6 +128,10 @@
         }, [] as OccupationType[])
       : [],
   );
+
+  onMount(() => {
+    occupationState.loadOccupations();
+  });
 </script>
 
 {#if !occupationState || occupationState.loading}

package/dist/occuplan/state.svelte.d.ts

@@ -30,7 +30,7 @@ export interface DayHelper {
     year: number;
 }
 export declare const firstMonthValid: (value: string | number) => boolean;
-export declare const realFirstMonth: (firstMonth: FirstMonth, numberOfMonth: number, page: number) => DateTime;
+export declare const realFirstMonth: (firstMonth: FirstMonth, firstMonthYear: number, numberOfMonth: number, page: number) => DateTime;
 export interface OccuplanTranslations {
     arrivalLabel?: string;
     leaveLabel?: string;
@@ -74,7 +74,7 @@ export declare class OccupationState {
     loading: boolean;
     debug: boolean;
     constructor(iCalURL: string, debug?: boolean);
-    private loadOccupations;
+    loadOccupations: () => Promise<boolean>;
     private eventsIncomingCallback;
     private dayKey;
     private updateOccupiedDays;

package/dist/occuplan/state.svelte.js

@@ -2,6 +2,7 @@ import { normalizeDate } from '../helpers/normalizeDate.js';
 import { getEvents } from '../helpers/readICS.js';
 import { DateTime } from 'luxon';
 import { DateTime as luxon } from 'luxon';
+import { getContext, setContext } from 'svelte';
 export const OCCUPATION_STATE = 'occupation-state';
 export const occupationTypeFormattingByOccupation = (o) => {
     return occupationTypeFormatting(o?.type);
@@ -74,16 +75,20 @@ export const firstMonthValid = (value) => {
     }
     return false;
 };
-export const realFirstMonth = (firstMonth, numberOfMonth, page) => {
+export const realFirstMonth = (firstMonth, firstMonthYear, numberOfMonth, page) => {
     const monthToAdd = page * numberOfMonth;
+    console.log(firstMonth, firstMonthYear, numberOfMonth, page);
     if (typeof firstMonth === 'number') {
         const intValue = firstMonth;
         if (intValue >= 1 && intValue <= 12) {
             const tDate = normalizeDate(DateTime.utc())
-                .set({ month: intValue })
+                .set({ month: intValue, year: firstMonthYear })
                 .plus({ month: monthToAdd });
             return tDate;
         }
+        else {
+            return normalizeDate(DateTime.utc()).plus(monthToAdd);
+        }
     }
     else if (typeof firstMonth === 'string' && firstMonth.length > 1) {
         //check + sign
@@ -93,10 +98,14 @@ export const realFirstMonth = (firstMonth, numberOfMonth, page) => {
                 const intValue = parseInt(toParse);
                 if (intValue >= 1 && intValue <= 12) {
                     const tDate = normalizeDate(DateTime.utc())
+                        .set({ year: firstMonthYear })
                         .plus({ month: intValue })
                         .plus({ month: monthToAdd });
                     return tDate;
                 }
+                else {
+                    return normalizeDate(DateTime.utc()).plus(monthToAdd);
+                }
             }
             catch (e) {
                 console.log('casting error', e);
@@ -109,10 +118,14 @@ export const realFirstMonth = (firstMonth, numberOfMonth, page) => {
                 const intValue = parseInt(toParse);
                 if (intValue >= 0 && intValue <= 12) {
                     const tDate = normalizeDate(DateTime.utc())
+                        .set({ year: firstMonthYear })
                         .minus({ month: intValue })
                         .plus({ month: monthToAdd });
                     return tDate;
                 }
+                else {
+                    return normalizeDate(DateTime.utc()).plus(monthToAdd);
+                }
             }
             catch (e) {
                 console.log('casting error', e);
@@ -124,7 +137,7 @@ export const realFirstMonth = (firstMonth, numberOfMonth, page) => {
             const intValue = parseInt(firstMonth);
             //current dynamic month
             if (intValue == 0) {
-                return normalizeDate(DateTime.utc()).plus({ month: monthToAdd });
+                return normalizeDate(DateTime.utc()).set({ year: firstMonthYear }).plus({ month: monthToAdd });
             }
             //static month of current year
             if (intValue >= 1 && intValue <= 12) {
@@ -133,13 +146,16 @@ export const realFirstMonth = (firstMonth, numberOfMonth, page) => {
                     .plus({ month: monthToAdd });
                 return tDate;
             }
+            else {
+                return normalizeDate(DateTime.utc()).set({ year: firstMonthYear }).plus(monthToAdd);
+            }
         }
         catch (e) {
             console.log('casting error', e);
         }
     }
     //first month of current year ... default
-    return normalizeDate(DateTime.utc()).set({ month: 1 }).plus({ month: monthToAdd });
+    return normalizeDate(DateTime.utc()).set({ month: 1, year: firstMonthYear }).plus({ month: monthToAdd });
 };
 const validDay = (d) => {
     const today = luxon.utc();
@@ -185,7 +201,7 @@ export class OccupationState {
         if (this.debug)
             console.log('Constructing OState with CalUrl: ', iCalURL);
         this.iCalURL = iCalURL;
-        this.loadOccupations();
+        //this.loadOccupations();
     }
     loadOccupations = async () => {
         if (this.debug)
@@ -392,14 +408,13 @@ export class OccupationState {
       `;
     };
 }
-let _instances = {};
 export const getOccupationState = (url, debug = false) => {
     if (debug)
         console.log('Get OState /w url', url);
-    const currentInstance = _instances[url];
-    if (currentInstance)
-        return currentInstance;
-    const newInstance = new OccupationState(url, debug);
-    _instances[url] = newInstance;
-    return _instances[url];
+    const stateID = `i-${url}-${OCCUPATION_STATE}`;
+    let _instance = getContext(stateID);
+    if (_instance)
+        return _instance;
+    setContext(stateID, new OccupationState(url, debug));
+    return getContext(stateID);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accomadesc",
-  "version": "0.3.30",
+  "version": "0.3.32",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -26,16 +26,16 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.47.3",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.6",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@types/luxon": "^3.7.1",
     "gdpr-cooco-banner": "^0.0.11",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
-    "svelte": "^5.41.4",
-    "svelte-check": "^4.3.3",
+    "svelte": "^5.43.14",
+    "svelte-check": "^4.3.4",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },