Bläddra i källkod

To Buy Resorts Search Screen

master
George Williams 4 år sedan
förälder
incheckning
3089ce4d65

Binär
public/img/blankImg.png Visa fil


+ 7
- 4
src/App.vue Visa fil

22
   name: "app",
22
   name: "app",
23
   data() {
23
   data() {
24
     return {
24
     return {
25
-      isLandingPage: false
25
+      isLandingPage: false,
26
     };
26
     };
27
   },
27
   },
28
   components: {
28
   components: {
29
     SearchTab,
29
     SearchTab,
30
     NavBar,
30
     NavBar,
31
-    FooterSection
31
+    FooterSection,
32
   },
32
   },
33
 
33
 
34
   methods: {
34
   methods: {
37
     },
37
     },
38
     setLandingPage(item) {
38
     setLandingPage(item) {
39
       this.isLandingPage = item;
39
       this.isLandingPage = item;
40
-    }
41
-  }
40
+    },
41
+  },
42
 };
42
 };
43
 </script>
43
 </script>
44
 
44
 
137
 .pendingOffer {
137
 .pendingOffer {
138
   background-color: #ff8344;
138
   background-color: #ff8344;
139
 }
139
 }
140
+.noWeeks {
141
+  background-color: #ff4444;
142
+}
140
 </style>
143
 </style>
141
 
144
 
142
 <style scoped>
145
 <style scoped>

+ 2
- 1
src/components/timeshare/buy/carouselSection.vue Visa fil

138
       }
138
       }
139
 
139
 
140
       if (!this.searchParams.resort) {
140
       if (!this.searchParams.resort) {
141
-        return;
141
+        this.searchParams.regionObj = this.regionObj;
142
+        this.$router.push("/timeshareToByResults");
142
       }
143
       }
143
 
144
 
144
       this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);
145
       this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);

+ 62
- 0
src/components/timeshare/buy/searchResults.vue Visa fil

1
+<template>
2
+  <section>
3
+    <div v-if="resorts.length > 0" class="row justify-content-md-center">
4
+      <div class="col-lg-3 col-md-6 col-sm-6" v-for="resort in resorts" :key="resort.id">
5
+        <div>
6
+          <br />
7
+          <div class="portfolio-item">
8
+            <img
9
+              v-if="resort.resortImage != ''"
10
+              style="width:255px; height:255px; object-fit: cover;"
11
+              :src="resort.resortImage"
12
+              alt
13
+            />
14
+            <img
15
+              v-else
16
+              style="width:255px; height:255px; object-fit: cover;"
17
+              src="../../../../public/img/blankImg.png"
18
+              alt
19
+            />
20
+            <p
21
+              v-if="resort.weeksAvailable == 1"
22
+              class="normalText"
23
+            >{{ resort.weeksAvailable }} Week Available</p>
24
+            <p
25
+              v-else-if="resort.weeksAvailable > 1"
26
+              class="normalText"
27
+            >{{ resort.weeksAvailable }} Weeks Available</p>
28
+            <p v-else class="noWeeks">No Weeks Available</p>
29
+            <h4 class="mt-3">{{ resort.resortName }}</h4>
30
+            <!-- <p>
31
+                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
32
+                  situated in the best location. Incredible bargain!
33
+            </p>-->
34
+            <br />
35
+
36
+            <router-link
37
+              class="btn-white-border"
38
+              :to="`/resort/${resort.resortCode}`"
39
+              :disable="resort.resortCode && resort.resortCode != ''"
40
+            >VIEW</router-link>
41
+          </div>
42
+        </div>
43
+      </div>
44
+    </div>
45
+    <div v-else class="row">
46
+      <div align="center" class="col-md-12">
47
+        <img src="img/no-homes.png" />
48
+        <br />
49
+        <br />
50
+        <p>Sorry no listing where found matching your search</p>
51
+      </div>
52
+    </div>
53
+  </section>
54
+</template>
55
+
56
+<script>
57
+export default {
58
+  props: {
59
+    resorts: [],
60
+  },
61
+};
62
+</script>

+ 79
- 34
src/components/timeshare/buy/toBuySearchResults.vue Visa fil

5
         <div class="row pt-5 justify-content-md-center">
5
         <div class="row pt-5 justify-content-md-center">
6
           <h3>TIMESHARE TO BUY</h3>
6
           <h3>TIMESHARE TO BUY</h3>
7
         </div>
7
         </div>
8
-        <br />
9
-        <br />
10
-        <br />
11
-        <br />
12
-        <h1>bla</h1>
13
-        <!--<div v-if="properties.length > 0" class="row justify-content-md-center">
8
+        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
9
+          <li class="nav-item">
10
+            <a
11
+              class="nav-link active"
12
+              id="home-tab"
13
+              data-toggle="tab"
14
+              href="#facilities"
15
+              role="tab"
16
+              aria-controls="home"
17
+              aria-selected="true"
18
+            >
19
+              <h2>With Availability</h2>
20
+            </a>
21
+          </li>
22
+          <li class="nav-item">
23
+            <a
24
+              class="nav-link"
25
+              id="profile-tab"
26
+              data-toggle="tab"
27
+              href="#directions"
28
+              role="tab"
29
+              aria-controls="profile"
30
+              aria-selected="false"
31
+            >
32
+              <h2>All</h2>
33
+            </a>
34
+          </li>
35
+        </ul>
36
+        <div class="tab-content" id="myTabContent">
14
           <div
