Lene 4 years ago
parent
commit
31ebc4c8d5

+ 31
- 1
public/css/newStyle.css View File

287
 }
287
 }
288
 
288
 
289
 #intro #intro-carousel .item {
289
 #intro #intro-carousel .item {
290
-  height: 700px;
290
+  height: 550px;
291
+  object-fit: cover;
291
   display: block;
292
   display: block;
292
   background-size: center;
293
   background-size: center;
293
   background-position: center center;
294
   background-position: center center;
296
   transition-property: opacity;
297
   transition-property: opacity;
297
 }
298
 }
298
 
299
 
300
+/* Extra small devices (phones, 600px and down) */
301
+@media only screen and (max-width: 600px) {
302
+  #intro #intro-carousel .item {
303
+    height: 750px;
304
+  }
305
+}
306
+
307
+/* Small devices (portrait tablets and large phones, 600px and up) */
308
+@media only screen and (min-width: 600px) {
309
+  #intro #intro-carousel .item {
310
+    height: 660px;
311
+  }
312
+}
313
+
314
+/* Medium devices (landscape tablets, 768px and up) */
315
+@media only screen and (min-width: 768px) {
316
+  #intro #intro-carousel .item {
317
+    height: 550px;
318
+  }
319
+}
320
+
321
+/* Large devices (laptops/desktops, 992px and up) */
322
+@media only screen and (min-width: 992px) {
323
+}
324
+
325
+/* Extra large devices (large laptops and desktops, 1200px and up) */
326
+@media only screen and (min-width: 1200px) {
327
+}
328
+
299
 /*--------------------------------------------------------------
329
 /*--------------------------------------------------------------
300
 # Buttons
330
 # Buttons
301
 --------------------------------------------------------------*/
331
 --------------------------------------------------------------*/

+ 36
- 6
src/components/about/aboutTimeshareCarouselSection.vue View File

24
       style="margin-top:-50px"
24
       style="margin-top:-50px"
25
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
25
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
26
     >
26
     >
27
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-1.jpg" alt="" />
28
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-2.jpg" alt="" />
29
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-3.jpg" alt="" />
30
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-4.jpg" alt="" />
31
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-5.jpg" alt="" />
32
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-6.jpg" alt="" />
27
+      <img
28
+        class="item"
29
+        src="/img/intro-carousel/timeshare-1.jpg"
30
+        style="object-fit: cover"
31
+        alt=""
32
+      />
33
+      <img
34
+        class="item"
35
+        src="/img/intro-carousel/timeshare-2.jpg"
36
+        style="object-fit: cover"
37
+        alt=""
38
+      />
39
+      <img
40
+        class="item"
41
+        src="/img/intro-carousel/timeshare-3.jpg"
42
+        style="object-fit: cover"
43
+        alt=""
44
+      />
45
+      <img
46
+        class="item"
47
+        src="/img/intro-carousel/timeshare-4.jpg"
48
+        style="object-fit: cover"
49
+        alt=""
50
+      />
51
+      <img
52
+        class="item"
53
+        src="/img/intro-carousel/timeshare-5.jpg"
54
+        style="object-fit: cover"
55
+        alt=""
56
+      />
57
+      <img
58
+        class="item"
59
+        src="/img/intro-carousel/timeshare-6.jpg"
60
+        style="object-fit: cover"
61
+        alt=""
62
+      />
33
     </carousel>
63
     </carousel>
34
 
64
 
35
     <div id="intro-carousel" class="owl-carousel"></div>
65
     <div id="intro-carousel" class="owl-carousel"></div>

+ 6
- 6
src/components/about/aboutUsCarouselSection.vue View File

26
       style="margin-top:-50px"
26
       style="margin-top:-50px"
27
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
27
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
28
     >
28
     >
29
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
30
-      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
31
-      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
32
-      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
33
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
34
-      <img class="item" src="../../../public/img/intro-carousel/home-6.jpg" alt="" />
29
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
30
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
31
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
32
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
33
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
34
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
35
     </carousel>
35
     </carousel>
36
 
36
 
37
     <div id="intro-carousel" class="owl-carousel"></div>
37
     <div id="intro-carousel" class="owl-carousel"></div>

+ 41
- 10
src/components/home/carouselSection.vue View File

2
   <section id="intro">
2
   <section id="intro">
3
     <div class="container">
3
     <div class="container">
4
       <div class="row">
4
       <div class="row">
5
-        <div align="left" class="col-sm-12 col-md-8">
6
-          <div class="intro-content">
5
+        <div align="left" class="col-sm-12 col-md-12 col-lg-8">
6
+          <div class="intro-content introContentAdjust">
7
             <h2>Find your perfect Property</h2>
7
             <h2>Find your perfect Property</h2>
8
-
9
             <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
8
             <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
10
               <li class="nav-item">
9
               <li class="nav-item">
11
                 <a
10
                 <a
175
       style="margin-top:-50px"
174
       style="margin-top:-50px"
176
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
175
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
177
     >
176
     >
178
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
179
-      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
180
-      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
181
-      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
182
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
183
-      <img class="item" src="../../../public/img/intro-carousel/home-6.jpg" alt="" />
177
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
178
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
179
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
180
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
181
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
182
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
184
     </carousel>
183
     </carousel>
185
 
184
 
186
     <div id="intro-carousel" class="owl-carousel"></div>
185
     <div id="intro-carousel" class="owl-carousel"></div>
264
 };
263
 };
265
 </script>
264
 </script>
266
 
265
 
267
-<style lang="scss" scoped></style>
266
+<style lang="scss" scoped>
267
+/* Extra small devices (phones, 600px and down) */
268
+@media only screen and (max-width: 600px) {
269
+  .introContentAdjust {
270
+    margin-top: -35px !important;
271
+  }
272
+}
273
+
274
+/* Small devices (portrait tablets and large phones, 600px and up) */
275
+@media only screen and (min-width: 600px) {
276
+  .introContentAdjust {
277
+    margin-top: -15px !important;
278
+  }
279
+}
280
+
281
+/* Medium devices (landscape tablets, 768px and up) */
282
+@media only screen and (min-width: 768px) {
283
+}
284
+
285
+/* Large devices (laptops/desktops, 992px and up) */
286
+@media only screen and (min-width: 992px) {
287
+  .introContentAdjust {
288
+    margin-top: 25px !important;
289
+  }
290
+}
291
+
292
+/* Extra large devices (large laptops and desktops, 1200px and up) */
293
+@media only screen and (min-width: 1200px) {
294
+  .introContentAdjust {
295
+    margin-top: 0px !important;
296
+  }
297
+}
298
+</style>

+ 6
- 6
src/components/misc/privacyPolicy/carouselSection.vue View File

25
       style="margin-top:-50px"
25
       style="margin-top:-50px"
26
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
26
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
27
     >
27
     >
28
-      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
29
-      <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
30
-      <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
31
-      <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
32
-      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
33
-      <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
28
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
29
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
30
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
31
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
32
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
33
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
34
     </carousel>
34
     </carousel>
35
 
35
 
36
     <div id="intro-carousel" class="owl-carousel"></div>
36
     <div id="intro-carousel" class="owl-carousel"></div>

+ 39
- 41
src/components/processFlow/makeOffer.vue View File

10
         class="btn btn-b-n"
10
         class="btn btn-b-n"
11
         style="width: 150px; height:40px;"
11
         style="width: 150px; height:40px;"
12
         data-dismiss="modal"
