Thumnail images added to resort

src/components/timeshare/resort/resortPage.vue

@@ -13,7 +13,48 @@
           </div>
           <br />
         </div>
-        <div class="row mb-4">
+        <div class="col-md-6 col-lg-6">
+          <div id="images" style="background-color:#efefef;padding:10px;">
+            <div style="float:left;width:100%;height:70%" id="mainImage">
+              <img
+                class="img-fluid"
+                :src="largeImg !== undefined ? largeImg : image1"
+                alt="Resort Image"
+                style="width: inherit;max-width:550px;max-height:412px;"
+              />
+            </div>
+            <div
+              style="padding:5px;float:left;border-top:1px solid #dedede;border-right:1px solid #dedede;border-bottom:1px solid #dedede;background-color:white;width:100%;text-align:center;"
+            >
+              <div style="float:left;margin-left:7px;cursor:pointer;cursor:hand;width:24%">
+                <a @click="changeImage(1)">
+                  <img class="productThumbnail" :src="image1" alt="Resort Image" />
+                </a>
+              </div>
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
+                <a @click="changeImage(2)">
+                  <img :src="image2" alt="Resort Image" class="productThumbnail" />
+                </a>
+              </div>
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
+                <a @click="changeImage(3)">
+                  <img :src="image3" alt="Resort Image" class="productThumbnail" />
+                </a>
+              </div>
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
+                <a @click="changeImage(4)">
+                  <img :src="image4" alt="Resort Image" class="productThumbnail" />
+                </a>
+              </div>
+            </div>
+            <div style="clear:both"></div>
+          </div>
+          <div id="unit" style="display: none;">
+            <div id="unit" style="border: 1px solid #dbdbdb;background-color:#efefef;padding:10px;"></div>
+          </div>
+        </div>
+
+        <!-- <div class="row mb-4">
           <div class="col-md-4">
             <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
           </div>
@@ -23,16 +64,75 @@
           <div class="col-md-4">
             <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
           </div>
+        </div>-->
+        <!-- <div class="row"> -->
+        <!-- <div class="col-md-6 col-lg-6"> -->
+        <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="150%"
+              height="300"
+              frameborder="0"
+              style="border:0"
+              allowfullscreen
+            ></iframe>
+            <br />
+
+            <small>
+              <a :href="mapUrl" style="color:#60CBEB;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 class="myMargin">
       <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-4">
           <h4>Filter Resort</h4>
           <FilterComponent :hideTop="true" />
         </div>
-        <div class="col-md-9">
+        <div class="col-md-8">
           <WeekList :resortCode="resortCode" />
           <div>
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
@@ -40,8 +140,8 @@
           </div>
           {{description}}
           <hr />
-          <div class="row">
-            <div class="col-md-10 mb-4">
+          <!-- <div class="row">
+            <div class="col-md-8">
               <ul class="nav nav-tabs" id="myTab" role="tablist">
                 <li class="nav-item">
                   <a
@@ -101,7 +201,7 @@
                 </div>
               </div>
             </div>
-          </div>
+          </div>-->
         </div>
       </div>
     </div>
@@ -116,12 +216,18 @@ export default {
   props: {
     resortCode: {},
   },
+  data() {
+    return {
+      largeImg: undefined,
+    };
+  },
   components: {
     WeekList,
     FilterComponent,
   },
   mounted() {
     this.initResort(this.resortCode);
+    this.largeImg = this.image1;
   },
   computed: {
     ...mapState('resort', [
@@ -130,6 +236,7 @@ export default {
       'image1',
       'image2',
       'image3',
+      'image4',
       'layout',
     ]),
     mapUrl() {
@@ -143,10 +250,23 @@ export default {
     routerGoTo(goto) {
       this.$router.push(goto);
     },
+
+    changeImage(number) {
+      console.log(number);
+      if (number === 2) {
+        this.largeImg = this.image2;
+      } else if (number === 3) {
+        this.largeImg = this.image3;
+      } else if (number === 4) {
+        this.largeImg = this.image4;
+      } else {
+        this.largeImg = this.image1;
+      }
+    },
   },
 };
 </script>
-<style>
+<style scoped>
 .myMargin {
   margin-left: 2%;
   margin-right: 2%;

src/store/modules/timeshare/resort.js

@@ -9,6 +9,7 @@ export default {
     image1: '',
     image2: '',
     image3: '',
+    image4: '',
     layout: '',
     description: '',
   },
@@ -24,6 +25,7 @@ export default {
       state.image1 = '';
       state.image2 = '';
       state.image3 = '';
+      state.image4 = '';
       state.layout = '';
     },
     setImage1(state, image) {
@@ -35,76 +37,82 @@ export default {
     setImage3(state, image) {
       state.image3 = `data:image/jpeg;base64,${image}`;
     },
+    setImage4(state, image) {
+      state.image4 = `data:image/jpeg;base64,${image}`;
+    },
     setLayout(state, image) {
       state.layout = `data:image/jpeg;base64,${image}`;
     },
   },
   getters: {},
   actions: {
-    initResort({
-      commit,
-      dispatch,
-    }, resortCode) {
+    initResort({ commit, dispatch }, resortCode) {
       commit('clear');
       dispatch('getResort', resortCode);
       dispatch('getDescription', resortCode);
       dispatch('getImage1', resortCode);
       dispatch('getImage2', resortCode);
       dispatch('getImage3', resortCode);
+      dispatch('getImage4', resortCode);
       dispatch('getLayout', resortCode);
     },
-    getDescription({
-      commit,
-    }, resortCode) {
-      axios.get(
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
-      )
+    getDescription({ commit }, resortCode) {
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
+        )
         .then((result) => {
           commit('setDescription', result.data);
         })
         .catch(console.error);
     },
-    getResort({
-      commit,
-    }, resortCode) {
-      axios.get(
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
-          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`)
+    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`)
+    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`)
+    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`)
+    getImage4({ commit }, resortCode) {
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
+        )
+        .then(result => commit('setImage4', 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);
     },