Pārlūkot izejas kodu

Property Search & view screens

master
George Williams 5 gadus atpakaļ
vecāks
revīzija
ad771a9d95

+ 862
- 188
package-lock.json
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 2
- 0
package.json Parādīt failu

14
     "core-js": "^2.6.5",
14
     "core-js": "^2.6.5",
15
     "lodash": "^4.17.15",
15
     "lodash": "^4.17.15",
16
     "material-design-icons-iconfont": "^3.0.3",
16
     "material-design-icons-iconfont": "^3.0.3",
17
+    "node-sass": "^4.12.0",
17
     "roboto-fontface": "*",
18
     "roboto-fontface": "*",
19
+    "sass-loader": "^7.3.1",
18
     "stylus-loader": "^3.0.2",
20
     "stylus-loader": "^3.0.2",
19
     "vue": "^2.6.10",
21
     "vue": "^2.6.10",
20
     "vue-eva-icons": "^1.1.1",
22
     "vue-eva-icons": "^1.1.1",

+ 37
- 0
public/img/ligthbox/close.svg Parādīt failu

1
+<?xml version="1.0" encoding="iso-8859-1"?>
2
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve">
4
+<g>
5
+	<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88   c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242   C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879   s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" fill="#FFFFFF"/>
6
+</g>
7
+<g>
8
+</g>
9
+<g>
10
+</g>
11
+<g>
12
+</g>
13
+<g>
14
+</g>
15
+<g>
16
+</g>
17
+<g>
18
+</g>
19
+<g>
20
+</g>
21
+<g>
22
+</g>
23
+<g>
24
+</g>
25
+<g>
26
+</g>
27
+<g>
28
+</g>
29
+<g>
30
+</g>
31
+<g>
32
+</g>
33
+<g>
34
+</g>
35
+<g>
36
+</g>
37
+</svg>

+ 49
- 0
public/img/ligthbox/next.svg Parādīt failu

1
+<?xml version="1.0" encoding="iso-8859-1"?>
2
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
4
+<g>
5
+	<path id="Chevron_Right_1_" d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179   l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261   C187.881,124.315,187.881,116.495,183.189,111.816z" fill="#FFFFFF"/>
6
+	<g>
7
+	</g>
8
+	<g>
9
+	</g>
10
+	<g>
11
+	</g>
12
+	<g>
13
+	</g>
14
+	<g>
15
+	</g>
16
+	<g>
17
+	</g>
18
+</g>
19
+<g>
20
+</g>
21
+<g>
22
+</g>
23
+<g>
24
+</g>
25
+<g>
26
+</g>
27
+<g>
28
+</g>
29
+<g>
30
+</g>
31
+<g>
32
+</g>
33
+<g>
34
+</g>
35
+<g>
36
+</g>
37
+<g>
38
+</g>
39
+<g>
40
+</g>
41
+<g>
42
+</g>
43
+<g>
44
+</g>
45
+<g>
46
+</g>
47
+<g>
48
+</g>
49
+</svg>

+ 49
- 0
public/img/ligthbox/prev.svg Parādīt failu

1
+<?xml version="1.0" encoding="iso-8859-1"?>
2
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve">
4
+<g>
5
+	<path id="Chevron_Right" d="M57.633,129.007L165.93,237.268c4.752,4.74,12.451,4.74,17.215,0c4.752-4.74,4.752-12.439,0-17.179   l-99.707-99.671l99.695-99.671c4.752-4.74,4.752-12.439,0-17.191c-4.752-4.74-12.463-4.74-17.215,0L57.621,111.816   C52.942,116.507,52.942,124.327,57.633,129.007z" fill="#FFFFFF"/>
6
+	<g>
7
+	</g>
8
+	<g>
9
+	</g>
10
+	<g>
11
+	</g>
12
+	<g>
13
+	</g>
14
+	<g>
15
+	</g>
16
+	<g>
17
+	</g>
18
+</g>
19
+<g>
20
+</g>
21
+<g>
22
+</g>
23
+<g>
24
+</g>
25
+<g>
26
+</g>
27
+<g>
28
+</g>
29
+<g>
30
+</g>
31
+<g>
32
+</g>
33
+<g>
34
+</g>
35
+<g>
36
+</g>
37
+<g>
38
+</g>
39
+<g>
40
+</g>
41
+<g>
42
+</g>
43
+<g>
44
+</g>
45
+<g>
46
+</g>
47
+<g>
48
+</g>
49
+</svg>

+ 12
- 3
src/components/property/propertyCard.vue Parādīt failu

19
                   class="link-a"
19
                   class="link-a"
20
                 >{{ currentProperty.shortDescription }}</router-link>
20
                 >{{ currentProperty.shortDescription }}</router-link>
21
               </h4>
21
               </h4>
22
+              <h4 class="card-title-c">
23
+                <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
24
+                  {{ currentProperty.province }}
25
+                  <br />
26
+                  {{ currentProperty.city }}
27
+                  <br />
28
+                  {{ currentProperty.suburb }}
29
+                </router-link>
30
+              </h4>
22
             </div>
31
             </div>
23
             <div class="card-body-a">
32
             <div class="card-body-a">
24
               <div class="price-box d-flex">
33
               <div class="price-box d-flex">
67
 <script>
76
 <script>
68
 export default {
77
 export default {
69
   props: {
78
   props: {
70
-    properties: Object
71
-  }
79
+    properties: Object,
80
+  },
72
 };
81
 };
73
-</script>
82
+</script>

+ 11
- 7
src/components/property/propertyImage.vue Parādīt failu

15
     </div>
15
     </div>
16
     <br />
16
     <br />
17
     <div class="form-group row">
17
     <div class="form-group row">
18
-      <div v-for="img in image" class="col-md-2">
18
+      <div v-for="(img, i) in image" class="col-md-2" :key="i">
19
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
19
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
20
         <br />
20
         <br />
21
         <a class="fa fa-times del" @click="removeImage(key)" />
21
         <a class="fa fa-times del" @click="removeImage(key)" />
27
 
27
 
28
 <script>
28
 <script>
29
 export default {
29
 export default {
30
+  props: {
31
+    loadedImages: Function,
32
+  },
30
   data() {
33
   data() {
31
     return {
34
     return {
32
       images: {},
35
       images: {},
33
-      image: []
36
+      image: [],
34
     };
37
     };
35
   },
38
   },
36
 
39
 
43
       if (!this.images.length) return;
46
       if (!this.images.length) return;
44
 
47
 
45
       this.createImage(this.images);
48
       this.createImage(this.images);
49
+      this.loadedImages(this.image);
46
     },
50
     },
47
 
51
 
48
     createImage(file) {
52
     createImage(file) {
50
         const reader = new FileReader();
54
         const reader = new FileReader();
51
         var vm = this;
55
         var vm = this;
52
 
56
 
53
-        reader.onload = e => {
57
+        reader.onload = (e) => {
54
           vm.image.push(e.target.result);
58
           vm.image.push(e.target.result);
55
           console.log(vm.image);
59
           console.log(vm.image);
56
         };
60
         };
63
       this.images.splice(key, 1);
67
       this.images.splice(key, 1);
64
 
68
 
65
       if (!this.image.length) {
69
       if (!this.image.length) {
66
-        this.$refs.im.value = "";
70
+        this.$refs.im.value = '';
67
       }
71
       }
68
-    }
69
-  }
72
+    },
73
+  },
70
 };
74
 };
71
-</script>
75
+</script>

+ 177
- 284
src/components/property/propertyPage.vue Parādīt failu

1
 <template>
1
 <template>
2
-  <div>
2
+  <!-- eslint-disable max-len -->
3
+  <div v-if="property">
3
     <section class="intro-single">
4
     <section class="intro-single">
4
       <div class="container">
5
       <div class="container">
5
         <div class="row">
6
         <div class="row">
6
           <div class="col-md-12 col-lg-8">
7
           <div class="col-md-12 col-lg-8">
7
             <div class="title-single-box">
8
             <div class="title-single-box">
8
-              <h1 class="title-single">{{ Property.shortDescription }}</h1>
9
-              <span class="color-text-a">{{ Property.suburb }}</span>
9
+              <h1 class="title-single">{{ property.shortDescription }}</h1>
10
             </div>
10
             </div>
11
           </div>
11
           </div>
12
-          <!-- <div class="col-md-12 col-lg-4">
13
-            <nav aria-label="breadcrumb" class="breadcrumb-box d-flex justify-content-lg-end">
14
-              <ol class="breadcrumb">
15
-                <li class="breadcrumb-item">
16
-                  <a href="index.html">Home</a>
17
-                </li>
18
-                <li class="breadcrumb-item">
19
-                  <a href="property-grid.html">Properties</a>
20
-                </li>
21
-                <li class="breadcrumb-item active" aria-current="page">304 Blaster Up</li>
22
-              </ol>
23
-            </nav>
24
-          </div>-->
25
         </div>
12
         </div>
26
       </div>
13
       </div>
27
     </section>
14
     </section>
28
     <!--/ Intro Single End /-->
15
     <!--/ Intro Single End /-->
29
 
16
 
30
-    <!--/ Property Single Star /-->
17
+    <!--/ property Single Star /-->
31
     <section class="property-single nav-arrow-b">
18
     <section class="property-single nav-arrow-b">
32
       <div class="container">
19
       <div class="container">
20
+        <div class="row">
21
+          <lightBox :thumbnails="propertyImages" :largeImages="propertyImages" class="lightBox" />
22
+        </div>
33
         <div class="row">
23
         <div class="row">
34
           <div class="col-sm-12">
24
           <div class="col-sm-12">
35
-            <div id="property-single-carousel" class="owl-carousel owl-arrow gallery-property">
36
-              <div class="carousel-item-b">
37
-                <img
38
-                  :src="propertyImages[0]"
39
-                  style="height:800px; width:1200px; object-fit: cover;"
40
-                />
41
-              </div>
42
-              <div class="carousel-item-b">
43
-                <img
44
-                  :src="propertyImages[1]"
45
-                  style="height:800px; width:1200px; object-fit: cover;"
46
-                />
47
-              </div>
48
-              <div class="carousel-item-b">
49
-                <img
50
-                  :src="propertyImages[2]"
51
-                  style="height:800px; width:1200px; object-fit: cover;"
52
-                />
53
-              </div>
54
-              <div class="carousel-item-b">
55
-                <img
56
-                  :src="propertyImages[3]"
57
-                  style="height:800px; width:1200px; object-fit: cover;"
58
-                />
59
-              </div>
60
-            </div>
61
             <div class="row justify-content-between">
25
             <div class="row justify-content-between">
62
               <div class="col-md-7 col-lg-7 section-md-t3">
26
               <div class="col-md-7 col-lg-7 section-md-t3">
63
                 <div class="row">
27
                 <div class="row">
64
                   <div class="col-sm-12">
28
                   <div class="col-sm-12">
65
                     <div class="title-box-d">
29
                     <div class="title-box-d">
66
-                      <h3 class="title-d">Property Description</h3>
30
+                      <h3 class="title-d">property Description</h3>
67
                     </div>
31
                     </div>
68
                   </div>
32
                   </div>
69
                 </div>
33
                 </div>
70
-                <div class="property-description" v-html="Property.description" />
71
-                <div v-for="display in Property.displayData">
34
+                <div class="property-description" v-html="property.description" />
35
+                <div v-for="display in property.displayData" :key="display.id">
72
                   <div class="row section-t3">
36
                   <div class="row section-t3">
73
                     <div class="col-sm-12">
37
                     <div class="col-sm-12">
74
                       <div class="title-box-d">
38
                       <div class="title-box-d">
77
                     </div>
41
                     </div>
78
                   </div>
42
                   </div>
79
                   <div class="summary-list">
43
                   <div class="summary-list">
80
-                    <ul class="list" v-for="item in display.values">
44
+                    <ul class="list" v-for="item in display.values" :key="item.id">
81
                       <li class="d-flex justify-content-between">
45
                       <li class="d-flex justify-content-between">
82
                         <strong>{{ item.name }}:</strong>
46
                         <strong>{{ item.name }}:</strong>
83
                         <span v-html="item.value"></span>
47
                         <span v-html="item.value"></span>
93
                       <span class="ion-money">R</span>
57
                       <span class="ion-money">R</span>
94
                     </div>
58
                     </div>
95
                     <div class="card-title-c align-self-center">
59
                     <div class="card-title-c align-self-center">
96
-                      <h5 class="title-c">{{ Property.price }}</h5>
60
+                      <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
97
                     </div>
61
                     </div>
98
                   </div>
62
                   </div>
99
                 </div>
63
                 </div>
100
                 <div class="property-summary">
64
                 <div class="property-summary">
101
-                  <!-- <div class="row">
65
+                  <div class="row">
102
                     <div class="col-sm-12">
66
                     <div class="col-sm-12">
103
                       <div class="title-box-d section-t4">
67
                       <div class="title-box-d section-t4">
104
-                        <h3 class="title-d">Quick Summary</h3>
68
+                        <h3 class="title-d">Summary</h3>
105
                       </div>
69
                       </div>
106
                     </div>
70
                     </div>
107
                   </div>
71
                   </div>
108
                   <div class="summary-list">
72
                   <div class="summary-list">
109
                     <ul class="list">
73
                     <ul class="list">
110
                       <li class="d-flex justify-content-between">
74
                       <li class="d-flex justify-content-between">
111
-                        <strong>Property ID:</strong>
112
-                        <span>1134</span>
113
-                      </li>
114
-                      <li class="d-flex justify-content-between">
115
-                        <strong>Location:</strong>
116
-                        <span>Chicago, IL 606543</span>
117
-                      </li>
118
-                      <li class="d-flex justify-content-between">
119
-                        <strong>Property Type:</strong>
120
-                        <span>House</span>
75
+                        <strong>property ID:</strong>
76
+                        <span>{{ property.id }}</span>
121
                       </li>
77
                       </li>
122
                       <li class="d-flex justify-content-between">
78
                       <li class="d-flex justify-content-between">
123
                         <strong>Status:</strong>
79
                         <strong>Status:</strong>
124
-                        <span>Sale</span>
125
-                      </li>
126
-                      <li class="d-flex justify-content-between">
127
-                        <strong>Area:</strong>
128
-                        <span>
129
-                          340m
130
-                          <sup>2</sup>
131
-                        </span>
132
-                      </li>
133
-                      <li class="d-flex justify-content-between">
134
-                        <strong>Beds:</strong>
135
-                        <span>4</span>
80
+                        <span v-if="property.isSale">Sale</span>
81
+                        <span v-else>Rental</span>
136
                       </li>
82
                       </li>
137
                       <li class="d-flex justify-content-between">
83
                       <li class="d-flex justify-content-between">
