vuestuff.vue

<!--
 Countdown
-->
<template>
  <div :class="rootClass">
    <div :class="`${cn}__col`">
      <span :class="`${cn}__number`">{{ days }}</span>
      <div :class="`${cn}__format`">{{ days === 1 ? 'Day' : 'Days' }}</div>
    </div>
    <div :class="`${cn}__col`">
      <span :class="`${cn}__number`">{{ hours }}</span>
      <div :class="`${cn}__format`">{{ hours === 1 ? 'Hour' : 'Hours' }}</div>
    </div>
    <div :class="`${cn}__col`">
      <span :class="`${cn}__number`">{{ minutes }}</span>
      <div :class="`${cn}__format`">{{ minutes === 1 ? 'Minute' : 'Minutes' }}</div>
    </div>
    <div :class="`${cn}__col`">
      <span :class="`${cn}__number`">{{ seconds }}</span>
      <div :class="`${cn}__format`">{{ seconds === 1 ? 'Second' : 'Seconds' }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Countdown',
    props: {
      modifiers: {
        type: Array,
        default: () => []
      },
      starttime: {
        type: String,
        required: true
      },
      endtime: {
        type: String,
        required: true
      },
      event: {
        type: Object,
        default: () => {
        }
      },
    },
    data() {
      return {
        cn: 'fr-Countdown',
        timer: "",
        start: "",
        interval: "",
        days: "",
        minutes: "",
        hours: "",
        seconds: "",
      };
    },
    computed: {
      rootClass() {
        const modifiers = this.modifiers
          .map(mod => this.cn + "--" + mod)
          .join("  ");
        return [this.cn, modifiers];
      },
    },
    methods: {
      timerCount: function (start, end) {
        // Get todays date and time
        let now = new Date().getTime();

        // Find the distance between now an the count down date
        let distance = start - now;
        let passTime = end - now;

        if (distance < 0 && passTime < 0) {
          clearInterval(this.interval);
          return;

        } else if (distance < 0 && passTime > 0) {
          this.calcTime(passTime);

        } else if (distance > 0 && passTime > 0) {
          this.calcTime(distance);
        }
      },
      calcTime: function (dist) {
        // Time calculations for days, hours, minutes and seconds
        this.days = Math.floor(dist / (1000 * 60 * 60 * 24));
        this.hours = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((dist % (1000 * 60)) / 1000);
      },
      startCounter() {
        this.start = new Date(this.starttime).getTime();
        this.end = new Date(this.endtime).getTime();

        // Update the count down every 1 second
        this.timerCount(this.start, this.end);
        this.interval = setInterval(() => {
          this.timerCount(this.start, this.end);
        }, 1000);
      }
    },
    watch: {
      event() {
        this.startCounter()
      }
    },
    mounted() {
      this.startCounter()
    },
    created() {},
    components: {},
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "../assets/css/framework";

  .fr-Countdown {
    $root: &;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    &__col {
      @include space(margin-left margin-right, 1);
    }

    &__number {
      font-size: 40px;
      color: c('gray', 'dark');

      .dark-theme & {
        color: c('white');
      }

      .light-blue-theme & {
        color: c('blue');
      }

      @include media('>=t') {
        font-size: 68px;
      }
    }

    &__format {
      @include space(margin-top, 0.5);
      font-size: 14px;
      font-weight: 700;
      color: rgba(c('gray', 'dark'), 0.6);

      .dark-theme & {
        color: rgba(c('white'), 0.6);
      }

      .light-blue-theme & {
        color: rgba(c('blue'), 0.6);
      }

      @include media('>=t') {
        font-size: 20px;
      }
    }
  }
</style>