Facilities Split

package-lock.json

@@ -2273,6 +2273,22 @@
         "resolve": "^1.4.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -7781,6 +7797,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marker-clusterer-plus": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
+      "integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
+    },
     "material-design-icons-iconfont": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-3.0.3.tgz",
@@ -12340,6 +12361,15 @@
         "quill": "^1.3.6"
       }
     },
+    "vue2-google-maps": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/vue2-google-maps/-/vue2-google-maps-0.10.7.tgz",
+      "integrity": "sha512-y5aBJTAsfGvpsbfgPaeWU7o7QbOeINZKsP6SB9qrBe8U8EYBFO/bTWo3rcMq/NOtgT/XssV3Nwg/2u3no6jWbw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "marker-clusterer-plus": "^2.1.4"
+      }
+    },
     "vuetify": {
       "version": "1.5.22",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.22.tgz",

package.json

@@ -34,6 +34,7 @@
     "vue-router": "^3.1.5",
     "vue-trix": "^1.1.7",
     "vue2-editor": "^2.10.2",
+    "vue2-google-maps": "^0.10.7",
     "vuetify": "^1.5.22",
     "vuex": "^3.1.2"
   },

src/components/financial/paygate/paygateProcess.vue

@@ -0,0 +1,57 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapGetters, mapState, mapActions } from "vuex";
+
+export default {
+  methods: {
+    ...mapActions(["payment", ["addPayment"]]),
+    sethtmlData(id, check) {
+      this.reqId = id;
+      this.checksum = check;
+    },
+    async placeOrder() {
+      await this.addOrder(this.price).then(async response => {
+        var respObj = {};
+
+        await response.split("&").forEach(element => {
+          var name = "";
+          var value = "";
+          name = element.split("=")[0];
+          value = element.split("=")[1];
+          if (name === "PAYGATE_ID") {
+            respObj.PAYGATE_ID = value;
+          } else if (name === "PAY_REQUEST_ID") {
+            respObj.PAY_REQUEST_ID = value;
+          } else if (name === "REFERENCE") {
+            respObj.REFERENCE = value;
+          } else if (name === "CHECKSUM") {
+            respObj.CHECKSUM = value;
+          }
+        });
+
+        await this.sethtmlData(respObj.PAY_REQUEST_ID, respObj.CHECKSUM);
+      });
+
+      this.$router.push({
+        name: "PaymentGateway",
+        params: {
+          paymentReqId: this.reqId,
+          checksum: this.checksum
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.cardShadow {
+  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.281), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+</style>
+
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/directions.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <label v-if="startAddress === null" class="uniSelectLabel" for="weekInfoRegionSelect"
+          >Select</label
+        >
+        <select v-model="startAddress" class="form-control mb-3" @change="calcRoute()">
+          <optgroup label="Cities">
+            <option value="-29.087217,26.154898">Bloemfontein</option>
+            <option value="-33.918861, 18.423300">Cape Town</option>
+            <option value="-29.883333, 31.049999">Durban</option>
+            <option value="-33.0153, 27.9116">East London</option>
+            <option value="-33.977074, 22.457581">George</option>
+            <option value="-26.195246, 28.034088">Johannesburg</option>
+            <option value="-25.4745, 30.9703">Nelspruit</option>
+            <option value="-23.9045, 29.4689">Polokwane</option>
+            <option value="-33.9180, 25.5701">Port Elizabeth</option>
+            <option value="-25.731340, 28.218370">Pretoria</option>
+            <option value="-28.44776, 21.25612">Upington</option>
+          </optgroup>
+
+          <optgroup label="Airports">
+            <option value="-26.13916667, 28.24611111">OR Tambo</option>
+            <option value="-29.61444444, 31.11638889">King Shaka</option>
+            <option value="-33.9843, 25.6170">Port Elizabeth</option>
+            <option value="-33.96944444, 18.59722222">Cape Town</option>
+          </optgroup>
+        </select>
+        <GmapMap
+          :center="{ lat: -26.195246, lng: 28.034088 }"
+          :zoom="7"
+          map-type-id="terrain"
+          style="width: 100%; height: 500px"
+          ref="map"
+        >
+        </GmapMap>
+        <div style="max-height:500px; overflow:auto">
+          <table class="table table-sm">
+            <tr>
+              <td colspan="4">{{ overallRoute }}</td>
+            </tr>
+            <tr v-for="(direction, i) in directionSteps" :key="i">
+              <td></td>
+              <td>{{ i + 1 + "." }}</td>
+              <td style="max-width:200px">
+                <p v-html="direction.instructions" style="font-size:12px"></p>
+              </td>
+              <td>
+                <p style="font-size:12px">{{ direction.distance.text }}</p>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { gmapApi } from "vue2-google-maps";
+export default {
+  computed: {
+    google: gmapApi,
+    directionsRenderer() {
+      return new google.maps.DirectionsRenderer();
+    }
+  },
+  props: {
+    resortCoords: {}
+  },
+  data() {
+    return {
+      directionService: {},
+      startAddress: null,
+      directionSteps: [],
+      overallRoute: ""
+    };
+  },
+  methods: {
+    calcRoute() {
+      var resortCoords = this.resortCoords.split(",");
+      var resortLatLng = new google.maps.LatLng({
+        lat: parseFloat(resortCoords[1]),
+        lng: parseFloat(resortCoords[0])
+      });
+
+      var startCoords = this.startAddress.split(",");
+      var startLatLng = new google.maps.LatLng({
+        lat: parseFloat(startCoords[0]),
+        lng: parseFloat(startCoords[1])
+      });
+
+      var LatLng = new google.maps.LatLng({
+        lat: -29.087217,
+        lng: 26.154898
+      });
+
+      this.directionsService = new google.maps.DirectionsService();
+      //   var map = this.$refs.map.$mapObject;
+      //   this.directionsRenderer.setMap(map);
+      //   var start = document.getElementById("start").value;
+      var end = "joplin, mo";
+      var request = {
+        origin: startLatLng,
+        destination: resortLatLng,
+        travelMode: "DRIVING"
+      };
+
+      this.directionsService.route(request, (result, status) => {
+        if (status == "OK") {
+          this.directionSteps = result.routes[0].legs[0].steps;
+          console.log(result.routes[0].legs[0]);
+          this.overallRoute =
+            result.routes[0].legs[0].distance.text +
+            ". About " +
+            result.routes[0].legs[0].duration.text;
+
+          this.directionsRenderer.setMap(this.$refs.map.$mapObject);
+
+          this.directionsRenderer.setDirections(result);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.uniSelectLabel {
+  position: absolute;
+  z-index: 2;
+  margin-left: 15px;
+  margin-top: 7px;
+  font-family: "muli";
+  font-size: 15px;
+  color: rgb(118, 118, 118);
+}
+</style>

src/components/timeshare/resort/unit/facilities.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h5>On-Site</h5>
+        <table class="table table-sm">
+          <tr v-for="(onSiteFacility, i) in onSiteFacilities" :key="i">
+            <td>
+              {{ onSiteFacility.category + " " + onSiteFacility.description }}
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="col">
+        <h5>Off-Site</h5>
+        <table class="table table-sm">
+          <tr v-for="(offSiteFacility, i) in offSiteFacilities" :key="i">
+            <td>
+              {{ offSiteFacility.category + " " + offSiteFacility.description }}
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import axios from "axios";
+export default {
+  data() {
+    return {
+      onSiteFacilities: [],
+      offSiteFacilities: []
+    };
+  },
+  props: {
+    resortCode: ""
+  },
+  mounted() {
+    this.getFacilities();
+  },
+  methods: {
+    getFacilities() {
+      this.getOnSite();
+      this.getOffSite();
+    },
+    async getOnSite() {
+      var onSiteObj = {
+        id: this.resortCode,
+        site: "On"
+      };
+      const response = await axios.post(
+        "https://www.gomelo.co.za/api/v1/product/facilities",
+        onSiteObj
+      );
+      if (response.status === 200) {
+        response.data.forEach(facility => {
+          if (facility.description !== null) {
+            facility.description = "(" + facility.description + ")";
+          } else {
+            facility.description = "";
+          }
+        });
+        this.onSiteFacilities = response.data;
+      }
+    },
+    async getOffSite() {
+      var offSiteObj = {
+        id: this.resortCode,
+        site: "Off"
+      };
+      const response = await axios.post(
+        "https://www.gomelo.co.za/api/v1/product/facilities",
+        offSiteObj
+      );
+      if (response.status === 200) {
+        response.data.forEach(facility => {
+          if (facility.description !== null) {
+            facility.description = "(" + facility.description + ")";
+          } else {
+            facility.description = "";
+          }
+        });
+        this.offSiteFacilities = response.data;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/summarySection.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="container pb-5">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>{{ week ? week.resort.resortName : "" }}</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-5">
+        <div class="col-md-6">
+          <gallerySection :images="images" />
+        </div>
+        <div class="col-md-6 summarySection">
+          <h3>Summary</h3>
+          <div class="row">
+            <div align="center" class="col">
+              <label for="unit">Unit: </label>
+              <h5>{{ week ? week.unitNumber : "" }}</h5>
+            </div>
+            <div align="center" class="col">
+              <label for="week">Module/Week: </label>
+              <h5>{{ week ? week.weekNumber : "" }}</h5>
+            </div>
+          </div>
+          <div class="row mt-3">
+            <div align="center" class="col">
+              <label for="levy">Current Year Levy: </label>
+              <h5>R{{ formatPrice(week ? week.levyAmount : 0) }}</h5>
+            </div>
+          </div>
+          <div class="row mt-5">
+            <div align="center" class="col">
+              <div class="intro-content">
+                <h2>Price</h2>
+              </div>
+              <h4>R {{ formatPrice(week ? week.sellPrice : 0) }}</h4>
+            </div>
+          </div>
+          <div class="row mt-3">
+            <div class="col">
+              <a href="javascript:history.back()" class="btn-white-border">Back</a>
+            </div>
+            <div class="col">
+              <button
+                class="btn-solid-blue"
+                style="color:white"
+                data-toggle="modal"
+                data-target="#myModal"
+              >
+                Make an Offer
+              </button>
+              <div class="col-md-12">
+                <div id="myModal" class="modal fade" role="dialog">
+                  <div class="modal-dialog modal-lg">
+                    <!-- Modal content-->
+                    <div class="modal-content">
+                      <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                      </div>
+                      <div padding-left="20px">
+                        <makeOffer
+                          name="MakeOffer"
+                          :isMakeOffer="true"
+                          :isProperty="false"
+                          :item="week"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
+
+<script>
+/* eslint-disable */
+import makeOffer from "../../../processFlow/makeOffer.vue";
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/tabSection.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+      <li class="nav-item">
+        <a
+          class="nav-link active"
+          id="home-tab"
+          data-toggle="tab"
+          href="#facilities"
+          role="tab"
+          aria-controls="home"
+          aria-selected="true"
+          ><h2>Facilities</h2>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          id="profile-tab"
+          data-toggle="tab"
+          href="#directions"
+          role="tab"
+          aria-controls="profile"
+          aria-selected="false"
+          ><h2>Directions</h2>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          id="contact-tab"
+          data-toggle="tab"
+          href="#layout"
+          role="tab"
+          aria-controls="contact"
+          aria-selected="false"
+          ><h2>Layout</h2>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          id="contact-tab"
+          data-toggle="tab"
+          href="#media"
+          role="tab"
+          aria-controls="contact"
+          aria-selected="false"
+          ><h2>Media</h2>
+        </a>
+      </li>
+    </ul>
+    <div class="tab-content" id="myTabContent">
+      <div
+        class="tab-pane fade show active"
+        id="facilities"
+        role="tabpanel"
+        aria-labelledby="home-tab"
+      >
+        <facilities :resortCode="resortCode" />
+      </div>
+      <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
+        <directions :resortCoords="resortCoords" />
+      </div>
+      <div class="tab-pane fade" id="layout" role="tabpanel" aria-labelledby="contact-tab">
+        <img :src="layoutImages[0]" @click="index = 0" style="width:100%" />
+        <gallery :images="layoutImages" :index="index" @close="index = null"></gallery>
+      </div>
+      <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="contact-tab">
+        ...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import facilities from "./facilities";
+import directions from "./directions";
+import gallery from "../../../shared/gallerySlideShow";
+export default {
+  components: {
+    facilities,
+    directions,
+    gallery
+  },
+  data() {
+    return {
+      index: null
+    };
+  },
+  props: {
+    resortCode: {},
+    resortCoords: {},
+    layoutImages: {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li :hover {
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

src/components/timeshare/resort/unitPage.vue → src/components/timeshare/resort/unit/unitPage.vue

@@ -77,20 +77,11 @@
       </div>
       <div class="row mt-5">
         <div class="col">
-          <div class="section-header">
-            <h2>Facilities</h2>
-          </div>
-          <div class="row" v-if="resort.prUnitFacilities">
-            <div class="col-md-4" v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">
-              {{ item }}
-            </div>
-          </div>
-        </div>
-        <div class="col">
-          <div class="section-header">
-            <h2>Description</h2>
-          </div>
-          <p>{{ description }}</p>
+          <tabSection
+            :resortCode="resortCode"
+            :resortCoords="resort.prPostAdd1"
+            :layoutImages="layouts"
+          />
         </div>
       </div>
     </div>
@@ -101,14 +92,16 @@
 /* eslint-disable */
 
 import { mapState, mapActions, mapGetters } from "vuex";
-import makeOffer from "../../processFlow/makeOffer.vue";
-import gallerySection from "./gallerySection";
+
+import gallerySection from "../gallerySection";
+import tabSection from "./tabSection";
 
 export default {
   name: "unit",
   components: {
     makeOffer,
-    gallerySection
+    gallerySection,
+    tabSection
   },
   props: {
     resortCode: {},
@@ -119,16 +112,23 @@ export default {
     if (this.resortCode) {
       this.applyResortFilter(this.resortCode);
     }
+    this.layouts.push(this.layout);
     this.getWeeks();
+    console.log(this.resort);
   },
   computed: {
-    ...mapState("resort", ["resort", "description", "images"]),
+    ...mapState("resort", ["resort", "description", "images", "layout"]),
 
     ...mapGetters({
       weekById: "weekList/weekById"
     }),
     week() {
       return this.weekById(this.resortCode, this.unitNumber);
+    },
+    layouts() {
+      var layouts = [];
+      layouts.push(this.layout);
+      return layouts;
     }
     // ...mapState('week', ['currentWeek']),
   },

src/main.js

@@ -6,9 +6,21 @@ import moment from "moment";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import * as VueGoogleMaps from "vue2-google-maps";
 
 Vue.use(EvaIcons);
+Vue.use(VueGoogleMaps, {
+  load: {
+    key: "AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE",
+    libraries: "places,directions" // This is required if you use the Autocomplete plugin
+    // OR: libraries: 'places,drawing'
+    // OR: libraries: 'places,drawing,visualization'
+    // (as you require)
 
+    //// If you want to set the version, you can do so:
+    // v: '3.26',
+  }
+});
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
 //axios.defaults.baseURL = "http://training.provision-sa.com:82";

src/router/index.js

@@ -44,7 +44,7 @@ import UnitConfiguration from "../components/admin/unitConfiguration/unitConfigu
 import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
 
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
-import UnitPage from "../components/timeshare/resort/unitPage.vue";
+import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";
 import PrivacyPolicy from "../components/misc/privacyPolicyPage.vue";

src/store/modules/financial/payment.js

@@ -1,10 +1,11 @@
-import axios from 'axios';
+/* eslint-disable */
+import axios from "axios";
 
 export default {
   amespaced: true,
   state: {
     payments: [],
-    payment: {},
+    payment: {}
   },
   mutations: {
     setPayment(state, item) {
@@ -12,21 +13,45 @@ export default {
     },
     setPayments(state, items) {
       state.payments = items;
-    },
+    }
   },
   getters: {},
   actions: {
     getPayment({ commit }, id) {
       axios
         .get(`/api/payment/${id}`)
-        .then(result => commit('setPayment', result.data))
+        .then(result => commit("setPayment", result.data))
         .catch(console.error);
     },
     getPayments({ commit }) {
       axios
-        .get('/api/payment')
-        .then(result => commit('setPayments', result.data))
+        .get("/api/payment")
+        .then(result => commit("setPayments", result.data))
         .catch(console.error);
     },
-  },
+    async addPayment(payment) {
+      const response = await axios.post("/api/payment/", payment);
+      if (response.status === 200) {
+        var respObj = {};
+        response.data.split("&").forEach(element => {
+          var name = "";
+          var value = "";
+          name = element.split("=")[0];
+          value = element.split("=")[1];
+          if (name === "PAYGATE_ID") {
+            respObj.PAYGATE_ID = value;
+          } else if (name === "PAY_REQUEST_ID") {
+            respObj.PAY_REQUEST_ID = value;
+          } else if (name === "REFERENCE") {
+            respObj.REFERENCE = value;
+          } else if (name === "CHECKSUM") {
+            respObj.CHECKSUM = value;
+          }
+        });
+        return Promise.resolve(respObj);
+      } else {
+        return Promise.reject(response.status);
+      }
+    }
+  }
 };

src/store/modules/timeshare/resort.js

@@ -58,6 +58,7 @@ export default {
         )
         .then(result => {
           commit("setResort", result.data);
+          console.log(result.data);
         })
         .catch(console.error);
     },

src/store/modules/timeshare/unitConfiguration.js

@@ -1,23 +1,23 @@
-import axios from 'axios';
+/* eslint-disable */
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
-    unitConfigurationList: [],
+    unitConfigurationList: []
   },
   mutations: {
     setUnitConfigurationList(state, list) {
       state.unitConfigurationList = list;
-    },
+    }
   },
   getters: {},
   actions: {
-    getUnitConfigurationList({
-      commit,
-    }) {
-      axios.get('/api/unitConfiguration')
-        .then(result => commit('setUnitConfigurationList', result.data))
+    getUnitConfigurationList({ commit }) {
+      axios
+        .get("/api/unitConfiguration")
+        .then(result => commit("setUnitConfigurationList", result.data))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };