feat: counter

Author: CorentinTh

src/modules/counter/counter.store.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  persist: true,
+  state: () => ({
+    countCurrent: 0,
+    countGlobal: 0,
+  }),
+  actions: {
+    increment() {
+      this.countCurrent++
+      this.countGlobal++
+    },
+    decrement() {
+      this.countCurrent--
+    },
+  }
+});

src/modules/counter/counter.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { useMediaQuery, useNow } from '@vueuse/core';
+import { useCounterStore } from './counter.store';
+
+const store = useCounterStore()
+const isMobile = useMediaQuery('(max-width: 440px)')
+const now = useNow()
+</script>
+
+<template>
+  <div class="page-wrapper">
+    <div class="content-wrapper">
+      <n-space justify="center">
+        <n-time :time="now" format="hh:mm:ss" class="time" />
+      </n-space>
+      <br>
+      <br>
+      <n-space item-style="flex:1 1 0">
+        <n-card style="width: 100%">
+          <n-statistic tabular-nums label="Actuellement"> 
+            <n-space justify="center" class="timer timer-current">
+              {{ store.countCurrent }}
+            </n-space>
+          </n-statistic>
+        </n-card>
+
+        <n-card style="width: 100%">
+          <n-statistic tabular-nums label="Au total"> 
+            <n-space justify="center" class="timer timer-global">
+              {{ store.countGlobal }}
+            </n-space>
+          </n-statistic>
+        </n-card>
+      </n-space>
+      <br>
+      <n-space vertical>
+        <n-button class="button" secondary @click="store.increment">
+          +1
+        </n-button>
+        <n-button class="button" secondary @click="store.decrement">
+          -1
+        </n-button>
+
+        <n-space item-style="flex:1 1 0" :vertical="isMobile">
+          <n-popconfirm
+            positive-text="Reset"
+            negative-text="Annuler"
+            @positive-click="() => store.countCurrent = 0"
+          >
+            <template #trigger>
+              <n-button tertiary style="width: 100%">
+                Reset le compteur actuel
+              </n-button>
+            </template>
+            Êtes-vous sûr·e·s de vouloir reset le compteur actuel ?
+          </n-popconfirm>
+          <n-popconfirm
+            positive-text="Reset"
+            negative-text="Annuler"
+            @positive-click="() => store.countGlobal = 0"
+          >
+            <template #trigger>
+              <n-button tertiary style="width: 100%">
+                Reset le compteur global
+              </n-button>
+            </template>
+            Êtes-vous sûr·e·s de vouloir reset le compteur global ?
+          </n-popconfirm>
+        </n-space>
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.page-wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f5f5fb;
+  padding: 60px 25px;
+  box-sizing: border-box;
+
+  .content-wrapper {
+    max-width: 550px;
+    margin: 0 auto;
+  }
+
+
+  .time {
+    opacity: 0.6;
+    font-size: 25px;
+  }
+
+.button {
+  width: 100%;
+  padding: 35px 0;
+  font-size: 25px;
+}
+  .timer {
+    font-size: 60px;
+
+  }
+}
+</style>

src/plugins/naive.plugin.ts

@@ -35,9 +35,13 @@ import {
   NDropdown,
   NEllipsis,
   NDivider,
+  NStatistic,
+  NTime
 } from 'naive-ui';
 
 const components = [
+  NTime,
+  NStatistic,
   NDivider,
   NEllipsis,
   NDropdown,

src/router.ts

@@ -4,6 +4,7 @@ import Dashboard from '@/modules/dashboard/dashboard.vue';
 import Controls from '@/modules/controls/controls.vue';
 import Create from '@/modules/create/create.vue';
 import Boards from '@/modules/boards/board.vue';
+import Counter from '@/modules/counter/counter.vue';
 import NotFound from '/src/pages/404.vue';
 import About from '/src/pages/about.vue';
 import { layouts } from '@/layouts';
@@ -53,6 +54,14 @@ export const router = createRouter({
         layout: layouts.navbar,
       },
     },
+    {
+      path: '/counter',
+      name: 'Counter',
+      component: Counter,
+      meta: {
+        layout: layouts.navbar,
+      },
+    },
     {
       path: '/:pathMatch(.*)*',
       name: '404',