12
         data-dismiss="modal"
13
-      >
14
-        OK
15
-      </button>
13
+      >OK</button>
16
     </div>
14
     </div>
17
     <div v-else>
15
     <div v-else>
18
       <div v-if="!isSaved">
16
       <div v-if="!isSaved">
84
       <div v-if="!isSaved" class="container">
82
       <div v-if="!isSaved" class="container">
85
         <div class="row">
83
         <div class="row">
86
           <div algin="center" class="col">
84
           <div algin="center" class="col">
87
-            <button v-if="isMakeOffer" type="button" @click="SendOffer()" class="btn-solid-blue">
88
-              Send Offer
89
-            </button>
85
+            <button
86
+              v-if="isMakeOffer"
87
+              type="button"
88
+              @click="SendOffer()"
89
+              class="btn-solid-blue"
90
+            >Send Offer</button>
90
             <button
91
             <button
91
               v-if="!isMakeOffer && !isDecline && canEdit"
92
               v-if="!isMakeOffer && !isDecline && canEdit"
92
               type="submit"
93
               type="submit"
93
               @click="Accept()"
94
               @click="Accept()"
94
               class="btn btn-b-n"
95
               class="btn btn-b-n"
95
               style="width: 150px; height:40px;"
96
               style="width: 150px; height:40px;"
96
-            >
97
-              Accept
98
-            </button>
97
+            >Accept</button>
99
             <button
98
             <button
100
               v-if="!isMakeOffer && !isDecline && canEdit"
99
               v-if="!isMakeOffer && !isDecline && canEdit"
101
               type="button"
100
               type="button"
102
               @click="Decline()"
101
               @click="Decline()"
103
               class="btn btn-b-n"
102
               class="btn btn-b-n"
104
               style="width: 150px; height:40px;"
103
               style="width: 150px; height:40px;"
105
-            >
106
-              Decline
107
-            </button>
104
+            >Decline</button>
108
           </div>
105
           </div>
109
         </div>
106
         </div>
110
       </div>
107
       </div>
126
         @click="Complete()"
123
         @click="Complete()"
127
         class="btn btn-b-n"
124
         class="btn btn-b-n"
128
         style="width: 150px; height:40px;"
125
         style="width: 150px; height:40px;"
129
-      >
130
-        Complete
131
-      </button>
126
+      >Complete</button>
132
       <div v-if="isSaved">
127
       <div v-if="isSaved">
133
         <div class="form-group row">
128
         <div class="form-group row">
134
           <br />
129
           <br />
142
           class="btn btn-b-n"
137
           class="btn btn-b-n"
143
           style="width: 150px; height:40px;"
138
           style="width: 150px; height:40px;"
144
           data-dismiss="modal"
139
           data-dismiss="modal"
145
-        >
146
-          OK
147
-        </button>
140
+        >OK</button>
148
       </div>
141
       </div>
149
     </div>
142
     </div>
150
   </div>
143
   </div>
163
     canEdit: Boolean,
156
     canEdit: Boolean,
164
     item: Object,
157
     item: Object,
165
     bidId: Number,
158
     bidId: Number,
166
-    updateItem: Function
159
+    updateItem: Function,
167
   },
160
   },
168
   data() {
161
   data() {
169
     return {
162
     return {
171
       isSaved: false,
164
       isSaved: false,
172
       message: "",
165
       message: "",
173
       isInfo: true,
166
       isInfo: true,
174
-      isLoggedIn: Log.isLoggedIn()
167
+      isLoggedIn: Log.isLoggedIn(),
175
     };
168
     };
176
   },
169
   },
177
   methods: {
170
   methods: {
178
-    ...mapActions("bid", ["getBid", "saveBid", "acceptBid", "declineBid"]),
171
+    ...mapActions("bid", ["getTemplate", "saveBid", "acceptBid", "declineBid"]),
179
     SendOffer() {
172
     SendOffer() {
180
-      alert("Under Development");
181
-      // this.getBid(0);
182
-      // this.bidItem.id = 0;
183
-      // this.bidItem.amount = this.item.offer;
184
-      // this.bidItem.comment = this.item.comment;
185
-      // if (this.isProperty) {
186
-      //   this.bidItem.propertyId = this.item.id;
187
-      // } else {
188
-      //   this.bidItem.timeshareWeekId = this.item.id;
189
-      // }
190
-      // this.saveBid(this.bidItem);
173
+      //alert("Under Development");
174
+      this.bidItem.id = 0;
175
+
176
+      this.bidItem.amount = this.item.offer;
177
+      this.bidItem.comment = this.item.comment;
178
+      if (this.isProperty) {
179
+        this.bidItem.propertyId = this.item.id;
180
+      } else {
181
+        this.bidItem.timeshareWeekId = this.item.id;
182
+        if (this.item.isTender) {
183
+          this.bidItem.tenderWeek = this.item;
184
+        }
185
+      }
186
+      this.saveBid(this.bidItem);
191
 
187
 
192
-      // this.item = [];
193
-      // this.isSaved = true;
194
-      // this.message = "Offer was submitted.";
195
-      // this.isInfo = true;
188
+      this.isSaved = true;
189
+      this.isInfo = true;
190
+      this.message = "Offer was submitted.";
196
     },
191
     },
197
     Accept() {
192
     Accept() {
198
       this.acceptBid(this.item.id);
193
       this.acceptBid(this.item.id);
208
 
203
 
209
       const decline = {
204
       const decline = {
210
         id: this.item.id,
205
         id: this.item.id,
211
-        comment: this.item.declineReason
206
+        comment: this.item.declineReason,
212
       };
207
       };
213
 
208
 
214
       this.declineBid(decline);
209
       this.declineBid(decline);
215
       this.isSaved = true;
210
       this.isSaved = true;
216
       this.message = "Offer Declined.";
211
       this.message = "Offer Declined.";
217
       this.isInfo = false;
212
       this.isInfo = false;
218
-    }
213
+    },
219
   },
214
   },
220
   computed: {
215
   computed: {
221
-    ...mapState("bid", ["bidIt,em"])
216
+    ...mapState("bid", ["bidItem"]),
217
+  },
218
+  mounted() {
219
+    this.getTemplate();
222
   },
220
   },
223
   watch: {
221
   watch: {
224
     item() {
222
     item() {
225
       this.isSaved = false;
223
       this.isSaved = false;
226
       this.canEdit = this.item.statusCode === "E1";
224
       this.canEdit = this.item.statusCode === "E1";
227
-    }
228
-  }
225
+    },
226
+  },
229
 };
227
 };
230
 </script>
228
 </script>
231
 
229
 

+ 36
- 6
src/components/property/residential/residentialCarouselSection.vue View File

177
         style="margin-top:-50px"
177
         style="margin-top:-50px"
178
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
178
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
179
       >
179
       >
