add page workout

src/components/sidebar/NavigationRoutes.ts

@@ -18,13 +18,6 @@ export default {
         icon: "vuestic-iconset-dashboard",
       },
     },
-    // {
-    //   name: 'users',
-    //   displayName: 'menu.users',
-    //   meta: {
-    //     icon: 'group',
-    //   },
-    // },
     {
       name: 'workouts',
       displayName: 'menu.workouts',
@@ -35,6 +28,12 @@ export default {
           {
             name: 'list_workouts',
             displayName: 'menu.list_workouts',
+            children: [
+              {
+                name: 'workout_item',
+                displayName: 'Тренировка',
+              },
+            ]
           },
           {
             name: 'upload_workouts',
@@ -42,76 +41,5 @@ export default {
           }
         ],
     },
-    // {
-    //   name: 'payments',
-    //   displayName: 'menu.payments',
-    //   meta: {
-    //     icon: 'credit_card',
-    //   },
-    //   children: [
-    //     {
-    //       name: 'payment-methods',
-    //       displayName: 'menu.payment-methods',
-    //     },
-    //     {
-    //       name: 'pricing-plans',
-    //       displayName: 'menu.pricing-plans',
-    //     },
-    //     {
-    //       name: 'billing',
-    //       displayName: 'menu.billing',
-    //     },
-    //   ],
-    // },
-    // {
-    //   name: 'auth',
-    //   displayName: 'menu.auth',
-    //   meta: {
-    //     icon: 'login',
-    //   },
-    //   children: [
-    //     {
-    //       name: 'login',
-    //       displayName: 'menu.login',
-    //     },
-    //     {
-    //       name: 'signup',
-    //       displayName: 'menu.signup',
-    //     },
-    //     {
-    //       name: 'recover-password',
-    //       displayName: 'menu.recover-password',
-    //     },
-    //   ],
-    // },
-
-    // {
-    //   name: 'faq',
-    //   displayName: 'menu.faq',
-    //   meta: {
-    //     icon: 'quiz',
-    //   },
-    // },
-    // {
-    //   name: '404',
-    //   displayName: 'menu.404',
-    //   meta: {
-    //     icon: 'vuestic-iconset-files',
-    //   },
-    // },
-    // {
-    //   name: 'preferences',
-    //   displayName: 'menu.preferences',
-    //   meta: {
-    //     icon: 'manage_accounts',
-    //   },
-    // },
-    // {
-    //   name: 'settings',
-    //   displayName: 'menu.settings',
-    //   meta: {
-    //     icon: 'settings',
-    //   },
-    // },
   ] as INavigationRoute[],
 };

src/pages/workouts/WorkoutItem.vue

@@ -0,0 +1,46 @@
+
+<template>
+    <h1 class="page-title">Tренировка</h1>
+    
+</template>
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { AxiosResponse, AxiosInstance } from "axios";
+import { ref, inject } from 'vue'
+import { useToast } from "vuestic-ui/web-components";
+
+const { init } = useToast();
+const route = useRoute()
+
+
+type WorkoutItem = {
+    "latitude": number,
+    "longitude":number ,
+    "time": string,
+    "power": number,
+    "heart_rate": number,
+    "cadence": number,
+    "temperature": number,
+    "speed": number
+};
+const axiosAuth= inject('axiosAuth') as AxiosInstance;
+let workoutItems = ref<Array<WorkoutItem>>([]);
+const initWorkout = (id: string) => {
+    axiosAuth
+    .get(`/api/v0/workouts/${id}`)
+    .then((response: AxiosResponse) => {
+        workoutItems.value = response.data.results;
+    })
+    .catch((error: any) => {
+        console.log(error);
+        init({
+            message: "Что-то пошло не так.",
+            color: "error",
+        });
+    });
+};
+initWorkout(route.params.id as string);
+</script>
+  
+    
+  

src/pages/workouts/WorkoutList.vue

@@ -8,7 +8,7 @@
   </template>
   <template v-if="workoutItems.length>0" v-for="(item, index) in workoutItems" :key="item.id">
     <article class="news-item">
-      <div class="news-item-header" >
+      <div class="news-item-header" v-on:click="openWorkout(item.id)">
         <h3>{{ item.name }}</h3>
         <VaIcon name="delete_forever" size="22px" color="#bbc1c3" class="news-item-icon" @click="deleteItem(item.id)"/>
       </div>
@@ -20,7 +20,10 @@
             <li><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
             <li><span>Мощность:</span> {{ Math.round(item.power) }}</li>
         </ul>
-        <div v-if="item.attachment" class="image-container" :style="{'background-image': `url(${item.attachment.url})` }"></div>
+        <div v-if="item.attachment" 
+        class="image-container" 
+        :style="{'background-image': `url(${item.attachment.url})` }"
+        v-on:click="openWorkout(item.id)"></div>
     </article>
   </template>
   </section>
@@ -30,6 +33,33 @@
 import { AxiosResponse, AxiosInstance } from "axios";
 import { ref, inject } from 'vue';
 import { useToast } from "vuestic-ui/web-components";
+import { useRouter } from "vue-router";
+
+
+type Attachment = {
+  url: string;
+}
+type WorkoutItem = {
+  id: string;
+  name: string;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+  description: string;
+  cadence: number;
+  heart_rate: number;
+  temperature: number;
+  speed: number;
+  power: number;
+  duraion_sec: number;
+  distantion: number;
+  attachment: Attachment;
+};
+
+const { push } = useRouter();
+const axiosAuth= inject('axiosAuth') as AxiosInstance;
+let workoutItems = ref<Array<WorkoutItem>>([]);
+const { init } = useToast();
 
 const deleteItem = (id: string) => {
   axiosAuth
@@ -64,29 +94,10 @@ const speedConvert = (speed: number) => {
   return Math.round(speed*3.6)
 }
 
-type Attachment = {
-  url: string;
-}
-type WorkoutItem = {
-  id: string;
-  name: string;
-  created_by: string;
-  created_at: string;
-  updated_at: string;
-  description: string;
-  cadence: number;
-  heart_rate: number;
-  temperature: number;
-  speed: number;
-  power: number;
-  duraion_sec: number;
-  distantion: number;
-  attachment: Attachment;
-};
 
-const axiosAuth= inject('axiosAuth') as AxiosInstance;
+const openWorkout = (id: string) => {
-let workoutItems = ref<Array<WorkoutItem>>([]);
+  push({ name: "workout_item", params: {id: id}}).catch((error) => {});
-const { init } = useToast();
+};
 
 const initWorkouts = () => {
   axiosAuth
@@ -101,12 +112,14 @@ const initWorkouts = () => {
           color: "error",
         });
     });
-}
+};
+
 initWorkouts();
 </script>
 
 <style>
 .image-container {
+  cursor: pointer;
   height: 300px;
   width: 100%;
   background-position: 50% 50%;
@@ -133,6 +146,7 @@ initWorkouts();
 }
 
 .news-item-header {
+  cursor: pointer;
   display: flex;
   justify-content: space-between;
 

src/router/index.ts

@@ -27,13 +27,18 @@ const routes: Array<RouteRecordRaw> = [
         children: [
           {
             name: "list_workouts",
-            path: "list",
+            path: "",
             component: () => import("../pages/workouts/WorkoutList.vue"),
           },
           {
             name: "upload_workouts",
             path: "upload",
             component: () => import("../pages/workouts/WorkoutUpload.vue"),
+          },
+          {
+            name: "workout_item",
+            path: "workouts/:id",
+            component: () => import("../pages/workouts/WorkoutItem.vue"), 
           }
         ],
       },