TrainingCompletion.vue

<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>