180
-        <img class="item" src="img/intro-carousel/residential-1.jpg" alt="" />
181
-        <img class="item" src="img/intro-carousel/residential-2.jpg" alt="" />
182
-        <img class="item" src="img/intro-carousel/residential-3.jpg" alt="" />
183
-        <img class="item" src="img/intro-carousel/residential-4.jpg" alt="" />
184
-        <img class="item" src="img/intro-carousel/residential-5.jpg" alt="" />
185
-        <img class="item" src="img/intro-carousel/residential-6.jpg" alt="" />
180
+        <img
181
+          class="item"
182
+          src="img/intro-carousel/residential-1.jpg"
183
+          style="object-fit: cover"
184
+          alt=""
185
+        />
186
+        <img
187
+          class="item"
188
+          src="img/intro-carousel/residential-2.jpg"
189
+          style="object-fit: cover"
190
+          alt=""
191
+        />
192
+        <img
193
+          class="item"
194
+          src="img/intro-carousel/residential-3.jpg"
195
+          style="object-fit: cover"
196
+          alt=""
197
+        />
198
+        <img
199
+          class="item"
200
+          src="img/intro-carousel/residential-4.jpg"
201
+          style="object-fit: cover"
202
+          alt=""
203
+        />
204
+        <img
205
+          class="item"
206
+          src="img/intro-carousel/residential-5.jpg"
207
+          style="object-fit: cover"
208
+          alt=""
209
+        />
210
+        <img
211
+          class="item"
212
+          src="img/intro-carousel/residential-6.jpg"
213
+          style="object-fit: cover"
214
+          alt=""
215
+        />
186
       </carousel>
216
       </carousel>
187
     </section>
217
     </section>
188
     <main id="main" style="margin-top:-20px">
218
     <main id="main" style="margin-top:-20px">

+ 8
- 7
src/components/propertyManagement/carouselSection.vue View File

24
       :items="1"
24
       :items="1"
25
       :autoplay="true"
25
       :autoplay="true"
26
       :loop="true"
26
       :loop="true"
27
+      :autoHeight="true"
27
       id="intro-carousel"
28
       id="intro-carousel"
28
-      style="margin-top:-50px"
29
+      style="margin-top:-50px;"
29
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
30
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
30
     >
31
     >
31
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
32
-      <img class="item" src="../../../public/img/intro-carousel/16.jpg" alt="" />
33
-      <img class="item" src="../../../public/img/intro-carousel/comm-1.jpg" alt="" />
34
-      <img class="item" src="../../../public/img/intro-carousel/comm-4.jpg" alt="" />
35
-      <img class="item" src="../../../public/img/intro-carousel/3.jpg" alt="" />
36
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
32
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
33
+      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
34
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
35
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
36
+      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
37
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
37
     </carousel>
38
     </carousel>
38
 
39
 
39
     <div id="intro-carousel" class="owl-carousel"></div>
40
     <div id="intro-carousel" class="owl-carousel"></div>

+ 76
- 0
src/components/shared/addressAutoComplete.vue View File

1
+<template>
2
+  <div>
3
+    <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
4
+  </div>
5
+</template>
6
+
7
+<script>
8
+export default {
9
+  name: "AddressAutoComplete",
10
+  props: {
11
+    placeholder: {
12
+      default: "ENTER LOCATION"
13
+    }
14
+  },
15
+  data() {
16
+    return {
17
+      streetNumber: "",
18
+      streetName: "",
19
+      suburb: "",
20
+      city: "",
21
+      province: "",
22
+      country: "",
23
+      postalCode: "",
24
+      url: ""
25
+    };
26
+  },
27
+  methods: {
28
+    setPlace(place) {
29
+      this.streetNumber = "";
30
+      this.streetName = "";
31
+      this.suburb = "";
32
+      this.city = "";
33
+      this.province = "";
34
+      this.country = "";
35
+      this.postalCode = "";
36
+      this.url = "";
37
+
38
+      for (let i = 0; i < place.address_components.length; i++) {
39
+        if (place.address_components[i].types[0] === "street_number") {
40
+          this.streetNumber = place.address_components[i].long_name;
41
+        }
42
+        if (place.address_components[i].types[0] === "route") {
43
+          this.streetName = place.address_components[i].long_name;
44
+        }
45
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
46
+          this.suburb = place.address_components[i].long_name;
47
+        }
48
+        if (place.address_components[i].types[0] === "locality") {
49
+          this.city = place.address_components[i].long_name;
50
+        }
51
+        if (place.address_components[i].types[0] === "administrative_area_level_1") {
52
+          this.province = place.address_components[i].long_name;
53
+        }
54
+        if (place.address_components[i].types[0] === "country") {
55
+          this.country = place.address_components[i].long_name;
56
+        }
57
+        if (place.address_components[i].types[0] === "postal_code") {
58
+          this.postalCode = place.address_components[i].long_name;
59
+        }
60
+        this.url = place.url;
61
+
62
+        this.$emit("GoogleAddress", {
63
+          streetNumber: this.streetNumber,
64
+          streetName: this.streetName,
65
+          suburb: this.suburb,
66
+          city: this.city,
67
+          province: this.province,
68
+          country: this.country,
69
+          postalCode: this.postalCode,
70
+          url: this.url
71
+        });
72
+      }
73
+    }
74
+  }
75
+};
76
+</script>

+ 132
- 0
src/components/shared/contactUsSection.vue View File

1
+<template>
2
+  <div>
3
+    <h4 align="left" class="contactHeader">Send us a message</h4>
4
+    <div class="form">
5
+      <div id="sendmessage">Your message has been sent. Thank you!</div>
6
+      <div id="errormessage"></div>
7
+      <div class="form-row">
8
+        <div class="form-group col-md-6">
9
+          <input
10
+            type="text"
11
+            name="name"
12
+            class="form-control"
13
+            id="name"
14
+            placeholder="Name"
15
+            data-rule="minlen:4"
16
+            data-msg="Please enter your name"
17
+            v-model="name"
18
+          />
19
+          <div class="validation"></div>
20
+        </div>
21
+        <div class="form-group col-md-6">
22
+          <input
23
+            type="email"
24
+            class="form-control"
25
+            name="email"
26
+            id="email"
27
+            placeholder="Email"
28
+            data-rule="email"
29
+            data-msg="Please enter a valid email"
30
+            v-model="email"
31
+          />
32
+          <div class="validation"></div>
33
+        </div>
34
+        <div class="form-group col-md-6">
35
+          <input
36
+            type="text"
37
+            name="phone"
38
+            class="form-control"
39
+            id="phone"
40
+            placeholder="Phone"
41
+            data-rule="minlen:10"
42
+            data-msg="Please enter at least 10 numbers"
43
+            v-model="phone"
44
+          />
45
+          <div class="validation"></div>
46
+        </div>
47
+        <div class="form-group col-md-6">
48
+          <input
49
+            type="text"
50
+            class="form-control"
51
+            name="property"
52
+            id="property"
53
+            placeholder="Property"
54
+            data-msg="Please enter the property you are interested in"
55
+            v-model="property"
56
+          />
57
+          <div class="validation"></div>
58
+        </div>
59
+      </div>
60
+      <div class="form-group">
61
+        <textarea
62
+          class="form-control"
63
+          name="message"
64
+          rows="5"
65
+          data-rule="required"
66
+          data-msg="Please write something for us"
67
+          placeholder="Message"
68
+          v-model="message"
69
+        ></textarea>
70
+        <div class="validation"></div>
71
+      </div>
72
+      <div class="text-center">
73
+        <button class="btn-solid-blue" @click="sendMail()">SEND</button>
74
+      </div>
75
+      <div v-if="boolSent">
76
+        <alert :text="alertMsg" :type="'SUCCESS'" />
77
+      </div>
78
+    </div>
79
+  </div>
80
+</template>
81
+
82
+<script>
83
+/* eslint-disable */
84
+import axios from "axios";
85
+import alert from "../shared/alert";
86
+
87
+export default {
88
+  components: {
89
+    alert
90
+  },
91
+  data() {
92
+    return {
93
+      alertMsg: "Sent! You can expect a reply soon!",
94
+      name: null,
95
+      email: null,
96
+      phone: null,
97
+      property: null,
98
+      message: null,
99
+      boolSent: false
100
+    };
101
+  },
102
+  mounted() {
103
+    this.boolSent = false;
104
+  },
105
+  methods: {
106
+    async sendMail() {
107
+      var mailObj = {
108
+        toAddress: "abigaildf@provision-sa.com",
109
+        fromAddress: "jlouw365@gmail.com",
110
+        name: this.name,
111
+        email: this.email,
112
+        phone: this.phone,
113
+        property: this.property,
114
+        message: this.message
115
+      };
116
+
117
+      const response = await axios.post("/api/mail/0", mailObj);
118
+
119
+      if (response.status === 200) {
120
+        this.boolSent = true;
121
+      } else {
122
+        console.log("Error");
123
+      }
124
+    },
125
+    countDownChanged(dismissCountDown) {
126
+      this.dismissCountDown = dismissCountDown;
127
+    }
128
+  }
129
+};
130
+</script>
131
+
132
+<style lang="scss" scoped></style>

