Skip to content

Commit

Permalink
feat: add reduction slider to penalty calculator
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexander Trost <[email protected]>
  • Loading branch information
@galexrt
galexrt committed Oct 10, 2024
1 parent 1b257c4 commit cc396c3
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 62 deletions.
4 changes: 2 additions & 2 deletions app/components/partials/data/DataNoDataBlock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ async function click() {

<template>
<UButton
variant="ghost"
variant="outline"
:disabled="!focus"
:icon="icon"
block
class="block w-full rounded-lg border border-dashed border-base-800 text-center dark:border-base-400"
class="block w-full text-center"
:class="padding"
@click="click()"
>
Expand Down
30 changes: 25 additions & 5 deletions app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ const filteredLawBooks = computed(() =>
}),
);
const reduction = ref<number>(0);
const leeway = computed(() => reduction.value / 100);
function getNameForLawBookId(id: string): string | undefined {
return lawBooks.value?.filter((b) => b.id === id)[0]?.name;
}
Expand Down Expand Up @@ -113,9 +116,20 @@ async function copyToClipboard(): Promise<void> {
d(new Date(), 'long') +
`)
${t('common.fine')}: $${state.value.fine}
${t('common.detention_time')}: ${state.value.detentionTime} ${t('common.time_ago.month', state.value.detentionTime.toString())}
${t('common.traffic_infraction_points', 2)}: ${state.value.stvoPoints}
${t('common.fine')}: $${state.value.fine}${
leeway.value > 0 && state.value.fine > 0 ? ` ($-${(state.value.fine * leeway.value).toFixed(0)})` : ''
}
${t('common.detention_time')}: ${state.value.detentionTime} ${t('common.time_ago.month', state.value.detentionTime)}${
leeway.value > 0 && state.value.detentionTime > 0
? ` (-${(state.value.detentionTime * leeway.value).toFixed(0)} ${t('common.time_ago.month', parseInt((state.value.detentionTime * leeway.value).toFixed(0)))})`
: ''
}
${t('common.traffic_infraction_points', 2)}: ${state.value.stvoPoints}${
leeway.value > 0 && state.value.stvoPoints > 0
? ` (-${(state.value.stvoPoints * leeway.value).toFixed(0)} ${t('common.points', parseInt((state.value.stvoPoints * leeway.value).toFixed(0)))})`
: ''
}
${t('common.reduction')}: ${reduction.value}%
${t('common.total_count')}: ${state.value.count}
`;
Expand Down Expand Up @@ -242,13 +256,19 @@ const columns = [
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="text-xl">
<PenaltyStats :summary="state" />
<PenaltyStats :summary="state" :reduction="reduction" />

<div class="my-2 flex flex-row items-center gap-2 text-lg">
<URange v-model="reduction" :min="0" :max="25" :step="1" />
<p class="w-12">{{ reduction }}%</p>
</div>

<div class="mt-4">
<div>
<PenaltySummaryTable
v-if="lawBooks && lawBooks.length > 0"
:law-books="lawBooks"
:selected-laws="state.selectedPenalties"
:reduction="reduction"
/>
</div>
</div>
Expand Down
182 changes: 135 additions & 47 deletions app/components/quickbuttons/penaltycalculator/PenaltyStats.vue
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,146 @@
<script lang="ts" setup>
import type { PenaltiesSummary } from '~/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue';
defineProps<{
const props = defineProps<{
summary: PenaltiesSummary;
reduction: number;
}>();
const leeway = computed(() => props.reduction / 100);
</script>

<template>
<div class="mx-auto max-w-7xl">
<div class="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-4">
<div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
{{ $t('common.fine') }}
</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.fine.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') }}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">$</span>
</p>
</div>
<div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
{{ $t('common.detention_time') }}
</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.detentionTime }}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">
{{ $t('common.time_ago.month', summary.detentionTime.toString()) }}
</span>
</p>
</div>
<div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
{{ $t('common.traffic_infraction_points', 2) }}
</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.stvoPoints }}
</span>
</p>
</div>
<div class="bg-primary-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
{{ $t('common.total_count') }}
</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.count }}
</span>
</p>
</div>
</div>
<UPageGrid :ui="{ wrapper: 'grid-cols-1 sm:grid-cols-4' }">
<UPageCard
:ui="{
body: {
padding: 'px-4 py-4 sm:p-4',
},
icon: { wrapper: 'mb-1' },
}"
icon="i-mdi-attach-money"
>
<template #icon>
<div class="flex gap-1">
<UIcon name="i-mdi-attach-money" class="text-primary h-10 w-10" />
<div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
{{ $t('common.fine') }}
</div>
</div>
</template>

<template #description>
<div class="flex flex-col gap-1">
<div class="flex gap-1">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.fine.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') }}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">$</span>
</div>

<span v-if="leeway > 0 && summary.fine > 0"> ($-{{ (summary.fine * leeway).toFixed(0) }}) </span>
</div>
</template>
</UPageCard>

<UPageCard
:ui="{
body: {
padding: 'flex-1 px-4 py-4 sm:p-4',
},
icon: { wrapper: 'mb-1' },
}"
>
<template #icon>
<div class="flex gap-1">
<UIcon name="i-mdi-clock" class="text-primary h-10 w-10" />
<div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
{{ $t('common.detention_time') }}
</div>
</div>
</template>

