@getmicdrop/svelte-components 2.4.0 → 2.6.1

package/dist/components/pages/performers/AvailabilityCalendarModal.svelte

@@ -0,0 +1,632 @@
+<script>
+  import { fade, fly } from "svelte/transition";
+  import { writable } from "svelte/store";
+  import { jwtDecode } from "jwt-decode";
+  import QuarterView from "../../Calendar/QuarterView.svelte";
+  import { timeAgo } from "../../../utils/utils/utils";
+  import { buildApiUrl, API_ENDPOINTS } from "../../../utils/apiConfig.js";
+  import { auth, initializeAuthState } from "../../../stores/auth.js";
+  import microphonePlaceholder from "../../../assets/images/microphone.png";
+
+  export let show = false;
+  export let venue = null;
+  export let onClose = () => {};
+  export let onUpdate = (updatedTimestamp) => {};
+
+  let isLoading = false;
+  let currentEvents = [];
+  const selectedDates = writable([]);
+  const message = writable("");
+  let localLastUpdated = venue?.lastUpdated || new Date().toISOString();
+  let saveTimeout = null;
+  let lastSavedDatesJson = "[]";
+  let isInitialLoad = true;
+
+  // Parse location into street address and city/state/zip
+  function parseLocation(locationString) {
+    if (!locationString) return { street: '', cityStateZip: '' };
+
+    // Split by comma to separate components
+    const parts = locationString.split(',').map(part => part.trim());
+
+    if (parts.length >= 3) {
+      // Format: "3400 Warner Blvd, Burbank, CA 91505"
+      const street = parts[0];
+      const cityStateZip = parts.slice(1).join(', ');
+      return { street, cityStateZip };
+    } else if (parts.length === 2) {
+      // Format: "Street, City State Zip"
+      return { street: parts[0], cityStateZip: parts[1] };
+    } else {
+      // Single part or unexpected format
+      return { street: locationString, cityStateZip: '' };
+    }
+  }
+
+  $: parsedLocation = parseLocation(venue?.location);
+
+  // Generate currentEvents up to 360 days in advance
+  function generateCurrentEvents() {
+    currentEvents = [];
+    const today = new Date();
+    for (let i = 0; i <= 360; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      currentEvents.push({ date: normalizeDate(date) });
+    }
+  }
+
+  function normalizeDate(date) {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  async function loadAvailabilityData() {
+    if (!venue) return;
+
+    isLoading = true;
+    initializeAuthState();
+    generateCurrentEvents();
+
+    try {
+      const getCookie = (name) => {
+        const value = `; ${document.cookie}`;
+        const parts = value.split(`; ${name}=`);
+        if (parts.length === 2) return parts.pop().split(";").shift();
+      };
+      const token = getCookie("performer_token");
+
+      let userId;
+      if (token) {
+        try {
+          const decoded = jwtDecode(token);
+          userId = decoded?.id || decoded?.userId;
+        } catch (err) {
+          console.error("Failed to decode token:", err);
+        }
+      }
+
+      const res = await fetch(
+        buildApiUrl(`${API_ENDPOINTS.PERFORMER_AVAILABILITIES}/${userId}`),
+        {
+          credentials: "include",
+          headers: {
+            Authorization: token ? `Bearer ${token}` : "",
+          },
+        },
+      );
+
+      if (res.ok) {
+        const events = await res.json();
+        const eventDetails = events.filter(
+          (event) => event.VenueID === Number(venue.venueId),
+        );
+
+        selectedDates.set([]);
+        eventDetails.forEach((event) => {
+          if (event.Date) {
+            const normalizedDate = normalizeDate(event.Date);
+            selectedDates.update((dates) => [...dates, normalizedDate]);
+          }
+        });
+
+        // Initialize lastSavedDatesJson with loaded dates
+        selectedDates.subscribe(dates => {
+          if (isInitialLoad) {
+            lastSavedDatesJson = JSON.stringify([...dates].sort());
+          }
+        });
+      }
+    } catch (err) {
+      console.error("Error loading availabilities:", err);
+    } finally {
+      setTimeout(() => {
+        isInitialLoad = false;
+      }, 100);
+      isLoading = false;
+    }
+  }
+
+  async function saveSelectedDates() {
+    if (!venue || venue.venueId === 0) return;
+
+    if (!$auth.token) {
+      initializeAuthState();
+    }
+
+    const dates = $selectedDates.map((dateObj) => dateObj);
+    const url = `/api/performer/performerAvailabilities/${venue.venueId}`;
+
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(dates),
+    });
+
+    if (response.ok) {
+      lastSavedDatesJson = JSON.stringify([...$selectedDates].sort());
+      localLastUpdated = new Date().toISOString();
+      onUpdate(localLastUpdated);
+    }
+  }
+
+  // Reactive statement to save selected dates with debouncing
+  $: {
+    const currentDatesJson = JSON.stringify([...$selectedDates].sort());
+    const hasChanged = currentDatesJson !== lastSavedDatesJson;
+
+    if ($selectedDates.length > 0 && !isInitialLoad && hasChanged) {
+      // ALWAYS show "saving" on ANY change - this is key for consistent feedback
+      message.set("saving");
+
+      // Clear existing timeout to reset the debounce
+      if (saveTimeout) {
+        clearTimeout(saveTimeout);
+      }
+
+      localLastUpdated = new Date().toISOString();
+
+      // Start new debounce timer - wait for user to stop making changes
+      saveTimeout = setTimeout(async () => {
+        await saveSelectedDates();
+        message.set("saved");
+
+        // Success haptic feedback - notification style for iOS, pattern for Android
+        if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.haptic) {
+          window.webkit.messageHandlers.haptic.postMessage('success');
+        } else if (window.TapticEngine) {
+          window.TapticEngine.notification({ type: 'success' });
+        } else if (navigator.vibrate) {
+          navigator.vibrate([10, 50, 10]);
+        }
+
+        // Clear the "saved" message after 2 seconds (Google Docs style)
+        setTimeout(() => {
+          message.set("");
+        }, 2000);
+
+        saveTimeout = null;
+      }, 1000);
+    }
+  }
+
+  // Reset message when venue changes
+  $: if (venue) {
+    message.set("");
+  }
+
+  // Load data when modal opens
+  $: if (show && venue) {
+    loadAvailabilityData();
+  }
+
+  // Handle ESC key
+  function handleKeydown(event) {
+    if (event.key === "Escape" && show) {
+      onClose();
+    }
+  }
+
+  // Handle backdrop click
+  function handleBackdropClick(event) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show && venue}
+  <!-- Mobile: Full-screen modal (shown on mobile via CSS) -->
+  <div
+    class="fullscreen-modal modal-mobile-only"
+    transition:fade={{ duration: 200 }}
+    role="dialog"
+    aria-modal="true"
+  >
+    <!-- Header with safe area padding -->
+    <header class="fullscreen-modal__header">
+      <button
+        on:click={onClose}
+        class="modal-back-btn"
+        aria-label="Back to venues"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <div class="modal-venue-info">
+        <div class="modal-venue-image">
+          <img
+            src={venue.image?.trim()
+              ? (venue.image.startsWith("http")
+                  ? venue.image
+                  : `https://moxy.sfo3.digitaloceanspaces.com${venue.image}`)
+              : microphonePlaceholder}
+            alt={venue.name}
+          />
+        </div>
+        <div class="modal-venue-text">
+          <h2 class="modal-venue-name">{venue.name}</h2>
+          <p class="modal-save-status">
+            {#if $message === "saving"}
+              <span class="text-green-500">Saving...</span>
+            {:else if $message === "saved"}
+              <span class="text-green-500">✓ Saved</span>
+            {/if}
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Calendar Content - uses fullscreen-modal__body for proper scrolling -->
+    <div class="fullscreen-modal__body">
+      <div class="calendar-content">
+        {#if isLoading}
+          <!-- Loading Skeleton -->
+          <div class="loading-skeleton">
+            <div class="skeleton-nav">
+              <div class="skeleton-btn"></div>
+              <div class="skeleton-title"></div>
+              <div class="skeleton-btn"></div>
+            </div>
+            <div class="skeleton-grid">
+              {#each Array(35) as _}
+                <div class="skeleton-day"></div>
+              {/each}
+            </div>
+          </div>
+        {:else}
+          <QuarterView
+            currentevents={currentEvents}
+            {selectedDates}
+            saveStatus={$message}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <!-- Desktop: Side panel (shown on desktop via CSS) -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="desktop-panel-backdrop modal-desktop-only"
+    transition:fade={{ duration: 200 }}
+    on:click={handleBackdropClick}
+    role="dialog"
+    aria-modal="true"
+  >
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="desktop-panel"
+      transition:fly={{ x: "100%", duration: 300 }}
+      on:click|stopPropagation
+    >
+      <!-- Header -->
+      <header class="desktop-panel-header">
+        <div class="desktop-venue-image">
+          <img
+            src={venue.image?.trim()
+              ? (venue.image.startsWith("http")
+                  ? venue.image
+                  : `https://moxy.sfo3.digitaloceanspaces.com${venue.image}`)
+              : microphonePlaceholder}
+            alt={venue.name}
+          />
+        </div>
+        <div class="desktop-venue-text">
+          <h2 class="desktop-venue-name">{venue.name}</h2>
+          <p class="modal-save-status">
+            {#if $message === "saving"}
+              <span class="text-green-500">Saving...</span>
+            {:else if $message === "saved"}
+              <span class="text-green-500">✓ Saved</span>
+            {/if}
+          </p>
+        </div>
+        <button
+          on:click={onClose}
+          class="desktop-close-btn"
+          aria-label="Close"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </header>
+
+      <!-- Calendar Content -->
+      <div class="desktop-panel-body">
+        <div class="calendar-content">
+          {#if isLoading}
+            <!-- Loading Skeleton -->
+            <div class="loading-skeleton">
+              <div class="skeleton-nav">
+                <div class="skeleton-btn"></div>
+                <div class="skeleton-title"></div>
+                <div class="skeleton-btn"></div>
+              </div>
+              <div class="skeleton-grid">
+                {#each Array(35) as _}
+                  <div class="skeleton-day"></div>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            <QuarterView
+              currentevents={currentEvents}
+              {selectedDates}
+              saveStatus={$message}
+            />
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* Responsive show/hide - mobile shows fullscreen, desktop shows side panel */
+  .modal-mobile-only {
+    display: flex !important;
+  }
+
+  .modal-desktop-only {
+    display: none !important;
+  }
+
+  @media (min-width: 768px) {
+    .modal-mobile-only {
+      display: none !important;
+    }
+
+    .modal-desktop-only {
+      display: flex !important;
+    }
+  }
+
+  /*
+    Mobile fullscreen modal uses .fullscreen-modal class from app.css
+    which handles:
+    - position: fixed with inset: 0
+    - z-index: var(--z-critical) to be above everything
+    - flex column layout
+
+    .fullscreen-modal__header handles:
+    - Safe area padding (notch)
+    - Fixed height matching app header
+    - Border bottom
+
+    .fullscreen-modal__body handles:
+    - flex: 1 to fill remaining space
+    - overflow-y: auto with proper scrolling
+    - overscroll-behavior: contain (no iOS bounce)
+    - padding-bottom for safe area
+  */
+
+  /* Back button */
+  .modal-back-btn {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: hsl(var(--Text-Primary));
+    transition: background-color 0.15s;
+    flex-shrink: 0;
+  }
+
+  .modal-back-btn:hover {
+    background-color: hsl(var(--BG-Tertiary));
+  }
+
+  /* Venue info in header */
+  .modal-venue-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .modal-venue-image {
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: hsl(var(--BG-Secondary));
+    border-radius: 0.375rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .modal-venue-image img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .modal-venue-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .modal-venue-name {
+    font-size: 1rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary));
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.25;
+    margin: 0;
+  }
+
+  .modal-save-status {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    min-height: 1rem;
+    margin-bottom: 0;
+  }
+
+  /* Calendar content area */
+  .calendar-content {
+    padding: 1rem;
+  }
+
+  /* Loading skeleton */
+  .loading-skeleton {
+    width: 100%;
+    max-width: 28rem;
+    margin: 0 auto;
+  }
+
+  .skeleton-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .skeleton-btn {
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: hsl(var(--BG-Secondary));
+    border-radius: 0.5rem;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .skeleton-title {
+    width: 8rem;
+    height: 1.5rem;
+    background-color: hsl(var(--BG-Secondary));
+    border-radius: 0.25rem;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .skeleton-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.5rem;
+  }
+
+  .skeleton-day {
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: hsl(var(--BG-Secondary));
+    border-radius: 0.25rem;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* Desktop side panel */
+  .desktop-panel-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: var(--z-modal, 50);
+  }
+
+  .desktop-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 28rem;
+    background-color: hsl(var(--BG-Primary));
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .desktop-panel-header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary));
+    background-color: hsl(var(--BG-Primary));
+  }
+
+  .desktop-venue-image {
+    width: 3rem;
+    height: 3rem;
+    background-color: hsl(var(--BG-Secondary));
+    border-radius: 0.375rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .desktop-venue-image img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .desktop-venue-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .desktop-venue-name {
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary));
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.25;
+    margin: 0;
+  }
+
+  .desktop-close-btn {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.375rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: hsl(var(--Text-Primary));
+    transition: background-color 0.15s;
+    flex-shrink: 0;
+  }
+
+  .desktop-close-btn:hover {
+    background-color: hsl(var(--BG-Tertiary));
+  }
+
+  .desktop-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+</style>

package/dist/components/{ShowTimeCard/ShowTimeCard.svelte.d.ts → pages/performers/AvailabilityCalendarModal.svelte.d.ts}

@@ -1,23 +1,23 @@
-export default ShowTimeCard;
-type ShowTimeCard = SvelteComponent<{
-    time?: string | undefined;
-    day?: string | undefined;
-    date?: string | undefined;
-    isSelected?: boolean | undefined;
+export default AvailabilityCalendarModal;
+type AvailabilityCalendarModal = SvelteComponent<{
+    onClose?: (() => void) | undefined;
+    show?: boolean | undefined;
+    venue?: null | undefined;
+    onUpdate?: ((updatedTimestamp: any) => void) | undefined;
 }, {
-    select: CustomEvent<any>;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const ShowTimeCard: $$__sveltets_2_IsomorphicComponent<{
-    time?: string | undefined;
-    day?: string | undefined;
-    date?: string | undefined;
-    isSelected?: boolean | undefined;
+declare const AvailabilityCalendarModal: $$__sveltets_2_IsomorphicComponent<{
+    onClose?: (() => void) | undefined;
+    show?: boolean | undefined;
+    venue?: null | undefined;
+    onUpdate?: ((updatedTimestamp: any) => void) | undefined;
 }, {
-    select: CustomEvent<any>;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
@@ -34,4 +34,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-//# sourceMappingURL=ShowTimeCard.svelte.d.ts.map
+//# sourceMappingURL=AvailabilityCalendarModal.svelte.d.ts.map

package/dist/components/pages/performers/AvailabilityCalendarModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvailabilityCalendarModal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/AvailabilityCalendarModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA4WA;;;;;;;;;mBAA4K;6CAT/H,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/pages/performers/ShowDetails.svelte.d.ts

@@ -8,8 +8,8 @@ type ShowDetails = SvelteComponent<{
     setLength: any;
     eventDetails: any;
     onToggleModal: any;
-    role?: string | undefined;
     stageName?: string | undefined;
+    role?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -24,8 +24,8 @@ declare const ShowDetails: $$__sveltets_2_IsomorphicComponent<{
     setLength: any;
     eventDetails: any;
     onToggleModal: any;
-    role?: string | undefined;
     stageName?: string | undefined;
+    role?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;