+ 5
- 73
src/components/shared/footerSection.vue View File

47
                 </p>
47
                 </p>
48
               </div>
48
               </div>
49
               <div class="col-md-8">
49
               <div class="col-md-8">
50
-                <h4 align="left" class="contactHeader">Send us a message</h4>
51
-                <div class="form">
52
-                  <div id="sendmessage">Your message has been sent. Thank you!</div>
53
-                  <div id="errormessage"></div>
54
-                  <form
55
-                    action="mailto:jlouw365@gmail.com"
56
-                    method="post"
57
-                    role="form"
58
-                    class="contactForm"
59
-                  >
60
-                    <div class="form-row">
61
-                      <div class="form-group col-md-6">
62
-                        <input
63
-                          type="text"
64
-                          name="name"
65
-                          class="form-control"
66
-                          id="name"
67
-                          placeholder="Name"
68
-                          data-rule="minlen:4"
69
-                          data-msg="Please enter your name"
70
-                        />
71
-                        <div class="validation"></div>
72
-                      </div>
73
-                      <div class="form-group col-md-6">
74
-                        <input
75
-                          type="email"
76
-                          class="form-control"
77
-                          name="email"
78
-                          id="email"
79
-                          placeholder="Email"
80
-                          data-rule="email"
81
-                          data-msg="Please enter a valid email"
82
-                        />
83
-                        <div class="validation"></div>
84
-                      </div>
85
-                      <div class="form-group col-md-6">
86
-                        <input
87
-                          type="text"
88
-                          name="phone"
89
-                          class="form-control"
90
-                          id="phone"
91
-                          placeholder="Phone"
92
-                          data-rule="minlen:10"
93
-                          data-msg="Please enter at least 10 numbers"
94
-                        />
95
-                        <div class="validation"></div>
96
-                      </div>
97
-                      <div class="form-group col-md-6">
98
-                        <input
99
-                          type="text"
100
-                          class="form-control"
101
-                          name="property"
102
-                          id="property"
103
-                          placeholder="Property"
104
-                          data-msg="Please enter the property you are interested in"
105
-                        />
106
-                        <div class="validation"></div>
107
-                      </div>
108
-                    </div>
109
-                    <div class="form-group">
110
-                      <textarea
111
-                        class="form-control"
112
-                        name="message"
113
-                        rows="5"
114
-                        data-rule="required"
115
-                        data-msg="Please write something for us"
116
-                        placeholder="Message"
117
-                      ></textarea>
118
-                      <div class="validation"></div>
119
-                    </div>
120
-                    <div class="text-center"><button type="submit">SEND</button></div>
121
-                  </form>
122
-                </div>
50
+                <contactUsSection />
123
               </div>
51
               </div>
124
             </div>
52
             </div>
125
           </div>
53
           </div>
188
 /* eslint-disable */
116
 /* eslint-disable */
189
 import { mapState, mapActions } from "vuex";
117
 import { mapState, mapActions } from "vuex";
190
 import Log from "../../assets/Log";
118
 import Log from "../../assets/Log";
119
+import contactUsSection from "./contactUsSection";
191
 import AOS from "aos";
120
 import AOS from "aos";
192
 import "aos/dist/aos.css";
121
 import "aos/dist/aos.css";
