TrainingCompletion.vue 1.79 KiB
<template>
<div>
<v-container fluid>
<v-row>
<v-col cols="12" xl="6" lg="6" md="12" sm="12">
<v-card class="pa-2" outlined rounded="15px" elevation="5">
<probability
:probability="this.$store.getters.probability_complete"
text="Sandsynlighed for at gennemføre træning"
/>
<div class="compliance">
<v-chip color="#E2E2E2">
<div class="compliancePositive" v-if="getCompliance == 0">
Compliance
<v-icon right color="#53D000">mdi-thumb-up</v-icon>
</div>
<div class="complianceNegative" v-else>
Compliance
<v-icon right color="#FF2402">mdi-thumb-down</v-icon>
</div>
</v-chip>
</div>
<arguments class="card-margin" />
</v-card>
</v-col>
<v-col cols="12" xl="6" lg="6" md="12" sm="12">
<v-card class="pa-2" outlined rounded="15px" elevation="5">
<aid-tabs />
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Probability from "@/components/Probability.vue";
import Arguments from "@/components/Arguments.vue";
import AidTabs from "@/components/AidTabs.vue";
export default Vue.extend({
name: "TrainingCompletion",
data: () => ({
}),
methods: {
getCompliance(): any {
return this.$store.getters.compliance();
},
},
components: {
AidTabs,
Probability,
Arguments,
},
});
</script>
<style>
.compliance {
text-align: right;
padding-bottom: 0.75rem;
padding-right: 0rem;
}
.compliancePositive {
font-size: 17px;
}
.complianceNegative {
font-size: 17px;
}
</style>