Timeshare - changed so that buy only displays avail

src/components/timeshare/buy/buyPage.vue

             <h3 class="sinse-title">Timeshare To Buy</h3>
           </div>
         </div>
-
         <div class="container col-md-10">
           <br />
           <div class="row">
           <div class="row mb-4">
             <div class="container col-md-4">
               <div class="accordion" id="accordionExample">
-                <div class="card" v-for="(region, r) in regions" :key="r">
+                <div class="card" v-for="(region, r) in availRegion" :key="r">
                   <a
                     class="mb-0 color-text-a"
                     data-toggle="collapse"
-                    :data-target="'#collapse' + region.id"
+                    :data-target="'#collapse' + region.regionCode"
                     aria-expanded="false"
-                    :aria-controls="'collapse' + region.id"
+                    :aria-controls="'collapse' + region.regionCode"
+                    @mouseover="updateMapProvince(region.regionName)"
                   >
-                    <div :id="'header' + region.id">
+                    <div :id="'header' + region.regionCode">
                       <h5
                         class="btn btn-link font-weight-bold color-b"
-                        @mouseover="updateMapProvince(region.regionName)"
-                      >{{ region.regionName }}</h5>
+                      >{{ region.regionName + ' (' + region.available + ')' }}</h5>
                     </div>
                   </a>
                   <div
-                    :id="'collapse' + region.id"
+                    :id="'collapse' + region.regionCode"
                     class="collapse"
-                    :aria-labelledby="'header' + region.id"
+                    :aria-labelledby="'header' + region.regionCode"
                     data-parent="#accordionExample"
                   >
                     <div class="card-body">
                           class="cursor-pointer"
                           href="#"
                           @click="routerGoTo('/resort/' + resort.resortCode)"
-                          @mouseover="updateMap(resort.resortCode)"
-                        >{{resort.resortName}}</a>
+                          @mouseover="updateMap(resort)"
+                        >{{resort.resortName + ' (' + resort.available + ')'}}</a>
                         <br />
                       </p>
                     </div>
     };
   },
   mounted() {
-    this.getRegions();
+    console.log(4);
+    this.init();
   },
   computed: {
-    ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
+    ...mapState('timeshareBuy', ['detailedRegion', 'resort', 'availRegion']),
     mapUrl() {
-      // return 'http://maps.google.com/maps/place/Gauteng/';
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
     },
   },
   methods: {
-    ...mapActions('timeshareBuy', ['getRegions', 'getResort']),
+    ...mapActions('timeshareBuy', [
+      'init',
+      'getAvail',
+      'getRegions',
+      'getResort',
+    ]),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
-    updateMap(resortCode) {
-      this.myMap = 'SouthAfrice';
-      this.getResort(resortCode);
-      // `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=7&output=embed`;
-      this.myMap = `${this.resort.prLatitude},${this.resort.prLongitude}`;
+    updateMap(resort) {
+      this.myMap = 'SouthAfrica';
+      this.myMap = `${resort.lat},${resort.long}`;
       this.myZoom = 10;
     },
     updateMapProvince(province) {

src/store/modules/timeshare/buyPage.js

   state: {
     regions: [],
     detailedRegion: [],
+    availRegion: [],
     resort: {},
   },
   mutations: {
+    clearAvail(state, avail) {
+      state.availRegion = [];
+    },
+    addAvail(state, avail) {
+      state.availRegion.push(avail);
+    },
     setRegions(state, regions) {
       state.regions = regions;
     },
   },
   getters: {},
   actions: {
+    init({
+      commit,
+      dispatch,
+    }) {
+      commit('clearAvail');
+      dispatch('getAvail');
+      dispatch('getRegions');
+    },
+    getAvail({
+      commit,
+    }) {
+      axios.get('/api/timeshareweek/getAvailResort').then((r) => {
+        for (const reg in r.data) {
+          const newRegion = {};
+          newRegion.regionCode = r.data[reg].regionCode;
+          newRegion.regionName = r.data[reg].regionName;
+          newRegion.available = r.data[reg].available;
+          newRegion.resorts = [];
+          for (const res in r.data[reg].resorts) {
+            const newResort = {
+              resortCode: '',
+              resortName: '',
+              lat: 0,
+              long: 0,
+            };
+            newResort.resortCode = r.data[reg].resorts[res].resortCode;
+            newResort.resortName = r.data[reg].resorts[res].resortName;
+            newResort.available = r.data[reg].resorts[res].available;
+            if (r.data[reg].resorts[res]) {
+              axios.get(
+                `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
+                  r.data[reg].resorts[res].resortCode}`,
+              )
+                .then((result) => {
+                  newResort.lat = result.data.prLatitude;
+                  newResort.long = result.data.prLongitude;
+                })
+                .catch(console.error);
+            }
+            newRegion.resorts.push(newResort);
+          }
+          commit('addAvail', newRegion);
+        }
+      }).catch(
+        console
+          .error,
+      );
+    },
     getRegions({
       commit,
       dispatch,

vue.config.js

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