37
           <div
15
-            class="col-lg-3 col-md-6 col-sm-6"
16
-            v-for="currentProperty in properties"
17
-            :key="currentProperty.id"
38
+            class="tab-pane fade show active"
39
+            id="facilities"
40
+            role="tabpanel"
41
+            aria-labelledby="home-tab"
18
           >
42
           >
19
-            <div>
20
-              <div class="portfolio-item">
21
-                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
22
-
23
-                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
24
-                <p>
25
-                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
26
-                  situated in the best location. Incredible bargain!
27
-                </p>
28
-                <br />
29
-
30
-                <router-link
31
-                  class="btn-white-border"
32
-                  :to="`/property/commercial/property/${currentProperty.id}`"
33
-                >VIEW</router-link>
34
-              </div>
35
-            </div>
43
+            <searchPanal :resorts="Available" />
36
           </div>
44
           </div>
37
-        </div>
38
-        <div v-else class="row">
39
-          <div align="center" class="col-md-12">
40
-            <img src="img/no-homes.png" />
41
-            <br />
42
-            <br />
43
-            <p>Sorry no listing where found matching your search</p>
45
+          <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
46
+            <searchPanal :resorts="resorts" />
44
           </div>
47
           </div>
45
-        </div>-->
48
+        </div>
49
+        <div v-if="wait" id="preloader"></div>
46
       </div>
50
       </div>
47
     </section>
51
     </section>
48
   </main>
52
   </main>
49
 </template>
53
 </template>
50
 
54
 
55
+<script>
56
+import { mapState, mapActions } from "vuex";
57
+import searchPanal from "./searchResults";
58
+import _ from "lodash";
59
+
60
+export default {
61
+  name: "ToBuySearchResults",
62
+  components: {
63
+    searchPanal,
64
+  },
65
+  data() {
66
+    return {
67
+      wait: false,
68
+    };
69
+  },
70
+  methods: {
71
+    ...mapActions("resort", ["getResorts", "getImage1"]),
72
+    //methods
73
+  },
74
+  computed: {
75
+    ...mapState("weekList", ["searchParams"]),
76
+    ...mapState("resort", ["resorts"]),
77
+    Available() {
78
+      let resortList = this.resorts;
79
+      resortList = _.filter(resortList, (x) => x.weeksAvailable > 0);
80
+      return resortList;
81
+    },
82
+  },
83
+  mounted() {
84
+    this.wait = true;
85
+    this.getResorts(this.searchParams.regionObj.regionCode)
86
+      .then((fulfilled) => {
87
+        this.wait = false;
88
+      })
89
+      .catch((error) => {
90
+        this.wait = false;
91
+      });
92
+  },
93
+};
94
+</script>
95
+
51
 
96
 

+ 10
- 56
src/components/timeshare/resort/contentSection.vue Visa fil

3
     <div class="container">
3
     <div class="container">
4
       <div class="row" id="resort-profile">
4
       <div class="row" id="resort-profile">
5
         <div class="col-md-4">
5
         <div class="col-md-4">
6
-          <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
6
+          <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
7
           <div class="row no-gutters">
7
           <div class="row no-gutters">
8
             <div class="col-6">
8
             <div class="col-6">
9
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
9
+              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
10
             </div>
10
             </div>
11
             <div class="col-6">
11
             <div class="col-6">
12
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt="" />
12
+              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
13
             </div>
13
             </div>
14
           </div>
14
           </div>
15
           <gallerySection :images="images" />
15
           <gallerySection :images="images" />
18
         <div class="col-md-8 p-5 resort-profile">
18
         <div class="col-md-8 p-5 resort-profile">
19
           <h2>{{ resort.prName }}</h2>
19
           <h2>{{ resort.prName }}</h2>
20
           <WeekList :resortCode="resortCode" />
20
           <WeekList :resortCode="resortCode" />
