ResortPage

src/components/timeshare/resort/resortPage.vue

@@ -1,11 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <section>
-    <div class="container">
-      <br />
-      <br />
-      <br />
-      <br />
+    <div style="padding-left:200px;padding-right:200px;">
       <div class="row">
         <div class="col-md-12 col-lg-8">
           <div class="title-box-d">
@@ -13,12 +9,12 @@
           </div>
           <br />
         </div>
-        <div class="col-md-6 col-lg-6">
+        <div class="col-md-6 col-lg-6" v-if="images && images.length > 0">
           <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"
+                :src="imageX"
                 alt="Resort Image"
                 style="width: inherit;max-width:550px;max-height:412px;"
               />
@@ -26,24 +22,13 @@
             <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" />
+              <div
+                style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%"
+                v-for="(image, i) in images"
+                :key="i"
+              >
+                <a @click="changeImage(i)">
+                  <img class="productThumbnail" :src="image" alt="Resort Image" />
                 </a>
               </div>
             </div>
@@ -53,79 +38,67 @@
             <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>
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
-          </div>
-          <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 class="col-md-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="100%"
+                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>
-
     <div class="myMargin">
       <div class="row">
         <div class="col-md-4">
@@ -140,68 +113,6 @@
           </div>
           {{description}}
           <hr />
-          <!-- <div class="row">
-            <div class="col-md-8">
-              <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:#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>
@@ -218,7 +129,7 @@ export default {
   },
   data() {
     return {
-      largeImg: undefined,
+      largeImg: 0,
     };
   },
   components: {
@@ -227,18 +138,12 @@ export default {
   },
   mounted() {
     this.initResort(this.resortCode);
-    this.largeImg = this.image1;
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-      'image4',
-      'layout',
-    ]),
+    imageX() {
+      return this.images[this.largeImg];
+    },
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
     mapUrl() {
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
@@ -250,18 +155,8 @@ 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;
-      }
+      this.largeImg = number;
     },
   },
 };

src/store/modules/timeshare/resort.js

@@ -6,10 +6,7 @@ export default {
   namespaced: true,
   state: {
     resort: {},
-    image1: '',
-    image2: '',
-    image3: '',
-    image4: '',
+    images: [],
     layout: '',
     description: '',
   },
@@ -20,33 +17,24 @@ export default {
     setDescription(state, description) {
       state.description = description;
     },
+    addImage(state, image) {
+      state.images.push(`data:image/jpeg;base64,${image}`);
+    },
     clear(state) {
       state.resort = {};
-      state.image1 = '';
-      state.image2 = '';
-      state.image3 = '';
-      state.image4 = '';
+      state.images = [];
       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}`;
-    },
-    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);
@@ -56,7 +44,9 @@ export default {
       dispatch('getImage4', resortCode);
       dispatch('getLayout', resortCode);
     },
-    getDescription({ commit }, resortCode) {
+    getDescription({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
@@ -66,7 +56,9 @@ export default {
         })
         .catch(console.error);
     },
-    getResort({ commit }, resortCode) {
+    getResort({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${resortCode}`,
@@ -76,39 +68,49 @@ export default {
         })
         .catch(console.error);
     },
-    getImage1({ commit }, resortCode) {
+    getImage1({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/1`,
         )
-        .then(result => commit('setImage1', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage2({ commit }, resortCode) {
+    getImage2({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/2`,
         )
-        .then(result => commit('setImage2', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage3({ commit }, resortCode) {
+    getImage3({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/3`,
         )
-        .then(result => commit('setImage3', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage4({ commit }, resortCode) {
+    getImage4({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
         )
-        .then(result => commit('setImage4', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getLayout({ commit }, resortCode) {
+    getLayout({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/layout`,