palizvani-front-vite/src/components/Widgets/Test/TestShow/TestShow.vue

<template>
  <div class="TestShow"
       :style="localOptions.style">
    <q-card v-if="!answerBook.loading && answerBook.id">
      <q-card-section class="flex justify-between">
        <div>{{ answerBook.test_info.title }}</div>
      </q-card-section>
      <q-separator />
      <q-banner>
        <div class="row">
          <div class="col-md-4 col-12">
            {{ toShamsi(answerBook.attending_start_time) }}
          </div>
          <div class="col-md-4 col-12">
            {{ answerBook.test_info.test_set_info.test_set_questions.length }}
            سوال
          </div>
          <div class="col-md-4 col-12">
            {{ answerBook.duration }}
            دقیقه
          </div>
        </div>
      </q-banner>
      <q-list separator>
        <q-item v-for="(question, questionIndex) in answerBook.test_info.test_set_info.test_set_questions"
                :key="questionIndex"
                clickable>
          <q-item-section v-html="question.question_info.text" />
          <q-item-section side>
            <q-badge>
              {{ question.mark }}
              نمره
            </q-badge>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <div v-else>
      کمی صبر کنید...
    </div>
  </div>
</template>

<script>
import Assist from 'src/assets/js/Assist.js'
import { mixinWidget } from 'src/mixin/Mixins.js'
import { APIGateway } from 'src/api/APIGateway.js'
import { AnswerBook } from 'src/models/AnswerBook.js'

export default {
  name: 'TestShow',
  mixins: [mixinWidget],
  data () {
    return {
      mounted: false,
      participateType: null,
      participateTypeDialog: false,
      answerBook: new AnswerBook(),
      remainingTime: 0,
      timerInterval: null
    }
  },
  computed: {
    formattedRemainingTime () {
      const hours = Math.floor(this.remainingTime / 3600)
      const minutes = Math.floor((this.remainingTime % 3600) / 60)
      const seconds = this.remainingTime % 60

      // Add zero padding for hours, minutes, and seconds
      const formattedHours = hours.toString().padStart(2, '0')
      const formattedMinutes = minutes.toString().padStart(2, '0')
      const formattedSeconds = seconds.toString().padStart(2, '0')

      return formattedHours + ':' + formattedMinutes + ':' + formattedSeconds
    }
  },
  mounted () {
    // this.getAnswerBook()
    this.getTestQuestions()
    this.mounted = true
  },
  methods: {
    onAllQuestionsSending () {
      this.answerBook.loading = true
    },
    onAllQuestionsSentSuccess () {
      this.answerBook.loading = false
      this.backToClassList()
    },
    onAllQuestionsSentFailed () {
      this.answerBook.loading = false
    },
    onSingleQuestionsSending () {
      this.answerBook.loading = true
    },
    onSingleQuestionsSentSuccess () {
      this.answerBook.loading = false
      this.backToClassList()
    },
    onSingleQuestionsSentFailed () {
      this.answerBook.loading = false
    },
    toShamsi (miladi) {
      return Assist.miladiToShamsi(miladi)
    },

    startTest () {
      this.$router.push({ name: this.participateType, params: { question_id: 1 } })
    },
    getRemainingTimeInSeconds (serverTimeStr, attendingStartTimeStr, durationInMinutes) {
      // Convert the strings to Date objects
      const serverTime = new Date(serverTimeStr)
      const attendingStartTime = new Date(attendingStartTimeStr)

      // Calculate the difference in milliseconds
      const timeDiffInMilliseconds = serverTime - attendingStartTime

      // Convert the difference to seconds
      const timeDiffInSeconds = timeDiffInMilliseconds / 1000

      // Calculate the remaining time in seconds considering the duration
      return (durationInMinutes * 60) - timeDiffInSeconds
    },
    startTimer () {
      this.timerInterval = setInterval(() => {
        if (this.remainingTime <= 0) {
          this.stopTimer()
        } else {
          this.remainingTime--
        }
      }, 1000)
    },
    stopTimer () {
      if (!this.timerInterval) {
        return
      }

      clearInterval(this.timerInterval)
    },
    backToClassList () {
      // this.$router.push({ name: 'UserPanel.Profile.AllClassrooms' })
    },
    getAnswerBook () {
      this.answerBook.loading = true
      APIGateway.answerBook.get(this.$route.params.answer_book_id)
        .then((answerBook) => {
          this.answerBook = new AnswerBook(answerBook)
          this.answerBook.loading = false
        })
        .catch(() => {
          this.answerBook.loading = false
          this.backToClassList()
        })
    },
    getTestQuestions () {
      this.answerBook.loading = true
      APIGateway.answerBook.getTestQuestions(this.$route.params.answer_book_id)
        .then((answerBook) => {
          this.answerBook = new AnswerBook(answerBook)
          this.answerBook.loading = false
          this.answerBook.server_time = '2023-12-15T23:57:46.909211'
          this.answerBook.attending_start_time = '2023-12-15T23:27:46.909211'
          this.remainingTime = this.getRemainingTimeInSeconds(this.answerBook.server_time, this.answerBook.attending_start_time, this.answerBook.duration)
          this.startTimer()
        })
        .catch(() => {
          this.answerBook.loading = false
          this.backToClassList()
        })
    }
  }
}
</script>

<style scoped lang="scss">
.TestShow {
  :deep(.q-banner) {
    background: #FCF9F4 0 0 no-repeat padding-box;
    padding: 20px;
    .q-banner__content {
      font-size: 16px;
      font-weight: normal;
    }
  }
}
</style>