Skip to content
Snippets Groups Projects

Styling saving overview

Merged Styling saving overview
styling-saving-overview into development
Merged Maria Elizabeth Pauna Lane requested to merge styling-saving-overview into development
Compare
and
2 files
+ 124
− 111
Compare changes
  • Side-by-side
  • Inline
Files
2
src/views/SavingOverviewView.vue
+ 117
− 104
@@ -26,6 +26,7 @@ import {
onUnmounted,
} from "vue";
import { Chart, registerables } from 'chart.js';
import MainLayout from "@/components/MainLayout.vue";
Chart.register(...registerables);
const savings = [
@@ -134,6 +135,8 @@ const challengesChartRef = ref(null);
const totalSavingsChartRef = ref(null);
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
const primaryLightColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color-light').trim();
const primaryDarkColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color-dark').trim();
let savingsChart;
let challengesChart;
@@ -145,7 +148,7 @@ watchEffect(() => {
labels: ['Fullførte', 'Aktive', 'Feilede'],
datasets: [{
data: [completedSavingsGoals, activeSavingsGoals.length, failedSavingsGoals.length],
backgroundColor: ['#4bc0c0', '#1f7f82', '#1b5154'],
backgroundColor: [primaryColor, primaryLightColor, primaryDarkColor],
}]
};
@@ -166,7 +169,7 @@ watchEffect(() => {
labels: ['Fullførte', 'Aktive', 'Feilede'],
datasets: [{
data: [completedChallenges, activeChallenges.length, failedChallenges.length],
backgroundColor: ['#4bc0c0', '#1f7f82', '#1b5154'],
backgroundColor: [primaryColor, primaryLightColor, primaryDarkColor],
}]
};
@@ -281,113 +284,123 @@ onUnmounted(() => {
</script>
<template>
<div class="flex flex-col justify-center items-center gap-6">
<h3 class="text-2xl font-semibold leading-none tracking-tight pt-4">Mine sparinger:</h3>
<div class="flex flex-col md:flex-row justify-between gap-6">
<Card class="md:w-[500px]">
<canvas ref="totalSavingsChartRef" class="md:w-full md:h-full"/>
</Card>
<div class="gap-0 flex flex-col items-center pt-16">
<p class="text-xl font-semibold">Totalt spart: {{ totalSavings }} kr</p>
<p>Totalt spart i sparemål: {{ savingGoalsTotal }} kr</p>
<p>Totalt spart i andre sparinger: {{ otherSavingsTotal }} kr</p>
</div>
</div>
<div class="flex flex-row justify-between">
<p class="text-xl font-semibold">Oppnådde sparemål: {{ completedSavingsGoals }}</p>
<Popover class="chart-popover md:static">
<PopoverTrigger class="md:hidden">
<BarChart3 size="40" class="p-2"/>
</PopoverTrigger>
<PopoverContent class="md:block">
<canvas ref="savingsChartRef"></canvas>
</PopoverContent>
</Popover>
</div>
<Card class="mb-6">
<div class="flex flex-row justify-between table-container overflow-y-auto max-h-[400px]">
<Card>
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">SPAREMÅL</TableHead>
<TableHead>FRIST</TableHead>
<TableHead class="text-right">SUM</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="saving in savings" :key="saving.id">
<TableCell class="flex flex-row items-center justify-start">
<div v-if="saving.status === 'active'">
<SquareMinus size="20"/>
</div>
<div v-if="saving.status === 'completed'">
<SquareCheck size="20"/>
</div>
<div v-if="saving.status === 'failed'">
<SquareX size="20"/>
</div>
{{ saving.goal }}
</TableCell>
<TableCell>{{ saving.deadline }}</TableCell>
<TableCell class="text-right">{{ saving.amount }}</TableCell>
</TableRow>
</TableBody>
</Table>
<MainLayout>
<div class="flex flex-col justify-center items-center gap-6">
<h3 class="text-2xl font-semibold leading-none tracking-tight pt-2">Mine sparinger:</h3>
<div class="flex flex-col md:flex-row justify-between gap-6">
<Card class="md:w-[500px] bg-white border-2 border-primary">
<canvas ref="totalSavingsChartRef" class="md:w-full md:h-full"/>
</Card>
<div v-if="isLargeScreen">
<canvas ref="savingsChartRef"></canvas>
<div class="gap-0 flex flex-col items-center pt-16">
<p class="text-xl font-semibold">Totalt spart: {{ totalSavings }} kr</p>
<p>Totalt spart i sparemål: {{ savingGoalsTotal }} kr</p>
<p>Totalt spart i andre sparinger: {{ otherSavingsTotal }} kr</p>
</div>
</div>
</Card>
<div class="flex flex-row justify-between">
<p class="text-xl font-semibold">Oppnådde utfordringer: {{ completedChallenges }}</p>
<Popover class="chart-popover md:static">
<PopoverTrigger class="md:hidden">
<BarChart3 size="40" class="p-2"/>
</PopoverTrigger>
<PopoverContent class="md:block">
<canvas ref="challengesChartRef"></canvas>
</PopoverContent>
</Popover>
</div>
<Card class="mb-6">
<div class="table-container overflow-y-auto max-h-[400px] flex flex-row justify-between">
<Card>
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">UTFORDRING</TableHead>
<TableHead>FRIST</TableHead>
<TableHead class="text-right">SUM</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="challenge in challenges" :key="challenge.id">
<TableCell class="flex flex-row items-center justify-start">
<div v-if="challenge.status === 'active'">
<SquareMinus size="20"/>
</div>
<div v-if="challenge.status === 'completed'">
<SquareCheck size="20"/>
</div>
<div v-if="challenge.status === 'failed'">
<SquareX size="20"/>
</div>
{{ challenge.goal }}
</TableCell>
<TableCell>{{ challenge.deadline }}</TableCell>
<TableCell class="text-right">{{ challenge.amount }}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
<div v-if="isLargeScreen">
<canvas ref="challengesChartRef"></canvas>
<div class="flex flex-row justify-between">
<p class="text-xl font-semibold">Oppnådde sparemål: {{ completedSavingsGoals }}</p>
<Popover class="chart-popover md:static">
<PopoverTrigger class="md:hidden">
<BarChart3 size="40" class="p-2"/>
</PopoverTrigger>
<PopoverContent class="md:block">
<canvas ref="savingsChartRef"></canvas>
</PopoverContent>
</Popover>
</div>
<Card class="mb-6 border-standard">
<div class="flex flex-row justify-between table-container overflow-y-auto max-h-[400px]">
<Card class="bg-white border-2 border-primary">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">SPAREMÅL</TableHead>
<TableHead>FRIST</TableHead>
<TableHead class="text-right">SUM</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="saving in savings" :key="saving.id">
<TableCell class="flex flex-row items-center justify-start">
<div v-if="saving.status === 'active'">
<SquareMinus size="20"/>
</div>
<div v-if="saving.status === 'completed'">
<SquareCheck size="20"/>
</div>
<div v-if="saving.status === 'failed'">
<SquareX size="20"/>
</div>
{{ saving.goal }}
</TableCell>
<TableCell>{{ saving.deadline }}</TableCell>
<TableCell class="text-right">{{ saving.amount }}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
<div v-if="isLargeScreen">
<Card class="bg-white border-2 border-primary">
<canvas ref="savingsChartRef"></canvas>
</Card>
</div>
</div>
</Card>
<div class="flex flex-row justify-between">
<p class="text-xl font-semibold">Oppnådde utfordringer: {{ completedChallenges }}</p>
<Popover class="chart-popover md:static">
<PopoverTrigger class="md:hidden">
<BarChart3 size="40" class="p-2"/>
</PopoverTrigger>
<PopoverContent class="md:block">
<canvas ref="challengesChartRef"></canvas>
</PopoverContent>
</Popover>
</div>
</Card>
</div>
<Card class="mb-6">
<div class="table-container flex flex-row justify-between">
<Card class="bg-white border-2 border-primary md:overflow-auto md:max-h-[300px]">
<Table >
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">UTFORDRING</TableHead>
<TableHead>FRIST</TableHead>
<TableHead class="text-right">SUM</TableHead>
</TableRow>
</TableHeader>
<TableBody class="overflow-auto">
<TableRow v-for="challenge in challenges" :key="challenge.id">
<TableCell class="flex flex-row items-center justify-start">
<div v-if="challenge.status === 'active'">
<SquareMinus size="20"/>
</div>
<div v-if="challenge.status === 'completed'">
<SquareCheck size="20"/>
</div>
<div v-if="challenge.status === 'failed'">
<SquareX size="20"/>
</div>
{{ challenge.goal }}
</TableCell>
<TableCell>{{ challenge.deadline }}</TableCell>
<TableCell class="text-right">{{ challenge.amount }}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
<div v-if="isLargeScreen">
<Card class="md:bg-white md:border-2 md:border-primary">
<canvas ref="challengesChartRef"></canvas>
</Card>
</div>
</div>
</Card>
</div>
</MainLayout>
</template>
<style scoped>