sascha
/
bullpen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bullpen view progress

This commit is contained in:
Sascha Kühl 2025-06-15 22:27:56 +02:00
parent ea80c8b95d
commit 2428ba1152
1 changed files with 111 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
app/src/components/PlayerComponent.vue
View File

@ -77,46 +77,75 @@ generateItems();
</script> </script>
<template> <template>
<div>
<ion-label>hallo</ion-label>
</div>
<ion-list :inset="false"> <ion-list :inset="false">
<ion-item v-for="(bullpen, index) in items" :key="index" class="custom-item" :button="true" :detail="false"> <ion-item v-for="(bullpen, index) in items" :key="index" class="custom-item" lines="none" :button="true" :detail="false">
<!-- Top-left icon --> <!-- Top-left icon -->
<ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon> <ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>
<ion-label> <ion-label>
<strong>{{formatDate(bullpen.startedAt)}}</strong> <strong>{{formatDate(bullpen.startedAt)}}</strong>
<ion-label class="item-labels"> <ion-label class="item-labels">
<div class="stats-container">
<div class="stat-item" :style="{ '--progress': '57%' }">
<div class="stat-content">
<span class="percentage">57%</span>
<span class="label">Precision</span>
</div>
</div>
<div class="stat-item" :style="{ '--progress': '77%' }">
<div class="stat-content">
<span class="percentage">77%</span>
<span class="label">Strike</span>
</div>
</div>
<div class="stat-item" :style="{ '--progress': '33%' }">
<div class="stat-content">
<span class="percentage">33%</span>
<span class="label">Balls</span>
</div>
</div>
<!-- <div class="stat-item" :style="{ '&#45;&#45;progress': '45%' }">-->
<!-- <div class="stat-content">-->
<!-- <span class="percentage">45%</span>-->
<!-- <span class="label">Fastballs</span>-->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- Horizontale Anordnung der Kreise --> <!-- Horizontale Anordnung der Kreise -->
<div class="circle-container"> <!-- <div class="circle-container">-->
<div class="circle-wrapper"> <!-- <div class="circle-wrapper">-->
<div class="progress-circle" :class="percentageClass(57)"> <!-- <div class="progress-circle" :class="percentageClass(57)">-->
<span>{{ (0.57 * 100).toFixed(0) }}%</span> <!-- <span>{{ (0.57 * 100).toFixed(0) }}%</span>-->
<div class="left-half-clipper"> <!-- <div class="left-half-clipper">-->
<div class="first50-bar"></div> <!-- <div class="first50-bar"></div>-->
<div class="value-bar"></div> <!-- <div class="value-bar"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<label>Precision</label> <!-- <label>Precision</label>-->
</div> <!-- </div>-->
<div class="circle-wrapper"> <!-- <div class="circle-wrapper">-->
<div class="progress-circle" :class="percentageClass(77)"> <!-- <div class="progress-circle" :class="percentageClass(77)">-->
<span>{{ (0.77 * 100).toFixed(0) }}%</span> <!-- <span>{{ (0.77 * 100).toFixed(0) }}%</span>-->
<div class="left-half-clipper"> <!-- <div class="left-half-clipper">-->
<div class="first50-bar"></div> <!-- <div class="first50-bar"></div>-->
<div class="value-bar"></div> <!-- <div class="value-bar"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<label>Strike</label> <!-- <label>Strike</label>-->
</div> <!-- </div>-->
<div class="circle-wrapper"> <!-- <div class="circle-wrapper">-->
<div class="progress-circle" :class="percentageClass(33)"> <!-- <div class="progress-circle" :class="percentageClass(33)">-->
<span>{{ (0.33 * 100).toFixed(0) }}%</span> <!-- <span>{{ (0.33 * 100).toFixed(0) }}%</span>-->
<div class="left-half-clipper"> <!-- <div class="left-half-clipper">-->
<div class="first50-bar"></div> <!-- <div class="first50-bar"></div>-->
<div class="value-bar"></div> <!-- <div class="value-bar"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<label>Balls</label> <!-- <label>Balls</label>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</ion-label> </ion-label>
</ion-label> </ion-label>
<div class="metadata-end-wrapper" slot="end"> <div class="metadata-end-wrapper" slot="end">
@ -198,4 +227,59 @@ ion-label strong{
color: var(--ion-color-medium); color: var(--ion-color-medium);
margin-top: 8px; margin-top: 8px;
} }
.stats-container {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
margin-top: 8px;
height: 70px;
}
.stat-item {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--ion-color-light);
}
.stat-item::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--progress);
background: var(--ion-color-primary);
opacity: 0.15;
z-index: 0;
}
.stat-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}
.percentage {
flex: 1;
display: flex;
align-items: center;
font-size: 18px;
font-weight: bold;
color: var(--ion-color-dark);
}
.label {
font-size: 12px;
color: var(--ion-color-medium);
padding-bottom: 8px;
}
</style> </style>