From 24010da98708debda5665b5f78a1d11f12bf8ab4 Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Mon, 30 Dec 2024 11:26:53 +0300
Subject: [PATCH] edit workout

---
 src/main.ts                        |   4 +-
 src/pages/workouts/Definitions.vue |   6 ++
 src/pages/workouts/Feed.vue        |   3 +-
 src/pages/workouts/WorkoutItem.vue | 106 +++++++++++++++++++++++++++--
 src/pages/workouts/WorkoutList.vue |   1 +
 5 files changed, 113 insertions(+), 7 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 1ae1a18..c31e6a4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,8 +11,8 @@ import axios from 'axios';
 import { AxiosResponse } from "axios";
 import { createYmaps } from 'vue-yandex-maps';
 
-const HOST = "https://cycle-rider.ru";
-// const HOST = "http://localhost:8000";
+// const HOST = "https://cycle-rider.ru";
+const HOST = "http://localhost:8000";
 
 axios.defaults.baseURL = HOST;
 
diff --git a/src/pages/workouts/Definitions.vue b/src/pages/workouts/Definitions.vue
index 8349095..72fed78 100644
--- a/src/pages/workouts/Definitions.vue
+++ b/src/pages/workouts/Definitions.vue
@@ -3,6 +3,10 @@
     export type Attachment = {
         url: string;
     }
