Skip to content
Snippets Groups Projects
Verified Commit 489da3a1 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

add countdown element

parent cf44bf31
Branches
No related tags found
1 merge request!29Feat/redesign
Pipeline #18195 passed
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
</div> </div>
</div> </div>
<div class="p-4 text-6xl bg-black text-white"> <div class="p-4 text-6xl bg-black text-white">
<div class="leading-none mt-2"> <div class="leading-none mt-2 __js-root">
6 dní, 4 hodiny, 21 sekund <ui-countdown to="{{ ending_time }}"></ui-countdown>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -2,3 +2,4 @@ context: ...@@ -2,3 +2,4 @@ context:
title: 'Krajské volby' title: 'Krajské volby'
button_program_text: 'Zobrazit program' button_program_text: 'Zobrazit program'
button_candidates_text: 'Zobrazit kandidáty' button_candidates_text: 'Zobrazit kandidáty'
ending_time: "2024-05-31T12:00:00.000Z"
<template>
<div>
{{ countdownText }}
</div>
</template>
<script>
export default {
data() {
return {
countdown: {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
},
countdownText: ''
};
},
props: {
to: {
type: String,
required: true
}
},
mounted() {
this.updateCountdown();
setInterval(this.updateCountdown, 1000);
},
methods: {
updateCountdown() {
const targetDate = new Date(this.to);
const currentDate = new Date();
let timeDifference = targetDate - currentDate;
if (timeDifference <= 0) {
this.countdownText = 'nic. Jdeme volit!';
return;
}
const oneDay = 24 * 60 * 60 * 1000;
this.countdown.days = Math.floor(timeDifference / oneDay);
timeDifference -= this.countdown.days * oneDay;
this.countdown.hours = Math.floor(timeDifference / (60 * 60 * 1000));
timeDifference -= this.countdown.hours * (60 * 60 * 1000);
this.countdown.minutes = Math.floor(timeDifference / (60 * 1000));
timeDifference -= this.countdown.minutes * (60 * 1000);
this.countdown.seconds = Math.floor(timeDifference / 1000);
// Determine pluralization for "sekund"
let secondsSuffix = '';
if (this.countdown.seconds === 1) {
secondsSuffix = 'a';
} else if (this.countdown.seconds > 1 && this.countdown.seconds < 5) {
secondsSuffix = 'y';
}
this.countdownText = `${this.countdown.days} dní, ${this.countdown.hours} hodin, ${this.countdown.minutes} minut a ${this.countdown.seconds} sekund${secondsSuffix}`;
}
}
};
</script>
...@@ -19,6 +19,7 @@ import HorizontalScrollable from "./components/HorizontalScrollable"; ...@@ -19,6 +19,7 @@ import HorizontalScrollable from "./components/HorizontalScrollable";
import CardProgram from "./components/card_program/CardProgram" import CardProgram from "./components/card_program/CardProgram"
import CandidatePrimaryBox from "./components/CandidatePrimaryBox"; import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList"; import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList";
import Countdown from "./components/countdown/Countdown";
import SlideUpDown from 'vue-slide-up-down'; import SlideUpDown from 'vue-slide-up-down';
...@@ -40,6 +41,7 @@ Vue.component("ui-candidate-primary-box", CandidatePrimaryBox); ...@@ -40,6 +41,7 @@ Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
Vue.component("ui-card-program", CardProgram); Vue.component("ui-card-program", CardProgram);
Vue.component("ui-slide-up-down", SlideUpDown); Vue.component("ui-slide-up-down", SlideUpDown);
Vue.component("ui-candidate-secondary-list", CandidateSecondaryList); Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
Vue.component("ui-countdown", Countdown);
import UiApp from "./components/UiApp.vue"; import UiApp from "./components/UiApp.vue";
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment