Univate.2 > Additions to buy Timeshare

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

+<template>
+  <div class="container">
+    <div class="row justify-content-md-center">
+      <div v-for="(media, i) in resortMedia" :key="i">
+        <div v-if="media.prCategory === 'Facebook'">
+          <a :href="`${media.prSite}`" target="_blank">
+            <img src="../../../../../public/img/icons/facebook.png" class="img_media" />
+          </a>
+        </div>
+        <div v-if="media.prCategory === 'Twitter'">
+          <a :href="`${media.prSite}`" target="_blank">
+            <img src="../../../../../public/img/icons/twitter.png" class="img_media" />
+          </a>
+        </div>
+        <div v-if="media.prCategory === 'YouTube'">
+          <a :href="`${media.prSite}`" target="_blank">
+            <img src="../../../../../public/img/icons/YouTube.png" class="img_media" />
+          </a>
+        </div>
+        <div v-if="media.prCategory === 'Website'">
+          <a :href="`${media.prSite}`" target="_blank">
+            <img src="../../../../../public/img/icons/www.png" class="img_media" />
+          </a>
+        </div>
+        <div v-if="media.prCategory === 'WalkThrough'">
+          <a :href="`${media.prSite}`" target="_blank">
+            <img src="../../../../../public/img/icons/Walking.png" class="img_media" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "resortMedia",
+  props: {
+    resortCode: ""
+  },
+  methods: {
+    ...mapActions("resort", ["getResortMedia"])
+  },
+  computed: {
+    ...mapState("resort", ["resortMedia"])
+  },
+  mounted() {
+    this.getResortMedia(this.resortCode);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.img_media {
+  height: 100px;
+  width: 100px;
+  margin: 10px;
+}
+</style>

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

       <div class="col-md-12 col-lg-8 summarySection">
         <h4>
           Unit {{ week ? week.unitNumber : "" }} | {{ week ? week.bedrooms : "" }} Bedroom/{{
-            week ? week.maxSleep : ""
+          week ? week.maxSleep : ""
           }}
           Sleeper
         </h4>
               style="color:white"
               data-toggle="modal"
               data-target="#myModal"
-            >
-              Make an Offer
-            </button>
+            >Make an Offer</button>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
 export default {
   components: {
     makeOffer,
-    gallerySection
+    gallerySection,
   },
   computed: {
     ...mapState("resort", ["resort", "description", "images", "layout"]),
 
     ...mapGetters({
-      weekById: "weekList/weekById"
+      weekById: "weekList/weekById",
     }),
     week() {
       return this.weekById(this.resortCode, this.unitNumber);
-    }
+    },
     // ...mapState('week', ['currentWeek']),
   },
   props: {
     resortCode: {},
-    unitNumber: {}
+    unitNumber: {},
   },
   methods: {
     ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
         return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
       }
       return "";
-    }
-  }
+    },
+  },
 };
 </script>
 

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

           role="tab"
           aria-controls="home"
           aria-selected="true"
-          ><h2>Facilities</h2>
+        >
+          <h2>Facilities</h2>
         </a>
       </li>
       <li class="nav-item">
           role="tab"
           aria-controls="profile"
           aria-selected="false"
-          ><h2>Directions</h2>
+        >
+          <h2>Directions</h2>
         </a>
       </li>
       <li class="nav-item">
           role="tab"
           aria-controls="contact"
           aria-selected="false"
-          ><h2>Layout</h2>
+        >
+          <h2>Layout</h2>
         </a>
       </li>
       <li class="nav-item">
           role="tab"
           aria-controls="contact"
           aria-selected="false"
-          ><h2>Media</h2>
+        >
+          <h2>Media</h2>
         </a>
       </li>
     </ul>
         <gallery :images="layoutImages" :index="index" @close="index = null"></gallery>
       </div>
       <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="contact-tab">
-        ...
+        <media :resortCode="resortCode" />
       </div>
     </div>
   </div>
 import gallery from "../../../shared/gallerySlideShow";
 import AOS from "aos";
 import "aos/dist/aos.css";
+import media from "./media";
 
 export default {
   components: {
     facilities,
     directions,
-    gallery
+    gallery,
+    media,
   },
   created() {
     AOS.init();
   },
   data() {
     return {
-      index: null
+      index: null,
     };
   },
   props: {
     resortCode: {},
     resortCoords: {},
     layoutImages: {},
-    resortName: ""
-  }
+    resortName: "",
+  },
 };
 </script>
 

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

     gallerySection,
     tabSection,
     summarySection,
-    carouselSection
+    carouselSection,
   },
   props: {
     resortCode: {},
-    unitNumber: {}
+    unitNumber: {},
   },
   mounted() {
     this.initResort(this.resortCode);
     ...mapState("resort", ["resort", "description", "images", "layout"]),
 
     ...mapGetters({
-      weekById: "weekList/weekById"
+      weekById: "weekList/weekById",
     }),
     week() {
       return this.weekById(this.resortCode, this.unitNumber);
       var layouts = [];
       layouts.push(this.layout);
       return layouts;
-    }
+    },
     // ...mapState('week', ['currentWeek']),
   },
   methods: {
         return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
       }
       return "";
-    }
-  }
+    },
+  },
 };
 </script>
 

src/store/modules/timeshare/resort.js

     resort: {},
     images: [],
     layout: "",
-    description: ""
+    description: "",
+    resortMedia: undefined
   },
   mutations: {
     setResort(state, resort) {
     },
     setResorts(state, list) {
       state.resorts = list;
+    },
+    setResortMedia(state, media) {
+      state.resortMedia = media;
     }
   },
   getters: {},
           })
           .catch(error => reject(new Error(error.message)));
       });
+    },
+    getResortMedia({ commit }, resortCode) {
+      axios
+        .get(
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/social/${resortCode}`
+        )
+        .then(result => commit("setResortMedia", result.data));
     }
   }
 };