138
-                        <strong>Baths:</strong>
139
-                        <span>2</span>
140
-                      </li>
141
-                      <li class="d-flex justify-content-between">
142
-                        <strong>Garage:</strong>
143
-                        <span>1</span>
144
-                      </li>
145
-                    </ul>
146
-                  </div>-->
147
-                </div>
148
-              </div>
149
-            </div>
150
-          </div>
151
-          <div class="col-md-10 offset-md-1">
152
-            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
153
-              <li class="nav-item">
154
-                <a
155
-                  class="nav-link active"
156
-                  id="pills-video-tab"
157
-                  data-toggle="pill"
158
-                  href="#pills-video"
159
-                  role="tab"
160
-                  aria-controls="pills-video"
161
-                  aria-selected="true"
162
-                >Video</a>
163
-              </li>
164
-              <li class="nav-item">
165
-                <a
166
-                  class="nav-link"
167
-                  id="pills-plans-tab"
168
-                  data-toggle="pill"
169
-                  href="#pills-plans"
170
-                  role="tab"
171
-                  aria-controls="pills-plans"
172
-                  aria-selected="false"
173
-                >Floor Plans</a>
174
-              </li>
175
-              <li class="nav-item">
176
-                <a
177
-                  class="nav-link"
178
-                  id="pills-map-tab"
179
-                  data-toggle="pill"
180
-                  href="#pills-map"
181
-                  role="tab"
182
-                  aria-controls="pills-map"
183
-                  aria-selected="false"
184
-                >Ubication</a>
185
-              </li>
186
-            </ul>
187
-            <div class="tab-content" id="pills-tabContent">
188
-              <div
189
-                class="tab-pane fade show active"
190
-                id="pills-video"
191
-                role="tabpanel"
192
-                aria-labelledby="pills-video-tab"
193
-              >
194
-                <iframe
195
-                  src="https://player.vimeo.com/video/73221098"
196
-                  width="100%"
197
-                  height="460"
198
-                  frameborder="0"
199
-                  webkitallowfullscreen
200
-                  mozallowfullscreen
201
-                  allowfullscreen
202
-                ></iframe>
203
-              </div>
204
-              <div
205
-                class="tab-pane fade"
206
-                id="pills-plans"
207
-                role="tabpanel"
208
-                aria-labelledby="pills-plans-tab"
209
-              >
210
-                <img src="img/plan2.jpg" alt class="img-fluid" />
211
-              </div>
212
-              <div
213
-                class="tab-pane fade"
214
-                id="pills-map"
215
-                role="tabpanel"
216
-                aria-labelledby="pills-map-tab"
217
-              >
218
-                <iframe
219
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1422937950147!2d-73.98731968482413!3d40.75889497932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes+Square!5e0!3m2!1ses-419!2sve!4v1510329142834"
220
-                  width="100%"
221
-                  height="460"
222
-                  frameborder="0"
223
-                  style="border:0"
224
-                  allowfullscreen
225
-                ></iframe>
226
-              </div>
227
-            </div>
228
-          </div>
229
-          <div class="col-md-12">
230
-            <div class="row section-t3">
231
-              <div class="col-sm-12">
232
-                <div class="title-box-d">
233
-                  <h3 class="title-d">Contact Agent</h3>
234
-                </div>
235
-              </div>
236
-            </div>
237
-            <div class="row">
238
-              <div class="col-md-6 col-lg-4">
239
-                <img src="img/agent-4.jpg" alt class="img-fluid" />
240
-              </div>
241
-              <div class="col-md-6 col-lg-4">
242
-                <div class="property-agent">
243
-                  <h4 class="title-agent">Anabella Geller</h4>
244
-                  <p class="color-text-a">
245
-                    Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
246
-                    dui. Quisque velit nisi,
247
-                    pretium ut lacinia in, elementum id enim.
248
-                  </p>
249
-                  <ul class="list-unstyled">
250
-                    <li class="d-flex justify-content-between">
251
-                      <strong>Phone:</strong>
252
-                      <span class="color-text-a">(222) 4568932</span>
253
-                    </li>
254
-                    <li class="d-flex justify-content-between">
255
-                      <strong>Mobile:</strong>
256
-                      <span class="color-text-a">777 287 378 737</span>
257
-                    </li>
258
-                    <li class="d-flex justify-content-between">
259
-                      <strong>Email:</strong>
260
-                      <span class="color-text-a">annabella@example.com</span>
261
-                    </li>
262
-                    <li class="d-flex justify-content-between">
263
-                      <strong>Skype:</strong>
264
-                      <span class="color-text-a">Annabela.ge</span>
265
-                    </li>
266
-                  </ul>
267
-                  <div class="socials-a">
268
-                    <ul class="list-inline">
269
-                      <li class="list-inline-item">
270
-                        <a href="#">
271
-                          <i class="fa fa-facebook" aria-hidden="true"></i>
272
-                        </a>
273
-                      </li>
274
-                      <li class="list-inline-item">
275
-                        <a href="#">
276
-                          <i class="fa fa-twitter" aria-hidden="true"></i>
277
-                        </a>
278
-                      </li>
279
-                      <li class="list-inline-item">
280
-                        <a href="#">
281
-                          <i class="fa fa-instagram" aria-hidden="true"></i>
282
-                        </a>
283
-                      </li>
284
-                      <li class="list-inline-item">
285
-                        <a href="#">
286
-                          <i class="fa fa-pinterest-p" aria-hidden="true"></i>
287
-                        </a>
288
-                      </li>
289
-                      <li class="list-inline-item">
290
-                        <a href="#">
291
-                          <i class="fa fa-dribbble" aria-hidden="true"></i>
292
-                        </a>
84
+                        <strong>Address:</strong>
85
+                        <span
86
+                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb.description) + formatAddress(property.city.description) + formatAddress(property.province.description) "
87
+                        ></span>
293
                       </li>
88
                       </li>
294
                     </ul>
89
                     </ul>
295
                   </div>
90
                   </div>
296
                 </div>
91
                 </div>
297
-              </div>
298
-              <div class="col-md-12 col-lg-4">
299
-                <div class="property-contact">
300
-                  <form class="form-a">
301
-                    <div class="row">
302
-                      <div class="col-md-12 mb-1">
303
-                        <div class="form-group">
304
-                          <input
305
-                            type="text"
306
-                            class="form-control form-control-lg form-control-a"
307
-                            id="inputName"
308
-                            placeholder="Name *"
309
-                            required
310
-                          />
311
-                        </div>
312
-                      </div>
313
-                      <div class="col-md-12 mb-1">
314
-                        <div class="form-group">
315
-                          <input
316
-                            type="email"
317
-                            class="form-control form-control-lg form-control-a"
318
-                            id="inputEmail1"
319
-                            placeholder="Email *"
320
-                            required
321
-                          />
322
-                        </div>
92
+                <div class="col-md-12">
93
+                  <div class="row section-t3">
94
+                    <div class="col-sm-12">
95
+                      <div class="title-box-d">
96
+                        <h3 class="title-d">Contact Agent</h3>
323
                       </div>
97
                       </div>
324
-                      <div class="col-md-12 mb-1">
325
-                        <div class="form-group">
326
-                          <textarea
327
-                            id="textMessage"
328
-                            class="form-control"
329
-                            placeholder="Comment *"
330
-                            name="message"
331
-                            cols="45"
332
-                            rows="8"
333
-                            required
334
-                          ></textarea>
98
+                    </div>
99
+                  </div>
100
+                  <div class="row">
101
+                    <div class="col-md-12">
102
+                      <img src="img/agent-4.jpg" alt class="img-fluid" />
103
+                    </div>
104
+                  </div>
105
+                  <div class="row">
106
+                    <div class="col-md-12">
107
+                      <div class="property-agent">
108
+                        <h4 class="title-agent">Anabella Geller</h4>
109
+                        <p class="color-text-a">
110
+                          Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
111
+                          dui. Quisque velit nisi,
112
+                          pretium ut lacinia in, elementum id enim.
113
+                        </p>
114
+                        <ul class="list-unstyled">
115
+                          <li class="d-flex justify-content-between">
116
+                            <strong>Phone:</strong>
117
+                            <span class="color-text-a">(222) 4568932</span>
118
+                          </li>
119
+                          <li class="d-flex justify-content-between">
120
+                            <strong>Mobile:</strong>
121
+                            <span class="color-text-a">777 287 378 737</span>
122
+                          </li>
123
+                          <li class="d-flex justify-content-between">
124
+                            <strong>Email:</strong>
125
+                            <span class="color-text-a">annabella@example.com</span>
126
+                          </li>
127
+                          <li class="d-flex justify-content-between">
128
+                            <strong>Skype:</strong>
129
+                            <span class="color-text-a">Annabela.ge</span>
130
+                          </li>
131
+                        </ul>
132
+                        <div class="socials-a">
133
+                          <ul class="list-inline">
134
+                            <li class="list-inline-item">
135
+                              <a href="#">
136
+                                <i class="fa fa-facebook" aria-hidden="true"></i>
137
+                              </a>
138
+                            </li>
139
+                            <li class="list-inline-item">
140
+                              <a href="#">
141
+                                <i class="fa fa-twitter" aria-hidden="true"></i>
142
+                              </a>
143
+                            </li>
144
+                            <li class="list-inline-item">
145
+                              <a href="#">
146
+                                <i class="fa fa-instagram" aria-hidden="true"></i>
147
+                              </a>
148
+                            </li>
149
+                            <li class="list-inline-item">
150
+                              <a href="#">
151
+                                <i class="fa fa-pinterest-p" aria-hidden="true"></i>
152
+                              </a>
153
+                            </li>
154
+                            <li class="list-inline-item">
155
+                              <a href="#">
156
+                                <i class="fa fa-dribbble" aria-hidden="true"></i>
157
+                              </a>
158
+                            </li>
159
+                          </ul>
335
                         </div>
