Migrate select components and adapt parents

web/frontend/src/generic/select/TimeSelection.svelte

@@ -12,7 +12,6 @@
  -->
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import {
     Icon,
     Input,
@@ -20,78 +19,96 @@
     InputGroupText,
   } from "@sveltestrap/sveltestrap";
 
-  export let from;
-  export let to;
-  export let customEnabled = true;
-  export let options = {
-    "Last quarter hour": 15 * 60,
-    "Last half hour": 30 * 60,
-    "Last hour": 60 * 60,
-    "Last 2hrs": 2 * 60 * 60,
-    "Last 4hrs": 4 * 60 * 60,
-    "Last 12hrs": 12 * 60 * 60,
-    "Last 24hrs": 24 * 60 * 60,
+  /* Svelte 5 Props */
+  let {
+    presetFrom,
+    presetTo,
+    customEnabled = true,
+    options = {
+      "Last quarter hour": 15 * 60,
+      "Last half hour": 30 * 60,
+      "Last hour": 60 * 60,
+      "Last 2hrs": 2 * 60 * 60,
+      "Last 4hrs": 4 * 60 * 60,
+      "Last 12hrs": 12 * 60 * 60,
+      "Last 24hrs": 24 * 60 * 60,
+    },
+    applyTime
+  } = $props();
+
+  /* Const Init */
+  const defaultTo = new Date(Date.now());
+  const defaultFrom = new Date(defaultTo.setHours(defaultTo.getHours() - 4));
+
+  /* State Init */
+  let timeType = $state("range");
+  let pendingCustomFrom = $state(null);
+  let pendingCustomTo = $state(null);
+
+  /* Derived */
+  let timeRange = $derived.by(() => {
+    if (presetTo && presetFrom) {
+      return ((presetTo.getTime() - presetFrom.getTime()) / 1000)
+    } else {
+      return ((defaultTo.getTime() - defaultFrom.getTime()) / 1000)
+    }
+  });
+  let unknownRange = $derived(!Object.values(options).includes(timeRange));
+    
+  /* Functions */
+  function updateTimeRange() {
+    let now = Date.now();
+    let t = timeRange * 1000;
+    applyTime(new Date(now - t), new Date(now));
   };
 
-  $: pendingFrom = from;
-  $: pendingTo = to;
-
-  const dispatch = createEventDispatcher();
-  let timeRange = // If both times set, return diff, else: display custom select
-    (to && from) ? ((to.getTime() - from.getTime()) / 1000) : -1;
-
-  function updateTimeRange() {
-    if (timeRange == -1) {
-      pendingFrom = null;
-      pendingTo = null;
-      return;
+  function updateTimeCustom() {
+    if (pendingCustomFrom && pendingCustomTo) {
+      applyTime(new Date(pendingCustomFrom), new Date(pendingCustomTo));
     }
-
-    let now = Date.now(),
-      t = timeRange * 1000;
-    from = pendingFrom = new Date(now - t);
-    to = pendingTo = new Date(now);
-    dispatch("change", { from, to });
-  }
-
-  function updateExplicitTimeRange(type, event) {
-    let d = new Date(Date.parse(event.target.value));
-    if (type == "from") pendingFrom = d;
-    else pendingTo = d;
-
-    if (pendingFrom != null && pendingTo != null) {
-      from = pendingFrom;
-      to = pendingTo;
-      dispatch("change", { from, to });
-    }
-  }
+  };
 </script>
 
 <InputGroup class="inline-from">
   <InputGroupText><Icon name="clock-history" /></InputGroupText>
-  <InputGroupText>Range</InputGroupText>
-  <select
-    class="form-select"
-    bind:value={timeRange}
-    on:change={updateTimeRange}
-  >
-    {#if customEnabled}
-      <option value={-1}>Custom</option>
-    {/if}
-    {#each Object.entries(options) as [name, seconds]}
-      <option value={seconds}>{name}</option>
-    {/each}
-  </select>
-  {#if timeRange == -1}
+  {#if customEnabled}
+    <Input
+      type="select"
+      style="max-width:fit-content;background-color:#f8f9fa;"
+      bind:value={timeType}
+    >
+      <option value="range">Range</option>
+      <option value="custom">Custom</option>
+    </Input>
+  {:else}
+    <InputGroupText>Range</InputGroupText>
+  {/if}
+  
+  {#if timeType === "range"}
+    <Input
+      type="select"
+      bind:value={timeRange}
+      onchange={updateTimeRange}
+    >
+      {#if unknownRange}
+        <option value={timeRange} disabled>Select new range...</option>
+      {/if}
+      {#each Object.entries(options) as [name, seconds]}
+        <option value={seconds}>{name}</option>
+      {/each}
+    </Input>
+  {:else}
     <InputGroupText>from</InputGroupText>
     <Input
       type="datetime-local"
-      on:change={(event) => updateExplicitTimeRange("from", event)}
+      bind:value={pendingCustomFrom}
+      onchange={updateTimeCustom}
     ></Input>
     <InputGroupText>to</InputGroupText>
     <Input
       type="datetime-local"
-      on:change={(event) => updateExplicitTimeRange("to", event)}
+      bind:value={pendingCustomTo}
+      onchange={updateTimeCustom}
     ></Input>
   {/if}
 </InputGroup>