From e3f2c5691e98f45fbfde408b2b8c50af0b119a8d Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Sun, 5 May 2024 19:20:54 +0200
Subject: [PATCH] add: luxon lib

---
 package.json        |   4 ++
 src/App.svelte      |  62 +++++++++++++--------------
 src/global.d.ts     |  12 +++++-
 src/lib/counters.ts | 102 ++++++++++++++++++++++++++++++++++++--------
 src/lib/utils.ts    |  17 --------
 5 files changed, 129 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index c350eb6..3602331 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,13 @@
         "url": "https://github.com/Valexr/county.git"
     },
     "devDependencies": {
+        "@types/luxon": "^3.4.2",
         "@types/node": "^20.12.8",
+        "dayjs": "^1.11.11",
         "esbuild": "^0.20.2",
         "esbuild-svelte": "^0.8.0",
+        "luxon": "^3.4.4",
+        "moment": "^2.30.1",
         "svelte": "^4.2.15",
         "svelte-preprocess": "^5.1.4",
         "typescript": "^5.4.5"
diff --git a/src/App.svelte b/src/App.svelte
index af108fc..4a79e89 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -31,32 +31,30 @@
     <title>{name}</title>
 </svelte:head>
 
-{#await images.load() then}
-    {#await quotes.load() then}
-        <main>
-            {#each $counters as counter, id}
-                <section use:intersection id={String(id)}>
-                    <header>
-                        <DateForm {id} {counter} />
-                    </header>
-                    <Counter {counter} />
-                    {#key counter.quote}
-                        <Quote quote={counter.quote} href={repository} />
-                    {/key}
-                </section>
-            {/each}
-            <section id="add">
-                <DateForm />
+{#await Promise.all([images.load(), quotes.load()]) then}
+    <main>
+        {#each $counters as counter, id}
+            <section use:intersection id={String(id)}>
+                <header>
+                    <DateForm {id} {counter} />
+                </header>
+                <Counter {counter} />
+                {#key counter.quote}
+                    <Quote quote={counter.quote} href={repository} />
+                {/key}
             </section>
-        </main>
-        <footer class:active>
-            {#if active}
-                <Control {active} />
-            {:else}
-                <h2>{$time}</h2>
-            {/if}
-        </footer>
-    {/await}
+        {/each}
+        <section id="add">
+            <DateForm />
+        </section>
+    </main>
+    <footer class:active>
+        {#if active}
+            <Control {active} />
+        {:else}
+            <h2>{$time}</h2>
+        {/if}
+    </footer>
 {/await}
 
 <style>
@@ -71,20 +69,18 @@
         max-width: 100vw;
         overflow: scroll;
         scroll-snap-type: x mandatory;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+    main::-webkit-scrollbar {
+        display: none;
     }
     main > * {
-        /* padding: 0 1em; */
         flex: 1 0 100%;
         scroll-snap-align: center;
         align-content: center;
     }
-    main {
-        -ms-overflow-style: none; /* Internet Explorer 10+ */
-        scrollbar-width: none; /* Firefox */
-    }
-    main::-webkit-scrollbar {
-        display: none; /* Safari and Chrome */
-    }
+
     section#add {
         align-content: center;
     }
diff --git a/src/global.d.ts b/src/global.d.ts
index 6a82f27..e9dee24 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -3,8 +3,18 @@ declare module '*.svg' {
     export default content;
 }
 
+type Elapsed = {
+    years: number,
+    months: number,
+    days: number,
+    weeks: number,
+    hours: number,
+    minutes: number,
+    seconds: number,
+    ms: number
+}
 interface Date {
-    getElapsedTime(): string;
+    elapsed(): Elapsed;
 }
 
 type Name = string
diff --git a/src/lib/counters.ts b/src/lib/counters.ts
index e58e4f0..a7678c2 100644
--- a/src/lib/counters.ts
+++ b/src/lib/counters.ts
@@ -1,6 +1,7 @@
 import { Writable, derived } from 'svelte/store';
 import { dates } from './dates';
 import { quotes } from './quotes';
+import { DateTime, Interval, Duration } from "luxon";
 
 export const counters = derived<[Writable<StartDate[]>, Writable<Quote[]>], Counter[]>(([dates, quotes]),
     ([$dates, $quotes], set) => {
@@ -8,28 +9,95 @@ export const counters = derived<[Writable<StartDate[]>, Writable<Quote[]>], Coun
         set($dates.map(({ start, title, quote }, id) => count(id, start, title, quote)))
 
         function count(id: number, start: string, title: string, quote: Quote) {
-            const mss = new Date().getTime() - new Date(start).getTime();
-            const years = new Date(mss).getFullYear() - 1970
-            const months = new Date(mss).getMonth()
-            const days = new Date(mss).getDate() - 1
-            const weeks = Math.floor(days / 7)
+            const elapsed = elapse(start)
 
+            // console.log(title, convert(elapsed.ms))
             return {
-                id,
-                title,
-                quote: quote || quotes.random(id),
-                start: start,
-                years: years,
-                months: months,
-                days: days % 7,
-                weeks: weeks,
+                id, title, quote: quote || quotes.random(id), start: start,
+                years: elapsed.years,
+                months: elapsed.months,
+                days: elapsed.days,
+                weeks: elapsed.weeks,
                 full: {
-                    months: years * 12 + months,
-                    weeks: Math.trunc(mss / (3600000 * 24 * 7)),
-                    days: Math.trunc(mss / (3600000 * 24)),
-                    hours: Math.trunc(mss / 3600000)
+                    months: Math.trunc(elapsed.interval.length('months')),
+                    weeks: Math.trunc(elapsed.interval.length('weeks')),
+                    days: Math.trunc(elapsed.interval.length('days')),
+                    hours: Math.trunc(elapsed.interval.length('hours')),
+                    // months: Math.trunc(elapsed.duration.as('months')),
+                    // weeks: Math.trunc(elapsed.duration.as('weeks')),
+                    // days: Math.trunc(elapsed.duration.as('days')),
+                    // hours: Math.trunc(elapsed.duration.as('hours')),
+                    // months: elapsed.years * 12 + elapsed.months,
+                    // weeks: Math.trunc(elapsed.ms / (3600000 * 24 * 7)),
+                    // days: Math.trunc(elapsed.ms / (3600000 * 24)),
+                    // hours: Math.trunc(elapsed.ms / 3600000)
                 }
             }
         }
     }, [])
 
+function elapse(start: string) {
+    // const FROM = new Date(start)
+    // const TO = new Date()
+
+    // const DATE = new Date(TO.getTime() - FROM.getTime());
+
+    // DATE.setDate(FROM.getUTCDate())
+    // console.log(FROM, TO, DATE)
+
+    // const leap = new Date(year, 1, 29).getDate() === 29;
+
+    // const years = DATE.getUTCFullYear() - 1970
+    // const months = DATE.getUTCMonth()
+    // const days = DATE.getUTCDate() - 1
+
+    const TO = DateTime.now();
+    const FROM = DateTime.fromISO(start);
+
+    const DIFF = TO.diff(FROM,
+        ['years', 'months', 'weeks', 'days', 'milliseconds'],
+        { conversionAccuracy: 'longterm' }
+    ).toObject()
+
+    return {
+        years: DIFF.years || 0,
+        months: DIFF.months || 0,
+        days: DIFF.days || 0,
+        weeks: DIFF.weeks || 0,
+        // ms: DIFF.milliseconds || 0,
+        duration: Duration.fromObject(DIFF),
+        interval: Interval.fromDateTimes(FROM, TO)
+        // days: days % 7,
+        // weeks: Math.floor(days / 7),
+        // hours: DATE.getUTCHours(),
+        // minutes: DATE.getUTCMinutes(),
+        // seconds: DATE.getUTCSeconds(),
+        // ms: DATE.getTime()
+    }
+};
+
+
+function convert(ms: number) {
+    let Y, M, W, D, h, m, s;
+    s = Math.floor(ms / 1000);
+    m = Math.floor(s / 60);
+    s = s % 60;
+    h = Math.floor(m / 60);
+    m = m % 60;
+
+    D = Math.floor(h / 24);
+    h = h % 24;
+
+    W = Math.floor(D / 7);
+    D = W % 7;
+
+    M = Math.floor(W / 4);
+    W = M % 4;
+
+    Y = Math.floor(M / 12);
+    M = M % 12
+
+    // Y = Y;
+    return { Y, M, W, D };
+}
+
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6ba6071..b4a3b8d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -31,20 +31,3 @@ function openDatepicker(input: HTMLInputElement) {
     input.showPicker();
 }
 
-Date.prototype.getElapsedTime = function () {
-    const diffDate = new Date(Date.now() - Number(this));
-    return (
-        "Elapsed Time: Years: " +
-        (diffDate.getFullYear() - 1970) +
-        ", Months: " +
-        diffDate.getMonth() +
-        ", Days: " +
-        (diffDate.getDate() - 1) +
-        ", Hours: " +
-        diffDate.getHours() +
-        ", Minutes: " +
-        diffDate.getMinutes() +
-        ", Seconds: " +
-        diffDate.getSeconds()
-    );
-};
\ No newline at end of file