ソースを参照

Wait Animation added to the properties loading

master
George Williams 4年前
コミット
f53b9d5dde

+ 7
- 4
src/components/property/commercial/singleView/carouselSection.vue ファイルの表示

@@ -30,16 +30,19 @@
30 30
 import carousel from "vue-owl-carousel";
31 31
 export default {
32 32
   components: {
33
-    carousel
33
+    carousel,
34 34
   },
35 35
   data() {
36 36
     return {
37
-      images: []
37
+      images: [],
38 38
     };
39 39
   },
40 40
   props: {
41
-    propertyImages: {}
42
-  }
41
+    propertyImages: {},
42
+  },
43
+  created() {
44
+    this.$emit("Loaded", true);
45
+  },
43 46
 };
44 47
 </script>
45 48
 

+ 32
- 21
src/components/property/commercial/singleView/contentSection.vue ファイルの表示

@@ -50,36 +50,41 @@
50 50
               <p v-if="field.name === 'Rates & Taxes'">
51 51
                 Rates & Taxes: R{{ field.value | toCurrency }}
52 52
               </p>
53
-            </div> -->
53
+            </div>-->
54 54
             <p>{{ property.shortDescription }}</p>
55 55
             <p>{{ property.price | toCurrency }}</p>
56
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
56
+            <div class="btn-white-border">
57
+              <i class="fa fa-search"></i>BOOK A VIEWING
58
+            </div>
57 59
           </div>
58 60
           <div class="panel-left px-5 pb-5 text-center">
59 61
             <h4 class="text-white">Share this Property</h4>
60 62
             <a
61 63
               href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
62 64
               target="_blank"
63
-              ><img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1"
64
-            /></a>
65
+            >
66
+              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
67
+            </a>
65 68
             <a
66 69
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
67
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
68
-            /></a>
70
+            >
71
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
72
+            </a>
69 73
             <a
70 74
               href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
71 75
               data-action="share/whatsapp/share"
72 76
               target="_blank"
73 77
             >
74
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
75
-            /></a>
78
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
79
+            </a>
76 80
           </div>
77 81
         </div>
78 82
         <div class="col-md-8 p-5 resort-profile">
79 83
           <h2 v-if="property.showAddress">
80
-            <div style="display:inline" v-if="property.propertyName !== null">
81
-              {{ property.propertyName }} /
82
-            </div>
84
+            <div
85
+              style="display:inline"
86
+              v-if="property.propertyName !== null"
87
+            >{{ property.propertyName }} /</div>
83 88
             {{ property.streetNumber }} {{ property.streetName }}
84 89
           </h2>
85 90
           <h2 v-else>{{ property.propertyName }}</h2>
@@ -89,9 +94,13 @@
89 94
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
90 95
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
91 96
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
92
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
97
+                  <i class="fa fa-check-circle"></i>
98
+                  {{ field.value }} {{ field.name }}
99
+                </div>
100
+                <div v-else>
101
+                  <i class="fa fa-check-circle"></i>
102
+                  {{ field.name }}
93 103
                 </div>
94
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
95 104
               </div>
96 105
             </div>
97 106
           </div>
@@ -101,8 +110,7 @@
101 110
             style="float:right"
102 111
             class="btn-solid-blue mt-3"
103 112
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
104
-            >MORE INFO...</router-link
105
-          >
113
+          >MORE INFO...</router-link>
106 114
           <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
107 115
           <iframe
108 116
             v-if="property.video !== null"
@@ -146,7 +154,7 @@
146 154
                 </tr>
147 155
               </tbody>
148 156
             </table>
149
-          </div> -->
157
+          </div>-->
150 158
 
151 159
           <!-- <div class="d-flex mt-3">
152 160
             <iframe
@@ -171,11 +179,11 @@
171 179
 import gallery from "../../../shared/gallerySlideShow";
172 180
 export default {
173 181
   components: {
174
-    gallery
182
+    gallery,
175 183
   },
176 184
   props: {
177 185
     property: {},
178
-    propertyImages: {}
186
+    propertyImages: {},
179 187
   },
180 188
   mounted() {
181 189
     console.log(this.property);
@@ -183,7 +191,7 @@ export default {
183 191
   data() {
184 192
     return {
185 193
       index: null,
186
-      date: new Date()
194
+      date: new Date(),
187 195
     };
188 196
   },
189 197
   computed: {
@@ -193,8 +201,11 @@ export default {
193 201
         list.push(this.propertyImages[i].image);
194 202
       }
195 203
       return list;
196
-    }
197
-  }
204
+    },
205
+  },
206
+  created() {
207
+    this.$emit("Loaded", true);
208
+  },
198 209
 };
199 210
 </script>
200 211
 

+ 29
- 10
src/components/property/commercial/singleView/singleCommercialPage.vue ファイルの表示

@@ -1,13 +1,19 @@
1 1
 <template>
2 2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :propertyImages="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4 8
     <main id="main" style="margin-top:-20px">
5 9
       <contentSection
6 10
         v-if="propertyImages.length > 0"
7 11
         :property="property"
8 12
         :propertyImages="propertyImages"
13
+        @Loaded="ContentDone"
9 14
       />
10 15
     </main>
16
+    <div v-if="Wait" id="preloader"></div>
11 17
   </div>
12 18
   <!-- #intro -->
13 19
 </template>
@@ -31,24 +37,31 @@ export default {
31 37
     return {
32 38
       index: null,
33 39
       date: new Date(),
40
+      wait: false,
41
+      carouselLoaded: false,
42
+      contentloaded: false,
34 43
     };
35 44
   },
36
-  async mounted() {
37
-    await this.getProperty(this.$route.params.id);
45
+  mounted() {
46
+    this.wait = true;
47
+    this.carouselLoaded = false;
48
+    this.contentloaded = false;
49
+    this.clearPropertyImages();
50
+    this.getDisplayProperty(this.$route.params.id);
38 51
     // await this.getPropertyImages(this.$route.params.id);
39 52
     // this.mayEditProperty(this.$route.params.id);
40 53
   },
41 54
   computed: {
42 55
     ...mapState("property", ["property", "propertyImages"]),
43
-    ...mapState("propertyEdit", ["mayEdit"]),
56
+    Wait() {
57
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
58
+        return true;
59
+      }
60
+      return false;
61
+    },
44 62
   },
45 63
   methods: {
46
-    ...mapActions("property", [
47
-      "getProperty",
48
-      "getPropertyImages",
49
-      "clearPropertyImages",
50
-    ]),
51
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
64
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
52 65
     formatPrice(value) {
53 66
       const val = (value / 1).toFixed(2);
54 67
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
@@ -59,6 +72,12 @@ export default {
59 72
       }
60 73
       return "";
61 74
     },
75
+    CarouselDone() {
76
+      this.carouselLoaded = true;
77
+    },
78
+    ContentDone() {
79
+      this.contentloaded = true;
80
+    },
62 81
   },
63 82
   beforeDestroy() {
64 83
     this.clearPropertyImages();

+ 7
- 4
src/components/property/enquireNow/carouselSection.vue ファイルの表示

@@ -20,7 +20,7 @@
20 20
       style="margin-top:-50px"
21 21
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
22 22
     >
23
-      <img class="item" v-for="(image, i) in images" :key="i" :src="image" />
23
+      <img class="item" v-for="(image, i) in images" :key="i" :src="image.image" />
24 24
     </carousel>
25 25
 
26 26
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -33,11 +33,14 @@
33 33
 import carousel from "vue-owl-carousel";
34 34
 export default {
35 35
   components: {
36
-    carousel
36
+    carousel,
37 37
   },
38 38
   props: {
39
-    images: {}
40
-  }
39
+    images: {},
40
+  },
41
+  created() {
42
+    this.$emit("Loaded", true);
43
+  },
41 44
 };
