webart
/
strava-frontend
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

split workout screen
Gitea Actions Demo / build_and_push (push) Failing after 47s Details

This commit is contained in:
artem 2024-11-06 17:22:04 +03:00
parent d29c5b4dad
commit 2c221c50dd
3 changed files with 176 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main.ts
View File

@ -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;

121
src/pages/workouts/WorkoutItem.vue
View File

@ -1,21 +1,16 @@
<template>
<h1 class="page-title">Tренировка</h1>
<yandex-map
v-model="map"
:settings="{
<div id="workout-container">
<div id="workout-map">
<yandex-map v-model="map" :settings="{
location: {
center: mapCenter,
zoom: 9,
},
}"
width="100%"
height="500px"
>
}" width="100%" height="350px">
<yandex-map-default-scheme-layer />
<yandex-map-default-features-layer />
<yandex-map-feature
:settings="{
<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);
@ -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>

34
src/pages/workouts/WorkoutList.vue
View File

@ -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) => {