accomadesc 0.0.14 → 0.1.0

package/dist/PhotoGallery.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import Button from './basic/Button.svelte';
   import PhotoComponent from './Photo.svelte';
-  import type { I18nFacade, Photo, PhotoGalleryContent, GridPhoto } from './types.js';
+  import type { I18nFacade, Photo, PhotoGalleryContent } from './types.js';
   import { browser } from '$app/environment';
+  import { slide } from 'svelte/transition';
 
   let { photos, gridPhotoWidth = 300, translateFunc }: PhotoGalleryContent & I18nFacade = $props();
 
@@ -13,42 +15,48 @@
     };
   }
   let ratio = $derived(landscape ? '16/9' : '9/16');
-
   let galleryContainer: HTMLDivElement | undefined = $state();
 
-  let gridPhotos: GridPhoto[] = $state(
-    photos.map((p: Photo): GridPhoto => {
-      return {
-        photo: p,
-        zoomed: false,
-        id: crypto.randomUUID(),
-      };
-    }),
-  );
-
   let width = $state(1000);
   let numberOfCols = $derived(
     Math.floor(width / (gridPhotoWidth && Number.isInteger(gridPhotoWidth) ? gridPhotoWidth : 300)),
   );
 
-  const zoom = (z: GridPhoto, i: number) => {
-    let unzoom = false;
-    if (z.zoomed) {
-      unzoom = true;
-    }
+  let zoomed: number | null = $state(0);
+  let zoomedPhoto: Photo | null = $derived(zoomed != null ? photos[zoomed] : null);
 
-    gridPhotos.forEach((p: GridPhoto) => (p.zoomed = false));
-    gridPhotos.splice(i, 1);
-
-    if (!unzoom) {
-      z.zoomed = true;
-    }
-    gridPhotos = [z, ...gridPhotos];
+  const zoom = (i: number) => {
+    zoomed = i;
+    setTimeout(() => {
+      galleryContainer?.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+  };
 
+  const unzoom = () => {
+    zoomed = null;
     setTimeout(() => {
-      galleryContainer?.scrollIntoView();
+      galleryContainer?.scrollIntoView({ behavior: 'smooth' });
     }, 100);
   };
+
+  const zoomNext = () => {
+    if (zoomed != null) {
+      if (zoomed == photos.length - 1) {
+        zoomed = 0;
+      } else {
+        zoomed = zoomed + 1;
+      }
+    }
+  };
+  const zoomPrev = () => {
+    if (zoomed != null) {
+      if (zoomed == 0) {
+        zoomed = photos.length - 1;
+      } else {
+        zoomed = zoomed - 1;
+      }
+    }
+  };
 </script>
 
 <div
@@ -59,27 +67,72 @@
   class="grid-container"
   bind:clientWidth={width}
 >
-  {#each gridPhotos as p, i (p.id)}
+  {#if zoomed != null && zoomedPhoto != null}
     <div
-      class:complete-row={p.zoomed}
+      transition:slide
       aria-label="resize"
       role="button"
       tabindex="-1"
-      onclick={() => zoom(p, i)}
-      onkeyup={() => zoom(p, i)}
+      onclick={() => unzoom()}
+      onkeyup={() => unzoom()}
+      class="photo-container complete-row"
+    >
+      <PhotoComponent {...zoomedPhoto.content} frame={true} {ratio} {translateFunc} />
+
+      <div class="next-wrapper" style="">
+        <Button
+          text=">"
+          size={3.3}
+          fontSize="3rem"
+          clicked={() => zoomNext()}
+          stopPropagation={true}
+        />
+      </div>
+      <div class="prev-wrapper">
+        <Button
+          text="<"
+          size={3.3}
+          fontSize="3rem"
+          clicked={() => zoomPrev()}
+          stopPropagation={true}
+        />
+      </div>
+    </div>
+  {/if}
+
+  {#each photos as p, i (p.id)}
+    <div
+      aria-label="resize"
+      role="button"
+      tabindex="-1"
+      onclick={() => zoom(i)}
+      onkeyup={() => zoom(i)}
       class="photo-container"
     >
-      <PhotoComponent
-        {...p.photo.content}
-        frame={true}
-        ratio={p.zoomed ? ratio : '1'}
-        {translateFunc}
-      />
+      <PhotoComponent {...p.content} frame={true} ratio="1" {translateFunc} />
     </div>
   {/each}
 </div>
 
 <style>
+  .next-wrapper {
+    position: absolute;
+    right: 1rem;
+    top: calc(50% - 1.65rem);
+
+    --bg-button-prim-color: rgba(242, 242, 242, 0.3);
+    --main-font-color: rgba(15, 14, 15, 0.6);
+  }
+
+  .prev-wrapper {
+    position: absolute;
+    left: 1rem;
+    top: calc(50% - 1.65rem);
+
+    --bg-button-prim-color: rgba(242, 242, 242, 0.3);
+    --main-font-color: rgba(15, 14, 15, 0.6);
+  }
+
   .complete-row {
     grid-column-start: firstLine;
     grid-column-end: lastLine;
@@ -91,6 +144,7 @@
     cursor: pointer;
     width: 100%;
     height: 100%;
+    position: relative;
   }
 
   .grid-container {

package/dist/PhotoGallery.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { I18nFacade, PhotoGalleryContent } from './types.js';
-declare const PhotoGallery: import("svelte").Component<PhotoGalleryContent & I18nFacade, {}, "">;
+type $$ComponentProps = PhotoGalleryContent & I18nFacade;
+declare const PhotoGallery: import("svelte").Component<$$ComponentProps, {}, "">;
 type PhotoGallery = ReturnType<typeof PhotoGallery>;
 export default PhotoGallery;

package/dist/Pricing.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { PricingContent, I18nFacade } from './types.js';
-declare const Pricing: import("svelte").Component<PricingContent & I18nFacade, {}, "">;
+type $$ComponentProps = PricingContent & I18nFacade;
+declare const Pricing: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pricing = ReturnType<typeof Pricing>;
 export default Pricing;

package/dist/PricingShort.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { I18nFacade, PricingShortContent } from './types.js';
-declare const PricingShort: import("svelte").Component<PricingShortContent & I18nFacade, {}, "">;
+type $$ComponentProps = PricingShortContent & I18nFacade;
+declare const PricingShort: import("svelte").Component<$$ComponentProps, {}, "">;
 type PricingShort = ReturnType<typeof PricingShort>;
 export default PricingShort;

package/dist/Section.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Section as SectionI, type I18nFacade } from './types.js';
-declare const Section: import("svelte").Component<SectionI & I18nFacade, {}, "padding">;
+type $$ComponentProps = SectionI & I18nFacade;
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "padding">;
 type Section = ReturnType<typeof Section>;
 export default Section;

package/dist/Text.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TextContent, I18nFacade } from './types.js';
-declare const Text: import("svelte").Component<TextContent & I18nFacade, {}, "">;
+type $$ComponentProps = TextContent & I18nFacade;
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/Weather.svelte

@@ -8,8 +8,7 @@
 
   const callback = () => {
     //TODO maybe do something here
-    // probably build something custom, not using weatherwidget.io, yes maptiler might be good option
-    //
+    // probably build something custom, not using weatherwidget.io
     //console.log("weather script loaded")
     initialLoadDone = true;
   };

package/dist/Weather.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { I18nFacade, WeatherContent } from './types.js';
-declare const Weather: import("svelte").Component<WeatherContent & I18nFacade, {}, "">;
+type $$ComponentProps = WeatherContent & I18nFacade;
+declare const Weather: import("svelte").Component<$$ComponentProps, {}, "">;
 type Weather = ReturnType<typeof Weather>;
 export default Weather;

package/dist/basic/Avatar.svelte.d.ts

@@ -1,7 +1,8 @@
-declare const Avatar: import("svelte").Component<{
+type $$ComponentProps = {
     email: string;
     size?: number;
     imageUrl?: string;
-}, {}, "imageUrl">;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "imageUrl">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/basic/Button.svelte

@@ -41,7 +41,7 @@
     clicked?: (event: Event) => void;
   } = $props();
 
-  const disabled = $derived(!enabled);
+  let disabled = $derived(!enabled);
 
   const onClick = (event: Event) => {
     if (stopPropagation) {
@@ -50,7 +50,7 @@
     if (enabled) onclicked(event);
   };
 
-  let focussed = false;
+  let focussed = $state(false);
   const focussing = (event: Event) => {
     if (stopPropagation) {
       event.stopPropagation();
@@ -277,7 +277,7 @@
     align-items: center;
 
     background-color: var(--bg-button-prim-color);
-    color: var(--font-prim-color);
+    color: var(--main-font-color);
 
     cursor: pointer;
     overflow: hidden;
@@ -288,6 +288,7 @@
   }
   .button:focus {
     outline-style: none;
+    filter: drop-shadow(0 0 0.75rem var(--focussed-border-color));
   }
 
   .button.danger {
@@ -310,6 +311,8 @@
     vertical-align: middle;
     font-variant: small-caps;
 
+    color: var(--main-font-color);
+
     margin-left: 0.4rem;
     margin-right: 0.4rem;
   }

package/dist/basic/Button.svelte.d.ts

@@ -1,9 +1,9 @@
-declare const Button: import("svelte").Component<{
+type $$ComponentProps = {
     text?: string | null;
     iconName?: string;
     ariaLabel?: string;
     form?: string | null;
-    type?: "button" | "submit" | "reset";
+    type?: 'button' | 'submit' | 'reset';
     stopPropagation?: boolean;
     pressed?: boolean;
     fontSize?: string;
@@ -15,6 +15,7 @@ declare const Button: import("svelte").Component<{
     onUp?: boolean;
     preventDefault?: boolean;
     clicked?: (event: Event) => void;
-}, {}, "enabled">;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "enabled">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/basic/Icon.svelte.d.ts

@@ -1,8 +1,9 @@
-declare const Icon: import("svelte").Component<{
+type $$ComponentProps = {
     color?: string;
     iconName: string;
     width?: string;
     height?: string;
-}, {}, "">;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/basic/Notes.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { randomID } from '../names/gen.ts';
+
+  let {
+    disabled,
+    changed,
+  }: {
+    disabled: boolean;
+    changed: (value: string) => void;
+  } = $props();
+
+  let divElement: HTMLDivElement;
+  let id = randomID();
+
+  const contentChanged = (e: Event) => {
+    const target = e.currentTarget as HTMLDivElement;
+    changed(target.getHTML());
+  };
+
+  $effect(() => {
+    if (disabled) {
+      divElement.innerText = '';
+    }
+  });
+</script>
+
+<div
+  bind:this={divElement}
+  class:disabled
+  id="input-{id}"
+  contenteditable={disabled ? null : 'plaintext-only'}
+  class="question-input"
+  oninput={contentChanged}
+></div>
+
+<style>
+  .question-input {
+    position: relative;
+
+    min-width: 400px;
+    width: 100%;
+    max-width: 800px;
+    min-height: 5rem;
+    height: 100%;
+
+    border: var(--main-border);
+    border-radius: 1rem;
+
+    background-color: var(--longinput-bg-color);
+
+    padding-left: 1.3rem;
+    padding-right: 1.3rem;
+    padding-top: 0.5rem;
+
+    line-height: 24px;
+
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='24' width='24'><line x1='0' y1='4' x2='16' y2='4' stroke='rgba(15,15,15,0.5)' stroke-width='0.1' /></svg>");
+    background-repeat: repeat;
+  }
+
+  .question-input.disabled {
+    border-color: var(--disabled-border-color);
+    font: var(--font-disabled-color);
+    background-color: var(--longinput-disabled-bg-color);
+  }
+
+  .question-input::after {
+    content: '';
+    position: absolute;
+    border: var(--dashed-border);
+    right: 1rem;
+    top: 0;
+    bottom: 0;
+  }
+  .question-input::before {
+    content: '';
+    position: absolute;
+    border: var(--dashed-border);
+    left: 1rem;
+    top: 0;
+    bottom: 0;
+  }
+</style>

package/dist/basic/Notes.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    disabled: boolean;
+    changed: (value: string) => void;
+};
+declare const Notes: import("svelte").Component<$$ComponentProps, {}, "">;
+type Notes = ReturnType<typeof Notes>;
+export default Notes;

package/dist/basic/Spinner.svelte.d.ts

@@ -1,8 +1,9 @@
-declare const Spinner: import("svelte").Component<{
+type $$ComponentProps = {
     color?: string;
     inline?: boolean;
     height?: string;
     width?: string;
-}, {}, "">;
+};
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/basic/TextInput.svelte.d.ts

@@ -1,4 +1,4 @@
-declare const TextInput: import("svelte").Component<{
+type $$ComponentProps = {
     placeholder?: string;
     phonePattern?: string;
     name?: string;
@@ -28,6 +28,7 @@ declare const TextInput: import("svelte").Component<{
     focussed?: (name: string, value: string | number) => void;
     validityChanged?: (valid: boolean, name: string, value: string | number) => void;
     valueChanged?: (valid: boolean, name: string, value: string | number) => void;
-}, {}, "valid" | "value">;
+};
+declare const TextInput: import("svelte").Component<$$ComponentProps, {}, "valid" | "value">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/dist/helpers/debounce.d.ts

@@ -0,0 +1,7 @@
+export type DebounceFunction = () => Promise<boolean>;
+export interface DebounceConfig {
+    initialDelay: number;
+    debounceDelay: number;
+}
+export declare const DefaultDebounceConfig: DebounceConfig;
+export declare const debounce: (id: string, func: DebounceFunction, config?: DebounceConfig) => Promise<boolean>;

package/dist/helpers/debounce.js

@@ -0,0 +1,49 @@
+import { DateTime as luxon } from 'luxon';
+export const DefaultDebounceConfig = {
+    initialDelay: 0,
+    debounceDelay: 10000,
+};
+let updateTimestamps = {};
+let nextUpdates = {};
+let scheduled = {};
+export const debounce = async (id, func, config = DefaultDebounceConfig) => {
+    //console.log(`DEBOUNCE: ${id}`)
+    nextUpdates[id] = func;
+    return doDebounce(id, true, config);
+};
+const doDebounce = async (id, firstRun, config) => {
+    const now = luxon.utc();
+    const priorExecTime = updateTimestamps[id];
+    //no prior timestamp, execute and store timestamp
+    if (!priorExecTime) {
+        if (firstRun && config.initialDelay > 0) {
+            setTimeout(() => {
+                return doDebounce(id, false, config);
+            }, config.initialDelay + 10);
+        }
+        else {
+            const result = await nextUpdates[id]();
+            updateTimestamps[id] = now;
+            //console.log('INITIAL')
+            return result;
+        }
+    }
+    //last execution was more than debounceDelay ms ago
+    else if (priorExecTime < now.minus({ milliseconds: config.debounceDelay })) {
+        const result = await nextUpdates[id]();
+        updateTimestamps[id] = now;
+        //console.log('DUE')
+        return result;
+    }
+    //else retry after timeout
+    else if (firstRun && !scheduled[id]) {
+        //console.log('SCHEDULE')
+        scheduled[id] = true;
+        setTimeout(() => {
+            //console.log('RETRY')
+            scheduled[id] = false;
+            return doDebounce(id, false, config);
+        }, config.debounceDelay + 10);
+    }
+    return false;
+};

package/dist/helpers/iCSEventExample.ics

@@ -0,0 +1,14 @@
+BEGIN:VEVENT
+DTSTART;VALUE=DATE:20230207
+DTEND;VALUE=DATE:20230223
+DTSTAMP:20230118T163615Z
+UID:6cfjhjfvp50tldvkbrbgp9m6r0@google.com
+CREATED:20230118T163028Z
+DESCRIPTION:
+LAST-MODIFIED:20230118T163028Z
+LOCATION:
+SEQUENCE:0
+STATUS:CONFIRMED
+SUMMARY:Mertens
+TRANSP:TRANSPARENT
+END:VEVENT

package/dist/helpers/normalizeDate.d.ts

@@ -0,0 +1,2 @@
+import type { DateTime } from 'luxon';
+export declare const normalizeDate: (date?: any) => DateTime;

package/dist/helpers/normalizeDate.js

@@ -0,0 +1,53 @@
+import { DateTime as luxon } from 'luxon';
+export const normalizeDate = (date) => {
+    //initialize default return values, for the case the input is not
+    //"normalizable"
+    const nowUTC = luxon.utc().set({ hour: 12, minute: 0, second: 0, millisecond: 0 });
+    //no parameter or falsy
+    if (!date) {
+        return nowUTC;
+    }
+    //parameter is an instance of date;
+    if (date instanceof Date) {
+        // but invalid
+        if (Number.isNaN(Number(date))) {
+            return nowUTC;
+        }
+        return luxon.utc(date.getFullYear(), date.getMonth() + 1, date.getDate(), 12);
+    }
+    //otherwise try different parsing methods
+    let pDate;
+    //check if it's already a numeric value, assuming millis from start of time
+    if (Number.isInteger(date)) {
+        pDate = luxon.fromMillis(date);
+        if (pDate.isValid) {
+            return luxon.utc(pDate.year, pDate.month, pDate.day, 12);
+        }
+    }
+    //check if it has a valueOf function and if that function yields an integer
+    if (typeof date.valueOf === 'function' && Number.isInteger(date.valueOf())) {
+        pDate = luxon.fromMillis(date.valueOf());
+        if (pDate.isValid) {
+            return luxon.utc(pDate.year, pDate.month, pDate.day, 12);
+        }
+    }
+    //parse it, as if it is an ISO string
+    pDate = luxon.fromISO(date, { setZone: true });
+    if (pDate.isValid) {
+        return luxon.utc(pDate.year, pDate.month, pDate.day, 12);
+    }
+    //parse it, as if it is in HTTP format
+    //@ts-ignore
+    pDate = luxon.fromHTTP(date, { setZone: true });
+    if (pDate.isValid) {
+        return luxon.utc(pDate.year, pDate.month, pDate.day, 12);
+    }
+    //parse it, as if it is in SQL format
+    //@ts-ignore
+    pDate = luxon.fromSQL(date, { setZone: true });
+    if (pDate.isValid) {
+        return luxon.utc(pDate.year, pDate.month, pDate.day, 12);
+    }
+    //if nothing helps, return today at noon GMT
+    return nowUTC;
+};

package/dist/helpers/readICS.d.ts

@@ -0,0 +1,7 @@
+import type { OccupationCallback } from '../occuplan/state.svelte.js';
+export interface GetEventsResult {
+    message: string;
+    code: number;
+    error: boolean;
+}
+export declare const getEvents: (url: string, eventCallback: OccupationCallback) => Promise<GetEventsResult>;

package/dist/helpers/readICS.js

@@ -0,0 +1,94 @@
+import { DateTime as lx } from 'luxon';
+const extractOccupationType = (line) => {
+    try {
+        const oTypes = line.split('CATEGORIES:')[1];
+        const [first] = oTypes.split(',');
+        return first.trim();
+    }
+    catch (e) {
+        console.log('Error occured extracting occupation type from line', line);
+    }
+    return 'one';
+};
+const readIcsFromResponse = async (resp, eventCallback) => {
+    const text = await resp.text();
+    //console.log(text)
+    let insideEvent = false;
+    let arrival = '';
+    let leave = '';
+    let oType = 'one';
+    text.split(/\r?\n/).forEach((line) => {
+        switch (true) {
+            case /^BEGIN:VEVENT$/.test(line):
+                insideEvent = true;
+                break;
+            case /^DTSTART;VALUE=.*/.test(line) && insideEvent:
+                arrival = line;
+                break;
+            case /^DTEND;VALUE=.*/.test(line) && insideEvent:
+                leave = line;
+                break;
+            case /^CATEGORIES:.*$/.test(line) && insideEvent:
+                oType = extractOccupationType(line);
+                break;
+            case /^END:VEVENT$/.test(line) && insideEvent:
+                insideEvent = false;
+                eventCallback({
+                    type: oType,
+                    arrival: getDate(arrival),
+                    leave: getDate(leave),
+                });
+                break;
+        }
+    });
+};
+export const getEvents = async (url, eventCallback) => {
+    let result = {
+        message: 'undefined',
+        code: 100,
+        error: false,
+    };
+    let resp;
+    try {
+        resp = await fetch(url, {
+            headers: {
+                Accept: 'text/calendar',
+            },
+            //mode: "no-cors"
+        });
+        result = {
+            message: resp.statusText,
+            code: resp.status,
+            error: resp.status > 299 ? true : false,
+        };
+        if (resp.status > 299)
+            return result;
+        await readIcsFromResponse(resp, eventCallback);
+    }
+    catch (e) {
+        console.log('Error occured while fetching events from proxy via calUrl:', e);
+        return {
+            message: `Fetch threw error: ${e}`,
+            code: 500,
+            error: true,
+        };
+    }
+    return result;
+};
+const getDate = (icsLine) => {
+    //e.g. DTEND;VALUE=DATE:20260818
+    const [typePart, valuePart] = icsLine.split('=');
+    const dateString = valuePart.split(':')[1];
+    let rawDateTime = lx.fromISO(dateString);
+    //end date has to be moved back when whole day ending
+    if (/^DTEND;VALUE$/.test(typePart)) {
+        if (rawDateTime.hour == 0 &&
+            rawDateTime.minute == 0 &&
+            rawDateTime.second == 0 &&
+            rawDateTime.millisecond == 0) {
+            rawDateTime = rawDateTime.plus({ hour: 12 });
+        }
+    }
+    //normalize to noon
+    return rawDateTime.set({ hour: 12, minute: 0, second: 0, millisecond: 0 });
+};