42 45
 </script>
43 46
 

+ 13
- 8
src/components/property/enquireNow/contentSection.vue ファイルの表示

@@ -4,14 +4,16 @@
4 4
       <div class="col-md-6">
5 5
         <h3>{{ property.propertyName }}</h3>
6 6
         <p v-html="property.description"></p>
7
-        <p><strong>View by Appointment only!</strong></p>
7
+        <p>
8
+          <strong>View by Appointment only!</strong>
9
+        </p>
8 10
         <br />
9 11
         <p></p>
10 12
         <!-- To arrange a viewing contact Mynie:
11 13
         <div class="col-md-4">
12 14
           <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
13 15
           <a href="tel:0124921238">+27 (0) 12 492 1238</a>
14
-        </div> -->
16
+        </div>-->
15 17
       </div>
16 18
       <div class="col-md-6">
17 19
         <div class="form-group row">
@@ -143,7 +145,7 @@ import alert from "../../shared/alert";
143 145
 
144 146
 export default {
145 147
   components: {
146
-    alert
148
+    alert,
147 149
   },
148 150
   data() {
149 151
     return {
@@ -153,14 +155,14 @@ export default {
153 155
       contactNumber: null,
154 156
       property: null,
155 157
       message: null,
156
-      boolSent: false
158
+      boolSent: false,
157 159
     };
158 160
   },
159 161
   mounted() {
160 162
     this.boolSent = false;
161 163
   },
162 164
   props: {
163
-    property: {}
165
+    property: {},
164 166
   },
165 167
   methods: {
166 168
     async sendMail() {
@@ -171,7 +173,7 @@ export default {
171 173
         email: this.email,
172 174
         phone: this.contactNumber,
173 175
         property: this.property.id.toString(),
174
-        message: this.message
176
+        message: this.message,
175 177
       };
176 178
 
177 179
       const response = await axios.post("/api/mail/1", mailObj);
@@ -184,8 +186,11 @@ export default {
184 186
     },
185 187
     countDownChanged(dismissCountDown) {
186 188
       this.dismissCountDown = dismissCountDown;
187
-    }
188
-  }
189
+    },
190
+  },
191
+  created() {
192
+    this.$emit("Loaded", true);
193
+  },
189 194
 };
190 195
 </script>
191 196
 

+ 34
- 11
src/components/property/enquireNow/enquirenow.vue ファイルの表示

@@ -1,9 +1,14 @@
1 1
 <template>
2 2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :images="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :images="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4 8
     <main id="main" style="margin-top:-20px;padding-bottom:50px">
5
-      <contentSection :property="property" />
9
+      <contentSection :property="property" @Loaded="ContentDone" />
6 10
     </main>
11
+    <div v-if="Wait" id="preloader"></div>
7 12
   </div>
8 13
 </template>
9 14
 
@@ -15,20 +20,32 @@ import contentSection from "./contentSection";
15 20
 export default {
16 21
   components: {
17 22
     carouselSection,
18
-    contentSection
23
+    contentSection,
24
+  },
25
+  data() {
26
+    return {
27
+      wait: false,
28
+      carouselLoaded: false,
29
+      contentloaded: false,
30
+    };
19 31
   },
20 32
   async mounted() {
21
-    await this.getProperty(this.$route.params.id);
22
-    await this.getPropertyImages(this.$route.params.id);
23
-    this.mayEditProperty(this.$route.params.id);
33
+    this.wait = true;
34
+    this.carouselLoaded = false;
35
+    this.contentloaded = false;
36
+    await this.getDisplayProperty(this.$route.params.id);
24 37
   },
25 38
   computed: {
26 39
     ...mapState("property", ["property", "propertyImages"]),
27
-    ...mapState("propertyEdit", ["mayEdit"])
40
+    Wait() {
41
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
42
+        return true;
43
+      }
44
+      return false;
45
+    },
28 46
   },
