accomadesc 0.0.14 → 0.1.0

package/dist/AccoCard.svelte.d.ts

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

package/dist/AccoDescription.svelte.d.ts

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

package/dist/AmenitiesCore.svelte

@@ -37,7 +37,7 @@
   let formattedSize: string = $derived(formatFunc ? formatFunc('size', { size: size }) : `${size}`);
 </script>
 
-<div class="amneties-wrapper">
+<div class="amenities-wrapper">
   <div class="element-wrapper">
     <AreaSvg size="2rem" />
     <div>
@@ -151,7 +151,7 @@
 </div>
 
 <style>
-  .amneties-wrapper {
+  .amenities-wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 

package/dist/AmenitiesCore.svelte.d.ts

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

package/dist/BookingRequest.svelte

@@ -0,0 +1,272 @@
+<script lang="ts">
+  import type { BookingRequestContent, I18nFacade } from './types.js';
+  import { getContext } from 'svelte';
+  import Button from './basic/Button.svelte';
+  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.ts';
+  import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
+  import { slide } from 'svelte/transition';
+  import type { DateTime } from 'luxon';
+
+  const {
+    endpoint,
+    acco,
+    messageLabel,
+    calUrl,
+    userID,
+    nameLabel,
+    emailLabel,
+    dateEntryLabel,
+    explainer,
+    successfullySentText,
+    sentErroredText,
+    submitText,
+    invalidText,
+    maxCharsAllowed = 300,
+    translateFunc,
+    formatDateFunc,
+  }: BookingRequestContent & I18nFacade = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let message = $state('');
+  let arrival: DateTime | undefined = $state();
+  let leave: DateTime | undefined = $state();
+  let disabled = $state(false);
+  let inputDatesEngaged = $state(false);
+
+  let currentCharsCount = $derived(message.length);
+  let showMaxCharsMessage = $derived(currentCharsCount > maxCharsAllowed - 50);
+  let canSubmit: boolean = $derived(
+    name.length > 0 &&
+      email.length > 0 &&
+      message.length <= maxCharsAllowed &&
+      !!arrival &&
+      !!leave,
+  );
+
+  let errored = $state(false);
+  let successfullySent = $state(false);
+  let sending = $state(false);
+
+  //https://popnapdkcdnabruxkjti.supabase.co/storage/v1/object/public/ical/81e66599-ac3c-4ad6-b261-fceeb784f9e9/050edcb4-680e-4542-96df-3ae4a2af89a5
+
+  const url = calUrl; //`${accomadeBaseUrl}/${userID}/${acco.path}`;
+  const oStateID = `i-${url}-${OCCUPATION_STATE}`;
+  let occupationState: OccupationState = $state(getContext(oStateID));
+  let invalid = $derived(
+    occupationState && arrival && leave ? occupationState.validRequest(arrival, leave) : false,
+  );
+  const messageChanged = (value: string) => {
+    message = value;
+  };
+
+  const abortDateInput = () => {
+    inputDatesEngaged = false;
+  };
+
+  const engageDateInput = () => {
+    inputDatesEngaged = true;
+  };
+  const dateSelected = (a: DateTime, l: DateTime) => {
+    arrival = a;
+    leave = l;
+    inputDatesEngaged = false;
+  };
+  const dateDeleted = () => {
+    arrival = undefined;
+    leave = undefined;
+    inputDatesEngaged = false;
+  };
+
+  const createRequest = async (e: SubmitEvent) => {
+    sending = true;
+    e.preventDefault();
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          userID: userID,
+          acco: acco.path,
+          guestEmail: email,
+          guestName: name,
+          message: message,
+          arrival: arrival?.toISO(),
+          leave: leave?.toISO(),
+        }),
+      });
+      if (response.status != 201) {
+        errored = true;
+        console.log('Error sending mail', response.status, response.statusText);
+      } else {
+        successfullySent = true;
+      }
+    } catch (e) {
+      errored = true;
+      console.log('Error sending request', e);
+    }
+
+    sending = false;
+    setTimeout(() => {
+      errored = false;
+      successfullySent = false;
+    }, 15000);
+
+    return false;
+  };
+</script>
+
+<div class="wrapper">
+  {#if explainer}
+    <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
+  {/if}
+  <form onsubmit={createRequest}>
+    <input type="hidden" value={userID} />
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(nameLabel) : 'Name'}:
+      <TextInput type="text" marginForMessage={false} bind:value={name} enabled={!disabled} />
+    </label>
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(emailLabel) : 'Email'}:
+      <TextInput type="email" marginForMessage={false} bind:value={email} enabled={!disabled} />
+    </label>
+    <div style="display:flex;">
+      <span class:disabled>
+        {@html translateFunc ? translateFunc(dateEntryLabel) : 'Vacation Dates'}:
+      </span>
+      <div class="date-input-wrapper">
+        {#if inputDatesEngaged}
+          <div transition:slide style="min-width: 32rem;" class="picker-wrapper">
+            <OccuPlanPicker {arrival} {leave} {url} aborted={abortDateInput} {dateSelected} />
+          </div>
+        {/if}
+        <div class="date-input-display-wrapper" id="engage-date-buttons">
+          <Button
+            iconName="edit"
+            size={1.8}
+            clicked={engageDateInput}
+            text={arrival && leave && formatDateFunc
+              ? `${formatDateFunc(arrival)} - ${formatDateFunc(leave)}`
+              : ''}
+          />
+          {#if arrival && leave}
+            <Button iconName="delete" size={1.8} clicked={dateDeleted} />
+          {/if}
+        </div>
+      </div>
+    </div>
+    <label class="row-label"
+      ><div class:disabled>
+        {@html translateFunc
+          ? translateFunc(messageLabel)
+          : 'Your Message'}{#if showMaxCharsMessage}<span class="max-chars-message"
+            >&nbsp;({currentCharsCount}/{maxCharsAllowed})</span
+          >{/if}:
+      </div>
+      <Notes {disabled} changed={messageChanged} />
+    </label>
+
+    {#if successfullySent}
+      <div class="success">
+        {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
+      </div>
+    {/if}
+    {#if errored}
+      <div class="error">
+        {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
+      </div>
+    {/if}
+    {#if invalid}
+      <div class="error">
+        {translateFunc ? translateFunc(invalidText) : 'Dates Are Not Available'}
+      </div>
+    {/if}
+    <div class="button-wrapper">
+      <Button
+        enabled={canSubmit && !disabled}
+        text={translateFunc ? translateFunc(submitText) : 'Submit'}
+        type="submit"
+      />
+    </div>
+  </form>
+  {#if sending}
+    <Spinner />
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    background-color: var(--main-bg-color);
+    color: var(--main-font-color);
+
+    width: 100%;
+    display: flex;
+
+    padding: 1rem;
+    margin: 1rem;
+    :global(*) {
+      color: var(--main-font-color);
+    }
+  }
+
+  .date-input-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .date-input-display-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .picker-wrapper {
+    position: absolute;
+    z-index: 9999;
+    background-color: var(--main-bg-color);
+  }
+
+  form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  label {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .row-label {
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .max-chars-message {
+    font-weight: bolder;
+    color: var(--alert-font-color);
+  }
+
+  .success {
+    color: var(--accept-font-color);
+    font-weight: bolder;
+  }
+
+  .error {
+    color: var(--alert-font-color);
+    font-weight: bolder;
+  }
+
+  .disabled {
+    color: var(--font-disabled-color);
+  }
+</style>

package/dist/BookingRequest.svelte.d.ts

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

package/dist/Calendar.svelte

@@ -1,21 +1,35 @@
 <script lang="ts">
-  import { OccuPlanWrapper } from 'occuplan';
-  import Spinner from './basic/Spinner.svelte';
+  import OccuPlanWrapper from './occuplan/OccuPlanWrapper.svelte';
   import type { CalendarContent, I18nFacade } from './types.js';
 
-  let { calUrl, calendarTranslation, translateFunc }: CalendarContent & I18nFacade = $props();
-  let calLoading = $state(true);
+  let {
+    url,
+    calendarTranslation,
+    toggleGridOffset,
+    gridMonthNumbers,
+    gridFirstMonth,
+    gridMaxWidth,
+    toggleRowsOffset,
+    rowsMonthNumbers,
+    rowsFirstMonth,
+    rowsMaxWidth,
+    translateFunc,
+  }: CalendarContent & I18nFacade = $props();
 </script>
 
 <div class="cal-wrapper">
-  {#if calLoading}
-    <Spinner />
-  {/if}
   <OccuPlanWrapper
-    on:result={() => (calLoading = false)}
-    {calUrl}
-    headerContent={translateFunc ? translateFunc('calendarHeader') : ''}
-    translations={calendarTranslation}
+    {url}
+    {toggleGridOffset}
+    gridNumberOfMonths={gridMonthNumbers}
+    {gridFirstMonth}
+    {gridMaxWidth}
+    {toggleRowsOffset}
+    rowsNumberOfMonths={rowsMonthNumbers}
+    {rowsFirstMonth}
+    {rowsMaxWidth}
+    header={translateFunc ? translateFunc('calendarHeader') : ''}
+    {...calendarTranslation}
   />
 </div>
 

package/dist/Calendar.svelte.d.ts

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

package/dist/CalendarAvailable.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-  import { OccuPlanAvailableInfo } from 'occuplan';
+  import OccuPlanAvailableInfo from './occuplan/OccuPlanAvailableInfo.svelte';
   import { DateTime } from 'luxon';
-  import Spinner from './basic/Spinner.svelte';
   import type { CalendarAvailableContent, I18nFacade } from './types.js';
+  import { type AvailableSpans } from './occuplan/state.svelte.ts';
 
   let {
-    calUrl,
+    url,
     search = [3, 7, 14],
     maxFutureDate = DateTime.now().plus({ years: 2 }).toISO(),
     formatFunc,
     translateFunc,
   }: CalendarAvailableContent & I18nFacade = $props();
-  let calLoading = $state(true);
 
   let availHeader = $derived(translateFunc ? translateFunc('availability') : '[AVAILABILITY]');
 
@@ -33,21 +32,15 @@
 <div class="cal-wrapper">
   <h3>{availHeader}</h3>
 
-  <OccuPlanAvailableInfo
-    {search}
-    on:result={() => (calLoading = false)}
-    {calUrl}
-    let:available={av}
-  >
-    <ul>
-      {#each search as s}
-        <li>{formatAvailability(av[s], s)}</li>
-      {/each}
-    </ul>
+  <OccuPlanAvailableInfo {search} {url}>
+    {#snippet children(av: AvailableSpans)}
+      <ul>
+        {#each search as s}
+          <li>{formatAvailability(av[s], s)}</li>
+        {/each}
+      </ul>
+    {/snippet}
   </OccuPlanAvailableInfo>
-  {#if calLoading}
-    <Spinner />
-  {/if}
 </div>
 
 <style>

package/dist/CalendarAvailable.svelte.d.ts

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

package/dist/CalendarGrid.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { CalendarGridContent, I18nFacade } from './types.js';
+  import OccuPlanGrid from './occuplan/OccuPlanGrid.svelte';
+
+  let { url, calendarTranslation, translateFunc }: CalendarGridContent & I18nFacade = $props();
+</script>
+
+<div class="cal-wrapper">
+  <OccuPlanGrid
+    {url}
+    header={translateFunc ? translateFunc('calendarHeader') : ''}
+    {...calendarTranslation}
+  />
+</div>
+
+<style>
+  .cal-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/CalendarGrid.svelte.d.ts

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

package/dist/CalendarRows.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { CalendarRowsContent, I18nFacade } from './types.js';
+  import OccuPlanRows from './occuplan/OccuPlanRows.svelte';
+
+  let { url, calendarTranslation, translateFunc }: CalendarRowsContent & I18nFacade = $props();
+</script>
+
+<div class="cal-wrapper">
+  <OccuPlanRows
+    {url}
+    header={translateFunc ? translateFunc('calendarHeader') : ''}
+    {...calendarTranslation}
+  />
+</div>
+
+<style>
+  .cal-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/CalendarRows.svelte.d.ts

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

package/dist/ContactForm.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import Spinner from './basic/Spinner.svelte';
+  import Button from './basic/Button.svelte';
+  import TextInput from './basic/TextInput.svelte';
+  import Notes from './basic/Notes.svelte';
+  import type { ContactFormContent, I18nFacade } from './types.js';
+
+  const {
+    userID,
+    endpoint,
+    explainer,
+    emailLabel,
+    nameLabel,
+    questionLabel,
+    submitText,
+    successfullySentText,
+    sentErroredText,
+    maxCharsAllowed = 300,
+    translateFunc,
+  }: ContactFormContent & I18nFacade = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let question = $state('');
+  let successfullySent = $state(false);
+  let sending = $state(false);
+  let errored = $state(false);
+
+  const questionChanged = (value: string) => {
+    question = value;
+  };
+
+  let currentCharsCount = $derived(question.length);
+  let showMaxCharsMessage = $derived(currentCharsCount > maxCharsAllowed - 50);
+  let canSubmit: boolean = $derived(
+    name.length > 0 &&
+      email.length > 0 &&
+      question.length > 0 &&
+      question.length <= maxCharsAllowed,
+  );
+
+  const submitMessage = async (e: Event) => {
+    sending = true;
+    e.preventDefault();
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          userID: userID,
+          email: email,
+          name: name,
+          question: question,
+        }),
+      });
+      if (response.status != 201) {
+        errored = true;
+        console.log('Error sending mail', response.status, response.statusText);
+      } else {
+        successfullySent = true;
+      }
+    } catch (e) {
+      console.log('An error occurred:', e);
+      errored = true;
+    }
+    sending = false;
+
+    setTimeout(() => {
+      errored = false;
+      successfullySent = false;
+    }, 15000);
+  };
+
+  let disabled = $derived(errored || successfullySent);
+</script>
+
+<div class="wrapper">
+  {#if explainer}
+    <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
+  {/if}
+  <form onsubmit={submitMessage}>
+    <input type="hidden" value={userID} />
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(nameLabel) : 'Name'}:
+      <TextInput type="text" marginForMessage={false} bind:value={name} enabled={!disabled} />
+    </label>
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(emailLabel) : 'Email'}:
+      <TextInput type="email" marginForMessage={false} bind:value={email} enabled={!disabled} />
+    </label>
+    <label class="row-label"
+      ><div class:disabled>
+        {@html translateFunc
+          ? translateFunc(questionLabel)
+          : 'Your Message'}{#if showMaxCharsMessage}<span class="max-chars-message"
+            >&nbsp;({currentCharsCount}/{maxCharsAllowed})</span
+          >{/if}:
+      </div>
+
+      <Notes {disabled} changed={questionChanged} />
+    </label>
+    {#if successfullySent}
+      <div class="success">
+        {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
+      </div>
+    {/if}
+    {#if errored}
+      <div class="error">
+        {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
+      </div>
+    {/if}
+    <div class="button-wrapper">
+      <Button
+        enabled={canSubmit && !disabled}
+        text={translateFunc ? translateFunc(submitText) : 'Submit'}
+        type="submit"
+      />
+    </div>
+  </form>
+  {#if sending}
+    <Spinner />
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    background-color: var(--main-bg-color);
+    color: var(--main-font-color);
+
+    width: 100%;
+    display: flex;
+
+    padding: 1rem;
+    margin: 1rem;
+    :global(*) {
+      color: var(--main-font-color);
+    }
+  }
+
+  form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  label {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .row-label {
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .max-chars-message {
+    font-weight: bolder;
+    color: var(--alert-font-color);
+  }
+
+  .success {
+    color: var(--accept-font-color);
+    font-weight: bolder;
+  }
+
+  .error {
+    color: var(--alert-font-color);
+    font-weight: bolder;
+  }
+
+  .disabled {
+    color: var(--font-disabled-color);
+  }
+</style>

package/dist/ContactForm.svelte.d.ts

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

package/dist/Photo.svelte.d.ts

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