CODEWITHSUNDEEP
javascripthtmlvue.jsvue-componentvue-router
Wanderer
Wanderer

Reputation: 705

How to show the expiry time as timer for an offer in vue js html?

My json data is

{"status": true, "data": [{"offerId": 1, "postId": 81, "offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg", "expiry": "2018-02-08T00:00:00Z"}, {"offerId": 4, "postId": 81, "offer": "/offer/1519618809.4734359_1.jpg", "expiry": "2018-03-01T00:00:00Z"}, {"offerId": 2, "postId": 79, "offer": "/offer/1519025622.8130004_Screenshot_21.png", "expiry": "2018-02-03T00:00:00Z"}, {"offerId": 3, "postId": 79, "offer": "/offer/1519026074.7614043_Screenshot_26.png", "expiry": "2018-03-01T00:00:00Z"}]}

These are my offers which i load. So, each offer has an expiry date. Using this expiry data and current date and time, I need to show a timer showing expires in days, hours, minutes , seconds.

How can I able to calculate the same.

My vue js code is

offers = new Vue({
    el: '#offers',
    data: {
        offer: {},
    },

mounted() { 
 var self = this; .
dat: {},
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/get/offers/", 
  data: data,
type: "POST",
dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
self.offer = e.data;
            }
            },
        });
 }
    },

So, I need to implement a timer using the expiry and the current date and time. Please help me to have a solution for the same. I am weak in js code and please help me to have a solution for the same?

My html code is

<div v-for="ofr in offer">
{{ofr.expiry}}
</div>

When I use this, I am able to load the expiry time, Instead of this, how can I able to show a timer showing the remaining time?

Upvotes: 1

Views: 1905

Answers (1)

Dencio
Dencio

Reputation: 518

The question is a bit tricky but I came up with this solution. This may not be the best but it works.

The fallback is that I added extra data inside the array which is expryTime that will be called on your v-for iteration. I set 1 sec interval for each data to refresh so every 1 sec getExpiryCounter method is called to update the expiry counter.

Check and try the snippet below:

var offers = new Vue({
  el: '#offers',
  data: {
    offer: [],
  },
  methods: {
    getExpiryCounter: function() {
      for (var idx in this.offer) {
        var timer = new Date(this.offer[idx].expiry).getTime() - new Date().getTime();
        // get day
        var day = timer / 1000 / 60 / 60 / 24;
        // get hour
        var hour = (day % 1) * 24;
        // get min
        var min = (hour % 1) * 60;
        // get sec
        var sec = (min % 1) * 60;

        var appndDate = Math.floor(day) + 'D ' + Math.floor(hour) + 'H ' + Math.floor(min) + 'M ' + Math.floor(sec) + 'S '

        if (timer < 0) {
          Vue.set(this.offer[idx], 'expryTime', 'Expired!');
        } else {
          Vue.set(this.offer[idx], 'expryTime', appndDate);
        }
      }
    }
  },
  mounted: function() {
    this.offer = [{
      "offerId": 1,
      "postId": 81,
      "offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg",
      "expiry": "2018-02-08T00:00:00Z"
    }, {
      "offerId": 4,
      "postId": 81,
      "offer": "/offer/1519618809.4734359_1.jpg",
      "expiry": "2018-03-01T00:00:00Z"
    }, {
      "offerId": 2,
      "postId": 79,
      "offer": "/offer/1519025622.8130004_Screenshot_21.png",
      "expiry": "2018-02-03T00:00:00Z"
    }, {
      "offerId": 3,
      "postId": 79,
      "offer": "/offer/1519026074.7614043_Screenshot_26.png",
      "expiry": "2018-03-01T00:00:00Z"
    }];

    var self = this;
    setInterval(function() {
      self.getExpiryCounter();
    }, 1000)
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="offers">
  <div v-for="ofr in offer">
    {{ofr.expryTime}}
  </div>
</div>

Upvotes: 2

Related Questions