work_time-1.0.x-dev/js/work-time.js

import History from "./components/history";
import Store from "./components/store";
const vueElements = document.querySelectorAll(".btn-work-time");
const app = {};
const listBtnIds = [];
vueElements.forEach(element => {
  let id = element.getAttribute('id');
  listBtnIds.push(id);
  app[id] = Vue.createApp({
    data() {
      return {
        isPlaying: false,
        timerId: null,
        startTime: null,
        elapsedTime: 0,
        bsPopover: null,
        showHistory: false,
        historyData: [],
      }
    },
    computed: {
      formatTime() {
        return Store.updateDisplay(this.elapsedTime);
      },
    },
    methods: {
      // Counter.
      countUp(time){
        let localPlaying = {};
        this.startTime = time;
        localPlaying[id] = {
          isPlaying: this.isPlaying,
          startTime: this.startTime
        };
        Store.saveState('work_time_playing', localPlaying);
        this.timerId = setInterval(() => {
          this.elapsedTime = Math.ceil((Date.now() - this.startTime) / 1000);
        }, 1000);
      },
      togglePlay() {
        let state = this.isPlaying;
        Store.stopAllInstances();
        if (state) {
          Store.saveState('work_time_playing', null);
        } else {
          this.countUp(Date.now());
          let entity = Store.state[id].$refs['button'].dataset;
          entity.play = state;
          Store.sendToServer(entity);
        }
        this.isPlaying = !state;
      },

      // Button history.
      showPopupHistory(entity_id, entity_field, event) {
        this.showHistory = true;
        if (!this.bsPopover) {
          this.bsPopover = new Popover(event.target, {
            trigger: 'click',
            html: true,
            content: function (e) {
              return event.target.getElementsByClassName('popup-history')[0];
            }
          });
          this.bsPopover.toggle();
        } else {
          this.bsPopover = null;
        }
      },
    },
    created(){
      // Load token.
      if (Store.csrfToken === '') {
        Store.csrfTokenLoader();
      }
      // Load playing time.
      let work_time_playing = Store.loadState('work_time_playing', false);
      if (work_time_playing && work_time_playing[id]) {
        this.isPlaying = true;
        this.countUp(work_time_playing[id].startTime);
      }
    }
  });
  Store.state[id] = app[id].component("history", History).mount(`#${id}`);
});

// Request All time.
if(listBtnIds.length){
  Store.loadTotalTime(listBtnIds);
}