193
 export default {
122
 export default {
123
+  components: {
124
+    contactUsSection
125
+  },
194
   created() {
126
   created() {
195
     AOS.init();
127
     AOS.init();
196
   },
128
   },

+ 126
- 42
src/components/timeshare/buy/carouselSection.vue View File

3
     <div class="container">
3
     <div class="container">
4
       <div class="row">
4
       <div class="row">
5
         <div align="left" class="col-sm-12 col-md-8">
5
         <div align="left" class="col-sm-12 col-md-8">
6
-          <div class="intro-content box">
6
+          <div class="intro-content box" style="margin-top:-5px">
7
             <h2>Find your Timeshare</h2>
7
             <h2>Find your Timeshare</h2>
8
             <p>
8
             <p>
9
               Please specify one or more details to view the available weeks and then select the
9
               Please specify one or more details to view the available weeks and then select the
11
             </p>
11
             </p>
12
             <div class="row">
12
             <div class="row">
13
               <div class="form-group col-md-6">
13
               <div class="form-group col-md-6">
14
+                <div class="input-group">
15
+                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region">REGION</label>
16
+                  <select
17
+                    class="form-control uniSelect"
18
+                    name="region"
19
+                    id="region"
20
+                    v-model="searchParams.region"
21
+                    @change="regionChange"
22
+                  >
23
+                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
24
+                  </select>
25
+                </div>
26
+                <br />
27
+                <label>DATE FROM</label>
14
                 <input
28
                 <input
15
-                  data-toggle="dropdown"
16
-                  name="region"
17
-                  class="form-control my-2"
18
-                  id="name"
19
-                  placeholder="Resort"
20
-                  aria-haspopup="true"
21
-                  aria-expanded="false"
22
-                />
23
-                <input
24
-                  data-toggle="dropdown"
25
-                  name="resort"
26
-                  class="form-control my-2"
27
-                  id="name"
28
-                  placeholder="Region"
29
-                  aria-haspopup="true"
30
-                  aria-expanded="false"
29
+                  type="date"
30
+                  name="arrival-to"
31
+                  class="form-control my-1 uniSelect"
32
+                  id="arrival-to"
33
+                  placeholder="Date From"
34
+                  v-model="filter.date"
31
                 />
35
                 />
32
               </div>
36
               </div>
33
               <div class="form-group col-md-6">
37
               <div class="form-group col-md-6">
38
+                <div class="input-group">
39
+                  <label
40
+                    v-if="!searchParams.resort"
41
+                    class="uniSelectLabel"
42
+                    for="weekInfoResortSelect"
43
+                  >RESORT</label>
44
+                  <select
45
+                    id="weekInfoResortSelect"
46
+                    class="form-control uniSelect"
47
+                    v-model="searchParams.resort"
48
+                  >
49
+                    <option
50
+                      v-for="(resort, r) in filteredResort"
51
+                      :key="r"
52
+                      :value="resort"
53
+                      @change="resortChange"
54
+                    >
55
+                      {{
56
+                      resort.resortName
57
+                      }}
58
+                    </option>
59
+                  </select>
60
+                </div>
61
+                <br />
62
+                <label>DATE TO</label>
34
                 <input
63
                 <input
35
-                  data-toggle="dropdown"
36
-                  name="region"
37
-                  class="form-control my-2"
38
-                  id="name"
39
-                  placeholder="Week"
40
-                  aria-haspopup="true"
41
-                  aria-expanded="false"
42
-                />
43
-                <input
44
-                  data-toggle="dropdown"
45
-                  name="resort"
46
-                  class="form-control my-2"
47
-                  id="name"
48
-                  placeholder="Price Range"
49
-                  aria-haspopup="true"
50
-                  aria-expanded="false"
64
+                  type="date"
65
+                  name="arrival-to"
66
+                  class="form-control my-1 uniSelect"
67
+                  id="arrival-to"
68
+                  placeholder="Date To"
69
+                  v-model="filter.ddate"
51
                 />
70
                 />
52
               </div>
71
               </div>
53
             </div>
72
             </div>
54
-            <a href="resort-page.php" class="btn-solid-blue"><i class="fa fa-search"></i> SEARCH</a>
73
+            <button class="btn-solid-blue" @click="Search()">
74
+              <i class="fa fa-search"></i> SEARCH
75
+            </button>
55
           </div>
76
           </div>
56
         </div>
77
         </div>
57
       </div>
78
       </div>
67
       style="margin-top:-50px"
88
       style="margin-top:-50px"
68
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
89
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
69
     >
90
     >
70
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
71
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
72
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt="" />
73
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt="" />
74
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt="" />
75
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt="" />
91
+      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" style="object-fit: cover" alt />
92
+      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" style="object-fit: cover" alt />
93
+      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" style="object-fit: cover" alt />
94
+      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" style="object-fit: cover" alt />
95
+      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" style="object-fit: cover" alt />
96
+      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" style="object-fit: cover" alt />
76
     </carousel>
97
     </carousel>
77
 
98
 
78
     <div id="intro-carousel" class="owl-carousel"></div>
99
     <div id="intro-carousel" class="owl-carousel"></div>
83
 /* eslint-disable */
104
 /* eslint-disable */
84
 
105
 
85
 import carousel from "vue-owl-carousel";
106
 import carousel from "vue-owl-carousel";
107
+import { mapState, mapActions, mapGetters } from "vuex";
86
 export default {
108
 export default {
87
   components: {
109
   components: {
88
-    carousel
89
-  }
110
+    carousel,
111
+  },
112
+  data() {
113
+    return {
114
+      regionObj: {},
115
+      resortObj: {},
116
+      region: "",
117
+      resort: "",
118
+      priceMin: undefined,
119
+      priceMax: undefined,
120
+    };
121
+  },
122
+  methods: {
123
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
124
+    regionChange(item) {
125
+      let reg = this.regions.find((r) => r.regionName === item.target.value);
126
+      this.regionObj = reg;
127
+    },
128
+    resortChange(item) {
129
+      let res = this.resorts.find((r) => r.resortName === item.target.value);
130
+      this.resortObj = res;
131
+    },
132
+    Search() {
133
+      if (this.searchParams.price) {
134
+        this.filter.minPrice = this.searchParams.price;
135
+      }
136
+      if (this.searchParams.week) {
137
+        this.filter.keyword = this.week;
138
+      }
139
+
140
+      if (!this.searchParams.resort) {
141
+        return;
142
+      }
143
+
144
+      this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);
145
+    },
146
+  },
147
+  computed: {
148
+    ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
149
+    ...mapState("weekList", ["searchParams", "filter"]),
150
+    filteredResort() {
151
+      let list = [];
152
+      if (this.searchParams.region && this.searchParams.region !== "") {
153
+        const item = this.detailedRegion.find(
154
+          (region) => region.region.regionCode === this.regionObj.regionCode
155
+        );
156
+        if (item) {
157
+          list = item.children;
158
+        }
159
+      } else {
160
+        list = this.resorts;
161
+      }
162
+      return _.sortBy(list, (x) => x.resortName);
163
+    },
164
+  },
165
+  created() {
166
+    this.initTimeshare(this.weekId);
167
+  },
168
+  mounted() {
169
+    this.searchParams.region = null;
170
+    this.searchParams.resort = null;
171
+    this.filter.date = null;
172
+    this.filter.ddate = null;
173
+  },
90
 };
174
 };
91
 </script>
175
 </script>
92
 
176
 

+ 23
- 18
src/components/timeshare/buy/searchSection.vue View File

29
               v-model="selectedResort"
29
               v-model="selectedResort"
30
               @change="resortEvent()"
30
               @change="resortEvent()"
31
             >
31
             >
32
-              <option v-for="(resort, i) in selectedRegion.resorts" :key="i" :value="resort">
33
-                {{ resort.resortName }}
34
-              </option>
32
+              <option
33
+                v-for="(resort, i) in selectedRegion.resorts"
34
+                :key="i"
35
+                :value="resort"
36
+              >{{ resort.resortName }}</option>
35
             </select>
37
             </select>
36
           </div>
38
           </div>
37
           <div v-else class="input-group my-1">
39
           <div v-else class="input-group my-1">
38
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
40
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
39
             <select class="form-control uniSelect" name="resort" id="resort">
41
             <select class="form-control uniSelect" name="resort" id="resort">
40
-              <option disabled>
41
-                Please Select a Region First
42
-              </option>
42
+              <option disabled>Please Select a Region First</option>
43
             </select>
43
             </select>
44
           </div>
44
           </div>
45
-          <div class="input-group my-1">
45
+          <!-- <div class="input-group my-1">
46
             <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
46
             <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
47
             <select
47
             <select
48
               class="form-control uniSelect"
48
               class="form-control uniSelect"
50
               id="season"
50
               id="season"
51
               v-model="selectedSeason"
51
               v-model="selectedSeason"
52
             >
52
             >
53
-              <option v-for="season in seasons" :key="season.id" :value="season">
54
-                {{ season.name }}
55
-              </option>
53
+              <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
56
             </select>
54
             </select>
57
           </div>
55
           </div>
58
 
56
 
97
               placeholder="mm/dd/yy"
95
               placeholder="mm/dd/yy"
98
               v-model="dateTo"
96
               v-model="dateTo"
99
             />
97
             />
100
-          </p>
101
-          <div class="btn-white-border"><i class="fa fa-search"></i> SEARCH</div>
98
+          </p>-->
99
+          <button class="btn-white-border" @click="ShowResort()">
100
+            <i class="fa fa-search"></i> SEARCH
101
+          </button>
102
         </div>
102
         </div>
103
         <div class="col-md-8 p-5">
103
         <div class="col-md-8 p-5">
104
           <h2>Search by Province</h2>
104
           <h2>Search by Province</h2>
137
 export default {
137
 export default {
138
   name: "TimeshareToBuy",
138
   name: "TimeshareToBuy",
139
   components: {
139
   components: {
140
-    Alert
140
+    Alert,
141
   },
141
   },
142
   data() {
142
   data() {
143
     return {
143
     return {
149
       bedrooms: null,
149
       bedrooms: null,
150
       maxPrice: null,
150
       maxPrice: null,
151
       dateFrom: "",
151
       dateFrom: "",
152
-      dateTo: ""
152
+      dateTo: "",
153
     };
153
     };
154
   },
154
   },
155
   mounted() {
155
   mounted() {
163
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
163
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
164
     },
164
     },
165
     regions() {
165
     regions() {
166
-      return _.sortBy(this.detailedRegion, r => r.regionName);
167
-    }
166
+      return _.sortBy(this.detailedRegion, (r) => r.regionName);
167
+    },
168
   },
168
   },
169
   methods: {
169
   methods: {
170
     ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
170
     ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
196
       if (this.maxPrice === "0") {
196
       if (this.maxPrice === "0") {
197
         this.maxPrice = null;
197
         this.maxPrice = null;
198
       }
198
       }
199
-    }
200
-  }
199
+    },
200
+    ShowResort() {
201
+      if (this.selectedResort) {
202
+        this.$router.push(`/resort/${this.selectedResort.resortCode}`);
203
+      }
204
+    },
205
+  },
201
 };
