accomadesc 0.3.41 → 0.4.0

package/dist/occusplan-link/OccuPlanRows.svelte

@@ -0,0 +1,368 @@
+<script lang="ts">
+  import { DateTime, type DayNumbers, type MonthNumbers } from 'luxon';
+  import {
+    defaultMonthLabels,
+    defaultWeekendLabel,
+    OccupationState,
+    getOccupationState,
+    occupationTypeFormatting,
+    type OccupationType,
+    type OccuplanTranslations,
+    type DayHelper,
+    type FirstMonth,
+    realFirstMonth,
+  } from '../occuplan/state.svelte.js';
+  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,
+    debug = false,
+    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;
+    debug?: boolean;
+    numberOfMonth?: number;
+    firstMonth?: FirstMonth;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    maxWidth?: string;
+  } = $props();
+
+  const id = randomID();
+
+  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+
+  let page: number = $state(0);
+  let rfMonth: number | DateTime = $derived(
+    realFirstMonth(firstMonth, DateTime.utc().get('year'), 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[])
+      : [],
+  );
+
+  onMount(() => {
+    occupationState.loadOccupations();
+  });
+</script>
+
+{#if !occupationState || occupationState.loading}
+  <Spinner />
+{/if}
+
+<section class="occuplan-wrapper" 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-main-bg-color);"
+    >
+      &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
+        id={`${m.year}-${m.month}-${id}`}
+        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
+          id={`${d.year}-${d.month}-${d.day}-${id}`}
+          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-weekend-bg-color), var(--occuplan-main-bg-color), var(--occuplan-main-bg-color));
+            "
+      >
+        &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;
+
+    span {
+      color: var(--occuplan-main-font-color);
+    }
+  }
+
+  .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-months-font-color);
+    background-color: var(--occuplan-months-bg-color);
+    container-type: size;
+    container-name: month-label;
+    padding-left: 0.3rem;
+    height: 100%;
+
+    span {
+      font-size: clamp(0.9rem, 55cqh, 2rem);
+      color: var(--occuplan-months-font-color);
+    }
+  }
+
+  .monthday-header {
+    text-align: center;
+    aspect-ratio: 1;
+    display: inline-grid;
+    align-content: center;
+    outline: var(--occuplan-grid-border);
+    background-color: var(--occuplan-days-header-bg-color);
+    color: var(--occuplan-days-header-font-color);
+    container-type: size;
+    container-name: month-header;
+
+    span {
+      color: var(--occuplan-days-header-font-color);
+      font-size: clamp(0.9rem, 55cqh, 2rem);
+    }
+  }
+
+  .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;
+      color: var(--occuplan-main-font-color);
+    }
+  }
+
+  .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-main-font-color);
+    background-color: var(--occuplan-main-bg-color);
+  }
+
+  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;
+    height: 100%;
+    span {
+      color: var(--occuplan-main-font-color);
+      font-size: clamp(1rem, 55cqh, 2rem);
+    }
+  }
+</style>

