timer.vue

timer.vue

<script>
export default {
  data() {
    return {
      timerId: "",
      hour: "",
      minutes: "",
      second: "",
      enteredTime: "",
    };
  },

  methods: {
    enter() {
      // 入室処理
      this.$axios
        .post("/url", {
          body: "",
        })
        .then(() => {
          this.enteredTime = "xxxx";
          if (this.enteredTimer) {
            this.startTimer();
          }
        });
    },
    leave() {
      // 退室処理
      this.$axios
        .post("/url", {
          body: "",
        })
        .then(() => {
          this.enteredTime = null;
          if (this.timerId) {
            this.stopTimer();
          }
        });
    },
    fetchStatus() {
      // 入室状態確認
      this.$axios.get("/url", {}).then(() => {
        this.enteredTime = "xxxx";
        if (this.enteredTimer) {
          this.startTimer();
        }
      });
    },
    updateTime() {
      // enteredTimeと現在時刻の比較
      // this.hour = xxx
      // this.minutes = yyy
      // this.second = zzz
    },
    startTimer() {
      this.timerId = setInterval(this.updateTime(), 100);
    },
    stopTimer() {
      clearInterval(this.timerId);
    },
  },
  mounted() {
    this.fetchStatus();
  },
};
</script>