accomadesc 0.0.13 → 0.1.0

package/dist/occuplan/OccuPlanRows.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+  import { DateTime, type DayNumbers, type MonthNumbers } from 'luxon';
+  import {
+    defaultMonthLabels,
+    defaultWeekendLabel,
+    OccupationState,
+    occupationTypeFormatting,
+    type OccupationType,
+    type OccuplanTranslations,
+    OCCUPATION_STATE,
+    type DayHelper,
+    type FirstMonth,
+    realFirstMonth,
+  } from './state.svelte.ts';
+  import Button from '../basic/Button.svelte';
+  import { browser } from '$app/environment';
+  import { getContext, setContext } from 'svelte';
+  import Spinner from '../basic/Spinner.svelte';
+
+  let {
+    url,
+    header = '',
+    footer = '',
+    weekendLabel = defaultWeekendLabel,
+    monthLabels = defaultMonthLabels,
+    numberOfMonth = 12,
+    firstMonth = 1,
+    maxWidth = '1200px',
+    maxDate = DateTime.utc().plus({ years: 2 }),
+    minDate = DateTime.utc(),
+    typeLabels = {
+      one: 'BOOKING',
+      two: 'RESERVATION',
+      three: 'PERSONAL',
+    },
+  }: OccuplanTranslations & {
+    url: string;
+    numberOfMonth?: number;
+    firstMonth?: FirstMonth;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    maxWidth?: string;
+  } = $props();
+
+  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
+  let occupationState: OccupationState = $state(getContext(oStateID));
+  $effect(() => {
+    if (!occupationState && browser) {
+      occupationState = new OccupationState(url);
+      setContext(oStateID, occupationState);
+    }
+  });
+
+  let page: number = $state(0);
+  let rfMonth: number | DateTime = $derived(realFirstMonth(firstMonth, numberOfMonth, page));
+
+  let currentMaxDate = $derived(rfMonth.plus({ month: numberOfMonth }));
+
+  let months: DateTime[] = $derived.by(() => {
+    const result = [];
+    if (rfMonth.month == 1) {
+      //result.push(rfMonth);
+    }
+
+    let fMonth: DateTime = DateTime.utc(rfMonth.year, rfMonth.month, 1);
+    result.push(fMonth);
+
+    let nMonth = fMonth.plus({ months: 1 });
+    for (let c = 1; c < numberOfMonth; c++) {
+      result.push(nMonth);
+      nMonth = nMonth.plus({ months: 1 });
+    }
+    return result;
+  });
+
+  const nextClicked = () => {
+    page += 1;
+  };
+
+  const prevClicked = () => {
+    page -= 1;
+  };
+
+  const monthDays = [...Array(31).keys()].map((i) => i + 1);
+  let days: DayHelper[] = $derived.by(() => {
+    const ldays: DayHelper[] = [];
+    if (!browser) return ldays;
+    if (!occupationState || occupationState.loading) return ldays;
+    for (const m of months) {
+      for (let d: DayNumbers = 1; d <= 31; d++) {
+        const day: DayHelper = {
+          day: d,
+          month: m.month as MonthNumbers,
+          year: m.year,
+        };
+        ldays.push(day);
+      }
+    }
+    return ldays;
+  });
+
+  let monthGridTemplateColumns = $derived(
+    monthDays.reduce((s, d) => {
+      s += ` [d${d}] 1fr`;
+      return s;
+    }, '[rowLegend] 1.5fr'),
+  );
+
+  let monthGridTemplateRows = $derived(
+    months.reduce((s, m) => {
+      if (m.month == 1 && s != '[columnLegend] 1fr [firstYearRow] 1fr') {
+        s += ` [y${m.year}Row] 1fr`;
+      }
+
+      s += ` [m${m.month}y${m.year}] 1fr`;
+      return s;
+    }, '[columnLegend] 1fr [firstYearRow] 1fr'),
+  );
+
+  let foundOccupationTypes: OccupationType[] = $derived(
+    occupationState
+      ? occupationState.occupations.reduce((res, occupation) => {
+          if (!res.includes(occupation.type)) {
+            res.push(occupation.type);
+          }
+          return res;
+        }, [] as OccupationType[])
+      : [],
+  );
+
+  let width = $state(0);
+</script>
+
+{#if !occupationState || occupationState.loading}
+  <Spinner />
+{/if}
+
+<section class="occuplan-wrapper" bind:clientWidth={width} style="max-width: {maxWidth};">
+  <header class="occupation-plan-header">
+    <div class="header-controls">
+      {#if rfMonth >= minDate}
+        <Button text="<" clicked={prevClicked} />
+      {/if}
+    </div>
+    <div class="header-label"><h3>{@html header}</h3></div>
+    <div class="header-controls">
+      {#if currentMaxDate <= maxDate}
+        <Button text=">" clicked={nextClicked} />
+      {/if}
+    </div>
+  </header>
+  <main
+    style="
+    grid-template-columns: {monthGridTemplateColumns};
+    grid-template-rows: {monthGridTemplateRows};
+    "
+  >
+    <div
+      class="corner"
+      style="
+        grid-area: columnLegend / rowLegend / columnLegend / rowLegend;
+        background-color: var(--occuplan-bg-color-main);"
+    >
+      &nbsp;
+    </div>
+
+    {#each monthDays as d}
+      <div class="monthday-header" style="grid-area: columnLegend / d{d} / columnLegend / d{d};">
+        <span>{d}</span>
+      </div>
+    {/each}
+
+    <div class="year-label" style="grid-area: firstYearRow / d1 / firstYearRow / d31;">
+      <span>{rfMonth.year}</span>
+    </div>
+    {#each months as m, i (`${m.year}-${m.month}`)}
+      {#if m.month == 1 && i != 0}
+        <div class="year-label" style="grid-area: y{m.year}Row / d1 / y{m.year}Row / d31;">
+          <span>{m.year}</span>
+        </div>
+      {/if}
+      <div
+        class="month-label"
+        style="grid-area: m{m.month}y{m.year} / rowLegend / m{m.month}y{m.year} / rowLegend;"
+      >
+        <span>{monthLabels[m.month as MonthNumbers]}</span>
+      </div>
+    {/each}
+
+    {#if occupationState}
+      {#each days as d (`${d.year}-${d.month}-${d.day}`)}
+        <div
+          class="day"
+          style="
+            outline: var(--occuplan-grid-border);
+            grid-area: m{d.month}y{d.year}  / d{d.day} / m{d.month}y{d.year} / d{d.day};
+            {occupationState.occupationStyle(d, true, maxDate)}
+            "
+        >
+          &nbsp;
+        </div>
+      {/each}
+    {/if}
+  </main>
+  <footer>
+    <div class="legend">
+      <span>{weekendLabel}</span>
+      <div
+        id="weekend-legend"
+        class="legend-entry-marker"
+        style="
+            outline: var(--occuplan-grid-border);
+            background: radial-gradient(var(--occuplan-bg-color-weekend), var(--occuplan-bg-color-main), var(--occuplan-bg-color-main));
+            "
+      >
+        &nbsp;
+      </div>
+      {#each foundOccupationTypes as t}
+        {@const format = occupationTypeFormatting(t)}
+        <span>{typeLabels[t]}</span>
+        <div
+          id="occupation-type-{t}-legend"
+          class="legend-entry-marker"
+          style="background-color: {format.bgColor}; outline: var(--occuplan-grid-border);"
+        >
+          &nbsp;
+        </div>
+      {/each}
+    </div>
+    <div class="footer-content">
+      {@html footer}
+    </div>
+  </footer>
+</section>
+
+<style>
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .legend {
+    display: grid;
+    grid-template-columns: [label] 1fr [marker] 1rem;
+    column-gap: 1rem;
+    text-transform: capitalize;
+    font-variant: small-caps;
+  }
+
+  .legend-entry-marker {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  main {
+    display: grid;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .month-label {
+    aspect-ratio: 3 / 2;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--occuplan-grid-border);
+    border-top: var(--occuplan-grid-border);
+    color: var(--occuplan-font-color-months);
+    background-color: var(--occuplan-bg-color-months);
+    container-type: size;
+    container-name: month-label;
+    padding-left: 0.3rem;
+  }
+
+  @container month-label (min-height: 0) {
+    .month-label span {
+      font-size: 55cqh;
+    }
+  }
+
+  .monthday-header {
+    text-align: center;
+    aspect-ratio: 1;
+    display: inline-grid;
+    align-content: center;
+    outline: var(--occuplan-grid-border);
+    background-color: var(--occuplan-bg-color-days-header);
+    color: var(--occuplan-font-color-days-header);
+    container-type: size;
+    container-name: month-header;
+  }
+
+  @container month-header (min-width: 0) {
+    .monthday-header span {
+      font-size: 55cqh;
+    }
+  }
+
+  .occupation-plan-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
+  .header-label {
+    text-transform: capitalize;
+    font-variant: small-caps;
+    font-weight: bold;
+
+    h3 {
+      padding-top: 0;
+      padding-bottom: 0.2rem;
+    }
+  }
+
+  .header-controls {
+    width: 2rem;
+  }
+
+  .occuplan-wrapper {
+    height: 100%;
+    width: calc(100% - 0.5rem);
+    padding: 0.5rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    border: var(--occuplan-main-border);
+    color: var(--occuplan-font-color-main);
+    background-color: var(--occuplan-bg-color-main);
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 1rem;
+  }
+
+  .year-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    container-type: size;
+    container-name: year-label;
+    text-decoration: underline;
+  }
+
+  @container year-label (min-width: 0) {
+    .year-label span {
+      font-size: 65cqh;
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import { DateTime } from 'luxon';
+import { type OccuplanTranslations, type FirstMonth } from './state.svelte.ts';
+type $$ComponentProps = OccuplanTranslations & {
+    url: string;
+    numberOfMonth?: number;
+    firstMonth?: FirstMonth;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    maxWidth?: string;
+};
+declare const OccuPlanRows: import("svelte").Component<$$ComponentProps, {}, "">;
+type OccuPlanRows = ReturnType<typeof OccuPlanRows>;
+export default OccuPlanRows;

package/dist/occuplan/OccuPlanWrapper.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import OccuPlanGrid from './OccuPlanGrid.svelte';
+  import OccuPlanRows from './OccuPlanRows.svelte';
+  import { getContext, setContext } from 'svelte';
+  import {
+    OCCUPATION_STATE,
+    OccupationState,
+    type OccuplanTranslations,
+    type OccuplanMiscProps,
+    defaultWeekendLabel,
+    defaultMonthLabels,
+    defaultWeekdayLabels,
+    defaultMonthHeaderFormat,
+  } from './state.svelte.ts';
+  import { DateTime } from 'luxon';
+
+  let {
+    url,
+    header = '',
+    footer = '',
+    weekendLabel = defaultWeekendLabel,
+    monthLabels = defaultMonthLabels,
+    weekdayLabels = defaultWeekdayLabels,
+    monthHeaderFormat = defaultMonthHeaderFormat,
+    gridNumberOfMonths = 8,
+    gridFirstMonth = '-1',
+    gridMaxWidth = '1200px',
+    rowsNumberOfMonths = 12,
+    rowsFirstMonth = 1,
+    rowsMaxWidth = '1200px',
+    toggleGridOffset = 640,
+    toggleRowsOffset = 640,
+    maxDate = DateTime.utc().plus({ years: 2 }),
+    minDate = DateTime.utc(),
+    nextPage = '>',
+    prevPage = '<',
+    typeLabels = {
+      one: 'BOOKING',
+      two: 'RESERVATION',
+      three: 'PERSONAL',
+    },
+  }: OccuplanTranslations & OccuplanMiscProps = $props();
+
+  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
+  let occupationState: OccupationState = getContext(oStateID);
+  if (!occupationState) {
+    occupationState = new OccupationState(url);
+    setContext(oStateID, occupationState);
+  }
+
+  /*
+    use different component based on different media size.
+  */
+  let w: number = $state(0);
+  let showGrid: boolean = $state(false);
+  let showRows: boolean = $state(true);
+
+  $effect(() => {
+    if (w < toggleGridOffset && showRows) {
+      showGrid = true;
+      showRows = false;
+    }
+  });
+  $effect(() => {
+    if (w > toggleRowsOffset && showGrid) {
+      showRows = true;
+      showGrid = false;
+    }
+  });
+</script>
+
+<div class="calendar-wrapper" bind:clientWidth={w}>
+  {#if showRows}
+    <OccuPlanRows
+      {url}
+      {header}
+      {footer}
+      {weekendLabel}
+      {monthLabels}
+      {maxDate}
+      {minDate}
+      maxWidth={rowsMaxWidth}
+      numberOfMonth={rowsNumberOfMonths}
+      firstMonth={rowsFirstMonth}
+      {typeLabels}
+    />
+  {:else if showGrid}
+    <OccuPlanGrid
+      {url}
+      {header}
+      {footer}
+      {nextPage}
+      {prevPage}
+      {weekdayLabels}
+      {monthLabels}
+      {maxDate}
+      {minDate}
+      maxWidth={gridMaxWidth}
+      {monthHeaderFormat}
+      numberOfMonth={gridNumberOfMonths}
+      firstMonth={gridFirstMonth}
+      {typeLabels}
+    />
+  {/if}
+</div>
+
+<style>
+  .calendar-wrapper {
+    min-width: 210px;
+    max-width: 110rem;
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,5 @@
+import { type OccuplanTranslations, type OccuplanMiscProps } from './state.svelte.ts';
+type $$ComponentProps = OccuplanTranslations & OccuplanMiscProps;
+declare const OccuPlanWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type OccuPlanWrapper = ReturnType<typeof OccuPlanWrapper>;
+export default OccuPlanWrapper;

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

@@ -0,0 +1,90 @@
+import { DateTime, type MonthNumbers, type WeekdayNumbers } from 'luxon';
+export interface AvailableSpans {
+    [key: number]: DateTime | null;
+}
+export interface Occupation {
+    arrival: DateTime;
+    leave: DateTime;
+    type: OccupationType;
+}
+export type OccupationCallback = (occupation: Occupation) => void;
+export type WeekdayLabels = {
+    [key in WeekdayNumbers]: string;
+};
+export type MonthLabels = {
+    [key in MonthNumbers]: string;
+};
+export type OccupationType = 'one' | 'two' | 'three';
+export declare const OCCUPATION_STATE = "occupation-state";
+export declare const occupationTypeFormattingByOccupation: (o?: Occupation) => {
+    fontColor: string;
+    bgColor: string;
+};
+export declare const occupationTypeFormatting: (t?: OccupationType) => {
+    fontColor: string;
+    bgColor: string;
+};
+export interface DayHelper {
+    day: number;
+    month: MonthNumbers;
+    year: number;
+}
+export declare const firstMonthValid: (value: string | number) => boolean;
+export declare const realFirstMonth: (firstMonth: FirstMonth, numberOfMonth: number, page: number) => DateTime;
+export interface OccuplanTranslations {
+    arrivalLabel?: string;
+    leaveLabel?: string;
+    header?: string;
+    footer?: string;
+    weekendLabel?: string;
+    weekdayLabels?: WeekdayLabels;
+    monthLabels?: MonthLabels;
+    monthHeaderFormat?: string;
+    datePickerDateFormat?: string;
+    numberOfNights?: string;
+    nextPage?: string;
+    prevPage?: string;
+    typeLabels?: Record<OccupationType, string>;
+}
+export type NextMonthNumbers = '+1' | '+2' | '+3' | '+4' | '+5' | '+6' | '+7' | '+8' | '+9' | '+10' | '+11' | '+12';
+export type PrevMonthNumbers = '-1' | '-2' | '-3' | '-4' | '-5' | '-6' | '-7' | '-8' | '-9' | '-10' | '-11' | '-12';
+export type FirstMonth = MonthNumbers | NextMonthNumbers | PrevMonthNumbers | 0;
+export interface OccuplanMiscProps {
+    url: string;
+    gridNumberOfMonths: number;
+    gridFirstMonth: FirstMonth;
+    gridMaxWidth: string;
+    rowsNumberOfMonths: number;
+    rowsFirstMonth: FirstMonth;
+    rowsMaxWidth: string;
+    minDate: DateTime;
+    maxDate: DateTime;
+    toggleGridOffset: number;
+    toggleRowsOffset: number;
+}
+export declare const defaultWeekendLabel = "Weekend";
+export declare const defaultWeekdayLabels: WeekdayLabels;
+export declare const defaultMonthLabels: MonthLabels;
+export declare const defaultMonthHeaderFormat = "{{month}} / {{year}}";
+export declare class OccupationState {
+    iCalURL: string;
+    occupiedDays: Record<string, boolean>;
+    occupations: Occupation[];
+    loading: boolean;
+    constructor(iCalURL: string);
+    private loadOccupations;
+    private eventsIncomingCallback;
+    private dayKey;
+    private updateOccupiedDays;
+    firstFree: (maxFutureDate: DateTime) => DateTime;
+    earliestRequestStart: (currentEnd: DateTime | undefined) => DateTime | undefined;
+    latestRequestEnd: (maxFutureDate: DateTime, currentStart: DateTime | undefined) => DateTime | undefined;
+    calcAvailability: (search: number[], maxFutureDate: DateTime) => AvailableSpans;
+    dayOccupied: (day: DateTime) => boolean;
+    startingOccupation: (d: DateTime) => Occupation | undefined;
+    endingOccupation: (d: DateTime) => Occupation | undefined;
+    fullOccupation: (d: DateTime) => Occupation | undefined;
+    validRequest: (from: DateTime, to: DateTime) => boolean;
+    occupationStyle: (d: DayHelper, highlightWeekend: boolean | undefined, maxDate: DateTime) => string;
+}
+export declare const getOccupationState: (url: string) => OccupationState;