21
-          <!-- <div>
22
-            <table class="table table-striped">
23
-              <thead>
24
-                <tr>
25
-                  <th scope="col">Unit</th>
26
-                  <th scope="col">Week</th>
27
-                  <th scope="col">Module</th>
28
-                  <th scope="col">Bedrooms</th>
29
-                  <th scope="col">Season</th>
30
-                  <th scope="col">Price Incl VAT</th>
31
-                  <th scope="col">Interested?</th>
32
-                </tr>
33
-              </thead>
34
-              <tbody>
35
-                <tr>
36
-                  <th scope="row">#</th>
37
-                  <td>#week</td>
38
-
39
-                  <td>#Beds</td>
40
-
41
-                  <td>#price</td>
42
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
43
-                </tr>
44
-                <tr>
45
-                  <th scope="row">#</th>
46
-                  <td>#week</td>
47
-                  <td>#module</td>
48
-                  <td>#Beds</td>
49
-                  <td>#season</td>
50
-                  <td>#price</td>
51
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
52
-                </tr>
53
-                <tr>
54
-                  <th scope="row">#</th>
55
-                  <td>#week</td>
56
-                  <td>#module</td>
57
-                  <td>#Beds</td>
58
-                  <td>#season</td>
59
-                  <td>#price</td>
60
-                  <td><a href="#" class="btn-solid-blue">YES</a></td>
61
-                </tr>
62
-              </tbody>
63
-            </table>
64
-          </div> -->
65
-          <p>
66
-            {{ resort.prNotes }}
67
-          </p>
21
+          <p>{{ resort.prNotes }}</p>
68
           <div class="d-flex mt-3">
22
           <div class="d-flex mt-3">
69
             <iframe
23
             <iframe
70
               width="100%"
24
               width="100%"
100
 
54
 
101
 export default {
55
 export default {
102
   props: {
56
   props: {
103
-    resortCode: {}
57
+    resortCode: {},
104
   },
58
   },
105
   components: {
59
   components: {
106
     WeekList,
60
     WeekList,
107
     FilterComponent,
61
     FilterComponent,
108
     ResortImages,
62
     ResortImages,
109
-    gallerySection
63
+    gallerySection,
110
   },
64
   },
111
   async mounted() {
65
   async mounted() {
112
     await this.initResort(this.resortCode);
66
     await this.initResort(this.resortCode);
115
   data() {
69
   data() {
116
     return {
70
     return {
117
       index: null,
71
       index: null,
118
-      boolLoaded: false
72
+      boolLoaded: false,
119
     };
73
     };
120
   },
74
   },
121
   computed: {
75
   computed: {
126
       return this.resort
80
       return this.resort
127
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
81
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
128
         : "";
82
         : "";
129
-    }
83
+    },
130
   },
84
   },
131
   methods: {
85
   methods: {
132
     ...mapActions("resort", ["initResort"]),
86
     ...mapActions("resort", ["initResort"]),
133
     routerGoTo(goto) {
87
     routerGoTo(goto) {
134
       this.$router.push(goto);
88
       this.$router.push(goto);
135
-    }
136
-  }
89
+    },
90
+  },
137
 };
91
 };
138
 </script>
92
 </script>
139
 
93
 

+ 1
- 1
src/router/index.js Visa fil

422
       component: EnquireNow
422
       component: EnquireNow
423
     },
423
     },
424
     {
424
     {
425
-      path: "/toBuyResults",
425
+      path: "/timeshareToByResults",
426
       name: "ToBuySearch",
426
       name: "ToBuySearch",
427
       component: ToBuySearch
427
       component: ToBuySearch
428
     }
428
     }

+ 15
- 0
src/store/modules/timeshare/resort.js Visa fil

5
 export default {
5
 export default {
6
   namespaced: true,
6
   namespaced: true,
7
   state: {
7
   state: {
8
+    resorts: [],
8
     resort: {},
9
     resort: {},
9
     images: [],
10
     images: [],
10
     layout: "",
11
     layout: "",
27
     },
28
     },
28
     setLayout(state, image) {
29
     setLayout(state, image) {
29
       state.layout = `data:image/jpeg;base64,${image}`;
30
       state.layout = `data:image/jpeg;base64,${image}`;
31
+    },
32
+    setResorts(state, list) {
33
+      state.resorts = list;
30
     }
34
     }
31
   },
35
   },
32
   getters: {},
36
   getters: {},
108
         )
112
         )
109
         .then(result => commit("setLayout", result.data))
113
         .then(result => commit("setLayout", result.data))
110
         .catch(console.error);
114
         .catch(console.error);
115
+    },
116
+    getResorts({ commit }, regionCode) {
117
+      return new Promise((resolve, reject) => {
118
+        axios
119
+          .get(`/api/resort/${regionCode}`)
120
+          .then(result => {
121
+            commit("setResorts", result.data);
122
+            resolve();
123
+          })
124
+          .catch(error => reject(new Error(error.message)));
125
+      });
111
     }
126
     }
112
   }
127
   }
113
 };
128
 };

+ 1
- 2
src/store/modules/timeshare/weekList.js Visa fil

27
     searchParams: {
27
     searchParams: {
28
       region: undefined,
28
       region: undefined,
29
       resort: undefined,
29
       resort: undefined,
30
-      fromDate: undefined,
31
-      toDate: undefined
30
+      regionObj: undefined
32
     }
31
     }
33
   },
32
   },
34
   mutations: {
33
   mutations: {

Laddar…
Avbryt
Spara