fix: start logic

Valexr · Apr 14, 2024 · f77341a · f77341a
1 parent bf11182
commit f77341a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { date, time, start, quote } from "$lib/data";
+    import { date, time, start, quote, county } from "$lib/data";
     import { images } from "$lib/images";
 
     import DateInput from "$lib/components/DateInput.svelte";
@@ -10,6 +10,13 @@
 <script lang="ts">
     export let name: Name;
     export let repository: Repository;
+
+    let input: HTMLInputElement;
+
+    function openDatepicker() {
+        input.focus();
+        input.showPicker();
+    }
 </script>
 
 <svelte:head>
@@ -18,19 +25,16 @@
 
 {#await images.back() then}
     <header>
-        {#if $start}
-            <DateInput bind:value={$start} />
-        {:else}
-            <h2>{$date}</h2>
-        {/if}
+        <DateInput date={$date} bind:input bind:value={$start} />
     </header>
 
     <main>
         {#if $start}
-            <County />
+            <County county={$county} />
         {:else}
-            <h2>Set start date</h2>
-            <DateInput bind:value={$start} />
+            <h2>
+                <button on:click={openDatepicker}>Set start date</button>
+            </h2>
         {/if}
         {#await quote.load() then}
             {#if $quote}

diff --git a/src/lib/components/County.svelte b/src/lib/components/County.svelte
@@ -1,11 +1,11 @@
-<script lang="ts" context="module">
-    import { county } from "$lib/data";
+<script lang="ts">
+    export let county: { years: number; months: number; days: number };
 </script>
 
 <ul>
-    <li id="years">{$county.years}</li>
-    <li id="months">{$county.months}</li>
-    <li id="days">{$county.days}</li>
+    <li id="years">{county.years}</li>
+    <li id="months">{county.months}</li>
+    <li id="days">{county.days}</li>
 </ul>
 
 <style>

diff --git a/src/lib/components/DateInput.svelte b/src/lib/components/DateInput.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
+    export let date = "";
     export let value = "";
+    export let input: HTMLInputElement;
 </script>
 
-<form on:submit|preventDefault>
+<form method="post" on:submit|preventDefault>
+    {#if !value}
+        <h2>{date}</h2>
+    {/if}
     <label>
-        <input type="date" max={new Date().toLocaleString("ru")} bind:value />
+        <input
+            type="date"
+            max={new Date().toLocaleString("ru")}
+            class:hidden={!value}
+            bind:this={input}
+            bind:value
+        />
     </label>
 </form>
 
@@ -18,4 +29,7 @@
         color: inherit;
         outline: 0;
     }
+    input.hidden {
+        opacity: 0;
+    }
 </style>