Remove necessary package
fadhlu
parent
8b2c1eb504
commit
443f30dff5
|
|
@ -39,11 +39,9 @@
|
|||
"rollup-plugin-terser": "^7.0.0",
|
||||
"sapper": "^0.28.0",
|
||||
"svelte": "^3.17.3",
|
||||
"svelte-countdown": "^1.0.0",
|
||||
"svelte-i18n": "^3.3.6",
|
||||
"svelte-preprocess": "^4.5.1",
|
||||
"svelte-simple-modal": "^0.6.1",
|
||||
"svelte-time": "^0.3.0",
|
||||
"tailwindcss": "^1.9.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<script>
|
||||
import { mdiClose } from '@mdi/js';
|
||||
import dayjs from 'dayjs';
|
||||
import { t } from 'svelte-i18n';
|
||||
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 Icon from '../../components/Icon.svelte';
|
||||
import Input from '../../components/Input.svelte';
|
||||
import { time } from '../../stores/time';
|
||||
import Countdown from 'svelte-countdown';
|
||||
|
||||
let changed = true;
|
||||
let currentResin = '';
|
||||
|
|
@ -14,9 +20,17 @@
|
|||
let maxResin = 160;
|
||||
let millisecondsToWait;
|
||||
let fullTime = null;
|
||||
let relativeTime = null;
|
||||
let missingResin = 160;
|
||||
let resinTypeOutput = '';
|
||||
let resinOutput = '';
|
||||
let resinOutput = {
|
||||
resin: 0,
|
||||
condensed: {
|
||||
resin: 0,
|
||||
condensedResin: 0,
|
||||
},
|
||||
};
|
||||
let currentTime = dayjs();
|
||||
|
||||
let originalResin = {
|
||||
id: 'original_resin',
|
||||
|
|
@ -25,25 +39,41 @@
|
|||
value: 8,
|
||||
};
|
||||
|
||||
let condensedResin = {
|
||||
id: 'condensed_resin',
|
||||
label: 'Condensed Resin',
|
||||
value: 40,
|
||||
};
|
||||
|
||||
// 8 minute per resin * 60 seconds * 1000 millisec
|
||||
let minutePerResin = originalResin.value * 60 * 1000;
|
||||
|
||||
let dateTimeOptions = {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
second: 'numeric',
|
||||
weekday: 'long',
|
||||
};
|
||||
|
||||
$: isCurrentResin = currentResin >= 0 && currentResin < 160 && currentResin !== '';
|
||||
$: isDesiredResin = desiredResin <= 160 && desiredResin >= 1 && desiredResin !== '';
|
||||
$: 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() {
|
||||
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;
|
||||
fullTime = new Date($time.getTime() + millisecondsToWait);
|
||||
fullTime = dayjs(currentTime.valueOf() + millisecondsToWait);
|
||||
changed = false;
|
||||
}
|
||||
|
||||
|
|
@ -51,6 +81,16 @@
|
|||
changed = true;
|
||||
resinTypeOutput = type;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const interval = setInterval(() => {
|
||||
currentTime = dayjs().add(0, 'minute');
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="bg-item rounded-xl p-4">
|
||||
|
|
@ -78,10 +118,12 @@
|
|||
placeholder={$t('calculator.resin.inputDesireResin')}
|
||||
/>
|
||||
<p class="text-white text-center">
|
||||
{$t('calculator.resin.currentTime')}: {new Intl.DateTimeFormat(
|
||||
$t('calculator.resin.timeFormat'),
|
||||
dateTimeOptions,
|
||||
).format($time)}
|
||||
{$t('calculator.resin.currentTime')}:
|
||||
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||
{currentTime.locale('en').format('dddd HH:mm:ss')}
|
||||
{:else}
|
||||
{currentTime.locale('id').format('dddd HH:mm:ss')}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:col-span-2 xl:col-span-2">
|
||||
|
|
@ -90,38 +132,34 @@
|
|||
>
|
||||
{#if !changed}
|
||||
<div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
|
||||
<tr>
|
||||
<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>
|
||||
<td />
|
||||
<td class="text-red-400 py-1">
|
||||
{$t('calculator.resin.fullTime')}:
|
||||
<Countdown from={new Date(fullTime)} dateFormat="YYYY-MM-DD H:m:s" let:remaining>
|
||||
<span class="font-bold">
|
||||
{new Intl.DateTimeFormat($t('calculator.resin.timeFormat'), dateTimeOptions).format(fullTime)}
|
||||
({remaining.hours != 0 ? `${remaining.hours} ${$t('calculator.resin.hours')}` : ''}
|
||||
{remaining.minutes != 0 ? `${remaining.minutes} ${$t('calculator.resin.minutes')}` : ''}
|
||||
{remaining.seconds != 0 ? `${remaining.seconds} ${$t('calculator.resin.seconds')}` : ''})
|
||||
</span>
|
||||
</Countdown></td
|
||||
>
|
||||
</tr>
|
||||
<table class="table w-full">
|
||||
<tr>
|
||||
<td />
|
||||
<td class="text-red-400">
|
||||
{$t('calculator.resin.fullTime')}:
|
||||
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||
{fullTime.locale('en').format('dddd HH:mm:ss')} ({fullTime.locale('en').fromNow()})
|
||||
{:else}
|
||||
{fullTime.locale('id').format('dddd HH:mm:ss')} ({fullTime.locale('id').fromNow()})
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</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>
|
||||
import { t } from 'svelte-i18n';
|
||||
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 Time from 'svelte-time';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const step = [0, 15, 30, 45, 60, 75, 90, 105, 120, 145, 160];
|
||||
const stepTime = [];
|
||||
|
|
@ -41,9 +46,16 @@
|
|||
<img src={originalResin.image} alt={originalResin.label} class="h-6 w-6 inline" /></td
|
||||
>
|
||||
<td class="pr-2 text-white text-center">
|
||||
<!-- components not supporting locale yet -->
|
||||
<Time relative timestamp={new Date(stepTime[i + 1])} /></td
|
||||
>
|
||||
{#if $t('calculator.resin.timeFormat') === 'en'}
|
||||
{dayjs(new Date(stepTime[i + 1]))
|
||||
.locale('en')
|
||||
.fromNow()}
|
||||
{:else}
|
||||
{dayjs(new Date(stepTime[i + 1]))
|
||||
.locale('id')
|
||||
.fromNow()}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
|
||||
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
|
||||
|
|
@ -2460,13 +2460,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
|
|||
dependencies:
|
||||
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:
|
||||
version "3.3.6"
|
||||
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"
|
||||
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:
|
||||
version "3.31.2"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"
|
||||
|
|
|
|||
Loading…
Reference in New Issue