RestaurantSite/src/components/orders/orderConf/confAddress.vue

<template>
  <div class="container">
    <div class="row" style="text-align:left">
      <div class="col-md-4" style="margin-bottom: 1em">
        <div class="custom-control custom-switch">
          <label>Do you live in a complex or block of flats?</label>
          <input
            style="margin-left: 1px"
            type="checkbox"
            class="custom-control-input"
            id="thCloseSwitch"
            :checked="userAddress.isComplex"
            @change="selectionChanged"
          />
          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
            {{
            isComplex ? "Yes" : "No"
            }}
          </label>
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-4" style="margin-bottom: 1em">
        <button
          @click="ShowMap()"
          class="btn btn-b-n"
          type="button"
          data-dismiss="modal"
        >Update Address</button>
      </div>
      <div class="col-md-4" style="margin-bottom: 1em">
        <button
          @click="GetLocation()"
          class="btn btn-b-n"
          type="button"
          data-dismiss="modal"
        >Use My Location</button>
      </div>
    </div>
    <div v-if="userAddress.isComplex" class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Complex Name</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
          </span>
          <input
            class="form-control"
            type="text"
            name="FirstName"
            v-model="userAddress.complexName"
          />
        </div>
      </div>
      <div class="col-md-6" style="margin-bottom: 1em">
        <label>Unit Number</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
          </span>
          <input class="form-control" type="text" name="Surname" v-model="userAddress.unitNumber" />
        </div>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-6" style="margin-bottomL 1em">
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Street Number</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.streetNumber"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Street Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.streetName"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Suburb</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.suburb"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>City</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.city"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Province</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.province"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Postal Code</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.postalCode"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4" style="margin-bottom: 1em">
            <button @click="Continue" class="btn btn-b-n" type="button">Use Above Address</button>
          </div>
        </div>
      </div>
      <div class="col-md-6" style="margin-bottomL 1em">
        <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
      </div>
    </div>

    <modal name="map" :width="600" :height="620">
      <div class="container">
        <h2>Update Location</h2>
        <br />
        <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
        <div class="row" style="text-align:left">
          <div class="col-md-4" style="margin-bottom: 1em">
            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
import Map from "../../shared/mapSetLocation";
import { mapState, mapActions } from "vuex";
import Log from "../../../assets/Log";

export default {
  name: "confirmAddress",
  components: {
    Map,
  },
  data() {
    return {
      varbla: false,
    };
  },
  methods: {
    ...mapActions("user", ["getUserAddress"]),
    selectionChanged() {
      this.userAddress.isComplex = !this.userAddress.isComplex;
    },
    ShowMap() {
      this.$modal.show("map");
    },
    HideMap() {
      this.$modal.hide("map");
    },
    GetLocation() {
      navigator.geolocation.getCurrentPosition((position) => {
        // this.center = {
        //   lat: position.coords.latitude,
        //   lng: position.coords.longitude,
        // };
        alert(JSON.stringify(position));
      });
    },
    Continue() {
      this.order.deliveryAddress = this.userAddress;
      this.order.items = this.cartItems;
      this.$emit("can-continue", { value: true });
    },
    UpdateAddress(address) {
      this.userAddress.streetNumber = address.streetNumber;
      this.userAddress.streetName = address.streetName;
      this.userAddress.suburb = address.suburb;
      this.userAddress.city = address.city;
      this.userAddress.province = address.province;
      this.userAddress.country = address.country;
      this.userAddress.postalCode = address.postalCode;
      this.userAddress.googleMapUrl = address.url;
      this.userAddress.latitude = address.coordinates.lat;
      this.userAddress.longitude = address.coordinates.lng;
      this.$emit("can-continue", { value: true });
    },
  },
  computed: {
    ...mapState("user", ["userAddress"]),
    ...mapState("cart", ["cartItems"]),
    ...mapState("order", ["order"]),
    mapCoords() {
      var coords = {
        lat: this.userAddress.latitude,
        lng: this.userAddress.longitude,
      };
      return coords;
    },
    CurrentPosition() {
      this.$getLocation(options).then((coordinates) => {
        alert(coordinates);
      });
    },
  },
  mounted() {
    this.getUserAddress(Log.userId());
    this.CurrentPosition();
  },
};
</script>