diff --git a/webapp/src/App.vue b/webapp/src/App.vue index 5ea27b7..bb5bf4a 100644 --- a/webapp/src/App.vue +++ b/webapp/src/App.vue @@ -16,7 +16,6 @@ const items = [ { title: 'Home', icon: 'mdi-home', to: '/' }, { title: 'Map', icon: 'mdi-map', to: '/map' }, { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' }, - { title: 'Dangers of ALPRs', icon: 'mdi-shield-alert', to: '/dangers' }, { title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' }, { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' }, // { title: 'About', icon: 'mdi-information', to: '/about' }, diff --git a/webapp/src/components/ALPRCounter.vue b/webapp/src/components/ALPRCounter.vue index 1ec1f58..dfd8855 100644 --- a/webapp/src/components/ALPRCounter.vue +++ b/webapp/src/components/ALPRCounter.vue @@ -12,6 +12,13 @@ import { useDisplay } from 'vuetify' import { getALPRCounts } from '@/services/apiService'; import { CountUp } from 'countup.js'; +const props = defineProps({ + delayMs: { + type: Number, + default: 200, + } +}); + const counterEl: Ref = ref(null); const countupOptions = { useEasing: true, @@ -33,13 +40,17 @@ const counts: Ref = ref({ const showFinalAnimation = ref(false); const { xs: isMobile } = useDisplay(); +let timeOfMount: number|undefined = undefined; + onMounted(() => { - getALPRCounts().then((response) => { - counts.value = response; + timeOfMount = new Date().getTime(); + getALPRCounts().then((countResponse) => { + counts.value = countResponse; + countUp(countResponse); }); }); -watch(counts, (newCounts: Counts) => { +function countUp(newCounts: Counts) { if (!newCounts.worldwide) return; if (!counterEl.value) { console.error('Counter element not found'); @@ -48,14 +59,23 @@ watch(counts, (newCounts: Counts) => { if (!counter) { counter = new CountUp(counterEl.value, newCounts.worldwide, countupOptions); - setTimeout(() => { - counter?.start(); - }, 500); + + if (timeOfMount) { + const timeSinceMount = new Date().getTime() - timeOfMount; + if (timeSinceMount < props.delayMs) { + setTimeout(() => { + counter?.start(); + }, props.delayMs - timeSinceMount); + } else { + counter.start(); + } + } + setTimeout(() => { showFinalAnimation.value = true; - }, 3000); + }, 2500); } -}); +}