add page workout
Gitea Actions Demo / build_and_push (push) Successful in 1m41s
Details
Gitea Actions Demo / build_and_push (push) Successful in 1m41s
Details
This commit is contained in:
parent
1e1fed6346
commit
cc76a756bf
|
|
@ -18,100 +18,28 @@ export default {
|
|||
icon: "vuestic-iconset-dashboard",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'users',
|
||||
// displayName: 'menu.users',
|
||||
// meta: {
|
||||
// icon: 'group',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: 'workouts',
|
||||
displayName: 'menu.workouts',
|
||||
meta: {
|
||||
icon: 'folder_shared',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'list_workouts',
|
||||
displayName: 'menu.list_workouts',
|
||||
},
|
||||
{
|
||||
name: 'upload_workouts',
|
||||
displayName: 'menu.upload_workouts',
|
||||
}
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'payments',
|
||||
// displayName: 'menu.payments',
|
||||
// meta: {
|
||||
// icon: 'credit_card',
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// name: 'payment-methods',
|
||||
// displayName: 'menu.payment-methods',
|
||||
// },
|
||||
// {
|
||||
// name: 'pricing-plans',
|
||||
// displayName: 'menu.pricing-plans',
|
||||
// },
|
||||
// {
|
||||
// name: 'billing',
|
||||
// displayName: 'menu.billing',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: 'auth',
|
||||
// displayName: 'menu.auth',
|
||||
// meta: {
|
||||
// icon: 'login',
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// name: 'login',
|
||||
// displayName: 'menu.login',
|
||||
// },
|
||||
// {
|
||||
// name: 'signup',
|
||||
// displayName: 'menu.signup',
|
||||
// },
|
||||
// {
|
||||
// name: 'recover-password',
|
||||
// displayName: 'menu.recover-password',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: 'faq',
|
||||
// displayName: 'menu.faq',
|
||||
// meta: {
|
||||
// icon: 'quiz',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '404',
|
||||
// displayName: 'menu.404',
|
||||
// meta: {
|
||||
// icon: 'vuestic-iconset-files',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'preferences',
|
||||
// displayName: 'menu.preferences',
|
||||
// meta: {
|
||||
// icon: 'manage_accounts',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'settings',
|
||||
// displayName: 'menu.settings',
|
||||
// meta: {
|
||||
// icon: 'settings',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: 'workouts',
|
||||
displayName: 'menu.workouts',
|
||||
meta: {
|
||||
icon: 'folder_shared',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'list_workouts',
|
||||
displayName: 'menu.list_workouts',
|
||||
children: [
|
||||
{
|
||||
name: 'workout_item',
|
||||
displayName: 'Тренировка',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'upload_workouts',
|
||||
displayName: 'menu.upload_workouts',
|
||||
}
|
||||
],
|
||||
},
|
||||
] as INavigationRoute[],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
|
||||
<template>
|
||||
<h1 class="page-title">Tренировка</h1>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { AxiosResponse, AxiosInstance } from "axios";
|
||||
import { ref, inject } from 'vue'
|
||||
import { useToast } from "vuestic-ui/web-components";
|
||||
|
||||
const { init } = useToast();
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
type WorkoutItem = {
|
||||
"latitude": number,
|
||||
"longitude":number ,
|
||||
"time": string,
|
||||
"power": number,
|
||||
"heart_rate": number,
|
||||
"cadence": number,
|
||||
"temperature": number,
|
||||
"speed": number
|
||||
};
|
||||
const axiosAuth= inject('axiosAuth') as AxiosInstance;
|
||||
let workoutItems = ref<Array<WorkoutItem>>([]);
|
||||
const initWorkout = (id: string) => {
|
||||
axiosAuth
|
||||
.get(`/api/v0/workouts/${id}`)
|
||||
.then((response: AxiosResponse) => {
|
||||
workoutItems.value = response.data.results;
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.log(error);
|
||||
init({
|
||||
message: "Что-то пошло не так.",
|
||||
color: "error",
|
||||
});
|
||||
});
|
||||
};
|
||||
initWorkout(route.params.id as string);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
<template v-if="workoutItems.length>0" v-for="(item, index) in workoutItems" :key="item.id">
|
||||
<article class="news-item">
|
||||
<div class="news-item-header" >
|
||||
<div class="news-item-header" v-on:click="openWorkout(item.id)">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<VaIcon name="delete_forever" size="22px" color="#bbc1c3" class="news-item-icon" @click="deleteItem(item.id)"/>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,10 @@
|
|||
<li><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
|
||||
<li><span>Мощность:</span> {{ Math.round(item.power) }}</li>
|
||||
</ul>
|
||||
<div v-if="item.attachment" class="image-container" :style="{'background-image': `url(${item.attachment.url})` }"></div>
|
||||
<div v-if="item.attachment"
|
||||
class="image-container"
|
||||
:style="{'background-image': `url(${item.attachment.url})` }"
|
||||
v-on:click="openWorkout(item.id)"></div>
|
||||
</article>
|
||||
</template>
|
||||
</section>
|
||||
|
|
@ -30,6 +33,33 @@
|
|||
import { AxiosResponse, AxiosInstance } from "axios";
|
||||
import { ref, inject } from 'vue';
|
||||
import { useToast } from "vuestic-ui/web-components";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
|
||||
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>>([]);
|
||||
const { init } = useToast();
|
||||
|
||||
const deleteItem = (id: string) => {
|
||||
axiosAuth
|
||||
|
|
@ -64,29 +94,10 @@ const speedConvert = (speed: number) => {
|
|||
return Math.round(speed*3.6)
|
||||
}
|
||||
|
||||
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 axiosAuth= inject('axiosAuth') as AxiosInstance;
|
||||
let workoutItems = ref<Array<WorkoutItem>>([]);
|
||||
const { init } = useToast();
|
||||
const openWorkout = (id: string) => {
|
||||
push({ name: "workout_item", params: {id: id}}).catch((error) => {});
|
||||
};
|
||||
|
||||
const initWorkouts = () => {
|
||||
axiosAuth
|
||||
|
|
@ -101,12 +112,14 @@ const initWorkouts = () => {
|
|||
color: "error",
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
initWorkouts();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.image-container {
|
||||
cursor: pointer;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
background-position: 50% 50%;
|
||||
|
|
@ -133,6 +146,7 @@ initWorkouts();
|
|||
}
|
||||
|
||||
.news-item-header {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,13 +27,18 @@ const routes: Array<RouteRecordRaw> = [
|
|||
children: [
|
||||
{
|
||||
name: "list_workouts",
|
||||
path: "list",
|
||||
path: "",
|
||||
component: () => import("../pages/workouts/WorkoutList.vue"),
|
||||
},
|
||||
{
|
||||
name: "upload_workouts",
|
||||
path: "upload",
|
||||
component: () => import("../pages/workouts/WorkoutUpload.vue"),
|
||||
},
|
||||
{
|
||||
name: "workout_item",
|
||||
path: "workouts/:id",
|
||||
component: () => import("../pages/workouts/WorkoutItem.vue"),
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue