Resort images and clean up

src/components/timeshare/resort/resortImage.vue

+<template>
+  <div class="outer">
+    <div id="mainImage">
+      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
+    </div>
+    <div class="list-images">
+      <div class="scrolling-wrapper-flexbox row inner">
+        <div v-for="(image, i) in images" :key="i" :class="myClass">
+          <a @click="changeImage(i)">
+            <img class="small-image" :src="image" alt="Resort Image" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  props: {
+    images: [],
+  },
+  data() {
+    return {
+      largeImg: 0,
+    };
+  },
+  computed: {
+    myClass() {
+      if (this.images && this.images.length === 3) {
+        return 'col-md-4';
+      }
+      return 'col-md-3 nopadding';
+    },
+    imageX() {
+      return this.images[this.largeImg];
+    },
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
+  },
+  methods: {
+    changeImage(number) {
+      this.largeImg = number;
+    },
+  },
+};
+</script>
+<style scoped>
+.outer {
+  background-color: #efefef;
+  padding: 10px;
+}
+.inner {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.main-image {
+  max-width: 80%;
+  max-height: 412px;
+}
+.list-images {
+  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;
+}
+.small-image {
+  width: 100%;
+  height: 125px;
+}
+</style>

src/components/timeshare/resort/resortPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <section>
-    <div style="padding-left:200px;padding-right:200px;">
+  <section class="my-top">
+    <div class="my-container">
       <div class="row">
         <div class="col-md-12 col-lg-8">
           <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">{{resort.prName}}</h1>
+            <h1 class="title-d my-title">{{resort.prName}}</h1>
           </div>
           <br />
         </div>
-        <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="imageX"
-                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: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>
-            <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 class="col-md-6 col-lg-6">
+          <ResortImages :images="images" />
         </div>
         <div class="col-md-6">
           <ul class="nav nav-tabs" id="myTab" role="tablist">
 import { mapState, mapActions } from 'vuex';
 import WeekList from '../buy/weekListComponent.vue';
 import FilterComponent from '../searchTimeshare.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   props: {
     resortCode: {},
   },
-  data() {
-    return {
-      largeImg: 0,
-    };
-  },
   components: {
     WeekList,
     FilterComponent,
+    ResortImages,
   },
   mounted() {
     this.initResort(this.resortCode);
   },
   computed: {
-    imageX() {
-      return this.images[this.largeImg];
-    },
     ...mapState('resort', ['resort', 'description', 'images', 'layout']),
     mapUrl() {
       return this.resort
     routerGoTo(goto) {
       this.$router.push(goto);
     },
-    changeImage(number) {
-      this.largeImg = number;
-    },
   },
 };
 </script>
 <style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 200px;
+  padding-right: 200px;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
+.scrolling-wrapper-flexbox {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.scrolling-wrapper-flexbox .card {
+  flex: 0 0 auto;
+}
+.nopadding {
+  padding: 1px !important;
+  margin: 0 !important;
+}
 .myMargin {
   margin-left: 2%;
   margin-right: 2%;

src/components/timeshare/resort/unitPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
+  <div class="my-container my-top">
     <div class="row">
       <div class="col-md-12 col-lg-8">
         <div class="title-box-d">
-          <h1
-            class="title-d"
-            style="text-align:left; font-size: 250%"
-          >{{week ? week.resortName : ''}}</h1>
+          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
         </div>
         <br />
       </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>
-    <br />
-    <div class="container col-md-12" style="text-align:left;">
-      <div class="row">
         <div class="col-md-6">
-          <div class="title-box-d">
-            <h3 class="title-d">Property Description</h3>
-          </div>
-          <p>{{description}}</p>
-          <div>
-            <div class="title-box-d">
-              <h3 class="title-d">Facilities</h3>
-            </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>
+          <ResortImages :images="images" />
         </div>
-        <div class="col-md-6" v-if="week">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/interested-timeshare/"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
-            <div class="title-box-d">
-              <h3 class="title-d">Summary</h3>
-            </div>
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortunit">Unit</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>U#</b>
-                    </span>
+        <div class="col-md-6">
+          <hr />
+          <div v-if="week">
+            <form
+              id="mainForm"
+              method="POST"
+              action="/interested-timeshare/"
+              accept-charset="UTF-8"
+              enctype="multipart/form-data"
+            >
+              <div class="title-box-d">
+                <h3 class="title-d">Summary</h3>
+              </div>
+              <div class="form-row">
+                <div class="col-md-6">
+                  <label for="resortunit">Unit</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="resort"
+                      name="resortunit"
+                      :value="week ? week.unitNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="resort"
-                    name="resortunit"
-                    :value="week ? week.unitNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="resortWeek">Module / Week Number</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>M</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortWeek">Module / Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="week"
+                      name="resortWeek"
+                      :value="week ? week.weekNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="week"
-                    name="resortWeek"
-                    :value="week ? week.weekNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
 
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>R</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortModule">Current Year Levy</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="levy"
+                      name="levy"
+                      :value="formatPrice(week ? week.levyAmount : 0)"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="levy"
-                    name="levy"
-                    :value="formatPrice(week ? week.levyAmount : 0)"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="price">Price</label>
-                <div class="property-price d-flex">
-                  <div class="price-border">
-                    <div class="price-label">
-                      <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
+                <div class="col-md-6">
+                  <label for="price">Price</label>
+                  <div class="property-price d-flex">
+                    <div class="price-border">
+                      <div class="price-label">
+                        <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <br />
-          </form>
-          <br />
-          <div class="d-flex justify-content-between">
-            <div class="p-1">
-              <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
-            </div>
-            <div class="p-1">
-              <button
-                type="button"
-                class="btn btn-lg btn-b-n even-width mr-auto"
-                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"
-                        />
+            </form>
+            <hr />
+            <div class="d-flex justify-content-between">
+              <div class="p-1">
+                <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+              </div>
+              <div class="p-1">
+                <button
+                  type="button"
+                  class="btn btn-lg btn-b-n even-width mr-auto"
+                  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>
+            <hr />
+          </div>
+        </div>
+        <hr />
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Facilities</h3>
           </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-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Property Description</h3>
+          </div>
+          <p>{{description}}</p>
         </div>
       </div>
     </div>
 <script>
 import { mapState, mapActions } from 'vuex';
 import makeOffer from '../../processFlow/makeOffer.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   name: 'unit',
   components: {
     makeOffer,
+    ResortImages,
   },
   props: {
     resortCode: {},
     this.initWeek(this.weekId);
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-    ]),
+    ...mapState('resort', ['resort', 'description', 'images']),
     ...mapState('week', ['week']),
   },
   methods: {
 };
 </script>
 <style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 15%;
+  padding-right: 15%;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
 .btn.btn-b-c {
   background-color: #ffffff;
   color: #60cbeb;

src/store/modules/timeshare/resort.js

         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
         )
-        .then(result => commit('addImage', result.data))
+        .then((result) => {
+          if (result.data && result.data.length > 0) {
+            commit('addImage', result.data);
+          }
+        })
         .catch(console.error);
     },
     getLayout({

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },