RestaurantSite/src/components/accounts/tradingHours.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Trading Hours</h1>
      </div>
    </div>
    <!-- <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Description</label>
        <div class="input-group-prepend">
          <input class="form-control" type="text" v-model="tradingData.description" />
        </div>
      </div>
    </div>-->
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Description</label>
        <div class="input-group-prepend">
          <span class="input-group-text" style="color: #6c757d">
            <b>D</b>
          </span>
          <input class="form-control" type="text" v-model="tradingData.description" />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>From</label>
        <div class="input-group-prepend">
          <span class="input-group-text" style="color: #6c757d">
            <b>F</b>
          </span>
          <VueTimepicker v-model="tradingData.from" :disabled="EnableTime"></VueTimepicker>
        </div>
      </div>
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>To</label>
        <div class="input-group-prepend">
          <span class="input-group-text" style="color: #6c757d">
            <b>T</b>
          </span>
          <VueTimepicker v-model="tradingData.to" :disabled="EnableTime"></VueTimepicker>
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="custom-control custom-switch">
          <label>Opened 24 Hours?</label>
          <input
            style="margin-left: 1px"
            type="checkbox"
            class="custom-control-input"
            id="th24HSwitch"
            :checked="tradingData.open24"
            @change="selectionChangedHours"
            :disabled="tradingData.closed"
          />
          <label class="custom-control-label" for="th24HSwitch" style="margin-left: 40px">{{
            tradingData.open24 ? "Yes" : "No"
          }}</label>
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="custom-control custom-switch">
          <label>Closed?</label>
          <input
            style="margin-left: 1px"
            type="checkbox"
            class="custom-control-input"
            id="thCloseSwitch"
            :checked="tradingData.closed"
            @change="selectionChanged"
            :disabled="tradingData.open24"
          />
          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">{{
            tradingData.closed ? "Yes" : "No"
          }}</label>
        </div>
      </div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="input-group-prepend">
          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueTimepicker from "vue2-timepicker/src/vue-timepicker.vue";
import Switches from "vue-switches";

export default {
  name: "TradingHours",
  components: {
    VueTimepicker,
    Switches
  },
  data() {
    return {
      tradingData: {
        description: "",
        from: "",
        to: "",
        closed: false,
        open24: false
      }
    };
  },
  methods: {
    Ok() {
      this.$emit("tradingUpdate", this.tradingData);
    },
    selectionChanged() {
      this.tradingData.closed = !this.tradingData.closed;
    },
    selectionChangedHours() {
      this.tradingData.open24 = !this.tradingData.open24;
    }
  },
  computed: {
    EnableTime() {
      if (this.tradingData.closed || this.tradingData.open24) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>