29 47
   methods: {
30
-    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
31
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
48
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
32 49
     formatPrice(value) {
33 50
       const val = (value / 1).toFixed(2);
34 51
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
@@ -38,8 +55,14 @@ export default {
38 55
         return `${value}<br/>`;
39 56
       }
40 57
       return "";
41
-    }
42
-  }
58
+    },
59
+    CarouselDone() {
60
+      this.carouselLoaded = true;
61
+    },
62
+    ContentDone() {
63
+      this.contentloaded = true;
64
+    },
65
+  },
43 66
 };
44 67
 </script>
45 68
 

+ 7
- 4
src/components/property/residential/singleView/carouselSection.vue ファイルの表示

@@ -30,16 +30,19 @@
30 30
 import carousel from "vue-owl-carousel";
31 31
 export default {
32 32
   components: {
33
-    carousel
33
+    carousel,
34 34
   },
35 35
   data() {
36 36
     return {
37
-      images: []
37
+      images: [],
38 38
     };
39 39
   },
40 40
   props: {
41
-    propertyImages: {}
42
-  }
41
+    propertyImages: {},
42
+  },
43
+  created() {
44
+    this.$emit("Loaded", true);
45
+  },
43 46
 };
44 47
 </script>
45 48
 

+ 27
- 17
src/components/property/residential/singleView/contentSection.vue ファイルの表示

@@ -45,7 +45,9 @@
45 45
               </div>
46 46
             </div>
47 47
 
48
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
48
+            <div class="btn-white-border">
49
+              <i class="fa fa-search"></i>BOOK A VIEWING
50
+            </div>
49 51
           </div>
50 52
           <div class="panel-left px-5 pb-5 text-center">
51 53
             <h4 class="text-white">Share this Property</h4>
@@ -63,23 +65,25 @@
63 65
 
64 66
             <a
65 67
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
66
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
67
-            /></a>
68
+            >
69
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
70
+            </a>
68 71
             <a
69 72
               href="whatsapp://send?text=Check out this property!"
70 73
               data-action="share/whatsapp/share"
71 74
               target="_blank"
72 75
             >
73
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
74
-            /></a>
76
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
77
+            </a>
75 78
           </div>
76 79
         </div>
77 80
         <div></div>
78 81
         <div class="col-md-8 p-5 resort-profile">
79 82
           <h2 v-if="property.showAddress">
80
-            <div style="display:inline" v-if="property.propertyName !== null">
81
-              {{ property.propertyName }} /
82
-            </div>
83
+            <div
84
+              style="display:inline"
85
+              v-if="property.propertyName !== null"
86
+            >{{ property.propertyName }} /</div>
83 87
             {{ property.streetNumber }} {{ property.streetName }}
84 88
           </h2>
85 89
           <h2 v-else>{{ property.propertyName }}</h2>
@@ -96,16 +100,19 @@
96 100
               style="float:right"
97 101
               class="btn-solid-blue mt-3"
98 102
               :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
99
-              >MORE INFO...</router-link
100
-            >
103
+            >MORE INFO...</router-link>
101 104
             <h4>Property Features</h4>
102 105
 
103 106
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
104 107
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
105 108
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
106
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
109
+                  <i class="fa fa-check-circle"></i>
110
+                  {{ field.value }} {{ field.name }}
111
+                </div>
112
+                <div v-else>
113
+                  <i class="fa fa-check-circle"></i>
114
+                  {{ field.name }}
107 115
                 </div>
108
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
109 116
               </div>
110 117
             </div>
111 118
           </div>
@@ -147,11 +154,11 @@ import { ShareFacebook } from "vue-social-sharing";
147 154
 export default {
148 155
   components: {
149 156
     gallery,
150
-    ShareFacebook
157
+    ShareFacebook,
151 158
   },
152 159
   props: {
153 160
     property: {},
154
-    propertyImages: {}
161
+    propertyImages: {},
155 162
   },
156 163
   created() {
157 164
     //this.getListsForPropertyEdit(this.property.id);
@@ -163,7 +170,7 @@ export default {
163 170
     return {
164 171
       index: null,
165 172
       date: new Date(),
166
-      currentUrl: ""
173
+      currentUrl: "",
167 174
     };
168 175
   },
169 176
   methods: {
@@ -192,8 +199,11 @@ export default {
192 199
         list.push(this.propertyImages[i].image);
193 200
       }
194 201
       return list;
195
-    }
196
-  }
202
+    },
203
+  },
204
+  created() {
205
+    this.$emit("Loaded", true);
206
+  },
197 207
 };
198 208
 </script>
199 209
 

+ 28
- 8
src/components/property/residential/singleView/singleResidentialPage.vue ファイルの表示

@@ -1,13 +1,19 @@
1 1
 <template>
2 2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :propertyImages="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4 8
     <main id="main" style="margin-top:-20px">
5 9
       <contentSection
6 10
         v-if="propertyImages.length > 0"
7 11
         :property="property"
8 12
         :propertyImages="propertyImages"
13
+        @Loaded="ContentDone"
9 14
       />
10 15
     </main>
16
+    <div v-if="Wait" id="preloader"></div>
11 17
   </div>
12 18
 </template>
13 19
 
@@ -31,10 +37,17 @@ export default {
31 37
       index: null,
32 38
       date: new Date(),
33 39
       boolLoaded: false,
40
+      wait: false,
41
+      carouselLoaded: false,
42
+      contentloaded: false,
34 43
     };
35 44
   },
36 45
   async mounted() {
37
-    await this.getProperty(this.$route.params.id);
46
+    this.wait = true;
47
+    this.carouselLoaded = false;
48
+    this.contentloaded = false;
49
+    this.clearPropertyImages();
50
+    await this.getDisplayProperty(this.$route.params.id);
38 51
 
39 52
     // await this.getPropertyImages(this.$route.params.id);
40 53
     // setTimeout(() => {
@@ -47,14 +60,15 @@ export default {
47 60
   },
48 61
   computed: {
49 62
     ...mapState("property", ["property", "propertyImages"]),
50
-    ...mapState("propertyEdit", ["mayEdit"]),
63
+    Wait() {
64
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
65
+        return true;
66
+      }
67
+      return false;
68
+    },
51 69
   },
52 70
   methods: {
53
-    ...mapActions("property", [
54
-      "getProperty",
55
-      "getPropertyImages",
56
-      "clearPropertyImages",
57
-    ]),
71
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
58 72
     ...mapActions("propertyEdit", ["mayEditProperty"]),
59 73
 
60 74
     formatPrice(value) {
@@ -67,6 +81,12 @@ export default {
67 81
       }
68 82
       return "";
69 83
     },
84
+    CarouselDone() {
85
+      this.carouselLoaded = true;
86
+    },
87
+    ContentDone() {
88
+      this.contentloaded = true;
89
+    },
70 90
   },
71 91
   beforeDestroy() {
72 92
     this.clearPropertyImages();

+ 12
- 0
src/store/modules/property/property.js ファイルの表示

@@ -75,6 +75,18 @@ export default {
75 75
           .catch(error => reject(new Error(error.message)));
76 76
       });
77 77
     },
78
+    getDisplayProperty({ commit, dispatch }, id) {
79
+      return new Promise((resolve, reject) => {
80
+        axios
81
+          .get(`/api/Property/getDetailed/${id}`)
82
+          .then(result => {
83
+            commit("setProperty", result.data);
84
+            dispatch("getSavedPropertyImages", result.data.id);
85
+            resolve();
86
+          })
87
+          .catch(error => reject(new Error(error.message)));
88
+      });
89
+    },
78 90
     getPropertyImages({ commit }, id) {
79 91
       axios
80 92
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)

読み込み中…
キャンセル
保存