workouts list + delete

src/pages/workouts/WorkoutList.vue

@@ -3,19 +3,22 @@
   <h1 class="page-title">Тренировки</h1>
 
   <section class="news-feed">
-  <template v-if="!workoutItems">
+  <template v-if="workoutItems.length==0">
     <div>Тренировки не найдены</div>
   </template>
-  <template v-if="workoutItems" v-for="(item, index) in workoutItems" :key="item.id">
+  <template v-if="workoutItems.length>0" v-for="(item, index) in workoutItems" :key="item.id">
     <article class="news-item">
+      <div class="news-item-header" >
         <h3>{{ item.name }}</h3>
+        <VaIcon name="delete_forever" size="22px" color="#bbc1c3" class="news-item-icon" @click="deleteItem(item.id)"/>
+      </div>
         <ul class="metadata">
-            <li><span>Скорость:</span> {{ item.speed }} км/ч</li>
+            <li><span>Скорость:</span> {{ speedConvert(item.speed) }} км/ч</li>
             <li><span>Пульс:</span> {{ item.heart_rate }} уд  /мин</li>
             <li><span>Каденс:</span> {{ item.cadence }} об/мин</li>
-            <li><span>Расстояние:</span> 5 км</li>
+            <li><span>Расстояние:</span> {{ distConvert(item.distantion) }} км</li>
             <li><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
-            <li><span>Мощность:</span> {{ item.power }} км</li>
+            <li><span>Мощность:</span> {{ Math.round(item.power) }}</li>
         </ul>
         <!-- <img src="img/first_workout.jpg" alt="Изображение первой тренировки"> -->
     </article>
@@ -28,14 +31,39 @@ import { AxiosResponse, AxiosInstance } from "axios";
 import { ref, inject } from 'vue';
 import { useToast } from "vuestic-ui/web-components";
 
+const deleteItem = (id: string) => {
+  axiosAuth
+  .delete(`/api/v0/workouts/${id}`)
+  .then((_: AxiosResponse) => {
+      init({
+        message: "Тренировка успешно удалена.",
+        color: "success",
+      });
+      initWorkouts();
+  })
+  .catch((error: any) => {
+    console.log(error);
+      init({
+        message: "Что-то пошло не так.",
+        color: "error",
+      });
+  });
+};
 
-
-function secondsToDuration(seconds: number) : string  {
+const secondsToDuration = (seconds: number) =>  {
     var hours = Math.floor(seconds / 3600);
     var minutes = Math.floor((seconds % 3600) / 60);
     return `${hours} ч. ${minutes} мин.`;
 }
 
+const distConvert = (speed: number) => {
+  return Math.round(speed/1000)
+}
+
+const speedConvert = (speed: number) => {
+  return Math.round(speed*3.6)
+}
+
 
 type WorkoutItem = {
   id: string;
@@ -50,24 +78,28 @@ type WorkoutItem = {
   speed: number;
   power: number;
   duraion_sec: number;
+  distantion: number;
 };
 
 const axiosAuth= inject('axiosAuth') as AxiosInstance;
 let workoutItems = ref<Array<WorkoutItem>>([]);
 const { init } = useToast();
 
-axiosAuth
-  .get(`/api/v0/workouts`)
-  .then((response: AxiosResponse) => {
-    workoutItems.value = response.data.results;
-  })
-  .catch((error: any) => {
-    console.log(error);
-      init({
-        message: "Что-то пошло не так.",
-        color: "error",
-      });
-  });
+const initWorkouts = () => {
+  axiosAuth
+    .get(`/api/v0/workouts`)
+    .then((response: AxiosResponse) => {
+      workoutItems.value = response.data.results;
+    })
+    .catch((error: any) => {
+      console.log(error);
+        init({
+          message: "Что-то пошло не так.",
+          color: "error",
+        });
+    });
+}
+initWorkouts();
 </script>
 
 <style>
@@ -100,6 +132,15 @@ axiosAuth
     width: 100%;
 }
 
+.news-item-header {
+  display: flex;
+  justify-content: space-between;
+
+}
+.news-item-icon {
+  cursor: pointer;
+}
+
 .news-item img {
     width: 100%;
     height: auto;
@@ -112,9 +153,11 @@ axiosAuth
     font-weight: bold;
     color: #3d3d3d;
 }
+
 .metadata {
   border-top: #9c9a9a 1px solid;
 }
+
 .metadata li {
     list-style: none;
     display: inline-block;