160
                         </div>
336
                       </div>
161
                       </div>
337
-                      <div class="col-md-12">
338
-                        <button type="submit" class="btn btn-a">Send Message</button>
162
+                    </div>
163
+                  </div>
164
+                  <div class="row">
165
+                    <div class="col-md-12">
166
+                      <div class="property-contact">
167
+                        <form class="form-a">
168
+                          <div class="row">
169
+                            <div class="col-md-12 mb-1">
170
+                              <div class="form-group">
171
+                                <input
172
+                                  type="text"
173
+                                  class="form-control form-control-lg form-control-a"
174
+                                  id="inputName"
175
+                                  placeholder="Name *"
176
+                                  required
177
+                                />
178
+                              </div>
179
+                            </div>
180
+                            <div class="col-md-12 mb-1">
181
+                              <div class="form-group">
182
+                                <input
183
+                                  type="email"
184
+                                  class="form-control form-control-lg form-control-a"
185
+                                  id="inputEmail1"
186
+                                  placeholder="Email *"
187
+                                  required
188
+                                />
189
+                              </div>
190
+                            </div>
191
+                            <div class="col-md-12 mb-1">
192
+                              <div class="form-group">
193
+                                <textarea
194
+                                  id="textMessage"
195
+                                  class="form-control"
196
+                                  placeholder="Comment *"
197
+                                  name="message"
198
+                                  cols="45"
199
+                                  rows="8"
200
+                                  required
201
+                                ></textarea>
202
+                              </div>
203
+                            </div>
204
+                            <div class="col-md-12">
205
+                              <button type="submit" class="btn btn-a">Send Message</button>
206
+                            </div>
207
+                          </div>
208
+                        </form>
339
                       </div>
209
                       </div>
340
                     </div>
210
                     </div>
341
-                  </form>
211
+                  </div>
342
                 </div>
212
                 </div>
343
               </div>
213
               </div>
344
             </div>
214
             </div>
350
 </template>
220
 </template>
351
 
221
 
352
 <script>
222
 <script>
223
+import { mapState, mapActions } from 'vuex';
224
+import lightBox from '../shared/lightBoxGallery.vue';
225
+
353
 export default {
226
 export default {
354
-  name: "Property",
227
+  name: 'property',
228
+  components: {
229
+    lightBox,
230
+  },
355
   data() {
231
   data() {
356
-    return {
357
-      Property: {},
358
-      propertyImages: []
359
-    };
232
+    return {};
233
+  },
234
+  mounted() {
235
+    this.getProperty(Object.assign({}, { id: this.$route.params.id }));
236
+    this.getPropertyImages(Object.assign({}, { id: this.$route.params.id }));
237
+  },
238
+  computed: {
239
+    ...mapState('property', ['property', 'propertyImages']),
240
+  },
241
+  methods: {
242
+    ...mapActions('property', ['getProperty', 'getPropertyImages']),
243
+    formatPrice(value) {
244
+      const val = (value / 1).toFixed(2);
245
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
246
+    },
247
+    formatAddress(value) {
248
+      if (value !== '') {
249
+        return `${value}<br/>`;
250
+      }
251
+      return '';
252
+    },
360
   },
253
   },
361
-  created() {
362
-    const axios = require("axios");
363
-    axios
364
-      .get(`http://localhost:57260/Property/Property/${this.$route.params.id}`)
365
-      .then(response => (this.Property = response.data));
366
-
367
-    axios
368
-      .get(
369
-        `http://localhost:57260/property/PropertyImage/getpropertyimages/${this.$route.params.id}`
370
-      )
371
-      .then(response => (this.propertyImages = response.data));
372
-  }
373
 };
254
 };
374
 </script>
255
 </script>
256
+
257
+<style lang ="scss">
258
+.light-box {
259
+  &__thumbnail {
260
+    margin: 20px;
261
+    width: 200px;
262
+  }
263
+}
264
+img {
265
+  max-width: 100%;
266
+}
267
+</style>

+ 106
- 0
src/components/property/propertySearchFields.vue Parādīt failu

1
+<template>
2
+  <div>
3
+    <div class="col-md-6 mb-2">
4
+      <div class="form-group">
5
+        <label for="city">For:</label>
6
+        <select
7
+          class="form-control form-control-lg form-control-a"
8
+          id="forSelector"
9
+          v-model="selectedType"
10
+          @change="TypeSelected"
11
+        >
12
+          <option value="Sale">Sale</option>
13
+          <option value="Rent">Rent</option>
14
+        </select>
15
+      </div>
16
+      <div class="form-group">
17
+        <label for="city">Provice</label>
18
+        <select
19
+          class="form-control form-control-lg form-control-a"
20
+          id="provinceselector"
21
+          @change="ProvinceSelected"
22
+          v-model="selectedProvince"
23
+        >
24
+          <option>All</option>
25
+          <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
26
+        </select>
27
+      </div>
28
+    </div>
29
+    <div class="col-md-6 mb-2">
30
+      <div class="form-group">
31
+        <label for="city">City</label>
32
+        <select
33
+          class="form-control form-control-lg form-control-a"
34
+          id="cityselector"
35
+          @change="CitySelected"
36
+          v-model="selectedCity"
37
+        >
38
+          <option>All</option>
39
+          <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
40
+        </select>
41
+      </div>
42
+    </div>
43
+    <div class="col-md-6 mb-2">
44
+      <div class="form-group">
45
+        <label for="city">Suburb</label>
46
+        <select
47
+          class="form-control form-control-lg form-control-a"
48
+          id="suburbselector"
49
+          v-model="selectedSuburb"
50
+          @change="SuburbSelected"
51
+        >
52
+          <option>All</option>
53
+          <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
54
+        </select>
55
+      </div>
56
+    </div>
57
+  </div>
58
+</template>
59
+
60
+<script>
61
+import { mapState, mapActions } from 'vuex';
62
+
63
+export default {
64
+  data() {
65
+    return {
66
+      selectedType: 'Sale',
67
+      selectedProvince: 'All',
68
+      selectedCity: 'All',
69
+      selectedSuburb: 'All',
70
+    };
71
+  },
72
+  mounted() {
73
+    this.getProvince();
74
+    this.$emit('TypeSelectedUpdated', this.selectedType);
75
+  },
76
+  computed: {
77
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
78
+  },
79
+  methods: {
80
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
81
+    TypeSelected(item) {
82
+      this.$emit('TypeSelectedUpdated', item.target.value);
83
+    },
84
+    ProvinceSelected(item) {
85
+      if (item.target.value !== 'All') {
86
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
87
+      }
88
+      this.$emit('ProvinceSelectedUpdated', item.target.value);
89
+    },
90
+    CitySelected(item) {
91
+      if (item.target.value !== 'All') {
92
+        this.getSuburbs(
93
+          Object.assign(
94
+            {},
95
+            { province: this.selectedProvince, city: this.selectedCity },
96
+          ),
97
+        );
98
+      }
99
+      this.$emit('CitySelectedUpdated', item.target.value);
100
+    },
101
+    SuburbSelected(item) {
102
+      this.$emit('SuburbSelectedUpdated', item.target.value);
103
+    },
104
+  },
105
+};
106
+</script>

+ 27
- 29
src/components/property/propertySearchPage.vue Parādīt failu

96
   </div>
96
   </div>
97
 </template>
97
 </template>
98
 <script>
98
 <script>
99
-import propertyCard from "../property/propertyCard.vue";
100
-import { isNull } from "util";
99
+import propertyCard from './propertyCard.vue';
101
 
100
 
102
 export default {
101
 export default {
103
-  name: "propertysearch",
102
+  name: 'propertysearch',
104
   components: {
103
   components: {
105
-    propertyCard
104
+    propertyCard,
106
   },
105
   },
107
   data() {
106
   data() {
108
     return {
107
     return {
109
       Properties: [],
108
       Properties: [],
110
-      type: "",
111
-      propertyType: "",
112
-      propertyTypeparam: "",
113
-      province: "",
114
-      city: "",
115
-      suburb: ""
109
+      type: '',
110
+      propertyType: '',
111
+      propertyTypeparam: '',
112
+      province: '',
113
+      city: '',
114
+      suburb: '',
116
     };
115
     };
117
   },
116
   },
118
   computed: {
117
   computed: {
124
       this.city = this.$route.query.city;
123
       this.city = this.$route.query.city;
125
       this.suburb = this.$route.query.suburb;
124
       this.suburb = this.$route.query.suburb;
126
 
125
 
127
-      if (typeof this.propertyType === "undefined") {
126
+      if (typeof this.propertyType === 'undefined') {
128
         this.propertyType = this.propertyTypeparam;
127
         this.propertyType = this.propertyTypeparam;
129
       }
128
       }
130
 
129
 
131
-      let search = "";
132
-      if (this.type !== "") {
133
-        search = search + "type:" + this.type;
130
+      if (this.type === '') {
131
+        this.type = 'undefined';
134
       }
132
       }
135
-      if (this.propertyType !== "") {
136
-        search = search + "|propertyType:" + this.propertyType;
133
+      if (this.propertyType === '') {
134
+        this.propertyType = 'undefined';
137
       }
135
       }
138
-      if (this.province !== "") {
139
-        search = search + "|province:" + this.province;
136
+      if (this.province === '') {
137
+        this.province = 'undefined';
140
       }
138
       }
141
-      if (this.city !== "") {
142
-        search = search + "|city:" + this.city;
139
+      if (this.city === '') {
140
+        this.city = 'undefined';
143
       }
141
       }
144
-      if (this.suburb !== "") {
145
-        search = search + "|suburb:" + this.suburb;
142
+      if (this.suburb === '') {
143
+        this.suburb = 'undefined';
146
       }
144
       }
147
 
145
 
148
-      console.log(search);
149
-
150
-      const axios = require("axios");
146
+      const axios = require('axios');
151
       axios
147
       axios
152
         .get(
148
         .get(
153
-          `http://localhost:57260/Property/Property/Search/${this.type}/${this.propertyType}/${this.province}/${this.city}/${this.suburb}`
149
+          `http://localhost:57260/Property/Property/Search/${this.type}/${this.propertyType}/${this.province}/${this.city}/${this.suburb}`,
154
         )
150
         )
155
         .then(response => (this.Properties = response.data));
151
         .then(response => (this.Properties = response.data));
156
-    }
152
+
153
+      return null;
154
+    },
157
   },
155
   },
158
   watch: {
156
   watch: {
159
     ParamsChanged() {
157
     ParamsChanged() {
160
       console.log(JSON.stringify(this.$route.query));
158
       console.log(JSON.stringify(this.$route.query));
161
-    }
162
-  }
159
+    },
160
+  },
163
 };
161
 };
164
 </script>
162
 </script>

+ 27
- 3
src/components/property/propertyUserField.vue Parādīt failu

1
 <template>
1
 <template>
2
   <div class="form-group row">
2
   <div class="form-group row">
3
-    <div class="col-md-4 mb-2" v-for="currentField in fields">
3
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
4
       <label>{{ currentField.name }}</label>
4
       <label>{{ currentField.name }}</label>
5
       <input
5
       <input
6
         v-if="currentField.type === 'number'"
6
         v-if="currentField.type === 'number'"
8
         type="number"
8
         type="number"
9
         name="currentField.name"
9
         name="currentField.name"
10
         id="currentField.id"
10
         id="currentField.id"
11
+        v-model="setFields[i]"
12
+        @change="UpdateSetFields(currentField, i)"
11
       />
13
       />
12
       <input
14
       <input
13
         v-if="currentField.type === 'text'"
15
         v-if="currentField.type === 'text'"
15
         type="text"
17
         type="text"
16
         name="currentField.name"
18
         name="currentField.name"
17
         id="currentField.id"
19
         id="currentField.id"
20
+        v-model="setFields[i]"
21
+        @change="UpdateSetFields(currentField, i)"
18
       />
22
       />
19
       <div v-if="currentField.type === 'yesno'">
23
       <div v-if="currentField.type === 'yesno'">
20
-        <select class="form-control form-control-lg form-control-a" id="currentField.id">
21
-          <option>Please Select</option>
24
+        <select
25
+          class="form-control form-control-lg form-control-a"
26
+          id="currentField.id"
27
+          v-model="setFields[i]"
28
+          @change="UpdateSetFields(currentField, i)"
29
+        >
22
           <option value="yes">Yes</option>
30
           <option value="yes">Yes</option>
23
           <option value="no">No</option>
31
           <option value="no">No</option>
24
         </select>
32
         </select>
29
 
37
 
30
 <script>
38
 <script>
31
 export default {
39
 export default {
40
+  name: 'UserDefinedField',
32
   props: {
41
   props: {
33
     fields: [],
42
     fields: [],
43
+    SetFieldValue: Function,
44
+  },
45
+  data() {
46
+    return {
47
+      setFields: [],
48
+    };
49
+  },
50
+  methods: {
51
+    UpdateSetFields(field, index) {
52
+      const item = {
53
+        userDefinedFieldId: field.id,
54
+        value: this.setFields[index],
55
+      };
56
+      this.$emit('UpdateUserDefinedFields', item);
57
+    },
34
   },
58
   },
35
 };
59
 };
36
 </script>
60
 </script>

+ 57
- 57
src/components/property/propertyeditPage.vue Parādīt failu

235
 </template>
235
 </template>
236
 
236
 
237
 <script>
237
 <script>
238
-import UserField from "./propertyUserField.vue";
239
-import ImageLoad from "./propertyImage.vue";
238
+import UserField from './propertyUserField.vue';
239
+import ImageLoad from './propertyImage.vue';
240
 // https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
240
 // https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
