Merge remote-tracking branch 'origin/master'

src/components/timeshare/buy/buyPage.vue

@@ -59,7 +59,10 @@
                   >
                     <div class="card-body">
                       <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
-                        <a class="text-capitalize" href="/resort/">{{resort.resortName}}</a>
+                        <a
+                          class="text-capitalize"
+                          @click="routerGoTo('/resort/' + resort.resortCode)"
+                        >{{resort.resortName}}</a>
                         <br />
                       </p>
                     </div>
@@ -74,18 +77,21 @@
   </section>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex';
 
 export default {
-  name: "TimeshareToBuy",
+  name: 'TimeshareToBuy',
   mounted() {
     this.getRegions();
   },
   computed: {
-    ...mapState("timeshareBuy", ["detailedRegion"])
+    ...mapState('timeshareBuy', ['detailedRegion']),
   },
   methods: {
-    ...mapActions("timeshareBuy", ["getRegions"])
-  }
+    ...mapActions('timeshareBuy', ['getRegions']),
+    routerGoTo(goTo) {
+      this.$router.push(goTo);
+    },
+  },
 };
 </script>

src/components/timeshare/resort/resortPage.vue

@@ -1,8 +1,252 @@
 <template>
-  <div></div>
+  <div>
+    <section>
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="myMargin">
+        <div class="row">
+          <div class="col-md-3">
+            <h2>Filter Resorts</h2>
+            <form
+              id="mainForm"
+              method="POST"
+              action="/filter"
+              accept-charset="UTF-8"
+              enctype="multipart/form-data"
+            >
+              <div class="form-group">
+                <select class="form-control" name="region" id="region">
+                  <option value>Region</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" id="resort" name="resort">
+                  <option value>Resort</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" name="season">
+                  <option value>
+                    <span style="color:white;">Season</span>
+                  </option>
+                </select>
+              </div>
+              <div class="form-group">
+                <select class="form-control" name="bedrooms">
+                  <option value>Bedrooms</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  id="minPrice"
+                  name="minPrice"
+                  placeholder="Minimum Price"
+                />
+              </div>
+              <div class="form-group">
+                <input
+                  class="form-control"
+                  type="number"
+                  step="any"
+                  id="maxPrice"
+                  name="maxPrice"
+                  placeholder="Maximum Price"
+                />
+              </div>
+              <div class="form-group">
+                <label>Filter Arrival Date From</label>
+                <input
+                  style="color: white;"
+                  class="form-control"
+                  type="date"
+                  id="fromDate"
+                  name="fromDate"
+                  placeholder="Arrival Date"
+                />
+              </div>
+              <div class="form-group">
+                <label>Filter Arrival Date To</label>
+                <input
+                  style="color: white;"
+                  class="form-control"
+                  type="date"
+                  id="toDate"
+                  name="toDate"
+                  placeholder="Departure Date"
+                />
+              </div>
+
+              <br />
+
+              <button class="btn btn-blue" type="submit">SEARCH</button>
+            </form>
+            <div class="col-md-12 blue-bg p-2 p-md-4">
+              <h2>Facilities</h2>
+              <ul>
+                <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
+              </ul>
+            </div>
+          </div>
+          <div class="col-md-9">
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th>Resort</th>
+                  <th>Unit Number</th>
+                  <th>Week Number</th>
+                  <th>Module</th>
+                  <th>Bedrooms</th>
+                  <th>Season</th>
+                  <th>Price</th>
+                  <th>Status</th>
+                  <th>Interested</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, i) in week" :key="i">
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                  <td>{{item.id}}</td>
+                  <td>{{item.code}}</td>
+                  <td>{{item.description}}</td>
+                </tr>
+              </tbody>
+            </table>
+            <div>
+              <div class="btn btn-primary" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
+              <hr />
+            </div>
+            {{resort.prNotes}}
+            <hr />
+            <div class="row mb-4">
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image1" alt="Resort Image" />
+              </div>
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image2" alt="Resort Image" />
+              </div>
+              <div class="col-md-4">
+                <img class="img-fluid" :src="image3" alt="Resort Image" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-12 mb-4">
+                <ul class="nav nav-tabs" id="myTab" role="tablist">
+                  <li class="nav-item">
+                    <a
+                      class="nav-link active"
+                      id="directions-tab"
+                      data-toggle="tab"
+                      href="#directions"
+                      role="tab"
+                      aria-controls="directions"
+                      aria-selected="false"
+                    >Directions</a>
+                  </li>
+                  <li class="nav-item">
+                    <a
+                      class="nav-link"
+                      id="resort-layout-tab"
+                      data-toggle="tab"
+                      href="#resort-layout"
+                      role="tab"
+                      aria-controls="resort-layout"
+                      aria-selected="true"
+                    >Resort Layout</a>
+                  </li>
+                </ul>
+                <div class="tab-content" id="myTabContent">
+                  <div
+                    class="tab-pane fade show active"
+                    id="directions"
+                    role="tabpanel"
+                    aria-labelledby="directions-tab"
+                  >
+                    <iframe
+                      :src="mapUrl"
+                      width="100%"
+                      height="450"
+                      frameborder="0"
+                      style="border:0"
+                      allowfullscreen
+                    ></iframe>
+                    <br />
+
+                    <small>
+                      <a
+                        :href="mapUrl"
+                        style="color:#0000FF;text-align:left"
+                        target="_blank"
+                      >See map bigger</a>
+                    </small>
+                  </div>
+                  <div
+                    class="tab-pane fade"
+                    id="resort-layout"
+                    role="tabpanel"
+                    aria-labelledby="resort-layout-tab"
+                  >
+                    <img class="img-fluid" :src="layout" alt="Resort Layout" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    resortCode: {},
+  },
+  mounted() {
+    this.initResort(this.resortCode);
+  },
+  computed: {
+    ...mapState('resort', ['resort', 'image1', 'image2', 'image3', 'layout']),
+    mapUrl() {
+      return this.resort
+        ? 'http://maps.google.com/maps?q='
+            + this.resort.prLatitude
+            + ', '
+            + this.resort.prLongitude
+            + '&z=15&output=embed'
+        : '';
+    },
+  },
+  methods: {
+    ...mapActions('resort', ['initResort']),
+    routerGoTo(goto) {
+      this.$router.push(goto);
+    },
+  },
+};
 </script>
 <style>
