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%"
+                <yandex-map-default-scheme-layer />
-        height="500px"
+                <yandex-map-default-features-layer />
-    >
+                <yandex-map-feature :settings="{
-        <yandex-map-default-scheme-layer/>
-        <yandex-map-default-features-layer/>
-        <yandex-map-feature
-        :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);
@@ -80,42 +111,21 @@ const route = useRoute()
 
 type ChartDataset = {
     "radius": number,
-    "label":string ,
+    "label": string,
-    "backgroundColor":string ,
+    "backgroundColor": string,
-    "borderColor":string ,
+    "borderColor": string,
-    "data":Array<number> ,
+    "data": Array<number>,
 }
 type ChartData = {
-    "labels":Array<string> ,
+    "labels": Array<string>,
-    "datasets":Array<ChartDataset> ,
+    "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: [],
     datasets: [],
 })
-const chartOptions ={
+const chartOptions = {
     responsive: true,
     scales: {
         yAxes: {
@@ -132,7 +142,7 @@ const chartOptions ={
         x: {
             type: 'time',
             time: {
-                displayFormats: {hour: 'HH:mm'}
+                displayFormats: { hour: 'HH:mm' }
             }
         }
     },
@@ -143,7 +153,7 @@ const chartOptions ={
             footerMarginTop: 10,
             displayColors: false,
             callbacks: {
-                    label: function(context: any) {
+                label: function (context: any) {
                     let label = context.dataset.label || '';
 
                     if (label) {
@@ -174,7 +184,7 @@ const chartOptions ={
     }
 }
 const msToKmh = (ms: number) => ms * 3.6;
-const axiosAuth= inject('axiosAuth') as AxiosInstance;
+const axiosAuth = inject('axiosAuth') as AxiosInstance;
 
 const resetChartZoom = () => {
     resetZoom(chart.value.chart);
@@ -207,9 +217,9 @@ const initWorkout = (id: string) => {
             data.value = {
                 labels: times,
                 datasets: [
-                {radius: 0, label: 'Скорость', borderColor: '#00aa00', backgroundColor: '#00aa00',data: speed},
+                    { radius: 0, label: 'Скорость', borderColor: '#00aa00', backgroundColor: '#00aa00', data: speed },
-                {radius: 0, label: 'Пульс',borderColor: '#990000', backgroundColor: '#990000', data: heart_rate,},
+                    { radius: 0, label: 'Пульс', borderColor: '#990000', backgroundColor: '#990000', data: heart_rate, },
-                {radius: 0, label: 'Мощность', borderColor: '#cccccc', backgroundColor: '#cccccc', data: power,},
+                    { radius: 0, label: 'Мощность', borderColor: '#cccccc', backgroundColor: '#cccccc', data: power, },
                 ]
 
             }
@@ -228,18 +238,45 @@ initWorkout(route.params.id as string);
 
 
 <style>
-.image-container {
+#zoom-botton {
-    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) => {