206
 };
202
 </script>
207
 </script>
203
 
208
 

+ 51
- 0
src/components/timeshare/buy/toBuySearchResults.vue View File

1
+<template>
2
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
3
+    <section>
4
+      <div class="container">
5
+        <div class="row pt-5 justify-content-md-center">
6
+          <h3>TIMESHARE TO BUY</h3>
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">
14
+          <div
15
+            class="col-lg-3 col-md-6 col-sm-6"
16
+            v-for="currentProperty in properties"
17
+            :key="currentProperty.id"
18
+          >
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>
36
+          </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>
44
+          </div>
45
+        </div>-->
46
+      </div>
47
+    </section>
48
+  </main>
49
+</template>
50
+
51
+

+ 8
- 10
src/components/timeshare/buy/weekListComponent.vue View File

5
         <thead>
5
         <thead>
6
           <tr>
6
           <tr>
7
             <th scope="col">Unit</th>
7
             <th scope="col">Unit</th>
8
-            <th scope="col">Week</th>
9
             <th scope="col">Module</th>
8
             <th scope="col">Module</th>
10
             <th scope="col">Bedrooms</th>
9
             <th scope="col">Bedrooms</th>
11
             <th scope="col">Season</th>
10
             <th scope="col">Season</th>
17
           <tr v-for="(item, i) in filteredWeeks" :key="i">
16
           <tr v-for="(item, i) in filteredWeeks" :key="i">
18
             <td>{{ item.unitNumber }}</td>
17
             <td>{{ item.unitNumber }}</td>
19
             <td>{{ item.weekNumber }}</td>
18
             <td>{{ item.weekNumber }}</td>
20
-            <td>#module</td>
21
             <td>{{ item.bedrooms }}</td>
19
             <td>{{ item.bedrooms }}</td>
22
-            <td>#season</td>
20
+            <td>{{ item.season }}</td>
23
             <td>{{ item.sellPrice | toCurrency }}</td>
21
             <td>{{ item.sellPrice | toCurrency }}</td>
24
             <!-- <td>{{ item.region ? item.region.regionName : "" }}</td>
22
             <!-- <td>{{ item.region ? item.region.regionName : "" }}</td>
25
             <td>{{ item.resort ? item.resort.resortName : "" }}</td>
23
             <td>{{ item.resort ? item.resort.resortName : "" }}</td>
26
 
24
 
27
             <td>{{ item.arrivalDate | toDate }}</td>
25
             <td>{{ item.arrivalDate | toDate }}</td>
28
-            <td>{{ item.departureDate | toDate }}</td> -->
26
+            <td>{{ item.departureDate | toDate }}</td>-->
29
 
27
 
30
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
28
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
31
 
29
 
34
             </td>
32
             </td>
35
             <!-- <div class="col-md-12">
33
             <!-- <div class="col-md-12">
36
                 <button type="button" class="btn btn-b-n" >View</button>
34
                 <button type="button" class="btn btn-b-n" >View</button>
37
-              </div> -->
35
+            </div>-->
38
           </tr>
36
           </tr>
39
         </tbody>
37
         </tbody>
40
       </table>
38
       </table>
