From 0e749b6eda8c6f1fc5838e8532c6138deb5f2ccc Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Tue, 30 Jan 2024 22:55:45 +0100
Subject: [PATCH 01/10] refactor: inline function

---
 frontend/src/router/index.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 27aef0b6..b0e07787 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -134,10 +134,7 @@ const router = createRouter({
       path: '/user/notifications',
       name: 'notifications',
       component: NotificationsView,
-      beforeEnter: async (to, from) => {
-        const notificationsStore = useNotificationsStore();
-        await notificationsStore.getAllNotifications();
-      },
+      beforeEnter: async () => await useNotificationsStore().getAllNotifications(),
       meta: {
         allowed: [Role.User, Role.Admin]
       }

From 8bbc907c804933f6b3dee3c61df496b9db4a2d3d Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Tue, 30 Jan 2024 23:43:36 +0100
Subject: [PATCH 02/10] fix: fix bad url in link and remove not useful error,
 not authorized views

---
 frontend/src/components/ElectionComponent.vue |  2 +-
 frontend/src/router/index.ts                  | 14 --------------
 frontend/src/views/ErrorView.vue              | 18 ------------------
 frontend/src/views/NoPermissionView.vue       | 19 -------------------
 frontend/src/views/NotFoundView.vue           | 18 ------------------
 5 files changed, 1 insertion(+), 70 deletions(-)
 delete mode 100644 frontend/src/views/ErrorView.vue
 delete mode 100644 frontend/src/views/NoPermissionView.vue
 delete mode 100644 frontend/src/views/NotFoundView.vue

diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue
index da206354..9d4b481e 100644
--- a/frontend/src/components/ElectionComponent.vue
+++ b/frontend/src/components/ElectionComponent.vue
@@ -4,7 +4,7 @@
       <td>
         <div class="msg text-center">
           <div class="row">
-            <p class="name"><a :href="`/election/${election.id}`" class="name">{{ election.goal }}</a></p>
+            <p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
           </div>
           <div class="row">
             <p class="links-container">
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b0e07787..57789da4 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -16,8 +16,6 @@ import VoteView from "@/views/VoteView.vue";
 import ElectionsView from "@/views/ElectionsView.vue";
 import {useAuthStore} from "@/stores/auth";
 import { useVotingStore } from '@/stores/voting'
-import ErrorView from "@/views/ErrorView.vue";
-import NoPermissionView from "@/views/NoPermissionView.vue";
 import {Role} from "@/commons/utils";
 import 'vue-router'
 import {useNotificationsStore} from "@/stores/notificationsStore";
@@ -139,18 +137,6 @@ const router = createRouter({
         allowed: [Role.User, Role.Admin]
       }
     },
-    {
-      // TODO: change path
-      path: '/error',
-      name: 'error',
-      component: ErrorView,
-    },
-    {
-      // TODO: change path
-      path: '/no-permission',
-      name: 'no-permission',
-      component: NoPermissionView,
-    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
diff --git a/frontend/src/views/ErrorView.vue b/frontend/src/views/ErrorView.vue
deleted file mode 100644
index a30da19e..00000000
--- a/frontend/src/views/ErrorView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <Breadcrumb :paths="[]" />
-  <PageTitle title="Error" />
-  <div class="text-center err">
-    Oops, seems something went wrong, try again please.
-  </div>
-</template>
-
-<script setup lang="ts">
-import Breadcrumb from "@/components/BreadcrumbComponent.vue";
-import PageTitle from "@/components/PageTitleComponent.vue";
-</script>
-
-<style scoped>
-div.err {
-  font-size: x-large;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/NoPermissionView.vue b/frontend/src/views/NoPermissionView.vue
deleted file mode 100644
index a9e6da3e..00000000
--- a/frontend/src/views/NoPermissionView.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <Breadcrumb :paths="[]" />
-  <PageTitle title="Error" />
-  <div class="text-center err">
-    Oops, seems you don't have permission to access the area.
-  </div>
-</template>
-
-<script setup lang="ts">
-import Breadcrumb from "@/components/BreadcrumbComponent.vue";
-import PageTitle from "@/components/PageTitleComponent.vue";
-</script>
-
-
-<style scoped>
-div.err {
-  font-size: x-large;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
deleted file mode 100644
index 4de4187d..00000000
--- a/frontend/src/views/NotFoundView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <Breadcrumb :paths="[]" />
-  <PageTitle title="Error" />
-  <div class="text-center err">
-    Oops, seems the system is not able to find what you're looking for, try again please.
-  </div>
-</template>
-
-<script setup lang="ts">
-import Breadcrumb from "@/components/BreadcrumbComponent.vue";
-import PageTitle from "@/components/PageTitleComponent.vue";
-</script>
-
-<style scoped>
-div.err {
-  font-size: x-large;
-}
-</style>
\ No newline at end of file

From c69e0aabe296e71a4132b88b6f17fa79db9b70f8 Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Wed, 31 Jan 2024 00:18:52 +0100
Subject: [PATCH 03/10] style: improve colors and links structure

---
 .../src/components/ElectionCardComponent.vue  | 30 ++++++++-----------
 frontend/src/views/DashboardView.vue          | 21 +++++++------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/ElectionCardComponent.vue b/frontend/src/components/ElectionCardComponent.vue
index 671a4c35..a3190433 100644
--- a/frontend/src/components/ElectionCardComponent.vue
+++ b/frontend/src/components/ElectionCardComponent.vue
@@ -10,19 +10,11 @@
         <li>
           <strong>End:</strong> {{ ("0" + election.end.getUTCDate()).slice(-2) }} {{ election.end.toLocaleString('default', { month: 'short' }) }} {{election.end.getFullYear() }} {{ election.end.getHours() }}:{{ ("0" + election.end.getMinutes()).slice(-2) }}
         </li>
-        <li>
-          <div class="card links mx-auto">
-            <ul>
-              <li>
-                <a :href="`/elections/${election.id}`">See details</a>
-              </li>
-              <li v-if="isOpen(election)">
-                <a :href="`/vote/${election.id}`">Cast a vote</a>
-              </li>
-            </ul>
-          </div>
-        </li>
       </ul>
+      <div class="d-flex flex-column links">
+        <a :href="`/elections/${election.id}`">See details</a>
+        <a :href="`/vote/${election.id}`">Cast a vote</a>
+      </div>
     </div>
   </div>
 </template>
@@ -55,14 +47,16 @@ function isOpen(election: VotingWithStatus): boolean {
     text-decoration: none;
   }
 
-  div.links {
-    display: inline-block;
-    padding: 4%;
+  div.links a {
+    padding: 6px 0;
+    margin: 4px 0;
+    border-radius: 15px;
+    background-color: #edede9;
   }
 
-  .links ul {
-    margin-left: 0;
-    padding-left: 0;
+  div.links a:hover {
+    font-weight: bold;
+    box-shadow: 1px 2px 5px rgba(200, 200, 200, 0.82);
   }
 
   .card {
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 014715cf..0aaea8c4 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -2,7 +2,7 @@
   <Breadcrumb :paths="[{name: 'Dashboard', link: '/dashboard'}]" />
   <PageTitle title="Dashboard" />
   <div v-for="qualifier in qualifiers" :class="`elections col-10 center mx-auto election election-${qualifier} bg-light`" :key="`div-${qualifier}`">
-    <a :href="`/elections?qualifier=${qualifier}`" class="election-link">{{ capitalizeFirstLetter(qualifier) }} Elections</a>
+    <h2><a :href="`/elections?qualifier=${qualifier}`" class="election-link">{{ capitalizeFirstLetter(qualifier) }} Elections</a></h2>
     <hr v-if="getData(qualifier).length > 0"/>
     <Carousel :elections="sortElectionsByDate(getData(qualifier))"/>
   </div>
@@ -104,9 +104,16 @@ function getData(qualifier: string) {
 </script>
 
 <style>
+  .elections {
+    margin: 4% 0;
+  }
+
+  .elections h2 {
+    font-size: 1.6em;
+  }
+
   .election-link {
     color: black;
-    font-weight: bold;
     text-decoration: none;
   }
 
@@ -119,14 +126,10 @@ function getData(qualifier: string) {
     border-color: inherit;
   }
 
-  .elections {
-    margin: 4% 0;
-  }
-
   .election {
     margin: 2% 0;
     border-radius: 15px;
-    box-shadow: 1px 3px 10px rgba(200, 200, 200, 0.82);
+    box-shadow: 3px 3px 10px rgba(200, 200, 200, 0.82);
     padding: 2%;
     button {
       color: black;
@@ -135,7 +138,7 @@ function getData(qualifier: string) {
 </style>
 
 <style lang="scss">
-  $color-open: #66FF99;
+  $color-open: #009f00;
   .election-open {
     border: $color-open 2px solid;
     a:hover {
@@ -145,7 +148,7 @@ function getData(qualifier: string) {
       color: $color-open;
     }
   }
-  $color-closed: red;
+  $color-closed: #c70224;
   .election-closed {
     border: $color-closed 2px solid;
     a:hover {

From 695532f57ea7e63a3390acd9e535455cec847e0e Mon Sep 17 00:00:00 2001
From: Luca Rubboli <luca.rubboli2@studio.unibo.it>
Date: Wed, 31 Jan 2024 12:56:30 +0100
Subject: [PATCH 04/10] chore: add capitalizeLetter and getStatus

---
 frontend/src/commons/utils.ts | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/commons/utils.ts b/frontend/src/commons/utils.ts
index cd42604d..821e139b 100644
--- a/frontend/src/commons/utils.ts
+++ b/frontend/src/commons/utils.ts
@@ -2,6 +2,8 @@
  * Contains utility functions used by multiple components.
  */
 
+import type {Voting} from "@/stores/voting";
+
 /** An enum representing the possible roles of a user. */
 export enum Role { User = 'user', Admin = 'admin' }
 
@@ -17,12 +19,13 @@ export function toRole(roleString: string | null): Role | null {
 /**
  * Formats the given date as a string with the format "dd MMM yy" w.r.t. italian timezone (e.g. "01 Jan 21")
  * @param date the date to format
+ * @param yearsDigit the number of digits to use for the year (2 or 4)
  */
-export function formatDate(date: Date): string {
+export function formatDate(date: Date, yearsDigit: '2-digit' | 'numeric' | undefined = '2-digit'): string {
   const options: Intl.DateTimeFormatOptions = {
     day: '2-digit',
     month: 'short',
-    year: '2-digit',
+    year: yearsDigit,
   };
   return new Intl.DateTimeFormat('it-IT', options).format(date).toString();
 }
@@ -55,3 +58,29 @@ export function highestOf(data: Record<string, number>): { key: string, value: n
   }
   return { key: maxKey, value: maxValue as number };
 }
+
+/**
+ * Capitalizes the first letter of the given string.
+ * @param str the string to capitalize.
+ */
+export function capitalizeFirstLetter(str: string) {
+  if (str === '') {
+    return str;
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Returns the status of the given election w.r.t. the given date.
+ * @param election the election to analyze.
+ * @param now the date to use as reference.
+ */
+export function getStatus(election: Voting, now: number): string {
+  if (now >= election.start.getTime() && now < election.end.getTime()) {
+    return "open";
+  } else if (now >= election.end.getTime()) {
+    return "closed";
+  } else {
+    return "soon";
+  }
+}

From 17bbb0bef09310a2a3f0dd9eaae77ecd9636c453 Mon Sep 17 00:00:00 2001
From: Luca Rubboli <luca.rubboli2@studio.unibo.it>
Date: Wed, 31 Jan 2024 12:57:06 +0100
Subject: [PATCH 05/10] refactor: removed votingStatus interface

---
 frontend/src/stores/voting.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/stores/voting.ts b/frontend/src/stores/voting.ts
index 52177f55..bad6b0ee 100644
--- a/frontend/src/stores/voting.ts
+++ b/frontend/src/stores/voting.ts
@@ -19,10 +19,6 @@ export interface Voting {
   results: Record<string, number>;
 }
 
-export interface VotingWithStatus extends Voting {
-  status?: string
-}
-
 export interface VotingCreation {
   goal: string
   voters: string

From 41bf39ed6b14691fc47f92f66352105d43e9666e Mon Sep 17 00:00:00 2001
From: Luca Rubboli <luca.rubboli2@studio.unibo.it>
Date: Wed, 31 Jan 2024 12:57:33 +0100
Subject: [PATCH 06/10] nothing done

---
 frontend/src/components/UserPropertyComponent.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/components/UserPropertyComponent.vue b/frontend/src/components/UserPropertyComponent.vue
index 0ca26b67..2527d7e0 100644
--- a/frontend/src/components/UserPropertyComponent.vue
+++ b/frontend/src/components/UserPropertyComponent.vue
@@ -44,6 +44,7 @@
   import {useForm} from "vee-validate";
   import * as yup from "yup";
   import {type User, useUserStore} from "@/stores/user";
+  import {capitalizeFirstLetter} from "../commons/utils";
 
   const props = defineProps<{
     property: string,
@@ -59,10 +60,6 @@
 
   const isReadOnly = ref(true);
 
-  function capitalizeFirstLetter(str: string) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-
   const {meta, errors, handleSubmit, defineField } = useForm({
     validationSchema: yup.object({
       refValue: props.validation,

From 691c587237c5504df747745b87f5c01b35efb25a Mon Sep 17 00:00:00 2001
From: Luca Rubboli <luca.rubboli2@studio.unibo.it>
Date: Wed, 31 Jan 2024 12:58:57 +0100
Subject: [PATCH 07/10] chore: add realtime election status visualization,
 cleaned code

---
 frontend/src/components/CarouselComponent.vue |  6 +--
 .../src/components/ElectionCardComponent.vue  | 27 ++++++++++---
 frontend/src/components/ElectionComponent.vue | 33 ++++++++++-----
 frontend/src/views/DashboardView.vue          | 40 ++++++++-----------
 frontend/src/views/ElectionsView.vue          | 40 ++++++++-----------
 5 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/CarouselComponent.vue b/frontend/src/components/CarouselComponent.vue
index 0a5acaa5..9fe12bda 100644
--- a/frontend/src/components/CarouselComponent.vue
+++ b/frontend/src/components/CarouselComponent.vue
@@ -25,10 +25,10 @@
 import ElectionCard from "@/components/ElectionCardComponent.vue";
 import { Carousel, Navigation, Slide } from 'vue3-carousel'
 import 'vue3-carousel/dist/carousel.css'
-import type {VotingWithStatus} from "@/stores/voting";
+import type {Voting} from "@/stores/voting";
 
-const props = defineProps<{
-  elections: VotingWithStatus[]
+defineProps<{
+  elections: Voting[]
 }>()
 
 const settings = {
diff --git a/frontend/src/components/ElectionCardComponent.vue b/frontend/src/components/ElectionCardComponent.vue
index 671a4c35..d75a0358 100644
--- a/frontend/src/components/ElectionCardComponent.vue
+++ b/frontend/src/components/ElectionCardComponent.vue
@@ -5,10 +5,10 @@
       <hr class="solid"/>
       <ul class="election-props">
         <li>
-          <strong>Start:</strong> {{ ("0" + election.start.getUTCDate()).slice(-2) }} {{ election.start.toLocaleString('default', { month: 'short' }) }} {{election.start.getFullYear() }} {{ election.start.getHours() }}:{{ ("0" + election.start.getMinutes()).slice(-2) }}
+          <strong>Start:</strong> {{formatDate(election.start, 'numeric')}} <br/> {{ formatTime(election.start) }}
         </li>
         <li>
-          <strong>End:</strong> {{ ("0" + election.end.getUTCDate()).slice(-2) }} {{ election.end.toLocaleString('default', { month: 'short' }) }} {{election.end.getFullYear() }} {{ election.end.getHours() }}:{{ ("0" + election.end.getMinutes()).slice(-2) }}
+          <strong>End:</strong> {{formatDate(election.end, 'numeric')}} <br/> {{ formatTime(election.end) }}
         </li>
         <li>
           <div class="card links mx-auto">
@@ -29,14 +29,29 @@
 
 <script setup lang="ts">
 
-import type {VotingWithStatus} from "@/stores/voting";
+import type {Voting} from "@/stores/voting";
+import {ref} from "vue";
+import {formatDate, formatTime, getStatus} from "@/commons/utils";
 
 defineProps<{
-  election: VotingWithStatus
+  election: Voting
 }>()
 
-function isOpen(election: VotingWithStatus): boolean {
-  return election.status === 'open';
+const now = ref(new Date().getTime());
+
+function scheduleUpdateNow() {
+  setTimeout(updateNow, 1000);
+}
+
+function updateNow() {
+  now.value = new Date().getTime();
+  scheduleUpdateNow();
+}
+
+scheduleUpdateNow();
+
+function isOpen(election: Voting): boolean {
+  return getStatus(election, now.value) === 'open';
 }
 </script>
 
diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue
index 9d4b481e..5997db72 100644
--- a/frontend/src/components/ElectionComponent.vue
+++ b/frontend/src/components/ElectionComponent.vue
@@ -18,10 +18,10 @@
         <div class="date" aria-label="start date">
           <span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
             <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
-            </svg> {{ ("0" + election.start.getUTCDate()).slice(-2) }}
+            </svg> {{formatDate(election.start).substring(0, 2)}}
           </span><br/>
-          <span>{{ election.start.toLocaleString('default', { month: 'short' }) }} {{election.start.getFullYear() }}</span><br/>
-          <span>{{ ("0" + election.start.getHours()).slice(-2) }}:{{ ("0" + election.start.getMinutes()).slice(-2) }}</span>
+          <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span><br/>
+          <span>{{formatTime(election.start)}}</span>
         </div>
       </td>
       <td>
@@ -30,8 +30,8 @@
             <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
             </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
           </span><br/>
-          <span>{{ election.end.toLocaleString('default', { month: 'short' }) }} {{election.end.getFullYear() }}</span><br/>
-          <span>{{ ("0" + election.end.getHours()).slice(-2) }}:{{ ("0" + election.end.getMinutes()).slice(-2) }}</span>
+          <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span><br/>
+          <span>{{formatTime(election.end)}}</span>
         </div>
       </td>
     </tr>
@@ -39,13 +39,28 @@
 </template>
 
 <script setup lang="ts">
-import type {VotingWithStatus} from "@/stores/voting";
+import type {Voting} from "@/stores/voting";
+import {capitalizeFirstLetter, formatDate, formatTime, getStatus} from "@/commons/utils";
+import {ref} from "vue";
 
-function isOpen(election: VotingWithStatus): boolean {
-  return election.status === 'open';
+const now = ref(new Date().getTime());
+
+function scheduleUpdateNow() {
+  setTimeout(updateNow, 1000);
+}
+
+function updateNow() {
+  now.value = new Date().getTime();
+  scheduleUpdateNow();
+}
+
+scheduleUpdateNow();
+
+function isOpen(election: Voting): boolean {
+  return getStatus(election, now.value) === 'open';
 }
 defineProps<{
-  election: VotingWithStatus
+  election: Voting
 }>()
 </script>
 
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 014715cf..757fede6 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -14,45 +14,37 @@ import PageTitle from "@/components/PageTitleComponent.vue";
 import Breadcrumb from "@/components/BreadcrumbComponent.vue";
 import {computed, onMounted, reactive, ref, type Ref} from "vue";
 import router from "@/router";
-import {useVotingStore, type Voting, type VotingWithStatus} from "@/stores/voting";
+import {useVotingStore, type Voting} from "@/stores/voting";
+import {capitalizeFirstLetter, getStatus} from "@/commons/utils";
 
 const votingStore = useVotingStore();
-const data: Ref<VotingWithStatus[] | null> = ref(null);
+const data: Ref<Voting[] | null> = ref(null);
 
 onMounted(async () => {
   await getVotings();
+  scheduleUpdateNow();
 });
 
-function getStatus(election: Voting): string {
-  const now = new Date();
-  if (now >= election.start && now < election.end) {
-    return "open";
-  } else if (now >= election.end) {
-    return "closed";
-  } else {
-    return "soon";
-  }
+const now = ref(new Date().getTime());
+
+function scheduleUpdateNow() {
+  setTimeout(updateNow, 1000);
+}
+
+function updateNow() {
+  now.value = new Date().getTime();
+  scheduleUpdateNow();
 }
 
 async function getVotings() {
   try {
     data.value = await votingStore.getVotings();
-    for (const voting of data.value) {
-      voting['status'] = getStatus(voting);
-    }
   } catch (e: any) {
     console.error(e);
     await router.push({name: "not-found"})
   }
 }
 
-function capitalizeFirstLetter(str: string) {
-  if (str === '') {
-    return str;
-  }
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 function sortElectionsByDate(elections: Voting[], prop: keyof Voting = 'start'): Voting[] {
   return elections.sort((a: Voting, b: Voting) => a[prop as keyof typeof a] - b[prop as keyof typeof b]);
 }
@@ -66,7 +58,7 @@ const reactiveVotings = computed(() => {
 
 const getOpen = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'open')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'open')
   } else {
     return []
   }
@@ -74,7 +66,7 @@ const getOpen = computed(() => {
 
 const getClosed = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'closed')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'closed')
   } else {
     return []
   }
@@ -82,7 +74,7 @@ const getClosed = computed(() => {
 
 const getSoon = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'soon')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'soon')
   } else {
     return []
   }
diff --git a/frontend/src/views/ElectionsView.vue b/frontend/src/views/ElectionsView.vue
index 3a4518f4..47b60535 100644
--- a/frontend/src/views/ElectionsView.vue
+++ b/frontend/src/views/ElectionsView.vue
@@ -5,33 +5,32 @@ import PageTitle from '@/components/PageTitleComponent.vue'
 import {useRoute} from "vue-router";
 import {computed, onMounted, reactive, type Ref, ref} from 'vue'
 import ElectionComponent from "@/components/ElectionComponent.vue";
-import {useVotingStore, type Voting, type VotingWithStatus} from "@/stores/voting";
+import {useVotingStore, type Voting} from "@/stores/voting";
 import router from "@/router";
+import {capitalizeFirstLetter, getStatus} from "@/commons/utils";
 
 const votingStore = useVotingStore();
-const data: Ref<VotingWithStatus[] | null> = ref(null);
+const data: Ref<Voting[] | null> = ref(null);
 
 onMounted(async () => {
   await getVotings();
+  scheduleUpdateNow();
 })
 
-function getStatus(election: Voting): string {
-  const now = new Date();
-  if (now >= election.start && now < election.end) {
-    return "Open";
-  } else if (now >= election.end) {
-    return "Closed";
-  } else {
-    return "Soon";
-  }
+const now = ref(new Date().getTime());
+
+function scheduleUpdateNow() {
+  setTimeout(updateNow, 1000);
+}
+
+function updateNow() {
+  now.value = new Date().getTime();
+  scheduleUpdateNow();
 }
 
 async function getVotings() {
   try {
     data.value = await votingStore.getVotings();
-    for (const voting of data.value) {
-      voting['status'] = getStatus(voting);
-    }
   } catch (e: any) {
     console.error(e);
     await router.push({name: "not-found"})
@@ -46,13 +45,6 @@ if (qualifier && ['all', 'open', 'closed', 'soon'].includes(qualifier)) {
   picked.value = qualifier;
 }
 
-function capitalizeFirstLetter(str: string) {
-  if (str === '') {
-    return str;
-  }
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 function sortElectionsByDate(elections: Voting[], prop: keyof Voting = 'start'): Voting[] {
   return elections.sort((a: Voting, b: Voting) => a[prop as keyof typeof a] - b[prop as keyof typeof b]);
 }
@@ -72,7 +64,7 @@ const reactiveVotings = computed(() => {
 
 const getOpen = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'open')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'open')
   } else {
     return []
   }
@@ -80,7 +72,7 @@ const getOpen = computed(() => {
 
 const getClosed = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'closed')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'closed')
   } else {
     return []
   }
@@ -88,7 +80,7 @@ const getClosed = computed(() => {
 
 const getSoon = computed(() => {
   if (reactiveVotings.value) {
-    return reactiveVotings.value.filter((election: VotingWithStatus) => election.status === 'soon')
+    return reactiveVotings.value.filter((election: Voting) => getStatus(election, now.value) === 'soon')
   } else {
     return []
   }

From c699c38d48ab4fda3236bba793c93ca1b1b8bf7e Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Wed, 31 Jan 2024 01:37:33 +0100
Subject: [PATCH 08/10] style: improve style of registration, creation of
 election form pages

---
 frontend/src/views/CreateElectionView.vue | 101 +++++++++-------------
 frontend/src/views/RegisterView.vue       |  13 ++-
 frontend/src/views/UserAreaView.vue       |   2 +-
 3 files changed, 50 insertions(+), 66 deletions(-)

diff --git a/frontend/src/views/CreateElectionView.vue b/frontend/src/views/CreateElectionView.vue
index 1e3395e8..d82e2868 100644
--- a/frontend/src/views/CreateElectionView.vue
+++ b/frontend/src/views/CreateElectionView.vue
@@ -182,79 +182,56 @@ async function onFormSubmit() {
 <template>
   <Breadcrumb :paths="[{name: 'Elections', link: '/elections'}, {name: 'Create', link: '/elections/create'}]" />
   <PageTitle title="Create Election" />
-  <Form @submit="onFormSubmit" :response="response" submit-btn-name="Create election">
-    <template v-slot:body>
-      <div class="row gy-5 row-cols-lg-2 row-cols-1 mx-auto mt-1">
-        <div class="col" v-for="prop in Object.keys(copyWithoutElement(properties, 'choices'))" :key="prop">
-          <div class="p-3 border bg-light">
-            <FormInput :helper="properties[prop]['help']"
-                       :input-id="`input-${prop}`"
-                       :label="properties[prop]['label']"
-                       :pre="properties[prop]['pre']">
-              <input v-model="references[prop].value"
-                     :type="properties[prop]['type']" class="form-control"
-                     :placeholder="properties[prop]['placeholder']" required
-                     :autocomplete="properties[prop]['autocomplete']"/>
-            </FormInput>
+  <div class="container-sm text-center">
+    <Form @submit="onFormSubmit" :response="response" submit-btn-name="Create election">
+      <template v-slot:body>
+        <div class="row gy-5 row-cols-lg-2 row-cols-1 mx-auto mt-1">
+          <div class="col" v-for="prop in Object.keys(copyWithoutElement(properties, 'choices'))" :key="prop">
+            <div class="p-3 border bg-light">
+              <FormInput :helper="properties[prop]['help']"
+                         :input-id="`input-${prop}`"
+                         :label="properties[prop]['label']"
+                         :pre="properties[prop]['pre']">
+                <input v-model="references[prop].value"
+                       :type="properties[prop]['type']" class="form-control"
+                       :placeholder="properties[prop]['placeholder']" required
+                       :autocomplete="properties[prop]['autocomplete']"/>
+              </FormInput>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="col-10 mx-auto mt-5 text-center">
-        <h2 class="text-primary">Election choices</h2>
-      </div>
-      <div class="row gy-5 row-cols-lg-3 row-cols-2 mx-auto my-2">
-        <div class="col" v-for="idx of Array(references['choices'].value.length).keys()" :key="`choice-${idx}`">
-          <div class="p-3 border bg-light">
-            <FormInput :helper="properties['choices']['help']"
-                       :input-id="`choices-input-${idx}`"
-                       :label="`${properties['choices']['label']} ${idx}`"
-                       :pre="properties['choices']['pre']">
-              <input v-model="references['choices'].value[idx].value"
-                     :type="properties['choices']['type']" class="form-control"
-                     :placeholder="`${properties['choices']['placeholder']} ${idx}`" required
-                     :autocomplete="`${properties['choices']['autocomplete']} ${idx}`"/>
-            </FormInput>
+        <div class="col-10 mx-auto mt-5 text-center">
+          <h2 class="text-primary">Election choices</h2>
+        </div>
+        <div class="row gy-5 row-cols-lg-3 row-cols-2 mx-auto my-2">
+          <div class="col" v-for="idx of Array(references['choices'].value.length).keys()" :key="`choice-${idx}`">
+            <div class="p-3 border bg-light">
+              <FormInput :helper="properties['choices']['help']"
+                         :input-id="`choices-input-${idx}`"
+                         :label="`${properties['choices']['label']} ${idx}`"
+                         :pre="properties['choices']['pre']">
+                <input v-model="references['choices'].value[idx].value"
+                       :type="properties['choices']['type']" class="form-control"
+                       :placeholder="`${properties['choices']['placeholder']} ${idx}`" required
+                       :autocomplete="`${properties['choices']['autocomplete']} ${idx}`"/>
+              </FormInput>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="my-5">
-        <ul>
-          <li>
-            <button id="addElection" class="btn btn-xs btn-primary" @click.prevent="addElection" type="button">+</button>
-            <button id="removeElection" v-if="Object.keys(references['choices'].value).length > 2" class="btn btn-xs btn-primary" @click.prevent="removeElection" type="button">-</button>
-          </li>
-        </ul>
-      </div>
-    </template>
-  </Form>
+        <div class="col-12 d-flex justify-content-center align-items-center my-5">
+          <button id="addElection" class="btn btn-primary" @click.prevent="addElection" type="button">Add choice</button>
+          <button id="removeElection" v-if="Object.keys(references['choices'].value).length > 2" class="btn btn-primary ms-2" @click.prevent="removeElection" type="button">Remove Choice</button>
+        </div>
+      </template>
+    </Form>
+  </div>
 </template>
 
 <style scoped>
-ul {
-  list-style-type: none;
-  li {
-    padding-right: 20px;
-    a {
-      color: #E6308A;
-      font-weight: bold;
-      text-decoration: none;
-    }
-    a:hover {
-      color: #E6308A;
-      opacity: 0.7;
-      transition: 0.5s;
-      text-decoration: underline;
-    }
-  }
-}
 div {
   border-radius: 15px;
 }
 
-.btn-xs {
-  margin-right: 2%;
-}
-
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   /* display: none; <- Crashes Chrome on hover */
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 66b8095a..a261c173 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -6,6 +6,8 @@ import FormInput from '@/components/forms/FormInputComponent.vue'
 import { useForm } from 'vee-validate'
 import * as yup from 'yup'
 import {type UserCreation, useUserStore} from "@/stores/user";
+import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
+import Breadcrumb from "@/components/BreadcrumbComponent.vue";
 
 const response = ref({})
 
@@ -96,7 +98,8 @@ const properties: {
 </script>
 
 <template>
-    <div class="container">
+    <Breadcrumb :paths="[{name: 'User registration', link: '/register'}]" />
+    <div class="container-sm">
         <PageTitle title="User registration" />
         <Form @submit="onSubmit" :response="response" submit-btn-name="Create an user">
             <template v-slot:body>
@@ -112,7 +115,7 @@ const properties: {
                                     :autocomplete="properties[prop]['autocomplete']"
                                     :placeholder="properties[prop]['placeholder']">
                             </FormInput>
-                            <span>{{ errors[prop] }}</span>
+                            <span class="validation">{{ errors[prop] }}</span>
                         </div>
                     </div>
                 </div>
@@ -121,4 +124,8 @@ const properties: {
     </div>
 </template>
 
-
+<style scoped>
+span.validation {
+  color: #c70224;
+}
+</style>
diff --git a/frontend/src/views/UserAreaView.vue b/frontend/src/views/UserAreaView.vue
index 36added8..5a5dc034 100644
--- a/frontend/src/views/UserAreaView.vue
+++ b/frontend/src/views/UserAreaView.vue
@@ -1,7 +1,7 @@
 <template>
   <Breadcrumb :paths="[{name: 'User area', link: '/user'}]" />
   <PageTitle title="User area"/>
-  <div v-if="data" class="row gy-5 row-cols-md-2 row-cols-1 mx-auto my-2">
+  <div v-if="data" class="container-sm row gy-5 row-cols-md-2 row-cols-1 mx-auto my-2">
     <div class="col" v-for="property in Object.keys(newValueRules)" :key="property">
       <div class="p-2 border bg-light">
         <div class="card col-10 mx-auto">

From 8c20f0f7c4d1d0989decde847b08722218c71a37 Mon Sep 17 00:00:00 2001
From: Luca Rubboli <luca.rubboli2@studio.unibo.it>
Date: Wed, 31 Jan 2024 14:17:04 +0100
Subject: [PATCH 09/10] refactor: removed multiple timers, using only the view
 timer passed to child components

---
 frontend/src/components/CarouselComponent.vue |  5 +++--
 .../src/components/ElectionCardComponent.vue  | 18 ++++-------------
 frontend/src/components/ElectionComponent.vue | 20 +++++--------------
 frontend/src/views/DashboardView.vue          |  3 ++-
 frontend/src/views/ElectionsView.vue          |  3 ++-
 5 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/CarouselComponent.vue b/frontend/src/components/CarouselComponent.vue
index 9fe12bda..24fe2624 100644
--- a/frontend/src/components/CarouselComponent.vue
+++ b/frontend/src/components/CarouselComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <Carousel v-bind="settings" :breakpoints="breakpoints">
     <Slide v-for="election in elections" :key="String(election.id)">
-      <ElectionCard :election="election"/>
+      <ElectionCard :election="election" :time="time"/>
     </Slide>
     <template #pagination="{ pagesCount, currentPage, setCurrentPage }">
       <div class="pagination">
@@ -28,7 +28,8 @@ import 'vue3-carousel/dist/carousel.css'
 import type {Voting} from "@/stores/voting";
 
 defineProps<{
-  elections: Voting[]
+  elections: Voting[],
+  time: number,
 }>()
 
 const settings = {
diff --git a/frontend/src/components/ElectionCardComponent.vue b/frontend/src/components/ElectionCardComponent.vue
index d75a0358..d50dc2ca 100644
--- a/frontend/src/components/ElectionCardComponent.vue
+++ b/frontend/src/components/ElectionCardComponent.vue
@@ -33,22 +33,12 @@ import type {Voting} from "@/stores/voting";
 import {ref} from "vue";
 import {formatDate, formatTime, getStatus} from "@/commons/utils";
 
-defineProps<{
-  election: Voting
+const props = defineProps<{
+  election: Voting,
+  time: number,
 }>()
 
-const now = ref(new Date().getTime());
-
-function scheduleUpdateNow() {
-  setTimeout(updateNow, 1000);
-}
-
-function updateNow() {
-  now.value = new Date().getTime();
-  scheduleUpdateNow();
-}
-
-scheduleUpdateNow();
+const now = ref(props.time);
 
 function isOpen(election: Voting): boolean {
   return getStatus(election, now.value) === 'open';
diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue
index 5997db72..278da4c0 100644
--- a/frontend/src/components/ElectionComponent.vue
+++ b/frontend/src/components/ElectionComponent.vue
@@ -43,25 +43,15 @@ import type {Voting} from "@/stores/voting";
 import {capitalizeFirstLetter, formatDate, formatTime, getStatus} from "@/commons/utils";
 import {ref} from "vue";
 
-const now = ref(new Date().getTime());
-
-function scheduleUpdateNow() {
-  setTimeout(updateNow, 1000);
-}
-
-function updateNow() {
-  now.value = new Date().getTime();
-  scheduleUpdateNow();
-}
-
-scheduleUpdateNow();
-
 function isOpen(election: Voting): boolean {
   return getStatus(election, now.value) === 'open';
 }
-defineProps<{
-  election: Voting
+const props = defineProps<{
+  election: Voting,
+  time: number,
 }>()
+
+const now = ref(props.time);
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 757fede6..82567cea 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -4,7 +4,8 @@
   <div v-for="qualifier in qualifiers" :class="`elections col-10 center mx-auto election election-${qualifier} bg-light`" :key="`div-${qualifier}`">
     <a :href="`/elections?qualifier=${qualifier}`" class="election-link">{{ capitalizeFirstLetter(qualifier) }} Elections</a>
     <hr v-if="getData(qualifier).length > 0"/>
-    <Carousel :elections="sortElectionsByDate(getData(qualifier))"/>
+    <Carousel :elections="sortElectionsByDate(getData(qualifier))"
+              :time="now"/>
   </div>
 </template>
 
diff --git a/frontend/src/views/ElectionsView.vue b/frontend/src/views/ElectionsView.vue
index 47b60535..220c19fe 100644
--- a/frontend/src/views/ElectionsView.vue
+++ b/frontend/src/views/ElectionsView.vue
@@ -147,7 +147,8 @@ function resetPage() {
   <div class="container-sm col-10 col-md-8 text-center">
     <div v-if="displayedElections.length > 0">
       <div v-for="election in displayedElections" :key="String(election.id)" class="row election">
-        <ElectionComponent :election="election"/>
+        <ElectionComponent :election="election"
+                            :time="now"/>
       </div>
       <div class="pagination-buttons" v-if="totalPages>2">
         <button @click="prevPage" class="btn btn-primary" :disabled="currentPage === 1">&lt;</button>

From e62743c94f9e520cef0fad2f49512d16a27c5287 Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Wed, 31 Jan 2024 01:15:13 +0100
Subject: [PATCH 10/10] style: replace awful tables with boostrap cols + css
 improvements

---
 frontend/src/components/ElectionComponent.vue | 106 +++++++++---------
 frontend/src/views/ElectionsView.vue          |   5 +-
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue
index 278da4c0..775faf25 100644
--- a/frontend/src/components/ElectionComponent.vue
+++ b/frontend/src/components/ElectionComponent.vue
@@ -1,41 +1,38 @@
 <template>
-  <table>
-    <tr>
-      <td>
-        <div class="msg text-center">
-          <div class="row">
-            <p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
-          </div>
-          <div class="row">
-            <p class="links-container">
-              <a :href="`/elections/${election.id}`" class="useful-link">Details</a>
-              <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
-            </p>
-          </div>
-        </div>
-      </td>
-      <td>
-        <div class="date" aria-label="start date">
-          <span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
-            <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
-            </svg> {{formatDate(election.start).substring(0, 2)}}
-          </span><br/>
-          <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span><br/>
-          <span>{{formatTime(election.start)}}</span>
-        </div>
-      </td>
-      <td>
-        <div class="date" aria-label="end date">
-          <span class="first date"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
-            <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
-            </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
-          </span><br/>
-          <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span><br/>
-          <span>{{formatTime(election.end)}}</span>
-        </div>
-      </td>
-    </tr>
-  </table>
+  <div class="row">
+    <div class="col msg text-center">
+      <div class="row">
+        <p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
+      </div>
+      <div class="d-flex justify-content-center flex-wrap">
+        <a :href="`/elections/${election.id}`" class="useful-link">Details</a>
+        <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
+      </div>
+    </div>
+    <div class="col date my-auto" aria-label="start date">
+      <span class="first">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
+          <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
+        </svg> 
+        {{formatDate(election.start).substring(0, 2)}}
+      </span>
+      <br/>
+      <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span>
+      <br/>
+      <span>{{formatTime(election.start)}}</span>
+    </div>
+    <div class="col date my-auto" aria-label="end date">
+      <span class="first date">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
+          <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
+        </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
+      </span>
+      <br/>
+      <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span>
+      <br/>
+      <span>{{formatTime(election.end)}}</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -55,13 +52,9 @@ const now = ref(props.time);
 </script>
 
 <style scoped>
-
-table td + td {
-  border-left: 2px solid red;
-}
-
 div.date {
   color: #0d6efd;
+  border-left: 2px solid #e6308a;
   span.first {
     font-weight: bold;
     font-size: 2em;
@@ -74,15 +67,9 @@ div.date {
 
 p.name {
   font-weight: bold;
-  font-size: 1.1em;
-  color: #e6308a;
+  font-size: 1.2em;
   margin: 4% 0;
-}
-
-p.links-container {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 15%;
+  text-transform: uppercase;
 }
 
 a {
@@ -90,12 +77,21 @@ a {
   text-decoration: none;
 }
 
-a.useful-link {
-  margin: 0 10px;
-}
-
 a:hover {
   text-decoration: underline;
 }
 
-</style>
\ No newline at end of file
+a.useful-link {
+  padding: 6px 10px;
+  margin: 6px;
+  border-radius: 15px;
+  border: 1px solid #0d6efd;
+  text-decoration: none;
+  color: #0d6efd;
+}
+
+a.useful-link:hover {
+  font-weight: bold;
+  box-shadow: 1px 2px 5px rgba(200, 200, 200, 0.82);
+}
+</style>
diff --git a/frontend/src/views/ElectionsView.vue b/frontend/src/views/ElectionsView.vue
index 220c19fe..14ac6cf6 100644
--- a/frontend/src/views/ElectionsView.vue
+++ b/frontend/src/views/ElectionsView.vue
@@ -144,7 +144,7 @@ function resetPage() {
       </li>
     </ul>
   </div>
-  <div class="container-sm col-10 col-md-8 text-center">
+  <div class="container-sm col-12 col-md-8 text-center">
     <div v-if="displayedElections.length > 0">
       <div v-for="election in displayedElections" :key="String(election.id)" class="row election">
         <ElectionComponent :election="election"
@@ -174,4 +174,7 @@ div.radio-button {
 .no-election {
   font-weight: bold;
 }
+.election {
+  background-color: #f8f9fa;
+}
 </style>
\ No newline at end of file