slader-legacy/slader-legacy-frontend/src/views/Exercise.vue

<template>
  <div>
    <v-row align="center" class="ma-1">
      <v-btn icon @click="returnToSection">
        <v-icon>mdi-arrow-left-circle</v-icon>
      </v-btn>
      <v-badge :content="badgeContent"
               :offset-y="12"
               :offset-x="15"
               color="grey"
      ><p class="font-weight-bold text-h5 mb-0 mx-5">题 {{ exercise }}</p></v-badge>
    </v-row>
    <div class="mt-5" v-html="myHtml"></div>
    <v-btn v-if="hasPreviousExercise" @click="goToExercise(previousExerciseIndex)" fab bottom left icon fixed
           elevation="2" color="green">
      <v-icon>mdi-arrow-left</v-icon>
    </v-btn>
    <v-btn v-if="hasNextExercise" @click="goToExercise(nextExerciseIndex)" fab bottom right icon fixed elevation="2"
           color="green">
      <v-icon>mdi-arrow-right</v-icon>
    </v-btn>
  </div>
</template>

<script>
import {myAxios} from "@/includes"
import {showServerErrorAlert} from "@/includes"

export default {
  name: "Exercise",
  created() {
    this.getExercise()
  },
  watch:{
    exercise(){
      console.log('watch exercise trigger')
      this.getExercise()
    }
  },
  computed: {
    badgeContent() {
      return this.section + ' - ' + this.myPage
    },
    tableDataIndex() {
      if (!this.tableData) {
        return false
      }
      return this.tableData.findIndex(single => single.exercise === this.exercise)
    },
    hasPreviousExercise(){
      return this.previousExerciseIndex !== false;
    },
    hasNextExercise(){
      return this.nextExerciseIndex !== false;
    },
    previousExerciseIndex() {
      if (this.tableDataIndex === false || this.tableDataIndex === 0) {
        return false
      }
      return this.tableDataIndex - 1
    },
    nextExerciseIndex() {
      if (this.tableDataIndex === false || this.tableDataIndex === this.tableData.length - 1) {
        return false
      }
      return this.tableDataIndex + 1
    }
  },
  props: {
    textbook: String,
    section: String,
    exercise: [String, Number],
    page: Number,
    part: String,
    html: String,
    tableData: Array
  },
  methods: {
    goToExercise(exerciseIndex) {
      this.$router.push({name: 'exercise', params: {...this.tableData[exerciseIndex], tableData: this.tableData}})
    },
    returnToSection() {
      this.$router.push({name: 'section', params: {textbook: this.textbook, section: this.section}})
    },
    async getExercise() {
      this.$emit('setCardLoadingStatus', true)
      console.log('get exercise')
      if (!this.html) {
        let resp = await myAxios.get('textbook/' + this.textbook + '/' + encodeURIComponent(this.section) + '/' + this.exercise)
        if (!resp.data.status) {
          showServerErrorAlert()
          return
        }
        this.myHtml = resp.data.data.html
        this.myPage = resp.data.data.page
        this.myPart = resp.data.data.part || 'exercises'
      } else {
        this.myHtml = this.html
        this.myPage = this.page
        this.myPart = this.part
      }
      this.$emit('setCardLoadingStatus', false)
    }
  },
  data() {
    return {
      myHtml: this.html,
      myPage: this.page,
      myPart: this.part
    }
  }
}
</script>

<style>
.inline-picture-name {
  margin: 50px 0;
  border-top: 5px gray solid;
  padding-top: 20px;
}

.inline-picture-name img {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.object-ratings-wrap {
  display: none;
}

.open-comments {
  display: none;
}

.row-counter {
  width: 100%;
  background-color: whitesmoke;
  text-align: center;
  border-top: black 1px solid;
  border-bottom: black 1px solid;
  margin: 5px 0;
}

.result-heading {
  display: block;
  font-size: 25px;
  font-weight: bold;
}

.solution-content img {
  max-width: 90%;
  border: 1px solid black;
  display: block;
  margin: 10px auto;
}

.image-reg {
  display: none !important;
}

.unfinished-hover {
  display: none;
}

.annotations {
  display: none;
}

.comment-footer {
  display: none;
}

.center {
  text-align: center;
}

.solution-content p {
  font-size: 20px;
  font-family: "Times New Roman", serif;
}

.Paywall__footer-counter {
  display: none;
}

.edit-toolbar {
  display: none;
}
</style>