241
 export default {
241
 export default {
242
-  name: "PropertyEdit",
242
+  name: 'PropertyEdit',
243
   components: {
243
   components: {
244
     UserField,
244
     UserField,
245
-    ImageLoad
245
+    ImageLoad,
246
   },
246
   },
247
   data() {
247
   data() {
248
     return {
248
     return {
249
       ApiRunning: true,
249
       ApiRunning: true,
250
-      propertyType: "Residential",
251
-      salesType: "Rental",
252
-      imageFile: "",
250
+      propertyType: 'Residential',
251
+      salesType: 'Rental',
252
+      imageFile: '',
253
       provinces: [],
253
       provinces: [],
254
       cities: [],
254
       cities: [],
255
       suburbs: [],
255
       suburbs: [],
256
       propertyValues: [],
256
       propertyValues: [],
257
       propValuesProp: [],
257
       propValuesProp: [],
258
       propertyTypes: [],
258
       propertyTypes: [],
259
-      selectedProvince: "",
260
-      selectedCity: "",
259
+      selectedProvince: '',
260
+      selectedCity: '',
261
       property: {
261
       property: {
262
         propertyTypeId: 0,
262
         propertyTypeId: 0,
263
-        propertyName: "",
264
-        unit: "",
265
-        addressLine1: "",
266
-        addressLine2: "",
267
-        addressLine3: "",
263
+        propertyName: '',
264
+        unit: '',
265
+        addressLine1: '',
266
+        addressLine2: '',
267
+        addressLine3: '',
268
         suburbId: 0,
268
         suburbId: 0,
269
         cityId: 0,
269
         cityId: 0,
270
         provinceId: 0,
270
         provinceId: 0,
271
-        price: "",
272
-        per: "",
273
-        description: "",
271
+        price: '',
272
+        per: '',
273
+        description: '',
274
         isSale: false,
274
         isSale: false,
275
         propertyUserFields: [],
275
         propertyUserFields: [],
276
-        propertyImages: []
276
+        propertyImages: [],
277
       },
277
       },
278
       images: [],
278
       images: [],
279
-      propertyFieldValues: []
279
+      propertyFieldValues: [],
280
     };
280
     };
281
   },
281
   },
282
   methods: {
282
   methods: {
283
     SubmitData() {
283
     SubmitData() {
284
-      // let isDefault = true;
285
-      // this.images.forEach((imagedata) => {
286
-      //   this.property.propertyImages.push({
287
-      //     image: imagedata,
288
-      //     isDefault,
289
-      //   });
290
-      //   isDefault = false;
291
-      // });
292
-
293
-      // this.property.propertyUserFields = this.propertyFieldValues;
284
+      let isDefault = true;
285
+      this.images.forEach((imagedata) => {
286
+        this.property.propertyImages.push({
287
+          image: imagedata,
288
+          isDefault,
289
+        });
290
+        isDefault = false;
291
+      });
292
+      this.property.propertyUserFields = this.propertyFieldValues;
294
 
293
 
295
-      // const axios = require('axios');
296
-      // axios
297
-      //   .post('http://localhost:57260/Property/Property', this.property)
298
-      //   .then((response) => {})
299
-      //   .catch((e) => {
300
-      //     alert(e);
301
-      //   });
294
+      const axios = require('axios');
295
+      axios
296
+        .post('http://localhost:57260/Property/Property', this.property)
297
+        .then((response) => {})
298
+        .catch((e) => {
299
+          alert(e);
300
+        });
302
 
301
 
303
-      // this.$router.push("/property/search");
304
       this.$router.push({
302
       this.$router.push({
305
-        path: "/property/search",
306
-        query: { type: this.salesType, propertyType: this.propertyType }
303
+        path: '/property/search',
304
+        query: { type: this.salesType, propertyType: this.propertyType },
307
       });
305
       });
308
     },
306
     },
309
     ProvinceSelected(item) {
307
     ProvinceSelected(item) {
311
         this.selectedProvince = this.provinces[
309
         this.selectedProvince = this.provinces[
312
           item.target.options.selectedIndex - 1
310
           item.target.options.selectedIndex - 1
313
         ].description;
311
         ].description;
314
-        const axios = require("axios");
312
+        const axios = require('axios');
315
         axios
313
         axios
316
           .get(
314
           .get(
317
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
315
+            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
318
           )
316
           )
319
           .then(response => (this.cities = response.data));
317
           .then(response => (this.cities = response.data));
320
       }
318
       }
324
         this.selectedCity = this.cities[
322
         this.selectedCity = this.cities[
325
           item.target.options.selectedIndex - 1
323
           item.target.options.selectedIndex - 1
326
         ].description;
324
         ].description;
327
-        const axios = require("axios");
325
+        const axios = require('axios');
328
         axios
326
         axios
329
           .get(
327
           .get(
330
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
328
+            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
331
           )
329
           )
332
           .then(response => (this.suburbs = response.data));
330
           .then(response => (this.suburbs = response.data));
333
       }
331
       }
337
     },
335
     },
338
     UpdateUserDefinedFields(item) {
336
     UpdateUserDefinedFields(item) {
339
       let update = false;
337
       let update = false;
340
-      this.propertyFieldValues.forEach(element => {
338
+      this.propertyFieldValues.forEach((element) => {
341
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
339
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
342
           element.value = item.value;
340
           element.value = item.value;
343
           update = true;
341
           update = true;
346
       if (!update) {
344
       if (!update) {
347
         this.propertyFieldValues.push(item);
345
         this.propertyFieldValues.push(item);
348
       }
346
       }
349
-    }
347
+    },
350
   },
348
   },
351
   mounted() {
349
   mounted() {
352
     this.propertyType = this.$route.params.propType;
350
     this.propertyType = this.$route.params.propType;
353
     this.salesType = this.$route.params.saleType;
351
     this.salesType = this.$route.params.saleType;
354
 
352
 
355
-    const axios = require("axios");
353
+    const axios = require('axios');
356
     axios
354
     axios
357
-      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
355
+      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
358
       .then(response => (this.propValuesProp = response.data));
356
       .then(response => (this.propValuesProp = response.data));
359
 
357
 
360
     axios
358
     axios
361
       .get(
359
       .get(
362
-        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
360
+        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
363
       )
361
       )
364
       .then(response => (this.propertyValues = response.data));
362
       .then(response => (this.propertyValues = response.data));
365
 
363
 
366
     axios
364
     axios
367
       .get(
365
       .get(
368
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
366
+        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
369
       )
367
       )
370
       .then(response => (this.propertyTypes = response.data));
368
       .then(response => (this.propertyTypes = response.data));
371
 
369
 
372
     axios
370
     axios
373
-      .get("http://localhost:57260/region/province")
371
+      .get('http://localhost:57260/region/province')
374
       .then(response => (this.provinces = response.data));
372
       .then(response => (this.provinces = response.data));
375
   },
373
   },
376
   computed: {
374
   computed: {
378
       this.propertyType = this.$route.params.propType;
376
       this.propertyType = this.$route.params.propType;
379
       this.salesType = this.$route.params.saleType;
377
       this.salesType = this.$route.params.saleType;
380
 
378
 
381
-      const axios = require("axios");
379
+      const axios = require('axios');
382
       axios
380
       axios
383
         .get(
381
         .get(
384
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
382
+          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
385
         )
383
         )
386
         .then(response => (this.propertyTypes = response.data));
384
         .then(response => (this.propertyTypes = response.data));
387
 
385
 
388
       axios
386
       axios
389
         .get(
387
         .get(
390
-          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
388
+          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
391
         )
389
         )
392
         .then(response => (this.propertyValues = response.data));
390
         .then(response => (this.propertyValues = response.data));
393
-    }
391
+
392
+      return this.propertyType;
393
+    },
394
   },
394
   },
395
   watch: {
395
   watch: {
396
     SalesTypeChanged() {
396
     SalesTypeChanged() {
397
       console.log(this.salesType);
397
       console.log(this.salesType);
398
-    }
399
-  }
398
+    },
399
+  },
400
 };
400
 };
401
-</script>
401
+</script>

+ 199
- 0
src/components/shared/lightBoxGallery.vue Parādīt failu