68
 export default {
66
 export default {
69
   props: {
67
   props: {
70
     resortCode: undefined,
68
     resortCode: undefined,
71
-    userId: undefined
69
+    userId: undefined,
72
   },
70
   },
73
   components: {},
71
   components: {},
74
   computed: {
72
   computed: {
75
     ...mapState("weekList", ["weeks", "status"]),
73
     ...mapState("weekList", ["weeks", "status"]),
76
     ...mapGetters({
74
     ...mapGetters({
77
       filteredWeeks: "weekList/filteredWeeks",
75
       filteredWeeks: "weekList/filteredWeeks",
78
-      getRegions: "weekList/getRegions"
79
-    })
76
+      getRegions: "weekList/getRegions",
77
+    }),
80
   },
78
   },
81
   mounted() {
79
   mounted() {
82
     if (this.resortCode) {
80
     if (this.resortCode) {
88
     View(item) {
86
     View(item) {
89
       this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
87
       this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
90
     },
88
     },
91
-    ...mapActions("weekList", ["getWeeks", "applyResortFilter"])
92
-  }
89
+    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
90
+  },
93
 };
91
 };
94
 </script>
92
 </script>
95
 
93
 

+ 7
- 11
src/components/timeshare/resort/carouselSection.vue View File

4
       <carousel
4
       <carousel
5
         :nav="false"
5
         :nav="false"
6
         :dots="false"
6
         :dots="false"
7
-        :items="1"
7
+        :items="10"
8
         :autoplay="true"
8
         :autoplay="true"
9
         :loop="true"
9
         :loop="true"
10
         :autoHeight="true"
10
         :autoHeight="true"
12
         style="margin-top:-50px;"
12
         style="margin-top:-50px;"
13
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
13
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
14
       >
14
       >
15
-        <img
16
-          class="item"
17
-          style="object-fit:cover"
18
-          v-for="(image, i) in resortImages"
19
-          :src="image"
20
-          :key="i"
21
-        />
15
+        <div v-for="(image, i) in resortImages" :key="i">
16
+          <img class="item" style="object-fit:cover" :src="image" :key="i" />
17
+        </div>
22
       </carousel>
18
       </carousel>
23
     </div>
19
     </div>
24
   </section>
20
   </section>
29
 import carousel from "vue-owl-carousel";
25
 import carousel from "vue-owl-carousel";
30
 export default {
26
 export default {
31
   components: {
27
   components: {
32
-    carousel
28
+    carousel,
33
   },
29
   },
34
   props: {
30
   props: {
35
-    resortImages: {}
36
-  }
31
+    resortImages: {},
32
+  },
37
 };
33
 };
38
 </script>
34
 </script>
39
 
35
 

+ 6
- 6
src/components/timeshare/resort/resortPage.vue View File

15
 export default {
15
 export default {
16
   components: {
16
   components: {
17
     carouselSection,
17
     carouselSection,
18
-    contentSection
18
+    contentSection,
19
   },
19
   },
20
   data() {
20
   data() {
21
     return {
21
     return {
22
-      boolLoaded: false
22
+      boolLoaded: false,
23
     };
23
     };
24
   },
24
   },
25
   props: {
25
   props: {
26
-    resortCode: {}
26
+    resortCode: {},
27
   },
27
   },
28
   async created() {
28
   async created() {
29
     this.initResort(this.resortCode).then(() => {
29
     this.initResort(this.resortCode).then(() => {
36
       return this.resort
36
       return this.resort
37
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
37
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
38
         : "";
38
         : "";
39
-    }
39
+    },
40
   },
40
   },
41
   methods: {
41
   methods: {
42
     ...mapActions("resort", ["initResort"]),
42
     ...mapActions("resort", ["initResort"]),
43
     routerGoTo(goto) {
43
     routerGoTo(goto) {
44
       this.$router.push(goto);
44
       this.$router.push(goto);
45
-    }
46
-  }
45
+    },
46
+  },
47
 };
47
 };
48
 </script>
48
 </script>
49
 
49
 

+ 32
- 21
src/components/timeshare/searchTimeshare.vue View File

3
     <h2>Filter Weeks</h2>
3
     <h2>Filter Weeks</h2>
4
     <p>*Select at least 1 filter field</p>
4
     <p>*Select at least 1 filter field</p>
5
     <div class="input-group mt-2">
5
     <div class="input-group mt-2">
6
-      <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
7
-      <select class="form-control" name="season" id="season" v-model="selectedSeason">
8
-        <option v-for="season in seasons" :key="season.id" :value="season">
9
-          {{ season.name }}
10
-        </option>
6
+      <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
7
+      <select class="form-control" name="season" id="season" v-model="filter.season">
8
+        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
11
       </select>
9
       </select>
12
     </div>
10
     </div>
13
     <div class="input-group mt-2">
11
     <div class="input-group mt-2">
14
-      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect"
15
-        >Bedrooms</label
16
-      >
12
+      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
17
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
13
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
18
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
14
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
19
       </select>
15
       </select>
27
       v-model="filter.maxPrice"
23
       v-model="filter.maxPrice"
28
     />
24
     />
29
     <p class="mt-2">
25
     <p class="mt-2">
30
-      Filter Arrival Date from
26
+      Date from
31
       <input
27
       <input
32
         type="date"
28
         type="date"
33
         name="arrival-from"
29
         name="arrival-from"
38
       />
34
       />
39
     </p>
35
     </p>
40
     <p>
36
     <p>
41
-      Filter Arrival Date to
37
+      Date to
42
       <input
38
       <input
43
         type="date"
39
         type="date"
44
         name="arrival-to"
40
         name="arrival-to"
45
         class="form-control my-1"
41
         class="form-control my-1"
46
         id="arrival-to"
42
         id="arrival-to"
47
         placeholder="mm/dd/yy"
43
         placeholder="mm/dd/yy"
44
+        v-model="filter.ddate"
48
       />
45
       />
49
     </p>
46
     </p>
50
-    <div class="btn-white-border"><i class="fa fa-search"></i> FILTER</div>
47
+    <button class="btn-white-border" @click="ClearFilter()">
48
+      <i class="fa fa-eraser"></i> CLEAR
49
+    </button>
50
+    <!-- <div class="btn-white-border">
51
+      <i class="fa fa-search"></i> FILTER
52
+    </div>-->
51
   </div>
53
   </div>
52
 </template>
54
 </template>
53
 
55
 
59
 export default {
61
 export default {
60
   props: {
62
   props: {
61
     hideTop: undefined,
63
     hideTop: undefined,
62
-    keyword: undefined
64
+    keyword: undefined,
63
   },
65
   },
64
   data() {
66
   data() {
65
     return {
67
     return {
66
-      selectedSeason: null
68
+      selectedSeason: null,
67
     };
69
     };
68
   },
70
   },
69
   created() {
71
   created() {
75
       "regions",
77
       "regions",
76
       "detailedRegion",
78
       "detailedRegion",
77
       "resortBedrooms",
79
       "resortBedrooms",
78
-      "maxSleep"
80
+      "maxSleep",
79
     ]),
81
     ]),
80
-    ...mapState("weekList", ["filter"]),
82
+    ...mapState("weekList", ["filter", "searchParams"]),
81
     ...mapState("timeshare", ["seasons"]),
83
     ...mapState("timeshare", ["seasons"]),
82
     filteredResorts() {
84
     filteredResorts() {
83
       if (this.selectedRegion) {
85
       if (this.selectedRegion) {
84
-        const list = _.find(this.detailedRegion, i => i.region.regionName === this.selectedRegion)
85
-          .children;
86
-        return _.sortBy(list, r => r.resortName);
86
+        const list = _.find(
87
+          this.detailedRegion,
88
+          (i) => i.region.regionName === this.selectedRegion
89
+        ).children;
90
+        return _.sortBy(list, (r) => r.resortName);
87
       }
91
       }
88
       return this.resorts;
92
       return this.resorts;
89
-    }
93
+    },
90
   },
94
   },
91
   methods: {
95
   methods: {
92
     ...mapActions("timeshare", ["initTimeshare"]),
96
     ...mapActions("timeshare", ["initTimeshare"]),
93
     ...mapActions("weekList", ["clearFilter"]),
97
     ...mapActions("weekList", ["clearFilter"]),
94
-    ...mapActions("timeshare", ["getSeasons"])
95
-  }
98
+    ...mapActions("timeshare", ["getSeasons"]),
99
+    ClearFilter() {
100
+      this.filter.season = null;
101
+      this.filter.bedrooms = null;
102
+      this.filter.maxPrice = null;
103
+      this.filter.date = null;
104
+      this.filter.ddate = null;
105
+    },
106
+  },
96
 };
107
 };
97
 </script>
108
 </script>
98
 
109
 

+ 7
- 1
src/router/index.js View File

45
 
45
 
46
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
46
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
47
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
47
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
48
+import ToBuySearch from "../components/timeshare/buy/toBuySearchResults.vue";
48
 
49
 
49
 import ContactUs from "../components/misc/contactUs.vue";
50
 import ContactUs from "../components/misc/contactUs.vue";
50
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
51
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
399
       path: "/EnquireNow",
400
       path: "/EnquireNow",
400
       name: "EnquireNow",
401
       name: "EnquireNow",
401
       component: EnquireNow
402
       component: EnquireNow
402
-    }
403
+    },
404
+    {
405
+      path: "/toBuyResults",
406
+      name: "ToBuySearch",
407
+      component: ToBuySearch
408
+    },
403
   ]
409
   ]
404
 });
410
 });

+ 20
- 16
src/store/modules/processFlow/bid.js View File

1
-import axios from 'axios';
2
-import log from '../../../assets/Log';
1
+import axios from "axios";
2
+import log from "../../../assets/Log";
3
+import { result } from "lodash";
3
 
4
 
