Merge pull request 'Cafe opening hours' (#11) from cafe-update into main

Reviewed-on: #11

src/components/DroneFlightRequestForm.astro

@@ -62,8 +62,8 @@ const frzGeoJsonEndpoint = `${pprApiBase}/drone-requests/frz`;
       </div>
 
       <div class="drone-field">
-        <label for="max-elevation">Maximum Elevation, feet AMSL <span aria-hidden="true">*</span></label>
-        <input type="number" id="max-elevation" name="maximum_elevation_ft_amsl" min="0" step="1" inputmode="numeric" required />
+        <label for="max-elevation">Max height above ground in feet <span aria-hidden="true">*</span></label>
+        <input type="number" id="max-elevation" name="maximum_elevation_ft_agl" min="0" step="1" inputmode="numeric" required />
       </div>
 
       <div class="drone-field drone-full">
@@ -407,7 +407,7 @@ const frzGeoJsonEndpoint = `${pprApiBase}/drone-requests/frz`;
         if (!fieldValue) return;
         const normalizedValue = key === 'operator_id' || key === 'flyer_id' ? fieldValue.toUpperCase() : fieldValue;
 
-        if (key === 'maximum_elevation_ft_amsl') {
+        if (key === 'maximum_elevation_ft_agl') {
           data[key] = Number.parseInt(normalizedValue, 10);
         } else if (key === 'location_latitude' || key === 'location_longitude') {
           data[key] = Number.parseFloat(normalizedValue);

src/components/WebcamPanel.astro

@@ -0,0 +1,160 @@
+---
+const webcamBase = (import.meta.env.PUBLIC_WEATHER_BASE ?? 'https://wx.swansea-airport.wales').replace(/\/$/, '');
+const webcamImage = `${webcamBase}/webcam/apron.jpg`;
+---
+
+<section class="webcam-shell" aria-labelledby="webcam-heading">
+  <div class="webcam-head">
+    <div>
+      <p class="eyebrow">Live apron webcam</p>
+      <h1 id="webcam-heading" class="section-title">Swansea Airport apron</h1>
+      <p class="section-copy">
+View from the tower facing south west.<br>The peak in the middle of the view is Cefn Bryn, 5500 metres distant.</p>
+    </div>
+    <div class="webcam-status" aria-live="polite">
+      <span class="status-dot waiting" id="webcam-dot"></span>
+      <span id="webcam-status">Loading</span>
+    </div>
+  </div>
+
+  <figure class="webcam-frame">
+    <img
+      id="webcam-image"
+      src={webcamImage}
+      alt="Live webcam view of Swansea Airport apron"
+      decoding="async"
+      fetchpriority="high"
+    />
+    <figcaption>
+      <span id="webcam-updated">Waiting for latest image</span>
+    </figcaption>
+  </figure>
+</section>
+
+<script define:vars={{ webcamImage }}>
+  (() => {
+    const REFRESH_MS = 30000;
+    const image = document.getElementById('webcam-image');
+    const status = document.getElementById('webcam-status');
+    const dot = document.getElementById('webcam-dot');
+    const updated = document.getElementById('webcam-updated');
+
+    function setStatus(text, className) {
+      status.textContent = text;
+      dot.className = `status-dot ${className}`;
+    }
+
+    function refreshImage() {
+      const next = new URL(webcamImage);
+      next.searchParams.set('t', Date.now().toString());
+      image.src = next.toString();
+    }
+
+    image.addEventListener('load', () => {
+      const time = new Intl.DateTimeFormat('en-GB', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      }).format(new Date());
+
+      setStatus('Live', 'ok');
+      updated.textContent = `Last refreshed ${time}`;
+    });
+
+    image.addEventListener('error', () => {
+      setStatus('Image unavailable', 'error');
+      updated.textContent = 'The webcam image could not be loaded.';
+    });
+
+    refreshImage();
+    window.setInterval(refreshImage, REFRESH_MS);
+  })();
+</script>
+
+<style>
+  .webcam-shell {
+    display: grid;
+    gap: 1rem;
+    padding: 1.5rem 0 2.5rem;
+  }
+
+  .webcam-head {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .webcam-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    flex: 0 0 auto;
+    padding: 0.45rem 0.7rem;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.78);
+    color: var(--muted);
+    font-size: 0.84rem;
+    font-weight: 800;
+    box-shadow: 0 10px 22px rgba(16, 34, 51, 0.06);
+  }
+
+  .status-dot {
+    width: 0.62rem;
+    height: 0.62rem;
+    border-radius: 999px;
+    background: var(--muted);
+    box-shadow: 0 0 0 0.25rem rgba(81, 100, 117, 0.14);
+  }
+
+  .status-dot.ok {
+    background: #13834f;
+    box-shadow: 0 0 0 0.25rem rgba(19, 131, 79, 0.15);
+  }
+
+  .status-dot.waiting {
+    background: var(--warning);
+    box-shadow: 0 0 0 0.25rem rgba(187, 104, 0, 0.15);
+  }
+
+  .status-dot.error {
+    background: var(--critical);
+    box-shadow: 0 0 0 0.25rem rgba(161, 31, 58, 0.14);
+  }
+
+  .webcam-frame {
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.84);
+    box-shadow: var(--shadow);
+  }
+
+  .webcam-frame img {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    background: rgba(16, 34, 51, 0.08);
+  }
+
+  .webcam-frame figcaption {
+    display: block;
+    padding: 0.8rem 1rem;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-size: 0.9rem;
+    font-weight: 700;
+  }
+
+  @media (max-width: 720px) {
+    .webcam-head {
+      display: grid;
+    }
+
+    .webcam-status {
+      justify-self: start;
+    }
+  }
+</style>