+.myMargin {
+  margin-left: 2%;
+  margin-right: 2%;
+}
 </style>

src/router/index.js

@@ -109,7 +109,7 @@ export default new Router({
     component: ContactUs,
   },
   {
-    path: 'resort/:resortCode',
+    path: '/resort/:resortCode',
     name: 'ResortPage',
     component: ResortPage,
     props: true,

src/store/index.js

@@ -7,6 +7,7 @@ import StatusModule from './modules/timeshare/status';
 import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
 import TimeshareBuyModule from './modules/timeshare/buyPage';
 import SearchTabModule from './modules/searchTab';
+import ResortModule from './modules/timeshare/resort';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -18,5 +19,6 @@ export default new Vuex.Store({
     unitConfiguration: UnitConfigurationModule,
     timeshareBuy: TimeshareBuyModule,
     searchTab: SearchTabModule,
+    resort: ResortModule,
   },
 });

src/store/modules/timeshare/resort.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    resort: {},
+    image1: '',
+    image2: '',
+    image3: '',
+    layout: '',
+  },
+  mutations: {
+    setResort(state, resort) {
+      state.resort = resort;
+    },
+    clear(state) {
+      state.resort = {};
+      state.image1 = '';
+      state.image2 = '';
+      state.image3 = '';
+      state.layout = '';
+    },
+    setImage1(state, image) {
+      state.image1 = `data:image/jpeg;base64,${image}`;
+    },
+    setImage2(state, image) {
+      state.image2 = `data:image/jpeg;base64,${image}`;
+    },
+    setImage3(state, image) {
+      state.image3 = `data:image/jpeg;base64,${image}`;
+    },
+    setLayout(state, image) {
+      state.layout = `data:image/jpeg;base64,${image}`;
+    },
+  },
+  getters: {},
+  actions: {
+    initResort({
+      commit,
+      dispatch,
+    }, resortCode) {
+      commit('clear');
+      dispatch('getResort', resortCode);
+      dispatch('getImage1', resortCode);
+      dispatch('getImage2', resortCode);
+      dispatch('getImage3', resortCode);
+      dispatch('getLayout', resortCode);
+    },
+    getResort({
+      commit,
+    }, resortCode) {
+      axios.get(
+        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
+          resortCode}`,
+      )
+        .then((result) => {
+          commit('setResort', result.data);
+        })
+        .catch(console.error);
+    },
+    getImage1({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/1`)
+        .then(result => commit('setImage1', result.data))
+        .catch(console.error);
+    },
+    getImage2({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/2`)
+        .then(result => commit('setImage2', result.data))
+        .catch(console.error);
+    },
+    getImage3({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/image/3`)
+        .then(result => commit('setImage3', result.data))
+        .catch(console.error);
+    },
+    getLayout({
+      commit,
+    }, resortCode) {
+      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
+        resortCode}/layout`)
+        .then(result => commit('setLayout', result.data))
+        .catch(console.error);
+    },
+  },
+};