feat: added router for Timer

client/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import type { RouteRecordRaw } from 'vue-router';
 import TimersList from '@/views/TimersList/TimersList.vue';
+import Timer from '@/views/Timer/Timer.vue';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -11,6 +12,11 @@ const routes: RouteRecordRaw[] = [
     path: '/timers',
     name: 'Timers',
     component: TimersList
+  },
+  {
+    path: '/timer/:id',
+    name: 'Timer',
+    component: Timer
   }
 ];
 

client/src/views/TimersList/TimersList.html

@@ -1,4 +1,6 @@
-<div class="timers-container">
+<ion-page>
+  <ion-content>
+    <div class="timers-container">
       <div class="page-header">
         <h1>Таймеры</h1>
       </div>
@@ -61,7 +63,7 @@
               </div>
 
               <div class="card-actions">
-            <button class="btn btn-primary">
+                <button @click="goToTimer(timer.id)" class="btn btn-secondary">
                   <ion-icon :icon="playCircleOutline"></ion-icon>
                   Открыть
                 </button>
@@ -78,4 +80,6 @@
           </div>
         </div>
       </div>
-</div>
+    </div>
+  </ion-content>
+</ion-page>

client/src/views/TimersList/TimersList.ts

@@ -1,5 +1,6 @@
 import { defineComponent, onMounted, ref } from 'vue'
-import { IonIcon } from '@ionic/vue'
+import { IonIcon, IonPage, IonContent } from '@ionic/vue'
+import { useRouter } from 'vue-router';
 import {
   timerOutline,
   chevronUp,
@@ -14,13 +15,19 @@ import type { TimersRow } from '@/types/timerType'
 
 export default defineComponent({
   name: 'TimersList',
-  components: { IonIcon },
+  components: { IonIcon, IonPage, IonContent },
   setup() {
     const timers = ref<TimersRow[]>([])
     const loading = ref<boolean>(true)
     const error = ref<string | null>(null)
     const expandedId = ref<number | null>(null)
 
+    const router = useRouter();
+
+    const goToTimer = (id: number) => {
+      router.push(`/timer/${id}`);
+    };
+
     const loadTimers = async (): Promise<void> => {
       loading.value = true
       error.value = null
@@ -55,6 +62,7 @@ export default defineComponent({
       playCircleOutline,
       pencilOutline,
       trashOutline,
+      goToTimer
     }
   },
 })