GUI 3 - Flight Broker

package.json

@@ -34,5 +34,8 @@
 		"onlyBuiltDependencies": [
 			"esbuild"
 		]
+	},
+	"dependencies": {
+		"date-fns": "^4.1.0"
 	}
 }

pnpm-lock.yaml

@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.5
@@ -659,6 +663,9 @@ packages:
   daisyui@5.0.0:
     resolution: {integrity: sha512-U0K9Bac3Bi3zZGm6ojrw12F0vBHTpEgf46zv/BYxLe07hF0Xnx7emIQliwaRBgJuYhY0BhwQ6wSnq5cJXHA2yA==}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -1768,6 +1775,8 @@ snapshots:
 
   daisyui@5.0.0: {}
 
+  date-fns@4.1.0: {}
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
     <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
       <li><a href="/1_counter">1. Counter</a></li>
       <li><a href="/2_temperature_converter">2. Temperature Converter</a></li>
+      <li><a href="/3_flight_broker">3. Flight Broker</a></li>
     </ul>
   </div>
 </div>

src/routes/3_flight_broker/+page.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { parse, format } from "date-fns";
+
+  const initialDate = format(new Date(), 'dd/MM/yyyy');
+  let flightType = $state("one-way");
+  let outbound = $state(initialDate);
+  let retflight = $state(initialDate);
+
+  function isValidDate(d: Date) {
+    return !Number.isNaN(d.getDate());
+  }
+
+  let outboundDate = $derived(parse(outbound, 'dd/MM/yyyy', new Date()));
+  let retflightDate = $derived(parse(retflight, 'dd/MM/yyyy', new Date()));
+  let outboundValid = $derived(isValidDate(outboundDate));
+  let retflightValid = $derived(isValidDate(retflightDate));
+
+  function isBookDisabled() {
+    const valid = outboundValid && (flightType === "return" ? retflightValid && retflightDate > outboundDate : true);
+    return !valid;
+  }
+
+  function onClickBook() {
+    switch (flightType) {
+      case "one-way":
+        alert(`You have booked a one-way flight on ${outbound}.`);
+        break;
+      case "return":
+        alert(`You have booked a return flight on ${outbound} and ${retflight}.`);
+        break;
+      default:
+        alert("Unknown Status");
+    }
+  }
+</script>
+
+<div class="flex flex-col items-center gap-4 w-80 mx-auto">
+  <select class="select" bind:value={flightType}>
+    <option value="one-way">One-way flight</option>
+    <option value="return">Return flight</option>
+  </select>
+  <label class={["input w-full", !outboundValid && "input-error"]}>
+    <span class="label">Outbound Flight</span>
+    <input type="text" placeholder="27/03/2025" bind:value={outbound}/>
+  </label>
+  <label class={["input w-full", flightType === 'return' && !retflightValid && "input-error"]}>
+    <span class="label">Return Flight</span>
+    <input type="text" placeholder="31/03/2025" bind:value={retflight} disabled={flightType !== 'return'}/>
+  </label>
+  <button class="btn btn-primary w-full" disabled={isBookDisabled()} onclick={onClickBook}>Book</button>
+</div>