nexus-timers/src/components/Objective.vue

<template>

  <div
    class="objective"
    @click="clearObjective"
    v-longclick="forceClearObjective">
    <div>
      {{ objective.name }}
      <span v-if="objective.position"> ({{ objective.position }})</span>
    </div>

    <div>
      <Timer
        ref="timer"
        class="objective-timer"
        :initialTime="objective.initialSpawnTime"
        />
    </div>
  </div>
</template>

<style lang="sass" scoped>
  .objective
    width: 100%
    text-align: center

    &-timer
      font-size: 2rem
</style>

<script>
  import Timer from '@/components/Timer'
  export default {
    name: 'Objective',
    props: {
      objective: Object
    },
    data () {
      return {
      }
    },
    methods: {
      clearObjective: function () {
        if (this.$refs.timer.currentTime === 0) {
          this.resetTimer()
        }
      },
      forceClearObjective: function () {
        this.resetTimer()
      },
      resetTimer: function () {
        this.$refs.timer.setTime(this.objective.respawnTime)
        this.$refs.timer.startTimer()
      }
    },
    components: {
      Timer
    }
  }
</script>