Remove necessary package
parent
8b2c1eb504
commit
443f30dff5
|
@ -39,11 +39,9 @@
|
||||||
"rollup-plugin-terser": "^7.0.0",
|
"rollup-plugin-terser": "^7.0.0",
|
||||||
"sapper": "^0.28.0",
|
"sapper": "^0.28.0",
|
||||||
"svelte": "^3.17.3",
|
"svelte": "^3.17.3",
|
||||||
"svelte-countdown": "^1.0.0",
|
|
||||||
"svelte-i18n": "^3.3.6",
|
"svelte-i18n": "^3.3.6",
|
||||||
"svelte-preprocess": "^4.5.1",
|
"svelte-preprocess": "^4.5.1",
|
||||||
"svelte-simple-modal": "^0.6.1",
|
"svelte-simple-modal": "^0.6.1",
|
||||||
"svelte-time": "^0.3.0",
|
|
||||||
"tailwindcss": "^1.9.5"
|
"tailwindcss": "^1.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,18 @@
|
||||||
<script>
|
<script>
|
||||||
import { mdiClose } from '@mdi/js';
|
import { mdiClose } from '@mdi/js';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import rTime from 'dayjs/plugin/relativeTime';
|
||||||
|
import 'dayjs/locale/en';
|
||||||
|
import 'dayjs/locale/id';
|
||||||
|
|
||||||
|
dayjs.extend(rTime);
|
||||||
|
|
||||||
import Button from '../../components/Button.svelte';
|
import Button from '../../components/Button.svelte';
|
||||||
import Icon from '../../components/Icon.svelte';
|
import Icon from '../../components/Icon.svelte';
|
||||||
import Input from '../../components/Input.svelte';
|
import Input from '../../components/Input.svelte';
|
||||||
import { time } from '../../stores/time';
|
|
||||||
import Countdown from 'svelte-countdown';
|
|
||||||
|
|
||||||
let changed = true;
|
let changed = true;
|
||||||
let currentResin = '';
|
let currentResin = '';
|
||||||
|
@ -14,9 +20,17 @@
|
||||||
let maxResin = 160;
|
let maxResin = 160;
|
||||||
let millisecondsToWait;
|
let millisecondsToWait;
|
||||||
let fullTime = null;
|
let fullTime = null;
|
||||||
|
let relativeTime = null;
|
||||||
let missingResin = 160;
|
let missingResin = 160;
|
||||||
let resinTypeOutput = '';
|
let resinTypeOutput = '';
|
||||||
let resinOutput = '';
|
let resinOutput = {
|
||||||
|
resin: 0,
|
||||||
|
condensed: {
|
||||||
|
resin: 0,
|
||||||
|
condensedResin: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let currentTime = dayjs();
|
||||||
|
|
||||||
let originalResin = {
|
let originalResin = {
|
||||||
id: 'original_resin',
|
id: 'original_resin',
|
||||||
|
@ -25,25 +39,41 @@
|
||||||
value: 8,
|
value: 8,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let condensedResin = {
|
||||||
|
id: 'condensed_resin',
|
||||||
|
label: 'Condensed Resin',
|
||||||
|
value: 40,
|
||||||
|
};
|
||||||
|
|
||||||
// 8 minute per resin * 60 seconds * 1000 millisec
|
// 8 minute per resin * 60 seconds * 1000 millisec
|
||||||
let minutePerResin = originalResin.value * 60 * 1000;
|
let minutePerResin = originalResin.value * 60 * 1000;
|
||||||
|
|
||||||
let dateTimeOptions = {
|
|
||||||
hour: 'numeric',
|
|
||||||
minute: 'numeric',
|
|
||||||
second: 'numeric',
|
|
||||||
weekday: 'long',
|
|
||||||
};
|
|
||||||
|
|
||||||
$: isCurrentResin = currentResin >= 0 && currentResin < 160 && currentResin !== '';
|
$: isCurrentResin = currentResin >= 0 && currentResin < 160 && currentResin !== '';
|
||||||
$: isDesiredResin = desiredResin <= 160 && desiredResin >= 1 && desiredResin !== '';
|
$: isDesiredResin = desiredResin <= 160 && desiredResin >= 1 && desiredResin !== '';
|
||||||
$: canCalculate = isCurrentResin || isDesiredResin;
|
$: canCalculate = isCurrentResin || isDesiredResin;
|
||||||
|
|
||||||
|
function calculateCondensedResin(nResin) {
|
||||||
|
if (condensedResin.value % nResin == 0) {
|
||||||
|
return {
|
||||||
|
resin: 0,
|
||||||
|
condensedResin: Math.floor(nResin / condensedResin.value),
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
resin: nResin % condensedResin.value,
|
||||||
|
condensedResin: Math.floor(nResin / condensedResin.value),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function calculate() {
|
function calculate() {
|
||||||
missingResin = maxResin - currentResin;
|
missingResin = maxResin - currentResin;
|
||||||
resinOutput = resinTypeOutput === 'maxResin' ? missingResin : desiredResin;
|
resinOutput =
|
||||||
|
resinTypeOutput === 'maxResin'
|
||||||
|
? { resin: missingResin, condensed: calculateCondensedResin(missingResin) }
|
||||||
|
: { resin: desiredResin, condensed: calculateCondensedResin(desiredResin) };
|
||||||
millisecondsToWait = resinTypeOutput === 'maxResin' ? missingResin * minutePerResin : desiredResin * minutePerResin;
|
millisecondsToWait = resinTypeOutput === 'maxResin' ? missingResin * minutePerResin : desiredResin * minutePerResin;
|
||||||
fullTime = new Date($time.getTime() + millisecondsToWait);
|
fullTime = dayjs(currentTime.valueOf() + millisecondsToWait);
|
||||||
changed = false;
|
changed = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,6 +81,16 @@
|
||||||
changed = true;
|
changed = true;
|
||||||
resinTypeOutput = type;
|
resinTypeOutput = type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
currentTime = dayjs().add(0, 'minute');
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-item rounded-xl p-4">
|
<div class="bg-item rounded-xl p-4">
|
||||||
|
@ -78,10 +118,12 @@
|
||||||
placeholder={$t('calculator.resin.inputDesireResin')}
|
placeholder={$t('calculator.resin.inputDesireResin')}
|
||||||
/>
|
/>
|
||||||
<p class="text-white text-center">
|
<p class="text-white text-center">
|
||||||
{$t('calculator.resin.currentTime')}: {new Intl.DateTimeFormat(
|
{$t('calculator.resin.currentTime')}:
|
||||||
$t('calculator.resin.timeFormat'),
|
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||||
dateTimeOptions,
|
{currentTime.locale('en').format('dddd HH:mm:ss')}
|
||||||
).format($time)}
|
{:else}
|
||||||
|
{currentTime.locale('id').format('dddd HH:mm:ss')}
|
||||||
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-2 xl:col-span-2">
|
<div class="md:col-span-2 xl:col-span-2">
|
||||||
|
@ -90,38 +132,34 @@
|
||||||
>
|
>
|
||||||
{#if !changed}
|
{#if !changed}
|
||||||
<div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
|
<div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
|
||||||
<tr>
|
<table class="table w-full">
|
||||||
<td class="text-right border-b border-gray-700 py-1">
|
|
||||||
<span class="text-white mr-2 whitespace-no-wrap"
|
|
||||||
>{resinOutput}
|
|
||||||
<Icon size={0.5} path={mdiClose} /></span
|
|
||||||
>
|
|
||||||
</td>
|
|
||||||
<td class="border-b border-gray-700 py-1">
|
|
||||||
<span class="text-white">
|
|
||||||
<span class="w-6 inline-block">
|
|
||||||
<img class="h-6 inline-block mr-1" src={originalResin.image} alt={originalResin.label} />
|
|
||||||
</span>
|
|
||||||
{originalResin.label}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td />
|
<td />
|
||||||
<td class="text-red-400 py-1">
|
<td class="text-red-400">
|
||||||
{$t('calculator.resin.fullTime')}:
|
{$t('calculator.resin.fullTime')}:
|
||||||
<Countdown from={new Date(fullTime)} dateFormat="YYYY-MM-DD H:m:s" let:remaining>
|
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||||
<span class="font-bold">
|
{fullTime.locale('en').format('dddd HH:mm:ss')} ({fullTime.locale('en').fromNow()})
|
||||||
{new Intl.DateTimeFormat($t('calculator.resin.timeFormat'), dateTimeOptions).format(fullTime)}
|
{:else}
|
||||||
({remaining.hours != 0 ? `${remaining.hours} ${$t('calculator.resin.hours')}` : ''}
|
{fullTime.locale('id').format('dddd HH:mm:ss')} ({fullTime.locale('id').fromNow()})
|
||||||
{remaining.minutes != 0 ? `${remaining.minutes} ${$t('calculator.resin.minutes')}` : ''}
|
{/if}
|
||||||
{remaining.seconds != 0 ? `${remaining.seconds} ${$t('calculator.resin.seconds')}` : ''})
|
</td>
|
||||||
</span>
|
|
||||||
</Countdown></td
|
|
||||||
>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
td {
|
||||||
|
@apply py-1;
|
||||||
|
@apply border-b;
|
||||||
|
@apply border-gray-700;
|
||||||
|
}
|
||||||
|
tr:last-child {
|
||||||
|
td {
|
||||||
|
@apply border-b-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,8 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import { t } from 'svelte-i18n';
|
|
||||||
import { mdiArrowRight } from '@mdi/js';
|
import { mdiArrowRight } from '@mdi/js';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/en';
|
||||||
|
import 'dayjs/locale/id';
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
import Icon from '../../components/Icon.svelte';
|
import Icon from '../../components/Icon.svelte';
|
||||||
import Time from 'svelte-time';
|
|
||||||
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
const step = [0, 15, 30, 45, 60, 75, 90, 105, 120, 145, 160];
|
const step = [0, 15, 30, 45, 60, 75, 90, 105, 120, 145, 160];
|
||||||
const stepTime = [];
|
const stepTime = [];
|
||||||
|
@ -41,9 +46,16 @@
|
||||||
<img src={originalResin.image} alt={originalResin.label} class="h-6 w-6 inline" /></td
|
<img src={originalResin.image} alt={originalResin.label} class="h-6 w-6 inline" /></td
|
||||||
>
|
>
|
||||||
<td class="pr-2 text-white text-center">
|
<td class="pr-2 text-white text-center">
|
||||||
<!-- components not supporting locale yet -->
|
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||||
<Time relative timestamp={new Date(stepTime[i + 1])} /></td
|
{dayjs(new Date(stepTime[i + 1]))
|
||||||
>
|
.locale('en')
|
||||||
|
.fromNow()}
|
||||||
|
{:else}
|
||||||
|
{dayjs(new Date(stepTime[i + 1]))
|
||||||
|
.locale('id')
|
||||||
|
.fromNow()}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
import { readable } from 'svelte/store';
|
|
||||||
|
|
||||||
export const time = readable(new Date(), function start(set) {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
set(new Date());
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
return function stop() {
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
});
|
|
16
yarn.lock
16
yarn.lock
|
@ -1314,7 +1314,7 @@ cssesc@^3.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
|
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
|
||||||
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
|
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
|
||||||
|
|
||||||
dayjs@^1.10.4, dayjs@^1.8.25, dayjs@^1.9.4:
|
dayjs@^1.9.4:
|
||||||
version "1.10.4"
|
version "1.10.4"
|
||||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
|
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
|
||||||
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
|
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
|
||||||
|
@ -2460,13 +2460,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
has-flag "^4.0.0"
|
has-flag "^4.0.0"
|
||||||
|
|
||||||
svelte-countdown@^1.0.0:
|
|
||||||
version "1.0.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/svelte-countdown/-/svelte-countdown-1.0.0.tgz#8551e6ee2279211f08b8e8e426c5380394fae598"
|
|
||||||
integrity sha512-RuaRjnWPrH7xuwPQwb9b+Ek4mtv3knMTytEqOY2mha152edwDfejjSL+/HvtCbIyuAXPOndaut46dIoeAlPh4A==
|
|
||||||
dependencies:
|
|
||||||
dayjs "^1.8.25"
|
|
||||||
|
|
||||||
svelte-i18n@^3.3.6:
|
svelte-i18n@^3.3.6:
|
||||||
version "3.3.6"
|
version "3.3.6"
|
||||||
resolved "https://registry.yarnpkg.com/svelte-i18n/-/svelte-i18n-3.3.6.tgz#5d2a9f598b6e4999964afafad023c7f2f42c2e1f"
|
resolved "https://registry.yarnpkg.com/svelte-i18n/-/svelte-i18n-3.3.6.tgz#5d2a9f598b6e4999964afafad023c7f2f42c2e1f"
|
||||||
|
@ -2493,13 +2486,6 @@ svelte-simple-modal@^0.6.1:
|
||||||
resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.6.1.tgz#5e984f384dda16bc50f00846314dc140ad89864b"
|
resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.6.1.tgz#5e984f384dda16bc50f00846314dc140ad89864b"
|
||||||
integrity sha512-GJGYj+jymzuar105fwkZ73dtcSFCordpbHqt53iE1N1GdqhvEmSs24idRzyIcO7TrTD/V/287X1icFXp88RQHQ==
|
integrity sha512-GJGYj+jymzuar105fwkZ73dtcSFCordpbHqt53iE1N1GdqhvEmSs24idRzyIcO7TrTD/V/287X1icFXp88RQHQ==
|
||||||
|
|
||||||
svelte-time@^0.3.0:
|
|
||||||
version "0.3.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/svelte-time/-/svelte-time-0.3.0.tgz#64e90c4c2c9ac5966ef6e4732d32803bdc8c6fe8"
|
|
||||||
integrity sha512-9IpXTo6zo0oPe7cCuXZMQZrwfqh+nzR/gSyK7DRmjed6HB0zxUjUfwDmJ6roFSZ3bft6cFSx5vrlkdjz0psh1Q==
|
|
||||||
dependencies:
|
|
||||||
dayjs "^1.10.4"
|
|
||||||
|
|
||||||
svelte@^3.17.3:
|
svelte@^3.17.3:
|
||||||
version "3.31.2"
|
version "3.31.2"
|
||||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"
|
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"
|
||||||
|
|
Loading…
Reference in New Issue