SEECBC/FrontEnd/pages/learning/_chapter/_level/exercise/index.vue

<template>
  <v-responsive max-width="1024" class="mx-auto">
    <!-- Title -->
    <h1 class="mb-2 display-2 font-weight-light">
      {{ $t('learning.exercise.title') }}
    </h1>
    <!-- release date and due date -->
    <div class="mb-2 body-1" flat>
      {{ dateInfo }}
    </div>
    <!-- commit records -->
    <exercise-records class="mb-2" :records="exerciseRecords" :commit-limit="commitLimit" />
    <!-- button for entering exercising page -->
    <v-row>
      <v-col>
        <v-btn
          class="mb-2"
          color="primary"
          tile
          outlined
          block
          :to="{ path: 'do', query: { exerciseId: exerciseId } }"
          nuxt
          append
        >
          {{ $t('learning.exercise.begin') }}
        </v-btn>
      </v-col>
    </v-row>
  </v-responsive>
</template>

<script lang="ts">
import Vue from 'vue'
import ExerciseRecords from '~/components/learning/ExerciseRecords.vue'
import { CommitRecord } from '~/components/learning/types'

export default Vue.extend({
  components: {
    ExerciseRecords
  },
  data() {
    return {
      dateInfo: new Date().toString(),
      exerciseRecords: [] as CommitRecord[],
      commitLimit: 0,
      exerciseId: 0
    }
  },
  computed: {
    commitTimes(): number {
      return this.exerciseRecords.length
    }
  },
  methods: {
    getInfo() {
      // relese date, due date
    },
    getExerciseRecords() {
      // history
    },
    doExercise() {
      // begin doing exercise
    }
  }
})
</script>

<style scoped></style>