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,81 +1,85 @@
-<div class="timers-container">
+<ion-page>
-  <div class="page-header">
+  <ion-content>
-    <h1>Таймеры</h1>
+    <div class="timers-container">
-  </div>
+      <div class="page-header">
+        <h1>Таймеры</h1>
+      </div>
 
-  <div class="timers-list">
+      <div class="timers-list">
-    <!-- Loading state -->
+        <!-- Loading state -->
-    <div v-if="loading" class="loading">
+        <div v-if="loading" class="loading">
-      <p>Загрузка таймеров...</p>
+          <p>Загрузка таймеров...</p>
-    </div>
-
-    <!-- Error state -->
-    <div v-else-if="error" class="error-message">
-      <p>{{ error }}</p>
-    </div>
-
-    <!-- Empty state -->
-    <div v-else-if="timers.length === 0" class="empty-state">
-      <p>Нет таймеров</p>
-    </div>
-
-    <!-- Timers list -->
-    <div v-else class="timer-cards">
-      <div
-        v-for="timer in timers"
-        :key="timer.id"
-        class="timer-card"
-        :class="{ expanded: expandedId === timer.id }"
-      >
-        <!-- Card header -->
-        <div class="card-header" @click="toggleExpand(timer.id)">
-          <div class="timer-icon">
-            <ion-icon :icon="timerOutline"></ion-icon>
-          </div>
-          <div class="timer-info">
-            <h3 class="timer-title">{{ timer.title }}</h3>
-            <p class="timer-subtitle">{{ timer.count_pomodoro }} помидоров по {{ timer.pomodoro_time }} минут</p>
-          </div>
-          <div class="expand-icon">
-            <ion-icon
-              :icon="expandedId === timer.id ? chevronUp : chevronDown"
-            ></ion-icon>
-          </div>
         </div>
 
-        <!-- Card content -->
+        <!-- Error state -->
-        <div v-show="expandedId === timer.id" class="card-content">
+        <div v-else-if="error" class="error-message">
-          <div class="timer-details">
+          <p>{{ error }}</p>
-            <div class="detail-row">
+        </div>
-              <span class="detail-label">Название:</span>
-              <span class="detail-value">{{ timer.title }}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Длительность помидора:</span>
-              <span class="detail-value">{{ timer.pomodoro_time }} минут</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">Количество помидоров:</span>
-              <span class="detail-value">{{ timer.count_pomodoro }}</span>
-            </div>
-          </div>
 
-          <div class="card-actions">
+        <!-- Empty state -->
-            <button class="btn btn-primary">
+        <div v-else-if="timers.length === 0" class="empty-state">
-              <ion-icon :icon="playCircleOutline"></ion-icon>
+          <p>Нет таймеров</p>
-              Открыть
+        </div>
-            </button>
+
-            <button class="btn btn-secondary">
+        <!-- Timers list -->
-              <ion-icon :icon="pencilOutline"></ion-icon>
+        <div v-else class="timer-cards">
-              Редактировать
+          <div
-            </button>
+            v-for="timer in timers"
-            <button class="btn btn-danger">
+            :key="timer.id"
-              <ion-icon :icon="trashOutline"></ion-icon>
+            class="timer-card"
-              Удалить
+            :class="{ expanded: expandedId === timer.id }"
-            </button>
+          >
+            <!-- Card header -->
+            <div class="card-header" @click="toggleExpand(timer.id)">
+              <div class="timer-icon">
+                <ion-icon :icon="timerOutline"></ion-icon>
+              </div>
+              <div class="timer-info">
+                <h3 class="timer-title">{{ timer.title }}</h3>
+                <p class="timer-subtitle">{{ timer.count_pomodoro }} помидоров по {{ timer.pomodoro_time }} минут</p>
+              </div>
+              <div class="expand-icon">
+                <ion-icon
+                  :icon="expandedId === timer.id ? chevronUp : chevronDown"
+                ></ion-icon>
+              </div>
+            </div>
+
+            <!-- Card content -->
+            <div v-show="expandedId === timer.id" class="card-content">
+              <div class="timer-details">
+                <div class="detail-row">
+                  <span class="detail-label">Название:</span>
+                  <span class="detail-value">{{ timer.title }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Длительность помидора:</span>
+                  <span class="detail-value">{{ timer.pomodoro_time }} минут</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Количество помидоров:</span>
+                  <span class="detail-value">{{ timer.count_pomodoro }}</span>
+                </div>
+              </div>
+
+              <div class="card-actions">
+                <button @click="goToTimer(timer.id)" class="btn btn-secondary">
+                  <ion-icon :icon="playCircleOutline"></ion-icon>
+                  Открыть
+                </button>
+                <button class="btn btn-secondary">
+                  <ion-icon :icon="pencilOutline"></ion-icon>
+                  Редактировать
+                </button>
+                <button class="btn btn-danger">
+                  <ion-icon :icon="trashOutline"></ion-icon>
+                  Удалить
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </ion-content>
-</div>
+</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
     }
   },
 })