pbl-student-table/src/components/tools/time.vue

<template>
  <div class="container">
    <div class="setters"  v-if="isWhole" :style="{width:cwidth}">
      <div class="minutes-set">
        <button
          data-setter="minutes-plus"
          @click="changeTime('minutes-plus')"
          :disabled="isStarted"
          :style="{ opacity: isStarted ? 0.5 : 1 }"
        >
          +
        </button>
        <button
          data-setter="minutes-minus"
          @click="changeTime('minutes-minus')"
          :disabled="isStarted"
          :style="{ opacity: isStarted ? 0.5 : 1 }"
        >
          -
        </button>
      </div>
      <div class="seconds-set">
        <button
          data-setter="seconds-plus"
          @click="changeTime('seconds-plus')"
          :disabled="isStarted"
          :style="{ opacity: isStarted ? 0.5 : 1 }"
        >
          +
        </button>
        <button
          data-setter="seconds-minus"
          @click="changeTime('seconds-minus')"
          :disabled="isStarted"
          :style="{ opacity: isStarted ? 0.5 : 1 }"
        >
          -
        </button>
      </div>
    </div>
    <div class="circle">
      <svg width="300" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(110,110)">
          <circle r="100" class="e-c-base" />
          <g transform="rotate(-90)">
            <circle
              r="100"
              class="e-c-progress"
              :style="{ strokeDasharray: offset }"
            />
            <g id="e-pointer" :style="{ transform: pointerTransform }">
              <circle cx="100" cy="0" r="8" class="e-c-pointer" />
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div class="controlls">
      <div class="display-remain-time">{{ displayString }}</div>
      <button
        :class="{ play: !play, pause: play }"
        id="pause"
        @click="pauseTimer"
      ></button>
    </div>
    <el-button type="primary" @click="reset" class="reset_btn">{{ lang.ssReset }}</el-button>
  </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js"

