Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CountDown revamp with luxon

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-15 23:20:15 +00:00
parent 444c850361
commit 6611b228c1
3 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/package.json
View file

@ -20,6 +20,7 @@
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2",
"@types/chai": "^4.3.5",
"@types/luxon": "^3.3.2",
"@types/mocha": "^10.0.1",
"@typescript-eslint/eslint-plugin": "^6.5.0",
"@typescript-eslint/parser": "^6.5.0",
@ -36,6 +37,7 @@
"chai": "^4.2.0",
"eslint": "^8.48.0",
"eslint-plugin-vue": "^9.17.0",
"luxon": "^3.4.3",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"typescript": "~5.2.2"

27
ui/src/components/CountDown.vue
View file

@ -3,6 +3,7 @@
</template>
<script lang="ts">
import { Duration } from "luxon";
import { Options, Vue } from "vue-class-component";
@Options({
@ -21,28 +22,28 @@ export default class extends Vue {
private interval_id: number | null = null;
public string_repr = "";
private get target_time(): number {
const now_time = new Date().getTime();
return new Date(now_time + this.millis).getTime();
private get target_date_ms(): number {
return new Date(Date.now() + this.millis).getTime();
}
private tick(): void {
const now = new Date().getTime();
const distance = new Date(this.target_time - now).getTime();
const distance_ms = this.target_date_ms - Date.now();
if (distance <= 0) {
if (distance_ms <= 0) {
this.string_repr = "Jetzt!";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
const distance = Duration.fromMillis(distance_ms);
const d_days = distance.shiftTo("day").mapUnits(Math.floor);
const d_hms = distance.minus(d_days).shiftTo("hour", "minute", "second");
this.string_repr = `${days} Tage, ${hours}:${minutes}:${seconds}`;
if (d_days.days > 0) {
this.string_repr = d_days.toHuman() + " ";
} else {
this.string_repr = "";
}
this.string_repr += d_hms.toFormat("hh:mm:ss");
}
public mounted(): void {

10
ui/yarn.lock
View file

@ -1331,6 +1331,11 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
"@types/luxon@^3.3.2":
version "3.3.2"
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.2.tgz#f6e3524c2486b949a4db445e85d93c8e9886dfe2"
integrity sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==
"@types/mime@*":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -4892,6 +4897,11 @@ lru-cache@^6.0.0:
dependencies:
yallist "^4.0.0"
luxon@^3.4.3:
version "3.4.3"
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.3.tgz#8ddf0358a9492267ffec6a13675fbaab5551315d"
integrity sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==
magic-string@^0.30.0:
version "0.30.3"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.3.tgz#403755dfd9d6b398dfa40635d52e96c5ac095b85"