lapikud.github.io/src/routes/Helpdesk.svelte

<script>
  import {
    Section,
    Grid,
  } from "$components";
  import { onMount, onDestroy } from "svelte";
  import { createPageTextStore } from "$lib";
  import { getHeroImageFallback, getHeroImageSrcSet, getRootAssetPath } from "$lib/imageHelpers.js";
  import yaml from 'js-yaml';
  
  import { MapLibre, Marker } from "svelte-maplibre";
  import MapPin from "lucide-svelte/icons/map-pin";
  import BusFront from "lucide-svelte/icons/bus-front";
  import { navigate } from "$lib/router/router.js";

  // Images
  const helpdeskbg = getHeroImageFallback("helpdesk-page-images", "helpdesk_bg");
  const helpdeskbgWebpSet = getHeroImageSrcSet("helpdesk-page-images", "helpdesk_bg");
  const helpdesk = getRootAssetPath("helpdesk-page-images", "helpdesk-on-black.png");

  // Coordinates for Akadeemia tee 5, 12616 Tallinn [longitude, latitude]
  const center = [24.66887400515207, 59.396427975093935];
  // Coordinates for Keemia bus stop [longitude, latitude]
  const keemiaBusStop = [24.668325396145953, 59.397074517662276];
  // Coordinates for Tehnikaülikool bus stop [longitude, latitude]
  const tehnikaBusStop = [24.67328945396854, 59.39508874042947];
  
  // Google Maps directions URL
  const getDirectionsUrl = (lng, lat, loc) => {
    if (loc == "bus"){
      return `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}&travelmode=transit`;
    }
    
    return `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
  };
  
  // Navigate to directions using router
  const openDirections = (lng, lat, loc) => {
    navigate(getDirectionsUrl(lng, lat, loc), { external: true });
  };

  // Load pricing data
  let pricingData = { services: [] };
  const text = createPageTextStore("Helpdesk");
  
  onMount(async () => {
    const response = await fetch('/_data/hinnakiri.yml');
    const yamlText = await response.text();
    pricingData = yaml.load(yamlText);
  });

  onDestroy(() => {
    text.destroy();
  });
</script>

<div class="safe-area-navbar">
<!-- Hero Section -->
<Section class="relative bg-gray-900 min-h-[42vh] overflow-hidden" padding="none" fullWidth={true}>
  <div class="absolute inset-0 left-1/2 w-screen -translate-x-1/2 h-[42vh]" aria-hidden="true">
    <picture>
      <source srcset={helpdeskbgWebpSet} type="image/webp" />
      <img
        class="h-full w-full object-cover object-left opacity-50 blur-[1.5px]"
        src={helpdeskbg}
        alt="Helpdesk"
      />
    </picture>
  </div>
  <div class="relative flex justify-center items-center flex-row w-full h-[42vh] z-10">
    <img src={helpdesk} alt={$text["hero"]?.title || "Helpdesk logo"} />
  </div>
</Section>

<!-- Main Content -->
<Section>
  <Grid columns={2} tabletColumns={1} mobileColumns={1} gap="gap-6">
      <div class="flex flex-col">
        <h2 class="text-4xl font-light pb-4">{$text["whatIs"]?.title || ""}</h2>
        <p class="text-lg">
          {$text["whatIs"]?.description || ""}
        </p>
      </div>

      <div class="flex flex-col">
        <h2 class="text-4xl font-light pb-4">{$text["services"]?.title || ""}</h2>
        <ul class="text-lg list-disc pl-5">
          {#each $text["services"]?.list || [] as service}
            <li>{service}</li>
          {/each}
        </ul>
      </div>

      <!-- Pricing Table -->
      <div class="flex flex-col">
        <h2 class="text-4xl font-light pb-4">{$text["pricing"]?.title || ""}</h2>
        <div class="overflow-hidden rounded-lg border border-gray-200 shadow-sm">
          <table class="w-full text-lg">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
                  {$text["pricing"]?.tableHeaders?.service || ""}
                </th>
                <th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
                  {$text["pricing"]?.tableHeaders?.quantity || ""}
                </th>
                <th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
                  {$text["pricing"]?.tableHeaders?.price || ""}
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {#each pricingData.services as service}
                <tr class="hover:bg-gray-50 transition-colors duration-200">
                  <td class="px-3 py-4 text-gray-900">{service.name}</td>
                  <td class="px-3 py-4 text-gray-600">{service.quantity}</td>
                  <td class="px-3 py-4 font-medium" class:text-green-600={service.price === "Tasuta"} class:text-gray-900={service.price !== "Tasuta"}>
                    {service.price}
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
        <p class="pt-4 text-lg font-bold">
          {@html $text["pricing"]?.note || ""}
        </p>
      </div>

      <div class="flex flex-col">
        <h2 class="text-4xl font-light pb-4">
          {@html $text["hours"]?.title || ""}
          <br /> 
          {@html $text["hours"]?.schedule || ""}
        </h2>
        <p class="text-lg font-light opacity-70 pb-16">
          {$text["hours"]?.note || ""}
        </p>
        
        <h2 class="text-4xl font-light pb-4">{$text["location"]?.title || ""}</h2>
        <div class="w-full h-96 rounded-lg overflow-hidden">
          <MapLibre
            style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
            class="relative w-full h-full"
            {center}
            zoom={15}
            interactive={false}
            attributionControl={false}
          >
            <!-- Main location -->
            <Marker lngLat={center}>
              <div
                role="button"
                tabindex="0"
                onclick={() => openDirections(center[0], center[1])}
                onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(center[0], center[1])}
                class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
                title="Get directions to Akadeemia tee 5"
              >
                <span class="text-xs font-semibold text-white bg-orange-500 px-2 py-0.5 rounded shadow-md mb-1 whitespace-nowrap">Akadeemia tee 5</span>
                <MapPin class="w-7 h-7 text-orange-500 drop-shadow-lg" />
              </div>
            </Marker>
            
            <!-- Keemia bus stop -->
            <Marker lngLat={keemiaBusStop}>
              <div
                role="button"
                tabindex="0"
                onclick={() => openDirections(keemiaBusStop[0], keemiaBusStop[1], "bus")}
                onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(keemiaBusStop[0], keemiaBusStop[1], "bus")}
                class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
                title="Get directions to Keemia bus stop"
              >
                <span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Keemia</span>
                <BusFront class="w-7 h-7 text-orange-500 drop-shadow-lg" />
              </div>
            </Marker>
            
            <!-- Tehnikaülikool bus stop -->
            <Marker lngLat={tehnikaBusStop}>
              <div
                role="button"
                tabindex="0"
                onclick={() => openDirections(tehnikaBusStop[0], tehnikaBusStop[1], "bus")}
                onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(tehnikaBusStop[0], tehnikaBusStop[1], "bus")}
                class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
                title="Get directions to Tehnikaülikool bus stop"
              >
                <span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Tehnikaülikool</span>
                <BusFront class="w-7 h-7 text-orange-500 drop-shadow-lg" />
              </div>
            </Marker>
          </MapLibre>
        </div>
        <p class="pb-4 text-lg">
          {@html $text["location"]?.busInfo || ""}
        </p>
        <p class="text-lg font-bold">
          {$text["location"]?.address || ""}
        </p>
      </div>
    </Grid>
  </Section>
</div>