export default {
  mixins: [myMixin],
  props: ["preTime"],
  data() {
    return {
      length: Math.PI * 2 * 100,
      offset: 0,
      pointerTransform: "",
      play: false,
      intervalTimer: null,
      wholeTime: 0,
      timeLeft: "",
      isPaused: false,
      isStarted: false,
      displayString: "",
      isWhole:true,
      cwidth: '162px'
    };
  },
  methods: {
    changeWholeTime(seconds) {
      if (this.wholeTime + seconds >= 0) {
        this.wholeTime += seconds;
        this.update(this.wholeTime, this.wholeTime);
      }
    },
    changeTime(param) {
      switch (param) {
        case "minutes-plus":
          this.changeWholeTime(1 * 60);
          break;
        case "minutes-minus":
          this.changeWholeTime(-1 * 60);
          break;
        case "seconds-plus":
          this.changeWholeTime(1);
          break;
        case "seconds-minus":
          this.changeWholeTime(-1);
          break;
      }
      this.displayTimeLeft(this.wholeTime);
    },
    update(value, timePercent, type) {
      this.offset = -this.length - (this.length * value) / timePercent;
      if (value === 0 && type === 1) {
        this.pointerTransform = `rotate(${360}deg)`;
      } else {
        this.pointerTransform = `rotate(${(360 * value) / timePercent}deg)`;
      }
    },
    displayTimeLeft(timeLeft, type) {
      //displays time on the input
      let minutes = Math.floor(timeLeft / 60);
      let seconds = timeLeft % 60;
      this.displayString = `${minutes < 10 ? "0" : ""}${minutes}:${
        seconds < 10 ? "0" : ""
      }${seconds}`;
      // displayOutput.textContent = displayString;
      this.update(timeLeft, this.wholeTime, type);
    },
    timer(seconds) {
      //counts time, takes seconds
      let remainTime = Date.now() + seconds * 1000;
      this.displayTimeLeft(seconds);

      let _this = this;
      _this.intervalTimer = setInterval(function () {
        _this.timeLeft = Math.round((remainTime - Date.now()) / 1000);
        if (_this.timeLeft < 0) {
          clearInterval(_this.intervalTimer);
          _this.isStarted = false;
          _this.play = false;
          // setterBtns.forEach(function (btn) {
          //   btn.disabled = false;
          //   btn.style.opacity = 1;
          // });
          _this.displayTimeLeft(_this.wholeTime);
          _this.$message.success(_this.lang.ssTimeUp);
          // pauseBtn.classList.remove("pause");
          // pauseBtn.classList.add("play");
          return;
        }
        _this.displayTimeLeft(_this.timeLeft);
      }, 1000);
    },
    pauseTimer() {
      if (!this.play && !this.isPaused) {
        this.play = true;
        this.isStarted = true;
        this.timer(this.wholeTime);
      } else if (this.isPaused) {
        this.play = true;
        this.timer(this.timeLeft);
        this.isStarted = true;
        this.isPaused = this.isPaused ? false : true;
      } else {
        this.play = false;
        this.isStarted = true;
        clearInterval(this.intervalTimer);
        this.isPaused = this.isPaused ? false : true;
      }
      console.log(1);
    },
    reset() {
      clearInterval(this.intervalTimer);
      this.play = false;
      this.isStarted = false;
      this.isPaused = false;
      this.wholeTime = this.preTime ? this.preTime : 0;
      this.timeLeft = null;
      this.update(this.wholeTime, this.wholeTime, 1);
      this.displayTimeLeft(this.wholeTime, 1);
    },
    getValue() {
      this.wholeTime = this.preTime ? this.preTime : 0;
      this.isWhole = this.wholeTime > 0 ? false : true;
      this.update(this.wholeTime, this.wholeTime, 1);
      this.displayTimeLeft(this.wholeTime,1);
      // this.$forceUpdate();
    },
  },
  created() {
    this.offset = this.length;
    // this.update(this.wholeTime, this.wholeTime);
    // this.displayTimeLeft(this.wholeTime);
    this.getValue();
    this.$nextTick(()=>{
      setTimeout(() => {
        this.cwidth = document.querySelector(".controlls") ? (document.querySelector(".controlls").offsetWidth + 'px') : 'fit-content'
      }, 600);
    })
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
  },
};
</script>

<style scoped>
button[data-setter] {
  outline: none;
  background: transparent;
  border: none;
  font-family: "Roboto";
  font-weight: 300;
  font-size: 36px;
  width: 32px;
  /* height: 30px; */
  color: #409eff;
  cursor: pointer;
}
button[data-setter]:hover {
  opacity: 0.5;
}
.container {
  position: relative;
  /* top: 30px; */
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.setters {
  position: absolute;
  left: 50%;
    top: 75px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.minutes-set {
  /* float: left; */
  /* margin-right: 28px; */
  /* margin-right: 20px; */
}
.seconds-set {
  /* float: right; */
}
.controlls {
  position: absolute;
  top: 105px;
    text-align: center;
    min-width: fit-content;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}
.display-remain-time {
  font-family: "Roboto";
    font-weight: 100;
    font-size: 66px;
    color: #409eff;
    display: flex;
    flex-wrap: nowrap;
    min-width: fit-content;
    justify-content: center;
    white-space: nowrap;
}
#pause {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  position: relative;
}
.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #77a4d3;
}
.pause::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 15px;
  height: 30px;
  background-color: transparent;
  border-radius: 1px;
  border: 5px solid #77a4d3;
  border-top: none;
  border-bottom: none;
}
#pause:hover {
  opacity: 0.8;
}
.e-c-base {
  fill: none;
  stroke: #b6b6b6;
  stroke-width: 4px;
}
.e-c-progress {
  fill: none;
  stroke: #6eaded;
  stroke-width: 4px;
  transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
  fill: #fff;
  stroke: #6eaded;
  stroke-width: 2px;
}
#e-pointer {
  transition: transform 0.7s;
}

.reset_btn {
  width: 100px;
  margin: 15px auto 0px;
  background: #527aa3;
  border: none;
}
</style>