package/dist/occusplan-link/OccuPlanWrapper.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import OccuPlanGrid from '../occuplan/OccuPlanGrid.svelte';
+  import OccuPlanRows from '../occuplan/OccuPlanRows.svelte';
+  import {
+    type OccuplanTranslations,
+    type OccuplanMiscProps,
+    defaultWeekendLabel,
+    defaultMonthLabels,
+    defaultWeekdayLabels,
+    defaultMonthHeaderFormat,
+  } from '../occuplan/state.svelte.js';
+  import { DateTime } from 'luxon';
+
+  let {
+    url,
+    header = '',
+    footer = '',
+    debug = false,
+    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();
+
+  /*
+    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
+      {debug}
+      {url}
+      {header}
+      {footer}
+      {weekendLabel}
+      {monthLabels}
+      {maxDate}
+      {minDate}
+      maxWidth={rowsMaxWidth}
+      numberOfMonth={rowsNumberOfMonths}
+      firstMonth={rowsFirstMonth}
+      {typeLabels}
+    />
+  {:else if showGrid}
+    <OccuPlanGrid
+      {debug}
+      {url}
+      {header}
+      {footer}
+      {nextPage}
+      {prevPage}
+      {weekdayLabels}
+      {monthLabels}
+      {maxDate}
+      {minDate}
+      maxWidth={gridMaxWidth}
+      {monthHeaderFormat}
+      numberOfMonth={gridNumberOfMonths}
+      firstMonth={gridFirstMonth}
+      {typeLabels}
+    />
+  {/if}
+</div>
+
+<style>
+  .calendar-wrapper {
+    display: flex;
+    justify-content: center;
+    min-width: 210px;
+    max-width: 110rem;
+    width: 100%;
+  }
+</style>

package/dist/occusplan-link/defaultTranslations.js

@@ -0,0 +1,157 @@
+export const DefaultCalTranslations = {
+    es: {
+        weekdayLabels: {
+            1: 'Lu',
+            2: 'Ma',
+            3: 'Mi',
+            4: 'Ju',
+            5: 'Vi',
+            6: 'Sa',
+            7: 'Do',
+        },
+        monthLabels: {
+            1: 'Ene',
+            2: 'Feb',
+            3: 'Mar',
+            4: 'Abr',
+            5: 'May',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Ago',
+            9: 'Sep',
+            10: 'Oct',
+            11: 'Nov',
+            12: 'Dic',
+        },
+        weekendLabel: 'Fin de Semana',
+        typeLabels: {
+            one: 'Ocupado',
+            two: 'Ocupade',
+            three: '',
+        },
+    },
+    fr: {
+        weekdayLabels: {
+            1: 'Lu',
+            2: 'Ma',
+            3: 'Me',
+            4: 'Je',
+            5: 'Ve',
+            6: 'Sa',
+            7: 'Di',
+        },
+        monthLabels: {
+            1: 'Jan',
+            2: 'Fév',
+            3: 'Mar',
+            4: 'Avr',
+            5: 'Mai',
+            6: 'Juin',
+            7: 'Juil',
+            8: 'Août',
+            9: 'Sept',
+            10: 'Oct',
+            11: 'Nov',
+            12: 'Déc',
+        },
+        weekendLabel: 'Week-end',
+        typeLabels: {
+            one: 'Occupé',
+            two: 'Occupé',
+            three: '',
+        },
+    },
+    pl: {
+        weekdayLabels: {
+            1: 'Pon',
+            2: 'Wt',
+            3: 'Śr',
+            4: 'Czw',
+            5: 'Pt',
+            6: 'Sob',
+            7: 'Ndz',
+        },
+        monthLabels: {
+            1: 'Sty',
+            2: 'Lut',
+            3: 'Mar',
+            4: 'Kwi',
+            5: 'Maj',
+            6: 'Cze',
+            7: 'Lip',
+            8: 'Sie',
+            9: 'Wrz',
+            10: 'Paź',
+            11: 'Lis',
+            12: 'Gru',
+        },
+        weekendLabel: 'Weekend',
+        typeLabels: {
+            one: 'Zajęty',
+            two: 'Zajęty',
+            three: '',
+        },
+    },
+    en: {
+        weekdayLabels: {
+            1: 'Mo',
+            2: 'Tu',
+            3: 'We',
+            4: 'Th',
+            5: 'Fr',
+            6: 'Sa',
+            7: 'Su',
+        },
+        monthLabels: {
+            1: 'Jan',
+            2: 'Feb',
+            3: 'Mar',
+            4: 'Apr',
+            5: 'May',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Aug',
+            9: 'Sep',
+            10: 'Oct',
+            11: 'Nov',
+            12: 'Dec',
+        },
+        weekendLabel: 'Weekend',
+        typeLabels: {
+            one: 'Occupied',
+            two: 'Blocked',
+            three: 'Requested',
+        },
+    },
+    de: {
+        weekdayLabels: {
+            1: 'Mo',
+            2: 'Di',
+            3: 'Mi',
+            4: 'Do',
+            5: 'Fr',
+            6: 'Sa',
+            7: 'So',
+        },
+        monthLabels: {
+            1: 'Jan',
+            2: 'Feb',
+            3: 'Mär',
+            4: 'Apr',
+            5: 'Mai',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Aug',
+            9: 'Sep',
+            10: 'Okt',
+            11: 'Nov',
+            12: 'Dez',
+        },
+        weekendLabel: 'Wochenende',
+        typeLabels: {
+            one: 'Belegt',
+            two: 'Geblockt',
+            three: 'Anfrage',
+        },
+    },
+};