sermoni

"Service monitor" / cronjob status service
Log | Files | Refs

TimePicker.vue (1576B)

      1 <template>
      2     <div style="display: flex;">
      3         <input type="number" @input="update('number', $event)" :value="number"/>
      4         <select @input="update('scalar', $event)" :value="scalar">
      5             <option v-for="u in units" 
      6                     :key="u.unit"
      7                     :value="u.scalar" 
      8                     :selected="scalar === u.scalar">
      9                 {{u.unit}}
     10             </option>
     11         </select>
     12     </div>
     13 </template>
     14 
     15 <script>
     16     export default {
     17         name: "TimePicker",
     18         props: {
     19             value: Object
     20         },
     21         data() {
     22             return {
     23                 number: this.value.number,
     24                 scalar: this.value.scalar,
     25                 units:  [
     26                     { "unit": "weeks", "scalar": 604800000 },
     27                     { "unit": "days", "scalar": 86400000 },
     28                     { "unit": "hours", "scalar": 3600000 },
     29                     { "unit": "minutes", "scalar": 60000 },
     30                     { "unit": "seconds", "scalar": 1000 },
     31                     { "unit": "none", "scalar": 0 },
     32                 ]
     33             }
     34         },
     35         watch: {
     36             value: {
     37                 immediate: true,
     38                 handler(val) {
     39                     this.number = val.number;
     40                     this.scalar = val.scalar;
     41                 }
     42             }
     43         },
     44         methods: {
     45             update(prop, e) {
     46                 const newValue = this.value;
     47                 newValue[prop] = e.target.value;
     48                 this.$emit("input", newValue);
     49             },
     50 
     51         }
     52     }
     53 </script>