nocodb/packages/nc-gui/components/utils/BetterUX.vue

<template>
  <div class="px-2">
    <v-chip x-small>
      Clicks : {{ clickCount }}
    </v-chip>
    <v-chip x-small>
      Keystrokes : {{ keystrokeCount }}
    </v-chip>
    <v-chip x-small>
      {{ (timer/ 1000).toFixed(1) }}
    </v-chip>
    <v-icon v-if="!pause" small @click="pause = true">
      mdi-pause-circle-outline
    </v-icon>
    <v-icon v-else small @click="pause = false">
      mdi-play-circle-outline
    </v-icon>
    <v-icon small @click="reset">
      mdi-close-circle-outline
    </v-icon>
  </div>
</template>

<script>
export default {
  name: 'BetterUX',
  data() {
    return {
      pause: false,
      clickCount: 0,
      keystrokeCount: 0,
      timer: 0,
      interval: null
    }
  },
  created() {
    this.interval = setInterval(() => { if (!this.pause) { this.timer += 100 } }, 100)
    document.addEventListener('click', this.onClick, true)
    document.addEventListener('contextmenu', this.onClick, true)
    document.addEventListener('keypress', this.onKeypress, true)
  },
  beforeDestroy() {
    clearInterval(this.interval)
    document.removeEventListener('click', this.onClick, true)
    document.removeEventListener('contextmenu', this.onClick, true)
    document.removeEventListener('keypress', this.onKeypress, true)
  },
  methods: {
    reset() {
      this.clickCount = 0
      this.keystrokeCount = 0
      this.timer = 0
    },
    onClick() {
      if (!this.pause) {
        this.clickCount++
      }
    },
    onKeypress() {
      if (!this.pause) {
        this.keystrokeCount++
      }
    }
  }
}
</script>

<style scoped>

</style>