1
+<template>
2
+  <div>
3
+    <img
4
+      @click="lightboxEffect(index)"
5
+      v-for="(thumbnail, index) in thumbnails"
6
+      :key="thumbnail"
7
+      :src="thumbnail"
8
+      style="height:150px; width:150px; object-fit: cover;"
9
+      class="light-box__thumbnail"
10
+    />
11
+    <transition name="fade" mode="out-in">
12
+      <div @click.stop="bg = !bg" class="light-box__bg" v-if="bg"></div>
13
+    </transition>
14
+
15
+    <div v-if="bg">
16
+      <div class="light-box__close" @click.stop="bg = !bg"></div>
17
+      <p class="light-box__count" v-if="count">
18
+        {{currentImage + 1 }}/
19
+        <span>{{ thumbnails.length}}</span>
20
+      </p>
21
+      <div @click="prev" class="light-box__prev light-box__btn"></div>
22
+
23
+      <div v-if="bg" class="light-box__container">
24
+        <transition name="fade" mode="out-in">
25
+          <img
26
+            :key="currentImage"
27
+            :src="largeImages[currentImage]"
28
+            class="light-box__container__img"
29
+          />
30
+        </transition>
31
+      </div>
32
+
33
+      <div class="light-box__caption" v-if="caption">
34
+        <!-- <p v-if="captions[currentImage]">{{ captions[currentImage]}}</p> -->
35
+      </div>
36
+
37
+      <div @click="next" class="light-box__next light-box__btn"></div>
38
+    </div>
39
+  </div>
40
+</template>
41
+
42
+<script>
43
+export default {
44
+  data() {
45
+    return {
46
+      bg: false,
47
+      currentImage: 0,
48
+      count: true,
49
+      caption: true,
50
+    };
51
+  },
52
+  props: {
53
+    thumbnails: {
54
+      type: Array,
55
+      required: true,
56
+    },
57
+    largeImages: {
58
+      type: Array,
59
+      required: true,
60
+    },
61
+    captions: {
62
+      type: Array,
63
+      required: true,
64
+    },
65
+    thumbnailsPath: {
66
+      type: String,
67
+      required: true,
68
+    },
69
+    largePath: {
70
+      type: String,
71
+      required: true,
72
+    },
73
+  },
74
+  methods: {
75
+    lightboxEffect(curr) {
76
+      this.currentImage = curr;
77
+      this.bg = !this.bg;
78
+    },
79
+    next() {
80
+      if (this.currentImage < this.largeImages.length - 1) {
81
+        this.currentImage++;
82
+      } else {
83
+        this.currentImage = 0;
84
+      }
85
+    },
86
+    prev() {
87
+      if (this.currentImage > 0) {
88
+        this.currentImage--;
89
+      } else {
90
+        this.currentImage = this.largeImages.length - 1;
91
+      }
92
+    },
93
+  },
94
+};
95
+</script>
96
+
97
+<style lang="scss">
98
+.fade-enter-active,
99
+.fade-leave-active {
100
+  transition: opacity 0.2s;
101
+}
102
+.fade-enter,
103
+.fade-leave-to {
104
+  opacity: 0;
105
+}
106
+.light-box {
107
+  &__bg {
108
+    position: fixed;
109
+    left: 0;
110
+    top: 0;
111
+    right: 0;
112
+    bottom: 0;
113
+    background-color: rgba(0, 0, 0, 0.89);
114
+    z-index: 1000;
115
+  }
116
+
117
+  &__thumbnail {
118
+    cursor: pointer;
119
+  }
120
+
121
+  &__close {
122
+    padding: 10px;
123
+    position: absolute;
124
+    right: 5px;
125
+    top: 10px;
126
+    background-image: url(../../../public/img/ligthbox/close.svg);
127
+    background-size: contain;
128
+    background-position: center;
129
+  }
130
+  &__container {
131
+    position: absolute;
132
+    z-index: 2000;
133
+    display: flex;
134
+    justify-content: center;
135
+    align-items: center;
136
+    max-width: 900px;
137
+    left: 50%;
138
+    top: 50%;
139
+    transform: translate(-50%, -50%);
140
+    min-height: 800px;
141
+    img {
142
+      align-self: center;
143
+    }
144
+  }
145
+  &__btn {
146
+    background-size: contain;
147
+    background-position: center;
148
+    align-self: center;
149
+    padding: 15px;
150
+  }
151
+
152
+  &__close,
153
+  &__btn {
154
+    cursor: pointer;
155
+  }
156
+
157
+  &__close,
158
+  &__btn,
159
+  &__caption,
160
+  &__count {
161
+    position: absolute;
162
+    z-index: 3000;
163
+  }
164
+
165
+  &__next {
166
+    background-image: url(../../../public/img/ligthbox/next.svg);
167
+    right: 20px;
168
+  }
169
+  &__prev {
170
+    background-image: url(../../../public/img/ligthbox/prev.svg);
171
+    left: 20px;
172
+  }
173
+  &__next,
174
+  &__prev {
175
+    top: 50%;
176
+    transform: translateY(-50%);
177
+  }
178
+
179
+  &__caption {
180
+    bottom: 0;
181
+    width: 100%;
182
+    height: 50px;
183
+    display: flex;
184
+    align-items: center;
185
+    color: #fff;
186
+    font-size: 20px;
187
+    justify-content: center;
188
+  }
189
+
190
+  &__count {
191
+    left: 20px;
192
+    font-size: 16px;
193
+    color: #fff;
194
+    top: 14px;
195
+    padding: 0;
196
+    margin: 0;
197
+  }
198
+}
199
+</style>

+ 106
- 91
src/components/shared/searchTab.vue Parādīt failu

5
       <h3 class="title-d">Search</h3>
5
       <h3 class="title-d">Search</h3>
6
     </div>
6
     </div>
7
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
7
     <span class="close-box-collapse right-boxed ion-ios-close"></span>
8
-    <div class="box-collapse-wrap form">
8
+    <div class="box-collapse-wrap">
9
       <form class="form-a">
9
       <form class="form-a">
10
         <div class="row">
10
         <div class="row">
11
           <div class="col-md-12 mb-2">
11
           <div class="col-md-12 mb-2">
18
               />
18
               />
19
             </div>
19
             </div>
20
           </div>
20
           </div>
21
-          <div class="col-md-4 mb-2">
22
-            <div class="form-group">
23
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
24
-              <label class="form-check-label" for="paid">Timeshare</label>
25
-            </div>
26
-          </div>
27
-          <div class="col-md-4 mb-2">
28
-            <div class="form-group">
29
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
30
-              <label class="form-check-label" for="paid">Residential</label>
31
-            </div>
32
-          </div>
33
-          <div class="col-md-4 mb-2">
34
-            <div class="form-group">
35
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
36
-              <label class="form-check-label" for="paid">Commercial</label>
37
-            </div>
38
-          </div>
39
-          <div class="col-md-6 mb-2">
40
-            <div class="form-group">
41
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
42
-              <label class="form-check-label" for="paid">Sale</label>
43
-            </div>
44
-          </div>
45
-          <div class="col-md-6 mb-2">
46
-            <div class="form-group">
47
-              <input class="form-check-input" type="radio" name="paid" value="Yes" />
48
-              <label class="form-check-label" for="paid">Rent</label>
49
-            </div>
50
-          </div>
51
-          <div class="col-md-6 mb-2">
52
-            <div class="form-group">
53
-              <label for="city">Provice</label>
54
-              <select
55
-                class="form-control form-control-lg form-control-a"
56
-                id="provinceselector"
57
-                @change="ProvinceSelected"
58
-                v-model="selectedProvince"
21
+          <div class="col-md-12 mb-2">
22
+            <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
23
+              <li class="nav-item">
24
+                <a
25
+                  class="nav-link active"
26
+                  id="pills-TimeShare-tab"
27
+                  data-toggle="pill"
28
+                  href="#pills-TimeShare"
29
+                  role="tab"
30
+                  aria-controls="pills-TimeShare"
31
+                  aria-selected="true"
32
+                  v-on:click="updateType('Timeshare')"
33
+                >Timeshare</a>
34
+              </li>
35
+              <li class="nav-item">
36
+                <a
37
+                  class="nav-link"
38
+                  id="pills-Residential-tab"
39
+                  data-toggle="pill"
40
+                  href="#pills-Residential"
41
+                  role="tab"
42
+                  aria-controls="pills-Residential"
43
+                  aria-selected="false"
44
+                  v-on:click="updateType('Residential')"
45
+                >Residential</a>
46
+              </li>
47
+              <li class="nav-item">
48
+                <a
49
+                  class="nav-link active"
50
+                  id="pills-Commercial-tab"
51
+                  data-toggle="pill"
52
+                  href="#pills-Commercial"
53
+                  role="tab"
54
+                  aria-controls="pills-Commercial"
55
+                  aria-selected="false"
56
+                  v-on:click="updateType('Commercial')"
57
+                >Commercial</a>
58
+              </li>
59
+            </ul>
60
+            <div class="tab-content" id="pills-tabContent">
61
+              <div
62
+                class="tab-pane fade show active"
63
+                id="pills-TimeShare"
64
+                role="tabpanel"
65
+                aria-labelledby="pills-TimeShare-tab"
59
               >
66
               >
60
-                <option>All</option>
61
-                <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
62
-              </select>
63
-            </div>
64
-          </div>
65
-          <div class="col-md-6 mb-2">
66
-            <div class="form-group">
67
-              <label for="city">City</label>
68
-              <select
69
-                class="form-control form-control-lg form-control-a"
70
-                id="cityselector"
71
-                @change="CitySelected"
72
-                v-model="selectedCity"
67
+                <i>TimeShare search</i>
68
+              </div>
69
+              <div
70
+                class="tab-Residential fade"
71
+                id="pills-Residential"
72
+                role="tabpanel"
73
+                aria-labelledby="pills-Residential-tab"
73
               >
