accomadesc 0.4.8 → 0.4.10

package/dist/occusplan-link/OccuPlanRows.svelte

@@ -1,376 +0,0 @@
-<script lang="ts">
-  import { DateTime, type DayNumbers, type MonthNumbers } from 'luxon';
-  import {
-    defaultMonthLabels,
-    defaultWeekendLabel,
-    OccupationState,
-    occupationTypeFormatting,
-    type OccupationType,
-    type OccuplanTranslations,
-    type DayHelper,
-    type FirstMonth,
-    realFirstMonth,
-    contextKey,
-  } 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 { getContext, onMount, setContext, untrack } 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();
-
-  const stateID = contextKey(untrack(() => url));
-  let ss: OccupationState = getContext(stateID);
-  if (!ss) {
-    ss = new OccupationState(() => {
-      return { iCalURL: url, debug };
-    });
-    setContext(stateID, ss);
-  }
-  let occupationState: OccupationState = $derived(ss);
-
-  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

@@ -1,120 +0,0 @@
-<script lang="ts">
-  import OccuPlanGrid from '../occuplan/OccuPlanGrid.svelte';
-  import OccuPlanRows from '../occuplan/OccuPlanRows.svelte';
-  import {
-    type OccuplanTranslations,
-    type OccuplanMiscProps,
-    defaultWeekendLabel,
-    defaultMonthLabels,
-    defaultWeekdayLabels,
-    defaultMonthHeaderFormat,
-    contextKey,
-    OccupationState,
-  } from '../occuplan/state.svelte.js';
-  import { DateTime } from 'luxon';
-  import { getContext, setContext, untrack } from 'svelte';
-
-  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;
-    }
-  });
-
-  const stateID = contextKey(untrack(() => url));
-  let ss: OccupationState = getContext(stateID);
-  if (!ss) {
-    ss = new OccupationState(() => {
-      return { iCalURL: url, debug };
-    });
-    setContext(stateID, ss);
-  }
-</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

@@ -1,157 +0,0 @@
-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',
-        },
-    },
-};