232 lines
11 KiB
Vue
232 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import {computed, onMounted, ref} from "vue";
|
|
import {
|
|
IonContent,
|
|
IonHeader,
|
|
IonFooter,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonLabel,
|
|
IonButton,
|
|
IonPage,
|
|
IonCard,
|
|
IonCardContent,
|
|
IonCardHeader,
|
|
IonCardTitle, IonRow, IonGrid, IonCol,
|
|
} from "@ionic/vue";
|
|
import {BullpenStep} from "@/types/BullpenStep";
|
|
import PitchType from "@/types/PitchType";
|
|
import Pitch from "@/types/Pitch";
|
|
import BullpenSessionService from "@/services/BullpenSessionService";
|
|
import {useRouter} from "vue-router";
|
|
import {useStore} from 'vuex';
|
|
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
|
|
const pitch = ref<Pitch>(BullpenSessionService.createPitch());
|
|
const currentStep = ref<BullpenStep>(BullpenStep.Prepare);
|
|
|
|
const pitcher = computed(() => store.state.auth.user);
|
|
const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
|
|
|
|
onMounted(async () => {
|
|
store.commit("bullpen/start", pitcher);
|
|
});
|
|
|
|
const setPitchType = (pitchType: PitchType) => {
|
|
pitch.value.pitchType = pitchType;
|
|
}
|
|
|
|
const gotoFinalizePitch = () => {
|
|
currentStep.value = BullpenStep.Finish;
|
|
}
|
|
|
|
const finalizeAndNextPitch = () => {
|
|
store.commit("bullpen/addPitch", pitch.value);
|
|
currentStep.value = BullpenStep.Prepare;
|
|
}
|
|
|
|
const finalizeAndEndBullpen = () => {
|
|
store.commit("bullpen/addPitch", pitch.value);
|
|
router.push({ name: 'BullpenStats' });
|
|
}
|
|
|
|
const setPlannedPitchArea = (hitArea: number) => {
|
|
if (currentStep.value === BullpenStep.Prepare) {
|
|
pitch.value.plannedPitchArea = hitArea;
|
|
} else {
|
|
pitch.value.realPitchArea = hitArea;
|
|
}
|
|
};
|
|
|
|
const pitchAreaCssClasses = (area: number, name: string) => {
|
|
const classes = [];
|
|
|
|
if (pitch.value.plannedPitchArea === area) {
|
|
classes.push(name + '-aim-selected');
|
|
}
|
|
if (pitch.value.realPitchArea === area) {
|
|
classes.push(name + '-hit-selected');
|
|
}
|
|
|
|
return classes;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header :translucent="true">
|
|
<ion-toolbar>
|
|
<ion-title>Prepare Pitch for {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content>
|
|
<ion-card>
|
|
<ion-card-header>
|
|
<ion-card-title>Select Pitch type</ion-card-title>
|
|
</ion-card-header>
|
|
<ion-card-content>
|
|
<ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== pitch.pitchType.id ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
|
|
<ion-label>{{pitchType.abbreviation}}</ion-label>
|
|
</ion-button>
|
|
</ion-card-content>
|
|
</ion-card>
|
|
<ion-card>
|
|
<ion-card-header>
|
|
<ion-card-title>Select Planned Pitch Hit Area</ion-card-title>
|
|
</ion-card-header>
|
|
<ion-card-content>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
|
|
<polygon :class="pitchAreaCssClasses(21, 'wasted')" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
|
|
<rect :class="pitchAreaCssClasses(22, 'wasted')" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
|
|
<polygon :class="pitchAreaCssClasses(23, 'wasted')" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)" />
|
|
<rect :class="pitchAreaCssClasses(24, 'wasted')" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)" />
|
|
<rect :class="pitchAreaCssClasses(25, 'wasted')" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
|
|
<polygon :class="pitchAreaCssClasses(26, 'wasted')" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)" />
|
|
<rect :class="pitchAreaCssClasses(27, 'wasted')" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
|
|
<polygon :class="pitchAreaCssClasses(28, 'wasted')" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)" />
|
|
|
|
<text x="30" y="40" class="number" @click="setPlannedPitchArea(21)" >21</text>
|
|
<text x="180" y="40" class="number" @click="setPlannedPitchArea(22)" >22</text>
|
|
<text x="330" y="40" class="number" @click="setPlannedPitchArea(23)" >23</text>
|
|
<text x="30" y="190" class="number" @click="setPlannedPitchArea(24)" >24</text>
|
|
<text x="330" y="190" class="number" @click="setPlannedPitchArea(25)" >25</text>
|
|
<text x="30" y="330" class="number" @click="setPlannedPitchArea(26)" >26</text>
|
|
<text x="180" y="330" class="number" @click="setPlannedPitchArea(27)" >27</text>
|
|
<text x="330" y="330" class="number" @click="setPlannedPitchArea(28)" >28</text>
|
|
|
|
<polygon :class="pitchAreaCssClasses(11, 'edge')" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
|
|
<rect :class="pitchAreaCssClasses(12, 'edge')" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
|
|
<polygon :class="pitchAreaCssClasses(13, 'edge')" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
|
|
<rect :class="pitchAreaCssClasses(14, 'edge')" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
|
|
<rect :class="pitchAreaCssClasses(15, 'edge')" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
|
|
<polygon :class="pitchAreaCssClasses(16, 'edge')" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
|
|
<rect :class="pitchAreaCssClasses(17, 'edge')" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
|
|
<polygon :class="pitchAreaCssClasses(18, 'edge')" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />
|
|
|
|
<text x="80" y="90" class="number" @click="setPlannedPitchArea(11)">11</text>
|
|
<text x="180" y="90" class="number" @click="setPlannedPitchArea(12)">12</text>
|
|
<text x="275" y="90" class="number" @click="setPlannedPitchArea(13)">13</text>
|
|
<text x="80" y="190" class="number" @click="setPlannedPitchArea(14)">14</text>
|
|
<text x="275" y="190" class="number" @click="setPlannedPitchArea(15)">15</text>
|
|
<text x="80" y="285" class="number" @click="setPlannedPitchArea(16)">16</text>
|
|
<text x="180" y="285" class="number" @click="setPlannedPitchArea(17)">17</text>
|
|
<text x="275" y="285" class="number" @click="setPlannedPitchArea(18)">18</text>
|
|
|
|
<rect :class="pitchAreaCssClasses(1, 'inside')" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
|
|
<rect :class="pitchAreaCssClasses(2, 'inside')" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
|
|
<rect :class="pitchAreaCssClasses(3, 'inside')" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
|
|
<rect :class="pitchAreaCssClasses(4, 'inside')" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
|
|
<rect :class="pitchAreaCssClasses(5, 'inside')" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
|
|
<rect :class="pitchAreaCssClasses(6, 'inside')" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
|
|
<rect :class="pitchAreaCssClasses(7, 'inside')" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
|
|
<rect :class="pitchAreaCssClasses(8, 'inside')" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
|
|
<rect :class="pitchAreaCssClasses(9, 'inside')" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>
|
|
|
|
<text x="130" y="140" class="number" @click="setPlannedPitchArea(1)">1</text>
|
|
<text x="180" y="140" class="number" @click="setPlannedPitchArea(2)">2</text>
|
|
<text x="230" y="140" class="number" @click="setPlannedPitchArea(3)">3</text>
|
|
<text x="130" y="190" class="number" @click="setPlannedPitchArea(4)">4</text>
|
|
<text x="180" y="190" class="number" @click="setPlannedPitchArea(5)">5</text>
|
|
<text x="230" y="190" class="number" @click="setPlannedPitchArea(6)">6</text>
|
|
<text x="130" y="240" class="number" @click="setPlannedPitchArea(7)">7</text>
|
|
<text x="180" y="240" class="number" @click="setPlannedPitchArea(8)">8</text>
|
|
<text x="230" y="240" class="number" @click="setPlannedPitchArea(9)">9</text>
|
|
</svg>
|
|
</ion-card-content>
|
|
</ion-card>
|
|
</ion-content>
|
|
<ion-footer>
|
|
<ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
|
|
</ion-footer>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<!--<ion-grid>-->
|
|
<!-- <div v-if="currentStep === BullpenStep.Prepare">-->
|
|
<!--<ion-row>-->
|
|
<!-- <ion-col><ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button></ion-col>-->
|
|
<!--</ion-row>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-if="currentStep === BullpenStep.Finish">-->
|
|
<!--<ion-row>-->
|
|
<!-- <ion-col><ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button></ion-col>-->
|
|
<!-- <ion-col><ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>End Session</ion-button></ion-col>-->
|
|
<!--</ion-row>-->
|
|
<!-- </div>-->
|
|
<!--</ion-grid>-->
|
|
|
|
<style scoped>
|
|
.wasted {
|
|
fill: firebrick;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.wasted-aim-selected {
|
|
fill: orangered;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.wasted-hit-selected {
|
|
fill: orange;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.edge {
|
|
fill: lightgreen;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.edge-aim-selected {
|
|
fill: aquamarine;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.edge-hit-selected {
|
|
fill: lightblue;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.inside {
|
|
fill: green;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.inside-aim-selected {
|
|
fill: darkolivegreen;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.inside-hit-selected {
|
|
fill: darkseagreen;
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
}
|
|
.number {
|
|
text-anchor: middle;
|
|
fill: white;
|
|
font-size: 30px;
|
|
}
|
|
</style>
|