+    export type WorkoutLink = {
+      type: string;
+      value: string;
+    }
     export type WorkoutItem = {
         id: string;
         name: string;
@@ -24,6 +28,8 @@
         attachment: Attachment;
         latitude: number;
         longitude: number;
+        is_public: boolean;
+        external_links: Array<WorkoutLink>;
     }
     export const secondsToDuration = (seconds: number) =>  {
         let hours = Math.floor(seconds / 3600);
diff --git a/src/pages/workouts/Feed.vue b/src/pages/workouts/Feed.vue
index 787ff2e..a82d3e4 100644
--- a/src/pages/workouts/Feed.vue
+++ b/src/pages/workouts/Feed.vue
@@ -16,6 +16,7 @@
               <li v-if="item.distantion"><span>Расстояние:</span> {{ distConvert(item.distantion) }} км</li>
               <li v-if="item.duraion_sec"><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
               <li v-if="item.power"><span>Мощность:</span> {{ Math.round(item.power) }} Вт</li>
+              <li v-if="item.external_links"><span>Ссылки:</span> <a :href="item.external_links[0].value" target="_blank">Дзен</a></li>
           </ul>
           <div v-if="item.attachment" 
           class="image-container" 
@@ -31,7 +32,7 @@
   import { ref, inject } from 'vue';
   import { useToast } from "vuestic-ui/web-components";
   import { useRouter } from "vue-router";
-  import { WorkoutItem, Attachment, secondsToDuration, distConvert, speedConvert } from "./Definitions.vue";
+  import { WorkoutItem, secondsToDuration, distConvert, speedConvert } from "./Definitions.vue";
   
   
   const { push } = useRouter();
diff --git a/src/pages/workouts/WorkoutItem.vue b/src/pages/workouts/WorkoutItem.vue
index ea6330f..f1f08f5 100644
--- a/src/pages/workouts/WorkoutItem.vue
+++ b/src/pages/workouts/WorkoutItem.vue
@@ -26,7 +26,10 @@
             </yandex-map>
         </div>
         <div id="workout-short-data">
-            <h3>{{ workoutItem.name }}</h3>
+            <div class="workout-item-editable-title">
+                <h3>{{ workoutItem.name }}</h3>
+                <VaIcon name="edit" @click="showModalTitle = !showModalTitle"/>
+            </div>
             <div class="workout-item-params" v-if="workoutItem.power">
                 <div class="workout-item-params-name">Средняя мощность:</div>
                 <div class="workout-item-params-value">{{ Math.floor(workoutItem.power) }} Вт</div>
@@ -59,6 +62,15 @@
                 <div class="workout-item-params-name">Максимальная скорость:</div>
                 <div class="workout-item-params-value">{{ speedConvert(workoutItem.max_speed || 0) }} км / ч</div>
             </div>
+            <div class="workout-item-params" >
+                <div class="workout-item-params-name">Сделать публичной:&nbsp;</div>
+                <input type="checkbox" v-model="workoutItem.is_public" v-on:change="changePublic(workoutItem.is_public)">
+            </div>
+            <div class="workout-item-params" >
+                <div class="workout-item-params-name">Ссылки на описание:</div>
+                <div  v-if="dzenLink"><a :href="dzenLink" target="_blank">Дзен</a></div>
+                <div  v-else><a @click="showModalLink = !showModalLink">Добавить</a>    </div>
+            </div>
 
         </div>
     </div>
@@ -83,6 +95,23 @@
         >
         </VaInnerLoading>
     </div>
+    <VaModal
+        v-model="showModalTitle"
+        ok-text="OK"
+        :beforeOk="saveName"
+        >
+            <h3>Редактирование названия</h3>
+            <input v-if="workoutItem" v-model="workoutItem.name" type="text" placeholder="Название" class="workout-item-input" />
+            <div v-else>Тренировка не найдена</div>
+    </VaModal>
+    <VaModal
+        v-model="showModalLink"
+        ok-text="OK"
+        :beforeOk="saveLink"
+        >
+            <h3>Редактирование ссылок</h3>
+            <input v-model="dzenLink" type="text" placeholder="Название" class="workout-item-input" />
+    </VaModal>
 </template>
 <script setup lang="ts">
 import VaZoomOut from "../../components/icons/VaZoomOut.vue";
@@ -90,7 +119,7 @@ import VaZoomOut from "../../components/icons/VaZoomOut.vue";
 
 import { useRoute } from 'vue-router'
 import 'chartjs-adapter-moment';
-import { AxiosResponse, AxiosInstance } from "axios";
+import { AxiosResponse, AxiosInstance, AxiosError } from "axios";
 import { ref, inject, shallowRef } from 'vue'
 import { useToast } from "vuestic-ui/web-components";
 import zoomPlugin, { resetZoom } from 'chartjs-plugin-zoom';
@@ -109,7 +138,8 @@ import {
 import LineWithLineChart from './components/LineWithLineChart.js'
 import type { YMap } from '@yandex/ymaps3-types';
 import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapDefaultMarker } from 'vue-yandex-maps';
-import { WorkoutItem, distConvert, speedConvert } from "./Definitions.vue";
+import { WorkoutItem, distConvert, speedConvert, WorkoutLink } from "./Definitions.vue";
+
 
 //Можно использовать для различных преобразований
 const map = shallowRef<null | YMap>(null);
@@ -117,6 +147,9 @@ const chart = ref();
 let mapCenter = ref<Array<number>>([37.617644, 55.755819]);
 let lineCoordinates = ref<Array<Array<number>>>([]);
 let currentCoordinates = ref<Array<number> | null>([]);
+let showModalTitle = ref(false);
+const showModalLink = ref(false);
+const dzenLink = ref("");
 ChartJS.register(
     Title,
     Tooltip,
@@ -227,6 +260,52 @@ const chartOptions = {
 }
 const msToKmh = (ms: number) => ms * 3.6;
 const axiosAuth = inject('axiosAuth') as AxiosInstance;
+const saveLink = (hide: any) => {
+    if (!dzenLink.value.includes("https://dzen.ru/")) {
+        init({
+            message: "Неверный формат ссылки",
+            color: "error",
+        });
+        return;
+    }
+    axiosAuth
+        .patch(`/api/v0/workouts/${workoutItem.value?.id}`,{ links: [{"value": dzenLink.value, "type": "dzen"}] })
+        .then((response: AxiosResponse) => {
+            hide();
+        }).catch((error: AxiosError) => {
+            console.log(error);
+            init({
+                message: "Что-то пошло не так.",
+                color: "error",
+            });
+        });
+    };
+const saveName = (hide: any) => {
+    axiosAuth
+        .patch(`/api/v0/workouts/${workoutItem.value?.id}`,{ name: workoutItem.value?.name })
+        .then((response: AxiosResponse) => {
+            hide();
+        }).catch((error: AxiosError) => {
+            console.log(error);
+            init({
+                message: "Что-то пошло не так.",
+                color: "error",
+            });
+        });
+    };
+const changePublic = (value: boolean) => {
+    axiosAuth
+        .patch(`/api/v0/workouts/${workoutItem.value?.id}`,{ is_public: value })
+        .then((response: AxiosResponse) => {
+
+        }).catch((error: AxiosError) => {
+            console.log(error);
+            init({
+                message: "Что-то пошло не так.",
+                color: "error",
+            });
+        });
+    };
 
 const resetChartZoom = () => {
     resetZoom(chart.value.chart);
@@ -279,8 +358,12 @@ const initWorkout = (id: string) => {
                 datasets: datasets
 
             }
+            console.log(response.data.workout.external_links);
+            if (response.data.workout.external_links) {
+                dzenLink.value = response.data.workout.external_links[0].value;
+            }
         })
-        .catch((error: any) => {
+        .catch((error: AxiosError) => {
             console.log(error);
             init({
                 message: "Что-то пошло не так.",
@@ -335,4 +418,19 @@ h3 {
 .workout-item-params-value {
     padding: 0 0 0 5px
 }
+.workout-item-editable-title {
+    display: flex;
+    width: 100%;
+    justify-self: start;
+}
+.workout-item-editable-title h3 {
+    padding-right: 5px;
+}
+.workout-item-editable-title i {
+   cursor: pointer;
+}
+.workout-item-input {
+    border: #333 1px solid;
+    padding-left: 5px;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/workouts/WorkoutList.vue b/src/pages/workouts/WorkoutList.vue
index e0d15f9..7b1d153 100644
--- a/src/pages/workouts/WorkoutList.vue
+++ b/src/pages/workouts/WorkoutList.vue
@@ -19,6 +19,7 @@
             <li v-if="item.distantion"><span>Расстояние:</span> {{ distConvert(item.distantion) }} км</li>
             <li v-if="item.duraion_sec"><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
             <li v-if="item.power"><span>Мощность:</span> {{ Math.round(item.power) }} Вт</li>
+            <li v-if="item.external_links"><span>Ссылки:</span> <a :href="item.external_links[0].value" target="_blank">Дзен</a></li>
         </ul>
         <div v-if="item.attachment" 
         class="image-container"