Search code examples
javascriptvue.js

Calculate elapsed time with Vue

I am trying to show the dynamically elapsed time from a start time

<template>
  <div class="dashboard-editor-container">

      <div class="wrapper__body">

          <el-row :gutter="30">
             <el-col v-for="item in options" :key="item.value" align="middle" :xs="24" :sm="24" :md="24" :lg="4" :xl="24" style="margin-bottom:10px">

                 <el-button type="primary"  style="width: 180px;height:120px ;"  >{{item.label}} - {{getTimer(item.FechaHora)}}</el-button>
             </el-col>

          </el-row>


      </div>



  </div>
</template>

js

 <script>
    export default {
      data() {


       return {
            options: [{
              value: '01',
              label: 'Room 1',
              FechaHoraInicio:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            }, {
              value: '02',
              label: 'Room 2',
              FechaHoraStartTime:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            }, {
              value: '03',
              label: 'Room 2',
              FechaHoraStartTime:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            },
    }
    }
    },
 computed: {

    getTimer : function(FechaHoraInicio) {

       setInterval(function(){ 
           return  Date.now()-new Date(FechaHoraInicio)
       }, 3000);

    },
  },
    }

    </script>

the buttons are created dynamically and will have a start time, and after that I want to calculate dynamically

I dynamically create each button with its respective start time, and I need that dynamically as a clock the time that elapses is shown, subtracting the current time with the start time

enter image description here

the time that has elapsed, since the room was rented

Solution

  • i hope this works for you:

    new Vue({
  el: "#app",
  data() {
    return {
      options: [
        {
          value: "01",
          label: "Room 1",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        },
        {
          value: "02",
          label: "Room 2",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        },
        {
          value: "03",
          label: "Room 2",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        }
      ],
      intervalEvents: []
    };
  },

  created() {
    this.setTimers();
  },
  
  beforeDestroy() {
    this.intervalEvents.map(intervalEvent => {
      clearInterval(intervalEvent)
    })
  },

  methods: {
    setTimers() {
      this.options = this.options.map(option => ({
        ...option,
        elapsed: "",
        startTimeAsDate: new Date(option.FechaHoraStartTime)
      }));

      this.options.map(option => {
        const event = setInterval(() => {
          option.elapsed = new Date(new Date().getTime() - option.startTimeAsDate).toLocaleTimeString();
        }, 1000);
        
        this.intervalEvents.push(event)
      });
    }
  }
});
    <link
  rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <div class="dashboard-editor-container">
    <div class="wrapper__body">
      <el-row :gutter="30">
        <el-col
          v-for="(option, index) in options"
          :key="index"
          align="middle"
          :xs="24" :sm="24" :md="24" :lg="4" :xl="24"
          style="margin-bottom:10px"
        >
          <el-button type="primary" style="width:180px;height:120px ;">
          {{option.label}} {{ option.elapsed }}
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</div>