74
               >
74
-                <option>All</option>
75
-                <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
76
-              </select>
77
-            </div>
78
-          </div>
79
-          <div class="col-md-6 mb-2">
80
-            <div class="form-group">
81
-              <label for="city">Suburb</label>
82
-              <select
83
-                class="form-control form-control-lg form-control-a"
84
-                id="suburbselector"
85
-                v-model="selectedSuburb"
75
+                <propertySearch
76
+                  @TypeSelectedUpdated="TypeSelectedUpdated"
77
+                  @ProvinceSelectedUpdated="ProvinceSelectedUpdated"
78
+                  @CitySelectedUpdated="CitySelectedUpdated"
79
+                  @SuburbSelectedUpdated="SuburbSelectedUpdated"
80
+                />
81
+              </div>
82
+              <div
83
+                class="tab-pane fade"
84
+                id="pills-Commercial"
85
+                role="tabpanel"
86
+                aria-labelledby="pills-Commercial-tab"
86
               >
87
               >
87
-                <option>All</option>
88
-                <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
89
-              </select>
88
+                <propertySearch />
89
+              </div>
90
             </div>
90
             </div>
91
           </div>
91
           </div>
92
-
93
           <div class="col-md-12">
92
           <div class="col-md-12">
94
-            <!-- <button type="submit" class="btn btn-b">Search</button> -->
95
-            <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link>
93
+            <button type="submit" class="btn btn-b" @click="Search">Search</button>
94
+            <!-- <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link> -->
96
           </div>
95
           </div>
97
         </div>
96
         </div>
98
       </form>
97
       </form>
99
     </div>
98
     </div>
100
   </div>
99
   </div>
101
 </template>
100
 </template>
101
+
102
 <script>
102
 <script>
103
-import { mapState, mapActions } from 'vuex';
103
+import propertySearch from '../property/propertySearchFields.vue';
104
 
104
 
105
 export default {
105
 export default {
106
+  components: {
107
+    propertySearch,
108
+  },
106
   data() {
109
   data() {
107
     return {
110
     return {
111
+      selectedPropertyType: 'timeshare',
112
+      selectedType: '',
108
       selectedProvince: '',
113
       selectedProvince: '',
109
       selectedCity: '',
114
       selectedCity: '',
110
       selectedSuburb: '',
115
       selectedSuburb: '',
111
     };
116
     };
112
   },
117
   },
113
-  mounted() {
114
-    this.getProvince();
115
-  },
116
-  computed: {
117
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
118
-  },
119
   methods: {
118
   methods: {
120
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
121
-    ProvinceSelected(item) {
122
-      if (item.target.value !== 'All') {
123
-        this.getCities(Object.assign({}, this.selectedProvince));
124
-      }
119
+    updateType(item) {
120
+      this.selectedPropertyType = item;
121
+    },
122
+    TypeSelectedUpdated(item) {
123
+      this.selectedType = item;
124
+    },
125
+    ProvinceSelectedUpdated(item) {
126
+      this.selectedProvince = item;
127
+    },
128
+    CitySelectedUpdated(item) {
129
+      this.selectedCity = item;
130
+    },
131
+    SuburbSelectedUpdated(item) {
132
+      this.selectedSuburb = item;
125
     },
133
     },
126
-    CitySelected(item) {
127
-      if (item.target.value !== 'All') {
128
-        this.getSuburbs(
129
-          Object.assign(
130
-            {},
131
-            { province: this.selectedProvince, city: this.city },
132
-          ),
133
-        );
134
-      }
134
+    Search() {
135
+      // if (
136
+      //   this.selectedPropertyType === 'residential'
137
+      //   || this.selectedPropertyType === 'commerial'
138
+      // ) {
139
+      this.$router.push({
140
+        path: '/property/search',
141
+        query: {
142
+          type: this.selectedType,
143
+          propertyType: this.selectedPropertyType,
144
+          province: this.selectedProvince,
145
+          city: this.selectedCity,
146
+          suburb: this.selectedSuburb,
147
+        },
148
+      });
149
+      // }
135
     },
150
     },
136
   },
151
   },
137
 };
152
 };

+ 2
- 0
src/store/index.js Parādīt failu

8
 import TimeshareBuyModule from './modules/timeshare/buyPage';
8
 import TimeshareBuyModule from './modules/timeshare/buyPage';
9
 import SearchTabModule from './modules/searchTab';
9
 import SearchTabModule from './modules/searchTab';
10
 import ResortModule from './modules/timeshare/resort';
10
 import ResortModule from './modules/timeshare/resort';
11
+import PropertyModule from './modules/property/property';
11
 
12
 
12
 Vue.use(Vuex);
13
 Vue.use(Vuex);
13
 /* eslint no-param-reassign: ["error", { "props": false }] */
14
 /* eslint no-param-reassign: ["error", { "props": false }] */
20
     timeshareBuy: TimeshareBuyModule,
21
     timeshareBuy: TimeshareBuyModule,
21
     searchTab: SearchTabModule,
22
     searchTab: SearchTabModule,
22
     resort: ResortModule,
23
     resort: ResortModule,
24
+    property: PropertyModule,
23
   },
25
   },
24
 });
26
 });

+ 32
- 0
src/store/modules/property/property.js Parādīt failu

1
+import axios from 'axios';
2
+
3
+export default {
4
+  namespaced: true,
5
+  state: {
6
+    property: null,
7
+    propertyImages: [],
8
+  },
9
+  mutations: {
10
+    setProperty(state, property) {
11
+      state.property = property;
12
+    },
13
+    setPropertyImages(state, images) {
14
+      state.propertyImages = images;
15
+    },
16
+  },
17
+  getters: {},
18
+  actions: {
19
+    getProperty({ commit }, item) {
20
+      axios
21
+        .get(`http://localhost:57260/Property/Property/${item.id}`)
22
+        .then(result => commit('setProperty', result.data))
23
+        .catch(console.error);
24
+    },
25
+    getPropertyImages({ commit }, item) {
26
+      axios
27
+        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${item.id}`)
28
+        .then(result => commit('setPropertyImages', result.data))
29
+        .catch(console.error);
30
+    },
31
+  },
32
+};

+ 7
- 14
src/store/modules/searchTab.js Parādīt failu

20
   },
20
   },
21
   getters: {},
21
   getters: {},
22
   actions: {
22
   actions: {
23
-    getProvince({
24
-      commit,
25
-    }) {
26
-      axios.get('http://localhost:57260/region/province')
23
+    getProvince({ commit }) {
24
+      axios
25
+        .get('http://localhost:57260/region/province')
27
         .then(result => commit('setProvince', result.data))
26
         .then(result => commit('setProvince', result.data))
28
         .catch(console.error);
27
         .catch(console.error);
29
     },
28
     },
30
-    getCities({
31
-      commit,
32
-    }, province) {
29
+    getCities({ commit }, item) {
33
       axios
30
       axios
34
-        .get(`http://localhost:57260/region/city/getby/${province}`)
31
+        .get(`http://localhost:57260/region/city/getby/${item.province}`)
35
         .then(result => commit('setCities', result.data));
32
         .then(result => commit('setCities', result.data));
36
     },
33
     },
37
-    getSuburbs({
38
-      commit,
39
-    }, item) {
34
+    getSuburbs({ commit }, item) {
40
       axios
35
       axios
41
-        .get(
42
-          `http://localhost:57260/region/Suburb/${item.province}/${item.city}`,
43
-        )
36
+        .get(`http://localhost:57260/region/Suburb/${item.province}/${item.city}`)
44
         .then(result => commit('setSuburbs', result.data));
37
         .then(result => commit('setSuburbs', result.data));
45
     },
38
     },
46
   },
39
   },

Notiek ielāde…
Atcelt
Saglabāt