Working hours selection?

Question

A reference to another question saw in the stack overflow.

I checked for a solution like this but haven't succeeded yet.

 <div class="form-group">
   <label>Working Hours :</label>
   <div v-for="value in day" class="checkboxFour"<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
     <p>FROM</p>
     <label for="need" style=" width: 20%!important;">{{value.name}}</label>
     <input id="value.from" type="time" v-model="value.from" name="value.from" style="width: 30%!important;">
     <p>TO</p>
     <input id="value.to" type="time" v-model="value.to" name="value.to" style="width: 30%!important;">
     <br>
   </div>
 </div>

My vue js code for the same is

work = new Vue({
  el: "#work",
  data: {
    data: [],
    day:[
      {name:"Sunday",val:1},
      {name:"Monday",val:2},
      {name:"Tuesday",val:3},
      {name:"Wednesday",val:4},
      {name:"Thursday",val:5},
      {name:"Friday",val:6},
      {name:"Saturday",val:7}
    ],
    string:'',
  },

  methods: {
    wrkSubmit: function(e){
      var arr = [];
      this.day.map(function(v,i) {
        console.log(v.selected == true);
        if(v.selected == true){
          arr.push(v.val+'&'+v.from+'&'+v.to);
        }
      });

      this.string = arr.join(',');
      var vm = this;
      data = {};
      data['wrk_list'] = this.string;

      $.ajax({
        url: 'http://127.0.0.1:8000/add/workhour/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if(e.status){
            alert("Success")
          } else {
            alert(" Failed") 
          }
        }
      });

      return false;
    },
  } 

If I try this code. I need to select working hours separately for each day I am selecting. Rather I need to choose a time first and hence use that working hour for all the days I am choosing. Also, give an edit option if the user needs to change time. A solution to this problem has given there, but it is not based on the code given above.

Is it possible to have a solution as such? Select a working hour at first and then use it for all the days selecting ie. checkbox, and change values if needed.

Just for experimenting purpose. If it is possible please help me.

Answer 1

You need to assign value of your data array when change event of your checkbox is clicked,

Below is working code,

HTML & JS

var Main = {
	data () {
  	return {
      day: [
          {name:"Sunday",val:1, selected:false, from: '02.15', to: '06.01'},
          {name:"Monday",val:2, selected:false, from: '00.00', to: '00.00'},
          {name:"Tuesday",val:3, selected:false, from: '00.00', to: '00.00'},
          {name:"Wednesday",val:4,  selected:false, from: '00.00', to: '00.00'},
          {name:"Thursday",val:5, selected:false, from: '00.00', to: '00.00'},
          {name:"Friday",val:6, selected:false, from: '00.00', to: '00.00'},
          {name:"Saturday",val:7, selected:false, from: '00.00', to: '00.00'}
      ],
      string:'',
      dfrom: '00.00',
      dto: '00.00'
    }
  },
  methods: {
    getData() {
      this.string = ''
      let arr = []
      for (let item of this.day) {
        if (item.selected) {
          arr.push(item.val+'&'+item.from+'&'+item.to)         
        }
      }
      this.string = arr.join(',')
    },
    changeUpdate() {
        
    	for (let item of this.day) {
        if (item.selected) {
          item.from = this.dfrom
          item.to = this.dto
        }
      }
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app" style="padding:20px">
  <label>Set Default:</label>
  From: <input type="time" v-model="dfrom"/>
  To: <input type="time" v-model="dto"/>

  <br/><hr/>
  <label>Working Hours :</label>
  <div v-for="item in day">
    <input type="checkbox" value="item.val" v-model="item.selected" @change="changeUpdate">
    <label for="need" style=" width: 20%!important;">{{item.name}}</label>
    <span v-if="item.selected">
      <span>FROM</span>
      <input id="value.from" type="time" v-model="item.from" name="item.from">({{item.from}})
      &nbsp;&nbsp; --> &nbsp;&nbsp;
      <span>TO</span>
      <input id="item.to" type="time" v-model="item.to" name="item.to">({{item.to}})
    </span>
  </div>
  <button @click="getData">Save</button>
  <hr><hr>
  Saved data : {{string}}
</div>

Hope this helps. :)

Answer 2

The answer above covers pretty much the problem, the issues is that if you change your default hour, the selected days will not update unless you uncheck it and check it again, but here are Watchers to the rescue, watch (doh) when the default values changes, then update the selected days.

(open the snippet in full page if you can't see it)

new Vue({
  el: '#app',
  data: function() {
    return {
      day:[
        {name:"Sunday",val:1},
        {name:"Monday",val:2},
      ],
      defaultFrom: '',
      defaultTo: '',
    }
  },
  methods: {
    selectDay: function (item) {
      item.from = this.defaultFrom;
      item.to = this.defaultTo;
    },
    updateSelecteds: function(from, to) {
      for(var i = 0; i < this.day.length; i++) {
        var day = this.day[i];

        if(day.selected) {
        	if(from)
          	day.from = from;	
          if(to)
          	day.to = to;
        }
      }
    }
  },
  watch: {
  	defaultFrom: function(newVal, oldVald) {
    	this.updateSelecteds(newVal, null)
    },
    defaultTo: function(newVal, oldVald) {
    	this.updateSelecteds(null, newVal)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div>
    <h3>Working Hours (Default)</h3>
    <p>From: <input type="time" v-model="defaultFrom"/></p>
    <p>To: <input type="time" v-model="defaultTo"/></p>
  </div>

 <div>
   <h3>Days</h3>
  <div v-for="d in day">
    <input type="checkbox" value="d.val" v-model="d.selected" @click="selectDay(d)">
    <label for="need" style=" width: 20%!important;">{{d.name}}</label>
    <span v-if="d.selected">
      <span>From</span>
      <input type="time" v-model="d.from" name="d.from">
      <span>To</span>
      <input type="time" v-model="d.to" name="d.to">
    </span>
  </div>
 </div>
</div>