150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import {computed, reactive, ref} from "vue";
|
|
import {
|
|
InfiniteScrollCustomEvent,
|
|
IonIcon,
|
|
IonInfiniteScroll,
|
|
IonInfiniteScrollContent,
|
|
IonItem,
|
|
IonLabel,
|
|
IonList
|
|
} from '@ionic/vue';
|
|
import { useRouter } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import {baseballOutline} from 'ionicons/icons';
|
|
import Bullpen from '@/types/Bullpen';
|
|
import BullpenSessionService from "@/services/BullpenSessionService";
|
|
import dayjs from 'dayjs';
|
|
import PitchType from '@/types/PitchType';
|
|
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
|
|
const user = computed(() => store.state.auth.user);
|
|
const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
|
|
|
|
const items = reactive<Bullpen[]>([]);
|
|
const page = ref(0);
|
|
|
|
const startBullpenSession = () => {
|
|
router.push({ path: "/bullpen" });
|
|
};
|
|
|
|
const generateItems = () => {
|
|
BullpenSessionService
|
|
.fetchAllByUser(user.value.id, page.value, 10)
|
|
.then((bullpens) => {
|
|
++page.value;
|
|
bullpens.data.forEach((bullpen: Bullpen) => {
|
|
items.push(bullpen);
|
|
})
|
|
}, error => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const formatDate = (date: Date) => {
|
|
return dayjs(date).format('YYYY.MM.DD HH:mm');
|
|
}
|
|
|
|
const determinePitchTypeName = (id: number): string => {
|
|
const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id);
|
|
|
|
return pitchType?.name ?? 'Unknown';
|
|
}
|
|
|
|
const ionInfinite = (event: InfiniteScrollCustomEvent) => {
|
|
generateItems();
|
|
setTimeout(() => event.target.complete(), 500);
|
|
};
|
|
|
|
generateItems();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ion-list>
|
|
<ion-item v-for="(bullpen, index) in items" :key="index" lines="none" class="custom-item" :button="true" detail="false">
|
|
<!-- Top-left icon -->
|
|
<ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>
|
|
|
|
<ion-label class="item-labels">
|
|
<!-- First Progress Bar -->
|
|
<div class="progress-section">
|
|
<div class="top-row">
|
|
<span class="left-label">Task 1</span>
|
|
<span class="right-label">{{ (0.57 * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
<ion-progress-bar :value="0.57"></ion-progress-bar>
|
|
</div>
|
|
|
|
<!-- Second Progress Bar -->
|
|
<div class="progress-section">
|
|
<div class="top-row">
|
|
<span class="left-label">Task 2</span>
|
|
<span class="right-label">{{ (0.33 * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
<ion-progress-bar :value="0.33" color="secondary"></ion-progress-bar>
|
|
</div>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
<!-- <ion-item v-for="(bullpen, index) in items" :key="index">-->
|
|
<!-- <ion-icon aria-hidden="true" :icon="baseball" slot="start"></ion-icon>-->
|
|
<!-- <ion-label>Bullpen from ({{formatDate(bullpen.startedAt)}})</ion-label>-->
|
|
<!-- <ion-list v-for="(pitch, index) in bullpen.pitches" :key="index">-->
|
|
<!-- <ion-item>-->
|
|
<!-- <ion-icon slot="start" :icon="baseballOutline" class="icon-login"></ion-icon>-->
|
|
<!-- <ion-label>{{determinePitchTypeName(pitch.pitchTypeId)}}</ion-label>-->
|
|
<!-- <ion-badge>{{pitch.aimedArea}}</ion-badge>-->
|
|
<!-- <ion-badge>{{pitch.hitArea}}</ion-badge>-->
|
|
<!-- </ion-item>-->
|
|
<!-- </ion-list>-->
|
|
<!-- </ion-item>-->
|
|
</ion-list>
|
|
<ion-infinite-scroll @ionInfinite="ionInfinite">
|
|
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
|
</ion-infinite-scroll>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.custom-item {
|
|
align-items: flex-start !important; /* important override */
|
|
--padding-start: 16px;
|
|
--inner-padding-end: 16px;
|
|
--min-height: 100px;
|
|
}
|
|
|
|
.item-icon {
|
|
font-size: 28px;
|
|
color: var(--ion-color-danger);
|
|
margin-right: 12px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.item-labels {
|
|
width: 100%;
|
|
}
|
|
|
|
.progress-section {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.top-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.left-label {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.right-label {
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|