<template #description>
<div class="flex flex-col gap-1">
<div class="inline-flex gap-1">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.detentionTime }}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">
{{ $t('common.time_ago.month', summary.detentionTime) }}
</span>
</div>

<span v-if="leeway > 0 && summary.detentionTime > 0">
(-{{ (summary.detentionTime * leeway).toFixed(0) }}
{{ $t('common.time_ago.month', (summary.detentionTime * leeway).toFixed(0)) }})
</span>
</div>
</template>
</UPageCard>

<UPageCard
:ui="{
body: {
padding: 'flex-1 px-4 py-4 sm:p-4',
},
icon: { wrapper: 'mb-1' },
}"
>
<template #icon>
<div class="flex gap-1">
<UIcon name="i-mdi-car" class="text-primary h-10 w-10" />
<div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
{{ $t('common.traffic_infraction_points', 2) }}
</div>
</div>
</template>

<template #description>
<div class="flex flex-col gap-1">
<div class="inline-flex gap-1">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.stvoPoints }}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">
{{ $t('common.points', summary.stvoPoints) }}
</span>
</div>

<span v-if="leeway > 0 && summary.stvoPoints > 0">
(-{{ (summary.stvoPoints * leeway).toFixed(0) }}
{{ $t('common.points', (summary.stvoPoints * leeway).toFixed(0)) }})
</span>
</div>
</template>
</UPageCard>

<UPageCard
:ui="{
body: {
padding: 'flex-1 px-4 py-4 sm:p-4',
},
icon: { wrapper: 'mb-1' },
}"
>
<template #icon>
<div class="flex gap-1">
<UIcon name="i-mdi-equal" class="text-primary h-10 w-10" />
<div class="flex items-center gap-1.5 truncate text-base font-semibold text-gray-900 dark:text-white">
{{ $t('common.total_count') }}
</div>
</div>
</template>

<template #description>
<div class="inline-flex gap-1">
<span class="text-4xl font-semibold tracking-tight">
{{ summary.count }}
</span>
</div>
</template>
</UPageCard>
</UPageGrid>
</div>
</template>
27 changes: 21 additions & 6 deletions app/components/quickbuttons/penaltycalculator/PenaltySummaryTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { LawBook } from '~~/gen/ts/resources/laws/laws';
const props = defineProps<{
lawBooks: LawBook[];
selectedLaws: SelectedPenalty[];
reduction: number;
}>();
const { t } = useI18n();
Expand Down Expand Up @@ -39,14 +40,12 @@ const columns = [
label: t('common.count'),
},
];
const leeway = computed(() => props.reduction / 100);
</script>

<template>
<UButton
v-if="selectedLaws.length === 0"
disabled
class="relative block w-full rounded-lg border border-dashed p-4 text-center"
>
<UButton v-if="selectedLaws.length === 0" disabled variant="outline" class="relative block w-full p-4 text-center">
<UIcon name="i-mdi-calculator" class="mx-auto size-12" />
<span class="mt-2 block text-sm font-semibold">
{{ $t('common.none_selected', [`${$t('common.crime')}`]) }}
Expand All @@ -59,18 +58,34 @@ const columns = [
{{ getNameForLawBookId(law.law.lawbookId) }} - {{ law.law.name }}
</p>
</template>
<template #fine-data="{ row: law }"> ${{ law.law.fine ? law.law.fine * law.count : 0 }} </template>

<template #fine-data="{ row: law }">
${{ law.law.fine ? law.law.fine * law.count : 0 }}
<span v-if="leeway > 0 && law.law.fine * law.count > 0">
($-{{ (law.law.fine * law.count * leeway).toFixed(0) }})
</span>
</template>

<template #detentionTime-data="{ row: law }">
{{ law.law.detentionTime ? law.law.detentionTime * law.count : 0 }}
<span v-if="leeway > 0 && law.law.detentionTime * law.count > 0">
(-{{ (law.law.detentionTime * law.count * leeway).toFixed(0) }})
</span>
</template>

<template #trafficInfractionPoints-data="{ row: law }">
{{ law.law.stvoPoints ? law.law.stvoPoints * law.count : 0 }}
<span v-if="leeway > 0 && law.law.stvoPoints * law.count > 0">
(-{{ (law.law.stvoPoints * law.count * leeway).toFixed(0) }})
</span>
</template>

<template #description-data="{ row: law }">
<p class="line-clamp-2 w-full max-w-sm whitespace-normal break-all hover:line-clamp-none">
{{ law.law.description }}
</p>
</template>

<template #fine-count="{ row: law }">
{{ law.count }}
</template>
Expand Down
3 changes: 2 additions & 1 deletion app/lang/de/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,8 @@
"unpin": "Lösen",
"pinned_document": "Angeheftetes Dokument | Angeheftete Dokumente",
"or": "ODER",
"retrying": "Erneuter Versuch..."
"retrying": "Erneuter Versuch...",
"reduction": "Minderung"
},
"components": {
"partials": {
Expand Down
3 changes: 2 additions & 1 deletion app/lang/en/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,8 @@
"unpin": "Unpin",
"pinned_document": "Pinned document | Pinned documents",
"or": "OR",
"retrying": "Retrying..."
"retrying": "Retrying...",
"reduction": "Reduction"
},
"components": {
"partials": {
Expand Down

0 comments on commit cc396c3

Please sign in to comment.