-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlocalSide.js
520 lines (464 loc) · 34.4 KB
/
localSide.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
var propertyData = {
"property": [
{
"id": "prop1",
"type": "House",
"title": "Woronzow Road, St Johns Wood, London, NW8",
"bedrooms": 5,
"postcode": "NW8",
"price": 17000000,
"tenure": "Freehold",
"shortDescription": "This 1860s villa in St John's Wood, London has a large entertaining space, principal suite with en suite bathroom, and four additional bedrooms. It also has a secluded garden with swimming pool and pool house, off-street parking, and the potential for extension. Located near St John's Wood High Street and underground station",
"description": "A lateral stucco detached villa built circa 1860 (not listed), set behind a walled and gated entrance, with a secluded 113 ft rear garden, off street parking quietly located on the East side of St John's Wood adjacent to Norfolk Road. This low built house, laid out mainly across two floors, is not listed and provides an opportunity to extend (subject to appropriate planning consents).\n" + "\n" +
"The house extends to approximately 4805 sq ft featuring a large entertaining space with a drawing room, second reception room, dining room and kitchen/breakfast room. The ground floor also provides a guest cloakroom/WC, storage and boot room/utility.\n" + "\n" +
"The principal suite is located on the first floor with a dressing room, en suite bathroom and access to a roof terrace overlooking the gardens (also with the opportunity to extend subject to the appropriate planning consents). There are four further bedrooms and three bath/shower rooms (two en suite).\n" + "\n" +
"This private mature rear garden features a swimming pool with pool house, plant and changing rooms.\n" + "\n" +
"Woronzow Road is located on the East side of St. John's Wood. St John's Wood High Street has a distinctly English village feel yet enjoys a cosmopolitan population and mix of restaurants and shops. St John's Wood underground station (Jubilee Line) is just two stops from Bond Street and in the heart of the West End.",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2481.671301010961!2d-0.17272864901373647!3d51.53758841621707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761a95e6244d51%3A0x593358d2097995fe!2sWoronzow%20Rd%2C%20London%2C%20UK!5e0!3m2!1sen!2slk!4v1673125023518!5m2!1sen!2slk",
"picture1": "./images/prop1/prop1Img1.jpeg",
"picture2": "./images/prop1/prop1Img2.jpeg",
"picture3": "./images/prop1/prop1Img3.jpeg",
"picture4": "./images/prop1/prop1Img4.jpeg",
"picture5": "./images/prop1/prop1Img5.jpeg",
"picture6": "./images/prop1/prop1Img6.jpeg",
"picture7": "./images/prop1/prop1Img7.jpeg",
"picture8": "./images/prop1/prop1Img8.jpeg",
"floorPlan": "./images/prop1/prop1FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/85857954#/?channel=RES_BUY",
"added": {
"month": 9,
"day": 14,
"year": 2021
}
},
{
"id": "prop2",
"type": "House",
"title": "Hamilton Terrace, London, NW1",
"bedrooms": 10,
"postcode": "NW1",
"price": 15000000,
"tenure": "Leasehold",
"shortDescription" : "Substantial 1830s detached house in affluent St. John's Wood, with planning permission for 12,500 sq ft single family residence with extensive leisure and pool. Close to transport, near St. John's Wood and Maida Vale Underground Stations and easy access to amenities and prime locations in London. Complete architect pack available on request",
"description": "A substantial double fronted detached house, built in circa 1830, currently arranged as six apartments, with off street parking and a 150 ft West facing garden. The property has planning permission to create a sensational single family residence of circa 12,500 square feet with extensive leisure and a swimming pool.\n" + "\n" +
"Complete architect pack available on request\n" + "\n" + "Hamilton Terrace is located on the West side of St. John's Wood, an area renowned as one of the most affluent parts of London, being characterised by prime residential properties, boutique shops and restaurants. Hamilton Terrace is one of the highest value roads in St. John's Wood. The house is 450 metres to the southwest of St John's Wood Underground Station, which provides Jubilee line services to the West End, Bond Street (5 minutes), London Bridge (14 minutes), and Canary Wharf (20 minutes).\n" + "\n" +
"Maida Vale Underground Station (Bakerloo line) is less than 500 metres away. The area is also served by a number of bus routes that run along Wellington Road (A41) and Maida Vale (A5). The excellent amenities of Marylebone, Mayfair and the West End are also easily accessible by road, tube or bus. All distances and times are approximate.",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.065649317944!2d-0.18326314901399873!3d51.53035571674615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761aa4097af419%3A0x34e0e0ea269ef009!2sHamilton%20Terrace%2C%20London%20NW8%2C%20UK!5e0!3m2!1sen!2slk!4v1673125126468!5m2!1sen!2slk",
"picture1": "./images/prop2/prop2Img1.jpeg",
"picture2": "./images/prop2/prop2Img2.jpeg",
"picture3": "./images/prop2/prop2Img3.jpeg",
"picture4": "./images/prop2/prop2Img4.jpeg",
"picture5": "./images/prop2/prop2Img5.jpeg",
"picture6": "./images/prop2/prop2Img6.jpeg",
"picture7": "./images/prop2/prop2Img7.jpeg",
"picture8": "./images/prop2/prop2Img8.jpeg",
"floorPlan": "./images/prop2/prop2FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/129315881#/?channel=RES_BUY",
"added": {
"month": 11,
"day": 22,
"year": 2022
}
},
{
"id": "prop3",
"type": "House",
"title": "Ingram Avenue, Hampstead Garden, London, NW1",
"bedrooms": 9,
"postcode": "NW1",
"price": 12500000,
"tenure": "Freehold",
"shortDescription":"Exceptional Grade II Listed Lutyens residence on double width plot in Turner's Wood Bird Sanctuary. Built by leading British architect Sir Edwin Lutyens and rebuilt in 2006 to modern standards while maintaining original layout. Principal rooms face extensive gardens and offer high ceilings and excellent flow for family living",
"description": "An exceptional Grade II Listed Lutyens residence (1,040 sq m/11,197 sq ft) occupying a magnificent double width plot backing directly onto unspoilt acres of Turner’s Wood Bird Sanctuary.\n" + "\n" +
"The inspiration for Fairwood House came from Sir Edwin Lanseer Lutyens, the 20th century’s leading British architect. Lutyens was commissioned to design many of the great English country houses as well as being appointed by the\n" +
"Government to design and build Viceroy House in Delhi, which has since become the residence of the president of India.\n" + "\n" +
"This imposing property, situated on a double plot of approximately 0.6 acres, faces due south to the rear and also backs directly onto Turners Wood, a 7-acre private bird sanctuary. In 2006, the property was completely rebuilt behind the original facade. In doing so, the current owners brief was to create a house fit for the twenty-first century whilst ensuring that the layout remained loyal to the original that Lutyens created.\n" + "\n" +
"All of the principal reception rooms on the ground floor are facing the extensive gardens, are interconnected and provide excellent flow and family living accommodation. The house features exceptionally high ceilings, with most of the rooms on the ground floor enjoying ceiling heights in excess of 3.3metres and some rising to well over 4 metres.\n",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.7142903330364!2d-0.1794279490123112!3d51.573471013591686!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761a7219284529%3A0x449b2b53f5c063d5!2sIngram%20Ave%2C%20London%2C%20UK!5e0!3m2!1sen!2slk!4v1673125201280!5m2!1sen!2slk",
"picture1": "./images/prop3/prop3Img1.jpeg",
"picture2": "./images/prop3/prop3Img2.jpeg",
"picture3": "./images/prop3/prop3Img3.jpeg",
"picture4": "./images/prop3/prop3Img4.jpeg",
"picture5": "./images/prop3/prop3Img5.jpeg",
"picture6": "./images/prop3/prop3Img6.jpeg",
"picture7": "./images/prop3/prop3Img7.jpeg",
"picture8": "./images/prop3/prop3Img8.jpeg",
"floorPlan": "./images/prop3/prop3FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/125652572#/?channel=RES_BUY",
"added": {
"month": 4,
"day": 3,
"year": 2022
}
},
{
"id": "prop4",
"type": "House",
"title": "North End Avenue, Hampstead, London, BR1",
"bedrooms": 6,
"postcode": "BR1",
"price": 8450000,
"tenure": "Freehold",
"shortDescription" : "A substantial semi-detached period house abutting Hampstead Heath with driveway and large landscaped gardens, gym/bedroom, 6 bedrooms and 3 bathrooms, ideal location between Hampstead Village and Golders Green with excellent shopping and transport facilities",
"description": "A substantial semi-detached period house, approached via a sweeping gated driveway, set in one of the most idyllic locations abutting Hampstead Heath and a short distance from Golders Hill Park, located between Hampstead Village and Golders Green, both of which offer excellent shopping and transport facilities.\n" + "\n" +
"On the ground floor there is an impressive entrance hall with guest cloakroom, leading through to a stunning reception hall, and a split-level dining room which opens onto a substantial kitchen/breakfast room.\n" + "\n" +
"A wonderful staircase leads up to the first floor to an elegant double aspect drawing room opening on to a light filled conservatory with direct access on to the garden and wonderful Heath views. In addition, there is a gym/bedroom, utility room and second cloakroom on this floor.\n" + "\n" +
"The second floor has a large principal bedroom suite with ensuite bathroom and two further bedrooms and a family bathroom. The top third floor has two further bedrooms and an additional bathroom.\n" + "\n" +
"The house occupies a substantial site approaching a 1/3rd of an acre (0.12 hectares) with well-established landscaped gardens and a large terrace all sited next to Hampstead Heath.\n" + "\n" +
"Externally there is a substantial triple garage along with off street parking for several vehicles.",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2480.058656336548!2d-0.18337474901253287!3d51.567158214053755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761a7a74a8351b%3A0x1059717082627f6e!2sNorth%20End%20Ave%2C%20London%2C%20UK!5e0!3m2!1sen!2slk!4v1673125253506!5m2!1sen!2slk",
"picture1": "./images/prop4/prop4Img1.jpeg",
"picture2": "./images/prop4/prop4Img2.jpeg",
"picture3": "./images/prop4/prop4Img3.jpeg",
"picture4": "./images/prop4/prop4Img4.jpeg",
"picture5": "./images/prop4/prop4Img5.jpeg",
"picture6": "./images/prop4/prop4Img6.jpeg",
"picture7": "./images/prop4/prop4Img7.jpeg",
"picture8": "./images/prop4/prop4Img8.jpeg",
"floorPlan": "./images/prop4/prop4FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/129008039#/?channel=RES_BUY",
"added": {
"month": 4,
"day": 11,
"year": 2021
}
},
{
"id": "prop5",
"type": "Apartment",
"title": "Cumberland Terrace, Regent's Park, London, NW1",
"bedrooms": 3,
"postcode": "NW1",
"price": 8250000,
"tenure": "Leasehold",
"shortDescription" : "Brand newly refurbished and interior designed lateral apartment in Regent's Park with 7 floor-to-ceiling windows, terracing, and views of the park. Features high ceilings, triple aspect, natural light, 3 bedrooms, 2 bathrooms, dressing room, underfloor heating, and private gardens. Secure development with 24-hour porterage and CCTV",
"description": "This rarely available, lateral apartment has just been brand newly refurbished and interior designed with impeccable taste, very much in line with the character of Regent’s Park.\n" + "\n" +
"Offering fantastic ceiling heights and seven, floor to ceiling windows, plus terracing across the front of the apartment all with tremendous views of the park. The property has a triple aspect and benefits from an abundance of natural light, large rooms and great volume throughout the apartment.\n" + "\n" +
"The accommodation comprises three double bedrooms and two bathrooms with an outstanding master bedroom with a large dressing room plus ensuite shower room also benefitting from air conditioning. There is a separate kitchen and breakfast room and double reception room with dining room. Further benefits include a guest WC and utility room. There is underfloor heating throughout plus a video entry system and fitted alarm.\n" + "\n" +
"Cumberland Terrace is a secure development with 24-hour uniformed porterage and CCTV. There are also private gardens to the front for the residence.\n",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.0145308096053!2d-0.1472665490139932!3d51.53129331667756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761adecf4ea011%3A0x19007ab7e143d8bd!2sCumberland%20Terrace!5e0!3m2!1sen!2slk!4v1673125313046!5m2!1sen!2slk",
"picture1": "./images/prop5/prop5Img1.jpeg",
"picture2": "./images/prop5/prop5Img2.jpeg",
"picture3": "./images/prop5/prop5Img3.jpeg",
"picture4": "./images/prop5/prop5Img4.jpeg",
"picture5": "./images/prop5/prop5Img5.jpeg",
"picture6": "./images/prop5/prop5Img6.jpeg",
"picture7": "./images/prop5/prop5Img7.jpeg",
"picture8": "./images/prop5/prop5Img8.jpeg",
"floorPlan": "./images/prop5/prop5FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/126646838#/?channel=RES_BUY",
"added": {
"month": 1,
"day": 2,
"year": 2022
}
},
{
"id": "prop6",
"type": "Apartment",
"title": "Elsworthy Road, London, BR1",
"bedrooms": 4,
"postcode": "BR1",
"price": 5750000,
"tenure": "Freehold",
"shortDescription" : "Exceptional four-bedroom duplex apartment in Arts & Crafts style building opposite Primrose Hill Park. Features air conditioning, underfloor heating, and full home automation. 3,185 sqft of living space includes a dual aspect living room, open plan kitchen, study, private gardens, and three en-suite bedrooms with private terrace for the principal bedroom",
"description": "An exceptional four bedroom duplex apartment located opposite the entrance to Primrose Hill Park, on Elsworthy Road. The property is situated within a newly constructed home built in an Arts & Crafts style. This impressive apartment features air conditioning, underfloor heating and a full home automation package.\n" + "\n" +
"The accommodation comprises 3,185 sqft (295.9 m2) of living space over the two floors. The ground floor consists of a dual aspect living room with an open plan kitchen, study, utility room and front and rear private gardens. On the lower level you have a generous principal bedroom with a dressing room, en-suite bathroom and a private terrace, along with three further en-suite double bedrooms.\n" + "\n" +
"Situated on Elsworthy Road opposite the entrance to Primrose Hill, the apartment is a short stroll away from all of the amenities of the picturesque Primrose Hill Village, famed for its iconic park and wide selection of bespoke shops, boutiques, restaurants and street cafes. Both Swiss Cottage and Chalk Farm Underground Stations (Jubilee and Northern Line) are within close proximity (0.6mile).",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2481.488232141793!2d-0.16776534901358628!3d51.54094581597148!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761a94997868ab%3A0xe7e3cf22e23c6717!2sElsworthy%20Rd%2C%20Elsworthy%20Terrace%2C%20London%20NW3%203DR%2C%20UK!5e0!3m2!1sen!2slk!4v1673125396456!5m2!1sen!2slk",
"picture1": "./images/prop6/prop6Img1.jpeg",
"picture2": "./images/prop6/prop6Img2.jpeg",
"picture3": "./images/prop6/prop6Img3.jpeg",
"picture4": "./images/prop6/prop6Img4.jpeg",
"picture5": "./images/prop6/prop6Img5.jpeg",
"picture6": "./images/prop6/prop6Img6.jpeg",
"picture7": "./images/prop6/prop6Img7.jpeg",
"picture8": "./images/prop6/prop6Img8.jpeg",
"floorPlan": "./images/prop5/prop6FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/126802958#/?channel=RES_BUY",
"added": {
"month": 10,
"day": 20,
"year": 2021
}
},
{
"id": "prop7",
"type": "Apartment",
"title": "Maresfield Gardens III, London NW3",
"bedrooms": 3,
"postcode": "NW3",
"price": 5950000,
"tenure": "Leasehold",
"shortDescription" : "Ground and lower-ground luxurious apartment with towering ceilings in a quiet residential area with private front garden and communal entrance. Features guest WC, formal reception, open-plan kitchen, dining, and living space with engineered oak flooring, underfloor heating and front garden views",
"description": "The building is approached from Maresfield Gardens and is set far back from the quiet residential street, behind a front garden of Corten-framed beds and exquisite planting. Steps ascend to the raised ground foyer of the communal entrance.\n" + "\n" +
"The apartment unfurls over the ground and lower ground floors with soaring ceilings throughout. To right of the entrance is a guest WC and to the left of the hall lies a formal reception. A pair of full-height pivot doors open within a sublime hardwood bookcase to reveal a trio of high-reaching sash windows looking onto the front gardens.\n" + "\n" +
"Engineered oak in a light, chevron pattern extends through much of the upper leel, and underfloor heating is present throughout the apartment. From the front reception, a wonderful line of sight is offered to the rear, where an open-plan kitchen, dining space and living room are arranged.",
"location": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2481.191734542099!2d-0.17977774901339888!3d51.546383115573704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761a858275344b%3A0x54f4860d588a1432!2sMaresfield%20Gardens%2C%20London%20NW3%205LA%2C%20UK!5e0!3m2!1sen!2slk!4v1673125454920!5m2!1sen!2slk",
"picture1": "./images/prop7/prop7Img1.jpeg",
"picture2": "./images/prop7/prop7Img2.jpeg",
"picture3": "./images/prop7/prop7Img3.jpeg",
"picture4": "./images/prop7/prop7Img4.jpeg",
"picture5": "./images/prop7/prop7Img5.jpeg",
"picture6": "./images/prop7/prop7Img6.jpeg",
"picture7": "./images/prop7/prop7Img7.jpeg",
"picture8": "./images/prop7/prop7Img8.jpeg",
"floorPlan": "./images/prop7/prop7FloorPlan.jpeg",
"url": "https://www.rightmove.co.uk/properties/127135595#/?channel=RES_BUY",
"added": {
"month": 9,
"day": 2,
"year": 2022
}
}
]
};
// var propertyData;
// fetch('properties.json')
// .then(response => response.json())
// .then(data => {
// propertyData = data; //parse the json data into the variable
// });
$(document).ready(function(){
let filteredList; //Properties those fulfill search criteria stores here
let favouriteList; //favorites will store here
if(localStorage.getItem('favouriteList')){
favouriteList = JSON.parse(localStorage.getItem('favouriteList')); //Get back from local storage
} else{
favouriteList = []; //empty array will add if 'favouriteList' isn't in the localstorage,
}
/* <<<--------------------------- Search Page --------------------------->>> */
$( "#propertyType" ).selectmenu(); //jquery UI
$( "#dateAdded" ).selectmenu();
$( "#accordion" ).accordion();
$("#slider").slider({ //jquery ui slider for getting price range
range: true,
min: 0,
max: 25000000,
values: [0, 25000000],
slide: function(event, ui) {
$("#range").html("£" + ui.values[0].toLocaleString() + " - £" + ui.values[1].toLocaleString()); //show slider values in html
}
});
$("#range").html($("#slider").slider("values", 0) + " - " + $("#slider").slider("values", 1));
$( "#minBedrooms" ).spinner({ //jquery spinner for bedroom range
min: 1,
max: 15,
step: 1,
});
$( "#maxBedrooms" ).spinner({
min: 1,
max: 15,
step: 1,
});
/* ---------- Submit Button function ---------- */
$('#submitBtn').click(function (){
filteredList = [];
const values = $("#slider").slider("values");
const type = $('#propertyType').val();
const postcode = $('#postCode').val();
const minBedrooms = $('#minBedrooms').val();
const maxBedrooms = $('#maxBedrooms').val();
const minPrice = values[0]; //get the min price from slider
const maxPrice = values[1];
const freehold = $('#Freehold-checkbox').is(':checked'); // check if the freehold checkbox is checked
const leasehold = $('#Leasehold-checkbox').is(':checked');
let tenureFH;
let tenureLH;
if (freehold === true){tenureFH = "Freehold"}
if (leasehold === true){tenureLH = "Leasehold"}
const dateAdded = $('#dateAdded').val();
$.each(propertyData.property, function (index, property) { //iterate through the array and find matching properties
if ((type === 'Any' || property.type === type) &&
(postcode === 'Any' || postcode === '' || property.postcode === postcode) &&
(minBedrooms === '' || minBedrooms === 'No Min' || property.bedrooms >= minBedrooms) &&
(maxBedrooms === '' || maxBedrooms === 'No Max' || property.bedrooms <= maxBedrooms) &&
(minPrice === '' || property.price >= minPrice) &&
(maxPrice === '' || property.price <= maxPrice) &&
(tenureLH === undefined && tenureFH === undefined || tenureLH === property.tenure || tenureFH === property.tenure) &&
(dateAdded === 'Any' || dateAdded === 'This Year' && property.added.year === 2022 ||
dateAdded === 'This Month' && property.added.month === 1 ||
dateAdded === 'Last 6 Months' && property.added.year === 2022 && (property.added.month >= 6 && property.added.month <= 12))) {
filteredList.push(property); // If the element meets the search criteria, add it to the filteredList array
}
});
localStorage.setItem('filteredList', JSON.stringify(filteredList)); //storing the stringifies objects into the localstorage
window.open('result.html');
});
$.each(favouriteList, function (index, property) {
createPropertyAdd(index,property,'#view-favorites-area');
})
/* <<<--------------------------- Result Page --------------------------->>> */
filteredList = JSON.parse(localStorage.getItem('filteredList')); //read back the object from localstorage
/* ---------- Create ads for every matching properties ---------- */
$.each(filteredList, function (index, property)
{createPropertyAdd(index, property, '#filtered-properties-container')}
);
function createPropertyAdd (index, property, addingArea){
const formattedPrice = property.price.toLocaleString();
// Create a new property ad element using template literals and the current property object
const $propertyAd = $(`
<div class="propAdBox" style="position: relative">
<div style="width: 320px;">
<img class="propMainImg" src="${property.picture1}" alt="${property.type}"/>
</div>
<div style="margin: 10px;">
<h2 class="property-title">${property.title}</h2>
<h5>${property.type} in ${property.postcode}</h5>
<h4>${property.tenure}</h4>
<h4>${property.bedrooms} <i class="fa-solid fa-bed"></i></h4>
<p class="p-details">${property.shortDescription}<span class="seeMore" style="color: #0081ff; font-size: 16px"> see more...</span></p>
<div class="priceNFavDelBtn">
<br><h3 class="fPrice">£ ${formattedPrice}</h3><br>
<button class="remove-button"><i class="fa-regular fa-trash-can fa-xl"></i></button>
<button class="favourite-button">Add to Favourites</button> <br>
</div>
</div>
</div>
`);
$(addingArea).append($propertyAd); // Append the property ad element to the page
/* ---------- Onclick see more, save the selected property to the localstorage ---------- */
$propertyAd.find('.seeMore,.p-details').click(function () {
localStorage.setItem('property', JSON.stringify(property)); //storing the selected property objects into the localstorage
window.location.href = 'property.html'
});
}
/* ---------- Drag the title to add to the favourites ---------- */
$('.property-title').draggable({
revert: true // return to original position after dropped
});
/* ---------- favourite area drop to add the dragged property ---------- */
$("#favourite-items-container").droppable({
drop: function(event, ui) {
const propertyTitle = ui.draggable.text(); //When a draggable element is dropped, get the text of the dropped element
addPropertyToFavourites(propertyTitle);
}
});
/* ---------- Add to favourites ---------- */
$('.favourite-button').click(function() {
const propertyTitle = $(this).parent().parent().find('.property-title').text(); // Get parent element of the clicked element
addPropertyToFavourites(propertyTitle);
});
function addPropertyToFavourites(propertyTitle) {
const favProperty = propertyData.property.find(element => element.title === propertyTitle); // check if the property is not already in the favorites
if (!favouriteList.includes(favProperty)) {
favouriteList.push(favProperty);
addPropertyToList(favProperty);
}
}
function addPropertyToList(favProperty) {
// Create a new element to be appended to the element with id "droppedList"
const formattedPrice = favProperty.price.toLocaleString();
const $favAdded = $(`
<div class="favItemBox">
<div>
<h5 class="fav-added-title">${favProperty.title}</h5>
<h4>£ ${formattedPrice}</h4>
</div>
<i class="fas fa-times delete-icon fa-xl"></i>
</div>
`);
$('#favourite-items').append($favAdded); // Append the newly created element to favourite-items
$('#favorites-list').append($favAdded);
}
/* ---------- Remove from favourites by cross delete icon ---------- */
$('#favourite-items').on('click', '.delete-icon', function() {
const propertyTitle = $(this).parent().find('.fav-added-title').text(); // Call the removePropertyFromFavourites function and pass it the propertyTitle and the clicked element
removePropertyFromFavourites(propertyTitle, this);
});
/* ---------- Remove from favourites by delete icon in main ad box ---------- */
$('#filtered-properties-container').on('click', '.remove-button', function() {
const propertyTitle = $(this).parent().parent().find('.property-title').text(); // Call the removePropertyFromFavourites function and pass it the propertyTitle and the clicked element
removePropertyFromFavourites(propertyTitle, '#favourite-items > .delete-icon');
});
function removePropertyFromFavourites(propertyTitle, clickedElement) {
const index = favouriteList.findIndex(element => element.title === propertyTitle); // check if the property is already there
if (index !== -1) {
favouriteList.splice(index, 1);
$(clickedElement).parent().remove(); //remove the element from UI
localStorage.setItem("favouriteList", JSON.stringify(favouriteList)); //update localstorage after deletion
window.location.reload(); /// reload the page for update the favourite ad column
}
}
/* ---------- Clear favourite list ---------- */
$('#clear-button').click(function() {
clearFavourites();
});
function clearFavourites() {
favouriteList.splice(0, favouriteList.length); // Clear the favouriteList array
$('#favourite-items').empty(); // Remove all elements
}
/* ---------- Drag favourite added content ---------- */
$('#favourite-items').on('click', '.favItemBox', function() {
$(this).draggable({ // Make the clicked element draggable
revert: true // When the draggable element is dropped, it will return to its original position
});
});
$('#filtered-properties-container').droppable({
drop: function(event, ui) {
const propertyTitle = ui.draggable.find('h5').text();
const clickedElement = ui.helper.clone().replaceAll(ui.draggable);
removePropertyFromFavourites(propertyTitle, clickedElement);
}
});
//<<<----------- Save favourite to the properties and read it back ----------->>>
favouriteList = JSON.parse(localStorage.getItem("favouriteList")) || []; // Retrieve the favouriteList from local storage
favouriteList.forEach(addPropertyToList); //add each favourite list property again
window.addEventListener("beforeunload", function(event) {
localStorage.setItem("favouriteList", JSON.stringify(favouriteList)); // Save the favouriteList to local storage
});
/* <<<--------------------------- Favourite Page --------------------------->>> */
$.each(favouriteList, function (index, property)
{createPropertyAdd(index, property, '#fav-page-content')}
);
/* <<<--------------------------- Property Page --------------------------->>> */
$("#propInfoTabs").tabs(); //jquery tab UI
const selectedProperty = JSON.parse(localStorage.getItem('property')); //get the see more... selected property
$('.add-to-favourite').click(function(){
addPropertyToFavourites(selectedProperty.title);
});
// add selected object details into the main property page
$('.propImg1').append(`<img class="property-image" src="${selectedProperty.picture1}" alt="">`);
$('.propImg2').append(`<img class="property-image" src="${selectedProperty.picture2}" alt="">`);
$('.propImg3').append(`<img class="property-image" src="${selectedProperty.picture3}" alt="">`);
$('.propImg4').append(`<img class="property-image" src="${selectedProperty.picture4}" alt="">`);
$('.propImg5').append(`<img class="property-image" src="${selectedProperty.picture5}" alt="">`);
$('.propImg6').append(`<img class="property-image" src="${selectedProperty.picture6}" alt="">`);
$('.propPic1').append(`<img class="propImageSelector" src="${selectedProperty.picture1}" onclick="currentSlide(1)" alt="">`);
$('.propPic2').append(`<img class="propImageSelector" src="${selectedProperty.picture2}" onclick="currentSlide(2)" alt="">`);
$('.propPic3').append(`<img class="propImageSelector" src="${selectedProperty.picture3}" onclick="currentSlide(3)" alt="">`);
$('.propPic4').append(`<img class="propImageSelector" src="${selectedProperty.picture4}" onclick="currentSlide(4)" alt="">`);
$('.propPic5').append(`<img class="propImageSelector" src="${selectedProperty.picture5}" onclick="currentSlide(5)" alt="">`);
$('.propPic6').append(`<img class="propImageSelector" src="${selectedProperty.picture6}" onclick="currentSlide(6)" alt="">`);
const formattedPrice = selectedProperty.price.toLocaleString(); //make price readable (1000000 => 1,000,000)
$(`.title-fullPage`).append(selectedProperty.title);
$(`.postcode-fullPage`).append(selectedProperty.postcode);
$(`.date-fullPage`).append(selectedProperty.added.year + "/" + selectedProperty.added.month + "/" + selectedProperty.added.day);
$(`.type-fullPage`).append(selectedProperty.type);
$(`.bedrooms-fullPage`).append(selectedProperty.bedrooms);
$(`.tenure-fullPage`).append(selectedProperty.tenure);
$(`.price-fullPage`).append(formattedPrice);
$(`.propDetails`).append(selectedProperty.description);
$(`.propFloorPlan`).append(`<img src="${selectedProperty.floorPlan}" alt="" style="width: 100%">`);
$(`.propLocation`).append(`<iframe src="${selectedProperty.location}"></iframe>`);
})
// <-------- Image gallery slideshow function ------->
let slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let slides = $(".propLargeImage");
let dots = $(".propImageSelector");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
slides.css("display", "none");
dots.removeClass("active");
$(slides[slideIndex - 1]).css("display", "block");
$(dots[slideIndex - 1]).addClass("active");
}