split workout screen

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 = "https://cycle-rider.ru";
-// const HOST = "http://localhost:8000";
+const HOST = "http://localhost:8000";
 
 axios.defaults.baseURL = HOST;
 

src/pages/workouts/WorkoutItem.vue

@@ -1,21 +1,16 @@
-
 <template>
     <h1 class="page-title">Tренировка</h1>
-    <yandex-map
+    <div id="workout-container">
-        v-model="map"
+        <div id="workout-map">
-        :settings="{
+            <yandex-map v-model="map" :settings="{
                 location: {
                     center: mapCenter,
                     zoom: 9,
                 },
-        }"
+            }" width="100%" height="350px">
-        width="100%"
-        height="500px"
-    >
                 <yandex-map-default-scheme-layer />
                 <yandex-map-default-features-layer />
-        <yandex-map-feature
+                <yandex-map-feature :settings="{
-        :settings="{
                     geometry: {
                         type: 'LineString',
                         coordinates: lineCoordinates,
@@ -23,10 +18,45 @@
                     style: {
                         stroke: [{ color: '#007afce6', width: 4 }],
                     },
-        }"
+                }" />
-    />
             </yandex-map>
-    <VaButton v-on:click="resetChartZoom()" preset="secondary" color="textPrimary"  id="zoom-botton"  ><VaZoomOut /></VaButton>
+        </div>
+        <div id="workout-short-data" v-if="workoutItem">
+            <h3>{{ workoutItem.name }}</h3>
+            <div class="workout-item-params" v-if="workoutItem.power">
+                <div class="workout-item-params-name">Средняя мощность:</div>
+                <div class="workout-item-params-value">{{ workoutItem.power }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.distantion">
+                <div class="workout-item-params-name">Расстояние:</div>
+                <div class="workout-item-params-value">{{ distConvert(workoutItem.distantion) }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.temperature">
+                <div class="workout-item-params-name">Температура:</div>
+                <div class="workout-item-params-value">{{ workoutItem.temperature }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.heart_rate">
+                <div class="workout-item-params-name">Средний пульс:</div>
+                <div class="workout-item-params-value">{{ workoutItem.heart_rate }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.heart_rate">
+                <div class="workout-item-params-name">Максимальный пульс:</div>
+                <div class="workout-item-params-value">{{ workoutItem.heart_rate }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.speed">
+                <div class="workout-item-params-name">Средняя скорость:</div>
+                <div class="workout-item-params-value">{{ speedConvert(workoutItem.speed) }}</div>
+            </div>
+            <div class="workout-item-params" v-if="workoutItem.speed">
+                <div class="workout-item-params-name">Максимальная скорость:</div>
+                <div class="workout-item-params-value">{{ speedConvert(workoutItem.speed || 0) }}</div>
+            </div>
+
+        </div>
+    </div>
+    <VaButton v-on:click="resetChartZoom()" preset="secondary" color="textPrimary" id="zoom-botton">
+        <VaZoomOut />
+    </VaButton>
     <!-- @vue-ignore -->
     <LineWithLineChart id="chart" ref="chart" :options="chartOptions" :data="data" />
 </template>
@@ -55,6 +85,7 @@ import {
 import LineWithLineChart from './components/LineWithLineChart.js'
 import type { YMap } from '@yandex/ymaps3-types';
 import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer } from 'vue-yandex-maps';
+import { WorkoutItem, Attachment, secondsToDuration, distConvert, speedConvert } from "./Definitions.vue";
 
 //Можно использовать для различных преобразований
 const map = shallowRef<null | YMap>(null);
@@ -89,27 +120,6 @@ type ChartData = {
     "labels": Array<string>,
     "datasets": Array<ChartDataset>,
 }
-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;
-  latitude: number;
-  longitude: number;
-};
 let workoutItem = ref<WorkoutItem>();
 const data = ref<ChartData>({
     labels: [],
@@ -228,18 +238,45 @@ initWorkout(route.params.id as string);
 
 
 <style>
-.image-container {
-    cursor: pointer;
-    height: 300px;
-    width: 100%;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
 #zoom-botton {
     display: block;
     margin-top: 20px;
     margin-bottom: -35px;
     margin-left: 20px;
 }
+
+#workout-container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+
+#workout-map {
+    width: 70%;
+}
+
+#workout-short-data {
+    width: 30%;
+    padding: 0 0 0 20px;
+}
+h3 {
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-family: sans-serif;
+
+}
+.workout-item-params {
+    display: flex;
+    width: 100%;
+    justify-content:left;
+    color: #333;
+    padding: 0 0 5px 0 
+
+}
+.workout-item-params-name {
+    font-weight: bold;
+}
+.workout-item-params-value {
+    padding: 0 0 0 5px
+}
 </style>

src/pages/workouts/WorkoutList.vue

@@ -34,28 +34,9 @@ import { AxiosResponse, AxiosInstance } from "axios";
 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";
 
 
-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>>([]);
@@ -80,19 +61,6 @@ const deleteItem = (id: 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)
-}
 
 
 const openWorkout = (id: string) => {