Skip to content

Commit

Permalink
add: luxon lib
Browse files Browse the repository at this point in the history
  • Loading branch information
Valexr committed May 5, 2024
1 parent 9834a2b commit e3f2c56
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 68 deletions.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
62 changes: 29 additions & 33 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
}
Expand Down
12 changes: 11 additions & 1 deletion src/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
102 changes: 85 additions & 17 deletions src/lib/counters.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,103 @@
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) => {

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 };
}

17 changes: 0 additions & 17 deletions src/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
);
};

0 comments on commit e3f2c56

Please sign in to comment.