4
 export default {
5
 export default {
5
   namespaced: true,
6
   namespaced: true,
6
   state: {
7
   state: {
7
     bidItem: {},
8
     bidItem: {},
8
-    bidItems: [],
9
+    bidItems: []
9
   },
10
   },
10
   mutations: {
11
   mutations: {
11
     setBid(state, bid) {
12
     setBid(state, bid) {
20
     updateBidList(state, bid) {
21
     updateBidList(state, bid) {
21
       state.bidItems.find(item => item.id === bid.id).status = bid.status;
22
       state.bidItems.find(item => item.id === bid.id).status = bid.status;
22
       console.log(JSON.stringify(bid));
23
       console.log(JSON.stringify(bid));
23
-    },
24
+    }
24
   },
25
   },
25
   getters: {},
26
   getters: {},
26
   actions: {
27
   actions: {
28
+    getTemplate({ commit }) {
29
+      axios.get("/api/bid/GetNewBidTemplate").then(result => commit("setBid", result.data));
30
+    },
27
     getBid({ commit }, id) {
31
     getBid({ commit }, id) {
28
       axios
32
       axios
29
         .get(`/api/bid/${id}`)
33
         .get(`/api/bid/${id}`)
30
-        .then(result => commit('addToBids', result.data))
34
+        .then(result => commit("addToBids", result.data))
31
         .catch(console.error);
35
         .catch(console.error);
32
     },
36
     },
33
     getBids({ commit }) {
37
     getBids({ commit }) {
34
       axios
38
       axios
35
-        .get('/api/bid/GetBids/All')
36
-        .then(result => commit('setBids', result.data))
39
+        .get("/api/bid/GetBids/All")
40
+        .then(result => commit("setBids", result.data))
37
         .catch(console.error);
41
         .catch(console.error);
38
     },
42
     },
39
     saveBid({ commit }, item) {
43
     saveBid({ commit }, item) {
42
       }
46
       }
43
       console.log(JSON.stringify(item));
47
       console.log(JSON.stringify(item));
44
       axios
48
       axios
45
-        .post('/api/bid', item)
46
-        .then(result => commit('setBid', result.data))
49
+        .post("/api/bid", item)
50
+        .then(result => commit("setBid", result.data))
47
         .catch(console.error);
51
         .catch(console.error);
48
     },
52
     },
49
     updateBid({ commit }, item) {
53
     updateBid({ commit }, item) {
50
       axios
54
       axios
51
-        .put('/api/bid', item)
52
-        .then(result => commit('setBid', item))
55
+        .put("/api/bid", item)
56
+        .then(result => commit("setBid", item))
53
         .catch(console.error);
57
         .catch(console.error);
54
     },
58
     },
55
     acceptBid({ commit }, id) {
59
     acceptBid({ commit }, id) {
56
       axios
60
       axios
57
         .put(`/api/bid/AcceptBid/${id}`)
61
         .put(`/api/bid/AcceptBid/${id}`)
58
-        .then(result => commit('updateBidList', result.data))
62
+        .then(result => commit("updateBidList", result.data))
59
         .catch(console.error);
63
         .catch(console.error);
60
     },
64
     },
61
     declineBid({ commit }, item) {
65
     declineBid({ commit }, item) {
62
       axios
66
       axios
63
-        .put('/api/bid/DeclineBid', item)
64
-        .then(result => commit('updateBidList', result.data))
67
+        .put("/api/bid/DeclineBid", item)
68
+        .then(result => commit("updateBidList", result.data))
65
         .catch(console.error);
69
         .catch(console.error);
66
-    },
67
-  },
70
+    }
71
+  }
68
 };
72
 };

+ 32
- 15
src/store/modules/timeshare/weekList.js View File

3
 /* eslint-disable no-restricted-syntax */
3
 /* eslint-disable no-restricted-syntax */
4
 /* eslint-disable guard-for-in */
4
 /* eslint-disable guard-for-in */
5
 import axios from "axios";
5
 import axios from "axios";
6
-import _ from "lodash";
6
+import _, { min } from "lodash";
7
 
7
 
8
 export default {
8
 export default {
9
   namespaced: true,
9
   namespaced: true,
11
     weeks: [],
11
     weeks: [],
12
     status: undefined,
12
     status: undefined,
13
     filter: {
13
     filter: {
14
+      season: undefined,
14
       status: undefined,
15
       status: undefined,
15
       region: undefined,
16
       region: undefined,
16
       resort: undefined,
17
       resort: undefined,
17
       bedrooms: undefined,
18
       bedrooms: undefined,
18
       date: undefined,
19
       date: undefined,
20
+      ddate: undefined,
19
       minPrice: undefined,
21
       minPrice: undefined,
20
       maxPrice: undefined,
22
       maxPrice: undefined,
21
       keyword: undefined
23
       keyword: undefined
22
     },
24
     },
23
     prevFilter: undefined,
25
     prevFilter: undefined,
24
-    difFilter: undefined
26
+    difFilter: undefined,
27
+    searchParams: {
28
+      region: undefined,
29
+      resort: undefined,
30
+      fromDate: undefined,
31
+      toDate: undefined
32
+    }
25
   },
33
   },
26
   mutations: {
34
   mutations: {
27
     onLoading(state) {
35
     onLoading(state) {
81
           );
89
           );
82
         }
90
         }
83
         if (filter.bedrooms) {
91
         if (filter.bedrooms) {
84
-          weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
92
+          if (filter.bedrooms === "Studio") {
93
+            weekList = _.filter(weekList, x => (x.bedrooms && x.bedrooms === "0") || !x.bedrooms);
94
+          } else {
95
+            weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms === filter.bedrooms);
96
+          }
85
         }
97
         }
86
         if (filter.date) {
98
         if (filter.date) {
87
           const minDate = new Date(filter.date);
99
           const minDate = new Date(filter.date);
88
-          minDate.setDate(minDate.getDate() - 7);
89
-          const maxDate = new Date(filter.date);
90
-          maxDate.setDate(maxDate.getDate() + 7);
91
-          weekList = _.filter(
92
-            weekList,
93
-            x =>
94
-              new Date(x.arrivalDate) &&
95
-              new Date(x.departureDate) &&
96
-              new Date(x.arrivalDate) >= minDate &&
97
-              new Date(x.arrivalDate) <= maxDate
98
-          );
100
+          minDate.setDate(minDate.getDate() - 1);
101
+          weekList = _.filter(weekList, x => new Date(x.arrivalDate) >= minDate);
102
+        }
103
+        if (filter.ddate) {
104
+          const maxDate = new Date(filter.ddate);
105
+          weekList = _.filter(weekList, x => new Date(x.departureDate) <= maxDate);
99
         }
106
         }
100
         if (filter.minPrice && filter.minPrice !== 0) {
107
         if (filter.minPrice && filter.minPrice !== 0) {
101
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice >= filter.minPrice);
108
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice >= filter.minPrice);
103
         if (filter.maxPrice && filter.maxPrice !== 0) {
110
         if (filter.maxPrice && filter.maxPrice !== 0) {
104
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice <= filter.maxPrice);
111
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice <= filter.maxPrice);
105
         }
112
         }
113
+        if (filter.season) {
114
+          weekList = _.filter(weekList, x => x.season === filter.season.name);
115
+        }
106
       }
116
       }
107
       return _.sortBy(_.sortBy(weekList, "arrivalDate"), "resort.resortName");
117
       return _.sortBy(_.sortBy(weekList, "arrivalDate"), "resort.resortName");
108
     },
118
     },
149
                 resortName: rootGetters["timeshare/getResortName"](code),
159
                 resortName: rootGetters["timeshare/getResortName"](code),
150
                 resortCode: code
160
                 resortCode: code
151
               };
161
               };
152
-              arr2.push(myItem);
153
             }
162
             }
154
           }
163
           }
155
           commit("setWeeks", arr2);
164
           commit("setWeeks", arr2);
157
         })
166
         })
158
         .catch(console.error);
167
         .catch(console.error);
159
     },
168
     },
169
+    // getWeeks({ commit }) {
170
+    //   axios.get("api/timeshareweek").then(result =>
171
+    //     commit(
172
+    //       "setWeeks",
173
+    //       result.data.filter(x => x.region !== null)
174
+    //     )
175
+    //   );
176
+    // },
160
     clearFilter({ commit }, filter) {
177
     clearFilter({ commit }, filter) {
161
       commit("onClearFilter", filter);
178
       commit("onClearFilter", filter);
162
     }
179
     }

Loading…
Cancel
Save