add: begining logic

Valexr · Apr 14, 2024 · efdc987 · efdc987
1 parent f99730b
commit efdc987
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 49 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
     import Gh from "$lib/components/Gh.svelte";
+    import DateInput from "$lib/components/DateInput.svelte";
     import { date, time, start, county } from "$lib/data";
     import { getPhotos } from "$lib/images";
 </script>
@@ -8,8 +9,6 @@
     export let name: Name;
     export let repository: Repository;
 
-    $start = "2013-04-09";
-
     async function setBack() {
         const image = await getPhotos(1, {});
         if (image) {
@@ -32,40 +31,36 @@
 
 {#await setBack() then}
     <header>
-        <!-- <button>Image</button>
-        <h1>
-            <Gh {repository} />
-            {name}
-        </h1>
-        <button>Settings</button> -->
-        <form action="POST" on:submit|preventDefault>
-            <label>
-                <input
-                    type="date"
-                    placeholder="Set start date"
-                    bind:value={$start}
-                />
-            </label>
-        </form>
+        {#if $start}
+            <DateInput bind:value={$start} />
+        {:else}
+            <h2>{$date}</h2>
+        {/if}
     </header>
 
     <main>
-        <!-- <h2>{$date}</h2> -->
-        <ul>
-            <li id="years">{$county.years}</li>
-            <li id="months">{$county.months}</li>
-            <li id="days">{$county.days}</li>
-        </ul>
+        {#if $start}
+            <ul>
+                <li id="years">{$county.years}</li>
+                <li id="months">{$county.months}</li>
+                <li id="days">{$county.days}</li>
+            </ul>
+        {:else}
+            <h2>Set start date</h2>
+            <DateInput bind:value={$start} />
+        {/if}
         {#await getQuote() then { quote, author }}
             <blockquote>
                 <p>{quote}</p>
-                <footer>~ {author}</footer>
+                <cite>~ {author}</cite>
             </blockquote>
         {/await}
     </main>
 
     <footer>
+        <button on:click={setBack}>Image</button>
         <h2>{$time}</h2>
+        <button>Settings</button>
     </footer>
 {/await}
 
@@ -75,24 +70,14 @@
     header {
         justify-content: center;
     }
+    footer h2 {
+        margin: 0;
+    }
     main {
         padding: 1em;
         display: grid;
         place-content: center;
     }
-    form {
-        /* display: flex; */
-        align-items: center;
-        justify-content: center;
-    }
-    input {
-        font-size: 1.5em;
-        font-weight: bold;
-        font-family: inherit;
-        background: transparent;
-        border: 0;
-        color: inherit;
-    }
     ul {
         list-style: none;
         padding: 0;
@@ -119,4 +104,7 @@
     blockquote p {
         font-style: italic;
     }
+    blockquote cite {
+        font-style: normal;
+    }
 </style>
diff --git a/src/css/base.css b/src/css/base.css
@@ -21,7 +21,8 @@ body::after {
     inset: 0;
 }
 
-header {
+header,
+footer {
     display: flex;
     align-items: center;
     justify-content: space-between;

diff --git a/src/lib/components/DateInput.svelte b/src/lib/components/DateInput.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    export let value = "";
+</script>
+
+<form on:submit|preventDefault>
+    <label>
+        <input type="date" max={new Date().toLocaleString("ru")} bind:value />
+    </label>
+</form>
+
+<style>
+    input {
+        font-size: 1.5em;
+        font-weight: bold;
+        font-family: inherit;
+        background: transparent;
+        border: 0;
+        color: inherit;
+        outline: 0;
+    }
+</style>
diff --git a/src/lib/data.ts b/src/lib/data.ts
@@ -4,17 +4,19 @@ import { cacheable } from './cacheable';
 export const start = cacheable('startDate', '', true)
 
 export const county = derived(start, ($start, set) => {
-    const now = new Date();
-    const start = new Date($start);
-    const elapsedYears = now.getTime() - start.getTime();
-    const elapsedMonth = now.getMonth() - start.getMonth();
-    const elapsedDays = now.getDate() - start.getDate();
-    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0,).getDate();
-    const years = new Date(elapsedYears).getFullYear() - 1970
-    const months = (years * 12 + elapsedMonth) % 12
-    const days = (months * daysInMonth + elapsedDays) % daysInMonth
-
-    set({ years, months, days })
+    if (start) {
+        const now = new Date();
+        const start = new Date($start);
+        const elapsedYears = now.getTime() - start.getTime();
+        const elapsedMonth = now.getMonth() - start.getMonth();
+        const elapsedDays = now.getDate() - start.getDate();
+        const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0,).getDate();
+        const years = new Date(elapsedYears).getFullYear() - 1970
+        const months = (years * 12 + elapsedMonth) % 12
+        const days = (months * daysInMonth + elapsedDays) % daysInMonth
+
+        set({ years, months, days })
+    }
 
 }, { years: 0, months: 0, days: 0 })