src/lib/directus.ts

@@ -4,6 +4,7 @@ import {
   fallbackDocuments,
   fallbackEvents,
   fallbackFuelPrices,
+  fallbackGiftShopImages,
   fallbackHomepageBannerImages,
   fallbackHomepageVolunteerImages,
   fallbackNews,
@@ -48,6 +49,7 @@ const directusDebug = ['1', 'true', 'yes', 'on'].includes((process.env.DIRECTUS_
 const homepageBannerFolder = process.env.DIRECTUS_HOMEPAGE_BANNER_FOLDER ?? 'homepage-banners';
 const homepageVolunteersFolder = process.env.DIRECTUS_HOMEPAGE_VOLUNTEERS_FOLDER ?? 'homepage-volunteers';
 const cafePageFolder = process.env.DIRECTUS_CAFE_PAGE_FOLDER ?? 'cafe-page';
+const giftShopFolder = process.env.DIRECTUS_GIFT_SHOP_FOLDER ?? 'gift-shop';
 
 type DirectusFolder = {
   id: string;
@@ -300,6 +302,7 @@ export const getHomepageVolunteerImages = () =>
     shuffleRest: true,
   });
 export const getCafePageImages = () => getImagesFromFolder(cafePageFolder, fallbackCafePageImages);
+export const getGiftShopImages = () => getImagesFromFolder(giftShopFolder, fallbackGiftShopImages);
 
 function stripHtml(value = ''): string {
   return value

src/lib/fallback-data.ts

@@ -100,6 +100,13 @@ export const fallbackCafePageImages: HomepageBannerImage[] = [
   },
 ];
 
+export const fallbackGiftShopImages: HomepageBannerImage[] = [
+  {
+    src: '/images/camain.jpg',
+    alt: 'Chocks Away Gift Shop at Swansea Airport',
+  },
+];
+
 export const fallbackHomepageVolunteerImages: HomepageBannerImage[] = [
   {
     src: '/images/cessna.jpg',

src/lib/site.ts

@@ -17,18 +17,20 @@ export const site = {
     { label: 'Home', href: '/' },
     { label: 'Pilot Info', href: '/pilot-info/' },
     { label: 'Weather', href: '/weather/' },
+    { label: 'Webcam', href: '/webcam/' },
     {
       label: 'About',
       href: '/about/',
       children: [
         { label: 'Cafe', href: '/about/cafe/' },
+        { label: 'Gift Shop', href: '/about/gift-shop/' },
         { label: 'History', href: '/about/history/' },
-        { label: 'Drones', href: '/about/drones/' },
         { label: 'Fees and Charges', href: '/about/fees-and-charges/' },
         { label: 'Noise', href: '/about/noise/' },
         { label: 'Volunteering', href: '/about/volunteering/' },
       ],
     },
+    { label: 'Drones', href: '/about/drones/' },
     { label: 'Events', href: '/events/' },
     { label: 'News', href: '/news/' },
     // Keep the documents page available, but hidden from the menu until needed.

src/pages/about/cafe.astro

@@ -21,11 +21,21 @@ const cafeImages = await getCafePageImages();
         Fairwood Common and the Gower, the cafe offers a comfortable place to pause and enjoy the
         airport atmosphere.
       </p>
+            <div class="opening-times">
+        <p>Open 7 days a week.</p>
+        <div class="opening-list">
+          <p><strong>Monday &amp; Tuesday</strong><span>Snacks and drinks served 10am - 2pm</span></p>
+          <p><strong>Wednesday - Sunday</strong><span>Open 9am - 3pm, full menu served 9.30am - 2.30pm</span></p>
+        </div>
+      </div>
       <p>
         On Thursday to Sunday evenings, the cafe transforms into Thai Bach Express, serving Thai
         food for delivery and dining in.
         <a href="https://thaibach.co.uk/" target="_blank" rel="noopener noreferrer">Visit Thai Bach</a>.
       </p>
+
+
+
       <div class="social-follow">
         <div class="cta-row">
           <a class="button primary social-button" href="https://www.facebook.com/SwanseaAirportCafe" target="_blank" rel="noopener noreferrer">
@@ -62,6 +72,40 @@ const cafeImages = await getCafePageImages();
     min-height: clamp(16rem, 42vw, 30rem);
   }
 
+  .opening-times {
+    display: grid;
+    gap: 0.65rem;
+    margin: 0.2rem 0;
+    padding: 1rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    background: rgba(255, 255, 255, 0.86);
+    box-shadow: var(--shadow);
+  }
+
+  .opening-times h2 {
+    margin: 0;
+    font-size: 1.25rem;
+  }
+
+  .opening-times p {
+    margin: 0;
+  }
+
+  .opening-list {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .opening-list p {
+    display: grid;
+    gap: 0.15rem;
+  }
+
+  .opening-list span {
+    color: var(--muted);
+  }
+
   .social-follow {
     display: grid;
     gap: 0.7rem;
@@ -93,4 +137,5 @@ const cafeImages = await getCafePageImages();
     line-height: 1;
     transform: translateY(-0.02em);
   }
+
 </style>

src/pages/about/gift-shop.astro

@@ -0,0 +1,139 @@
+---
+import BannerRotator from '../../components/BannerRotator.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getGiftShopImages } from '../../lib/directus';
+
+const giftShopImages = await getGiftShopImages();
+---
+
+<BaseLayout
+  title="Gift Shop"
+  description="Discover Chocks Away Gift Shop at Swansea Airport, with aviation memorabilia, RAF-themed gifts, Welsh souvenirs, toys, clothing, and accessories."
+>
+  <section class="container prose gift-shop-page">
+    <figure class="gift-shop-hero">
+      <img src="/images/camain.jpg" alt="Chocks Away Gift Shop at Swansea Airport" />
+    </figure>
+
+    <div class="gift-shop-copy">
+      <h1 class="section-title">Gift Shop</h1>
+
+      <p>
+        Discover Chocks Away Gift Shop at Swansea Airport, a small shop packed with unique gifts
+        and aviation charm. Inspired by the airport's rich WWII heritage, you will find aviation
+        memorabilia, RAF-themed gifts, Welsh souvenirs, children's toys, clothing, accessories,
+        and much more.
+      </p>
+
+      <p>
+        From Spitfires to dragons, cufflinks to caps, whether you are flying in, visiting the
+        airport, or simply looking for the best gift or souvenir, there is something for every
+        aviation lover.
+      </p>
+
+      <div class="social-follow">
+        <div class="cta-row">
+          <a class="button primary social-button" href="https://www.facebook.com/profile.php?id=61590636748267" target="_blank" rel="noopener noreferrer">
+            <span class="facebook-mark" aria-hidden="true">f</span>
+            Chocks Away Gift Shop on Facebook
+          </a>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="gift-shop-gallery" aria-label="Gift shop photo gallery">
+      <BannerRotator images={giftShopImages} />
+    </div>
+      <p class="gift-shop-disclaimer">
+        Chocks Away Gift Shop is an independent business based at Swansea Airport and is not
+        affiliated with airport management.
+      </p>
+
+  </section>
+</BaseLayout>
+
+<style>
+  .gift-shop-page {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  .gift-shop-hero {
+    margin: 0;
+    overflow: hidden;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    aspect-ratio: 21 / 9;
+    background: var(--line);
+  }
+
+  .gift-shop-hero img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+  }
+
+  .gift-shop-copy {
+    display: grid;
+    gap: 0.85rem;
+  }
+
+  .gift-shop-copy p {
+    margin: 0;
+  }
+
+  .gift-shop-gallery {
+    overflow: hidden;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    background: var(--line);
+  }
+
+  .gift-shop-gallery :global(.banner-rotator) {
+    min-height: clamp(16rem, 42vw, 30rem);
+  }
+
+  .gift-shop-disclaimer {
+    margin-top: 0.35rem !important;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-size: 0.95rem;
+    font-weight: 700;
+  }
+
+  .social-follow {
+    display: grid;
+    gap: 0.7rem;
+  }
+
+  .social-button {
+    gap: 0.55rem;
+  }
+
+  .facebook-mark {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.45rem;
+    height: 1.45rem;
+    border-radius: 50%;
+    background: #1877f2;
+    color: white;
+    font-family: Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 800;
+    line-height: 1;
+    transform: translateY(-0.02em);
+  }
+
+  @media (max-width: 760px) {
+    .gift-shop-hero {
+      aspect-ratio: 16 / 9;
+    }
+  }
+</style>

src/pages/about/index.astro

@@ -10,6 +10,10 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
         <h3><a href="/about/cafe/">Cafe</a></h3>
         <p>A friendly, dog-friendly cafe for visitors, walkers, pilots, and local families.</p>
       </article>
+      <article class="card">
+        <h3><a href="/about/gift-shop/">Gift Shop</a></h3>
+        <p>Aviation gifts, RAF-themed keepsakes, Welsh souvenirs, toys, clothing, and accessories.</p>
+      </article>
       <article class="card">
         <h3><a href="/about/history/">History</a></h3>
         <p>The story of Swansea Airport, formerly RAF Fairwood Common.</p>

src/pages/index.astro

@@ -27,28 +27,28 @@ const businessPromos = [
     href: 'https://www.goskydive.com/dropzone/skydive-centre-swansea/',
     logo: '/images/goskydive.png',
     alt: 'Go Skydive logo',
-    description: 'Tandem skydiving and experiences from Swansea.',
+    description: 'Tandem skydiving from Swansea',
   },
   {
     name: 'Gower Flight Centre',
     href: 'https://www.gowerflightcentre.co.uk/',
     logo: '/images/gowerflightcentre.jpg',
     alt: 'Gower Flight Centre logo',
-    description: 'Flying lessons, aircraft hire, and pilot training.',
+    description: 'Air experiences, and pilot training',
   },
   {
     name: 'Fly A Spitfire',
     href: 'https://flyaspitfire.com/',
     logo: '/images/flyaspitfire.png',
     alt: 'Fly A Spitfire logo',
-    description: 'Spitfire flight experiences and aviation events.',
+    description: 'Spitfire flights',
   },
   {
     name: 'AeroSuperBatics',
     href: 'https://www.aerosuperbatics.com/',
     logo: '/images/aerosuperbatics.jpg',
     alt: 'AeroSuperBatics logo',
-    description: 'Wingwalking and aerobatic entertainment flights.',
+    description: 'Wingwalking and aerobatic entertainment flights',
   },
 ];
 ---

src/pages/webcam.astro

@@ -0,0 +1,10 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import WebcamPanel from '../components/WebcamPanel.astro';
+---
+
+<BaseLayout title="Webcam" description="View from the tower facing south west. The peak in the middle of the view is Cefn Bryn, 5500 metres distant.">
+  <section class="container">
+    <WebcamPanel />
+  </section>
+</BaseLayout>