API tools faq
paste
Guest User

Untitled

a guest
Jun 16th, 2019
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 112.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="x-ua-compatible" content="ie=edge" />
  6. <title th:with="appName=#{home.title},pageName=#{link.post}"
  7. th:text="${pageName + ' | ' + appName}">SpeedHome</title>
  8. <meta name="description" content="" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1" />
  10. <!--
  11. Icons for different devices you can generate with - http://realfavicongenerator.net
  12. Place generated files in the dev/static/favicons directory.
  13. -->
  14. <link rel="stylesheet" href="/assets/fonts/icomoon/style.css" />
  15. <link
  16. rel="stylesheet"
  17. href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
  18. integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
  19. crossorigin="anonymous"
  20. />
  21. <link
  22. rel="stylesheet"
  23. href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
  24. />
  25. <link
  26. rel="stylesheet"
  27. href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css"
  28. />
  29. <link
  30. rel="stylesheet"
  31. href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css"
  32. />
  33. <link rel="stylesheet" href="/assets/css/wizard/smart_wizard.min.css" />
  34. <link
  35. rel="stylesheet"
  36. href="/assets/css/wizard/smart_wizard_theme_arrows.min.css"
  37. />
  38. <link
  39. rel="stylesheet"
  40. href="/assets/css/wizard/smart_wizard_theme_circles.min.css"
  41. />
  42. <link
  43. rel="stylesheet"
  44. href="/assets/css/wizard/smart_wizard_theme_dots.min.css"
  45. />
  46. <link rel="stylesheet" href="/assets/css/bundle.css" />
  47. <link rel="stylesheet" href="/assets/css/pikaday.css" />
  48. <th:block th:replace="common/links" />
  49. </head>
  50.  
  51. <body>
  52. <div th:replace="common/header :: header"></div>
  53. <main id="main" class="inner-pages">
  54. <div class="breadcrumb-wrapper">
  55. <div class="container">
  56. <canvas id="c"/>
  57. <ul class="breadcrumb">
  58. <li>
  59. <a
  60. th:href="${@urlHelper.format(language, '/')}"
  61. th:text="#{link.home}"
  62. >Home</a
  63. >
  64. </li>
  65. <li>
  66. <a
  67. th:href="${@urlHelper.format(language, '/dashboard')}"
  68. th:text="#{link.dashboard}"
  69. ></a>
  70. </li>
  71. <li>
  72. <a
  73. th:href="${@urlHelper.format(language, '/dashboard/listings')}"
  74. th:text="#{dashboard.my_listings}"
  75. ></a>
  76. </li>
  77. <li>
  78. <strong th:text="#{property.edit_title}">Edit Listing</strong>
  79. </li>
  80. </ul>
  81. </div>
  82. </div>
  83. <div class="container create-listing">
  84.  
  85. <div id="smartwizard">
  86. <ul class="progressbar">
  87. <li>
  88. <a href="#step-1" aria-disabled="true"
  89. ><span class="num">1</span>
  90. <th:block th:text="#{property.info_text}"
  91. >Property Info</th:block
  92. >
  93. </a>
  94. </li>
  95. <li>
  96. <a href="#step-2" aria-disabled="true"
  97. ><span class="num">2</span>
  98. <th:block th:text="#{property.upload_photo}"
  99. >Upload Photo</th:block
  100. >
  101. </a>
  102. </li>
  103. <li>
  104. <a href="#step-3" aria-disabled="true"
  105. ><span class="num">3</span>
  106. <th:block th:text="#{property.extra_info}"
  107. >Extra Info</th:block
  108. >
  109. </a>
  110. </li>
  111. </ul>
  112.  
  113. <div>
  114. <input type="hidden" id="propId" th:value="${property.id}">
  115. <input type="hidden" id="propType" th:value="${property.type}">
  116. <input type="hidden" id="propFurnishType" th:value="${property.furnishType}">
  117. <input type="hidden" id="propFurnishes" th:value="${property.furnishes}">
  118. <input type="hidden" id="propFacilities" th:value="${property.facilities}">
  119. <input type="hidden" id="propStorey" th:value="${property.storeys}">
  120. <input type="hidden" id="coverPhotoId" value="0">
  121.  
  122. <div id="step-1" class="">
  123. <!-- <h2>Step 1 Content</h2> -->
  124. <div id="form-step-0" role="form" data-toggle="validator">
  125. <div class="check-wrap">
  126. <label class="checkbox form-group checkbox-sm">
  127. <input id="owner" type="checkbox" required/>
  128. <span class="checkbox__icon"></span>
  129. <th:block th:text="#{property.owner_check}"
  130. >I am the owner of this unit</th:block
  131. >
  132. </label>
  133. </div>
  134. <div class="form-group input-wrap select-wrap select-wrap-single">
  135. <label for="type" th:text="#{filter.housing_type}"
  136. >Housing Type</label
  137. >
  138. <div class=" status-housing-type">
  139. <select
  140. name="type"
  141. id="type"
  142. class="select-sm housingType"
  143. placeholder="Housing Type"
  144. required
  145. >
  146. <option
  147. id="typeHighrise"
  148. value="HIGHRISE"
  149. th:text="#{property_sqft.high_rise}"
  150. >Highrise</option>
  151. <option
  152. id="typeLanded"
  153. value="LANDED"
  154. th:text="#{property_sqft.landed}"
  155. >Landed</option
  156. >
  157.  
  158. <option
  159. id="typeRoom"
  160. value="ROOM"
  161. th:text="#{property_sqft.room}"
  162. >Room</option
  163. >
  164. </select>
  165. </div>
  166. </div>
  167. <div class="row gutter-big">
  168. <div class="col-xs-12 col-md-6">
  169. <div class="form-group input-wrap prop-name-wrap">
  170. <label for="propName" th:text="#{property.name_text}"
  171. >Property Name</label
  172. >
  173. <div class="status status-property-name">
  174. <input
  175. id="propName"
  176. name="propName"
  177. type="text"
  178. placeholder="Property Name"
  179. class="form-control"
  180. required
  181. th:value="${property.name}"
  182. />
  183. <span class="error" th:text="#{error_message.property_name_required}">Property name must be required</span>
  184. <span class="error-v2" th:text="#{error_message.property_name_required_cond}">Property must be 4 character long and less than 100.</span>
  185. </div>
  186. </div>
  187. </div>
  188.  
  189. <div id="blockFloor" class="col-xs-12 col-md-6">
  190. <div class="input-wrap form-group">
  191. <label for="storeys" th:text="#{property.floor_level}"
  192. >Floor level / Storey no.</label
  193. >
  194. <div class="status status-foor-level">
  195. <input
  196. type="number"
  197. id="floor"
  198. class="form-control"
  199. required
  200. th:value="${property.level}"
  201. />
  202. <span class="error" th:text="#{error_message.floor_required}">Floor level must be required</span>
  203. <span class="error-v2" th:text="#{error_message.floor_required_cond}">Floor level should be less than 20 character long.</span>
  204. </div>
  205. </div>
  206. </div>
  207. <div id="blockStorey" class="col-xs-12 col-md-6">
  208. <div class="input-wrap select-wrap">
  209. <label for="storeys" th:text="#{property.floor_level}">Floor level / Storey no.</label>
  210. <div class=" status-storey-no">
  211. <select
  212. name="storeys"
  213. id="storeys"
  214. class="custom-select select-sm sources"
  215. placeholder="Single"
  216. required>
  217. <option value="1" th:selected="${property.storeys}==1">Single</option>
  218. <option value="2" th:selected="${property.storeys}==2">Double</option>
  219. <option value="3" th:selected="${property.storeys}==3">More than 2 storeys</option>
  220. </select>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="col-xs-12 col-md-6">
  225. <div class="input-wrap form-group">
  226. <label for="address" th:text="#{property.address_text}"
  227. >Address</label
  228. >
  229. <div class="status status-property-address">
  230. <input
  231. name="address"
  232. id="address"
  233. type="text"
  234. placeholder="Property Address"
  235. class="form-control"
  236. required
  237. th:value="${property.address}"
  238. />
  239. <span class="error" th:text="#{error_message.address_required}">Property address must be required</span>
  240. <span class="error-v2" th:text="#{error_message.address_required_cond}">Property address must be required</span>
  241. </div>
  242. </div>
  243. </div>
  244. <div id="blockBedroom" class="col-xs-12 col-md-6">
  245. <div class="input-wrap form-group select-wrap">
  246. <label for="bedroom" th:text="#{property.bedroom_text}"
  247. >Bedroom</label
  248. >
  249. <div class=" status-bedroom">
  250. <select
  251. name="bedroom"
  252. id="bedroom"
  253. class="custom-select select-sm sources"
  254. th:placeholder= "${property.bedroom}">
  255. <option value="1">1</option>
  256. <option value="2">2</option>
  257. <option value="3">3</option>
  258. <option value="4">4</option>
  259. </select>
  260. </div>
  261. </div>
  262. </div>
  263. <div id="blockRoomPax" class="col-xs-12 col-md-6">
  264. <div class="input-wrap form-group select-wrap">
  265. <label for="bedroom" th:text="#{property.room.pax}">Max pax allowed to stay</label>
  266. <div class=" status-pax">
  267. <select
  268. name="bedroom"
  269. id="roomPax"
  270. class="custom-select select-sm sources"
  271. >
  272. <option value="1">1</option>
  273. <option value="2">2</option>
  274. <option value="3">3</option>
  275. <option value="4">4</option>
  276. <option value="5">5</option>
  277. </select>
  278. </div>
  279. </div>
  280. </div>
  281. <div class="col-xs-12 col-md-6">
  282. <div class="input-wrap form-group">
  283. <label
  284. for="postcode"
  285. th:text="#{property.post_code_text}"
  286. >Post Code</label
  287. >
  288. <div class="status status-post-code">
  289. <input
  290. name="postcode"
  291. id="postcode"
  292. type="text"
  293. class="form-control"
  294. required
  295. th:value="${property.postcode}"
  296. />
  297. <span class="error" th:text="#{error_message.post_required}">Post code must be required</span>
  298. <span class="error-v2" th:text="#{error_message.post_required_cond}">Post code must be required</span>
  299. <span class="error-v3" th:text="#{error_message.post_required_cond1}">Post code need to be numbers only.</span>
  300. </div>
  301. </div>
  302. </div>
  303. <div id="blockBathroom" class="col-xs-12 col-md-6">
  304. <div class="input-wrap form-group select-wrap">
  305. <label
  306. for="bathroom"
  307. th:text="#{property.bathroom_text}"
  308. >Bathroom</label
  309. >
  310. <div class=" status-bathroom">
  311. <select
  312. name="bathroom"
  313. id="bathroom"
  314. class="custom-select select-sm sources"
  315. required
  316. >
  317. <option value="1">1</option>
  318. <option value="2">2</option>
  319. <option value="3">3</option>
  320. <option value="4">4</option>
  321. </select>
  322. </div>
  323. </div>
  324. </div>
  325. <div id="blockRoomBathroom" class="col-xs-12 col-md-6">
  326. <div class="input-wrap form-group select-wrap">
  327. <label
  328. for="bathroom"
  329. th:text="#{property.bathroom_text}">Bathroom</label>
  330. <div class=" status-room-bathroom">
  331. <select
  332. name="bathroom"
  333. id="roomBathroom"
  334. class="custom-select select-sm sources"
  335. required>
  336. <option value="PRIVATE" th:text="#{property_room.private}">Private</option>
  337. <option value="SHARED" th:text="#{property_room.shared}">Shared</option>
  338. </select>
  339. </div>
  340. </div>
  341. </div>
  342. <div id="blockSqft" class="col-xs-12 col-md-6">
  343. <div class="input-wrap form-group">
  344. <label for="sqft" th:text="#{property.sqft_text}"
  345. >Build-up Size (sqft)*</label
  346. >
  347. <div class="status status-sqft">
  348. <input
  349. name="sqft"
  350. id="sqft"
  351. type="text"
  352. class="form-control"
  353. required
  354. th:value="${property.sqft}"
  355. />
  356. <span class="error" th:text="#{error_message.sqft_required}">Property sqft must be required</span>
  357. <span class="error-v2" th:text="#{error_message.sqft_required_cond}">Property sqft must be greater</span>
  358. <span class="error-v3" th:text="#{error_message.sqft_required_cond1}">Please insert a valid value for sqft.</span>
  359. </div>
  360. <small class="sm-note" th:text="#{property.area_note}"
  361. >*
  362. <th:block th:text="#{property.area_note}"
  363. >this refers to the total area occupied by your
  364. property/house</th:block
  365. ></small
  366. >
  367. </div>
  368. </div>
  369. <div id="blockRoomSize" class="col-xs-12 col-md-6">
  370. <div class="input-wrap form-group">
  371. <label for="sqft" th:text="#{property.room.sqft_text}"
  372. >Room Size</label
  373. >
  374. <div class=" status-room-size">
  375. <select
  376. name="roomSize"
  377. id="roomSize"
  378. class="custom-select select-sm sources"
  379. th:placeholder="#{property_room.single}"
  380. required>
  381. <option value="SMALL" th:text="#{property_room.single}">Single</option>
  382. <option value="MEDIUM" th:text="#{property_room.middle}">Middle</option>
  383. <option value="MASTER" th:text="#{property_room.master}">Master</option>
  384. </select>
  385. </div>
  386. </div>
  387. </div>
  388. <div class="col-xs-12 col-md-6">
  389. <div class="input-wrap form-group select-wrap">
  390. <label for="carpark" th:text="#{property.parking_text}"
  391. >Parking</label
  392. >
  393. <div class=" status-parking">
  394. <select
  395. name="carpark"
  396. id="carpark"
  397. class="custom-select select-sm sources"
  398. required
  399. >
  400. <option value="0">0</option>
  401. <option value="1">1</option>
  402. <option value="2">2</option>
  403. <option value="3">3</option>
  404. <option value="4">4</option>
  405. </select>
  406. </div>
  407. </div>
  408. </div>
  409. <div class="col-xs-12 col-md-6">
  410. <div class="input-wrap form-group ">
  411. <label for="price" th:text="#{filter.price}"
  412. >Price (RM)</label
  413. >
  414. <div class="status status-price">
  415. <input
  416. name="price"
  417. id="price"
  418. type="text"
  419. class="form-control"
  420. required
  421. th:value="${property.price}"
  422. />
  423. <span class="error" th:text="#{error_message.price_required}">Property price must be required</span>
  424. <span class="error-v2" th:text="#{error_message.price_required_cond}">Property price must be required</span>
  425. <span class="error-v3" th:text="#{error_message.price_required_cond1}">Property price must be required</span>
  426. </div>
  427. </div>
  428. </div>
  429. <div class="col-xs-12 col-md-6">
  430. <div class="input-wrap form-group select-wrap">
  431. <label
  432. for="furnishingType"
  433. th:text="#{property.furnishing_title}"
  434. >Furnishing</label
  435. >
  436. <div class=" status-furnishing">
  437. <select
  438. name="furnishingTypeSelect"
  439. id="furnishingTypeSelect"
  440. class="custom-select select-sm sources "
  441. required
  442. >
  443. <option
  444. selected
  445. value="NONE"
  446. th:text="#{property_furnish.unfurnished}"
  447. >Unfurnished</option
  448. >
  449. <option
  450. value="PARTIAL"
  451. th:text="#{property_furnish.partially}"
  452. >Partially Furnished</option
  453. >
  454. <option
  455. value="FULL"
  456. th:text="#{property_furnish.fully}"
  457. >Fully Furnished</option
  458. >
  459. </select>
  460. </div>
  461. </div>
  462. </div>
  463. <div class="col-xs-12 col-md-6">
  464. <div class="check-wrap">
  465. <label class="checkbox form-group checkbox-sm checkbox-inline-sm">
  466. <input type="checkbox" id="negotiable" required/>
  467. <span class="checkbox__icon"></span>
  468. <th:block th:text="#{property.negotiable_text}"
  469. >Negotiable</th:block
  470. >
  471. </label>
  472. </div>
  473. </div>
  474. <div class="col-xs-12 col-md-6">
  475. <div class="check-wrap">
  476. <label class="checkbox form-group checkbox-sm checkbox-inline-sm">
  477. <input type="checkbox" id="fullyFurnishable" />
  478. <span class="checkbox__icon"></span>
  479. <th:block th:text="#{property.extra_note}"
  480. >I'm willing to fully furnish this unit at extra
  481. cost</th:block
  482. >
  483. </label>
  484. </div>
  485. </div>
  486. </div>
  487. </div>
  488. </div>
  489. <div id="step-2" class="">
  490. <div id="form-step-1" role="form" data-toggle="validator">
  491. <h2
  492. class="step-sub-title text-center"
  493. th:text="#{property.photo_guidelines}"
  494. >
  495. Photo Guidelines
  496. </h2>
  497. <div class="photo-guideline-top d-flex h-center">
  498. <div class="col">
  499. <div class="ico">
  500. <img
  501. src="/assets/img/icons/photo-guidelines.svg"
  502. width="80"
  503. alt=""
  504. />
  505. </div>
  506. <div class="caption">
  507. <th:block th:text="#{property.photo_guidelines_tag1}"
  508. >At least</th:block
  509. >
  510. <br />
  511.  
  512. <th:block th:text="#{property.photo_guidelines_tag2}"
  513. >non-watermarked</th:block
  514. >
  515. </div>
  516. </div>
  517. <div class="col">
  518. <div class="ico">
  519. <img
  520. src="/assets/img/icons/photo-guidelines-hd.svg"
  521. width="80"
  522. alt=""
  523. />
  524. </div>
  525. <div class="caption">
  526. <th:block th:text="#{property.photo_guidelines_tag3}"
  527. >High</th:block
  528. >
  529. <br />
  530. <th:block th:text="#{property.photo_guidelines_tag4}"
  531. >quality photo</th:block
  532. >
  533. </div>
  534. </div>
  535. <div class="col">
  536. <div class="ico">
  537. <img
  538. src="/assets/img/icons/photo-guidelines-sun.svg"
  539. width="80"
  540. alt=""
  541. />
  542. </div>
  543. <div class="caption">
  544. <th:block th:text="#{property.photo_guidelines_tag5}"
  545. >Bright and</th:block
  546. >
  547. <br />
  548. <th:block th:text="#{property.photo_guidelines_tag6}"
  549. >natural lighting</th:block
  550. >
  551. </div>
  552. </div>
  553. </div>
  554. <div class="check-wrap" th:if="false">
  555. <label class="checkbox checkbox-sm checkbox-inline-sm">
  556. <input type="checkbox" />
  557. <span class="checkbox__icon"></span>
  558. <th:block th:text="#{property.photographer_tagline1}"
  559. >I need a photographer to take high quality photos /
  560. 360</th:block
  561. >
  562. </label>
  563. </div>
  564. <div class="row photo-thumb-listing">
  565. <div class="col-xs-6 col-md-4">
  566. <div class="box text-right">
  567. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn0"
  568. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(0)"
  569. >Set as Cover Photo</button>
  570. <div class="btn btn-primary-filled btn-rotate">
  571. <button class="rotate-left">
  572. <i class="material-icons">
  573. rotate_90_degrees_ccw
  574. </i>
  575. </button>
  576. <button class="rotate-right">
  577. <i class="material-icons">
  578. rotate_90_degrees_ccw
  579. </i>
  580. </button>
  581. </div>
  582. <div class="js--image-preview" id="img0"></div>
  583. <div class="upload-options">
  584. <label>
  585. <input
  586. type="file"
  587. class="image-upload"
  588. accept="image/*"
  589. />
  590. </label>
  591. </div>
  592. </div>
  593. </div>
  594.  
  595. <div class="col-xs-6 col-md-4">
  596. <div class="box text-right">
  597. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn1"
  598. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(1)"
  599. >Set as Cover Photo</button>
  600. <div class="btn btn-primary-filled btn-rotate">
  601. <button class="rotate-left">
  602. <i class="material-icons">
  603. rotate_90_degrees_ccw
  604. </i>
  605. </button>
  606. <button class="rotate-right">
  607. <i class="material-icons">
  608. rotate_90_degrees_ccw
  609. </i>
  610. </button>
  611. </div>
  612. <div class="js--image-preview" id="img1"></div>
  613. <div class="upload-options">
  614. <label>
  615. <input
  616. type="file"
  617. class="image-upload"
  618. accept="image/*"
  619. />
  620. </label>
  621. </div>
  622. </div>
  623. </div>
  624. <div class="col-xs-6 col-md-4">
  625. <div class="box text-right">
  626. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn2"
  627. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(2)"
  628. >Set as Cover Photo</button>
  629. <div class="btn btn-primary-filled btn-rotate">
  630. <button class="rotate-left">
  631. <i class="material-icons">
  632. rotate_90_degrees_ccw
  633. </i>
  634. </button>
  635. <button class="rotate-right">
  636. <i class="material-icons">
  637. rotate_90_degrees_ccw
  638. </i>
  639. </button>
  640. </div>
  641. <div class="js--image-preview" id="img2"></div>
  642. <div class="upload-options">
  643. <label>
  644. <input
  645. type="file"
  646. class="image-upload"
  647. accept="image/*"
  648. />
  649. </label>
  650. </div>
  651. </div>
  652. </div>
  653. <div class="col-xs-6 col-md-4">
  654. <div class="box text-right">
  655. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn3"
  656. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(3)"
  657. >Set as Cover Photo</button>
  658. <div class="btn btn-primary-filled btn-rotate">
  659. <button class="rotate-left">
  660. <i class="material-icons">
  661. rotate_90_degrees_ccw
  662. </i>
  663. </button>
  664. <button class="rotate-right">
  665. <i class="material-icons">
  666. rotate_90_degrees_ccw
  667. </i>
  668. </button>
  669. </div>
  670. <div class="js--image-preview" id="img3"></div>
  671. <div class="upload-options">
  672. <label>
  673. <input
  674. type="file"
  675. class="image-upload"
  676. accept="image/*"
  677. />
  678. </label>
  679. </div>
  680. </div>
  681. </div>
  682. <div class="col-xs-6 col-md-4">
  683. <div class="box text-right">
  684. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn4"
  685. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(4)"
  686. >Set as Cover Photo</button>
  687. <div class="btn btn-primary-filled btn-rotate">
  688. <button class="rotate-left">
  689. <i class="material-icons">
  690. rotate_90_degrees_ccw
  691. </i>
  692. </button>
  693. <button class="rotate-right">
  694. <i class="material-icons">
  695. rotate_90_degrees_ccw
  696. </i>
  697. </button>
  698. </div>
  699. <div class="js--image-preview" id="img4"></div>
  700. <div class="upload-options">
  701. <label>
  702. <input
  703. type="file"
  704. class="image-upload"
  705. accept="image/*"
  706. />
  707. </label>
  708. </div>
  709. </div>
  710. </div>
  711. <div class="col-xs-6 col-md-4">
  712. <div class="box text-right">
  713. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn5"
  714. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(5)"
  715. >Set as Cover Photo</button>
  716. <div class="btn btn-primary-filled btn-rotate">
  717. <button class="rotate-left">
  718. <i class="material-icons">
  719. rotate_90_degrees_ccw
  720. </i>
  721. </button>
  722. <button class="rotate-right">
  723. <i class="material-icons">
  724. rotate_90_degrees_ccw
  725. </i>
  726. </button>
  727. </div>
  728. <div class="js--image-preview" id="img5"></div>
  729. <div class="upload-options">
  730. <label>
  731. <input
  732. type="file"
  733. class="image-upload"
  734. accept="image/*"
  735. />
  736. </label>
  737. </div>
  738. </div>
  739. </div>
  740. <div class="col-xs-6 col-md-4">
  741. <div class="box text-right">
  742. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn6"
  743. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(6)"
  744. >Set as Cover Photo</button>
  745. <div class="btn btn-primary-filled btn-rotate">
  746. <button class="rotate-left">
  747. <i class="material-icons">
  748. rotate_90_degrees_ccw
  749. </i>
  750. </button>
  751. <button class="rotate-right">
  752. <i class="material-icons">
  753. rotate_90_degrees_ccw
  754. </i>
  755. </button>
  756. </div>
  757. <div class="js--image-preview" id="img6"></div>
  758. <div class="upload-options">
  759. <label>
  760. <input
  761. type="file"
  762. class="image-upload"
  763. accept="image/*"
  764. />
  765. </label>
  766. </div>
  767. </div>
  768. </div>
  769. <div class="col-xs-6 col-md-4">
  770. <div class="box text-right">
  771. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn7"
  772. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(7)"
  773. >Set as Cover Photo</button>
  774. <div class="btn btn-primary-filled btn-rotate">
  775. <button class="rotate-left">
  776. <i class="material-icons">
  777. rotate_90_degrees_ccw
  778. </i>
  779. </button>
  780. <button class="rotate-right">
  781. <i class="material-icons">
  782. rotate_90_degrees_ccw
  783. </i>
  784. </button>
  785. </div>
  786. <div class="js--image-preview" id="img7"></div>
  787. <div class="upload-options">
  788. <label>
  789. <input
  790. type="file"
  791. class="image-upload"
  792. accept="image/*"
  793. />
  794. </label>
  795. </div>
  796. </div>
  797. </div>
  798. <div class="col-xs-6 col-md-4">
  799. <div class="box text-right">
  800. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn8"
  801. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(8)"
  802. >Set as Cover Photo</button>
  803. <div class="btn btn-primary-filled btn-rotate">
  804. <button class="rotate-left">
  805. <i class="material-icons">
  806. rotate_90_degrees_ccw
  807. </i>
  808. </button>
  809. <button class="rotate-right">
  810. <i class="material-icons">
  811. rotate_90_degrees_ccw
  812. </i>
  813. </button>
  814. </div>
  815. <div class="js--image-preview" id="img8"></div>
  816. <div class="upload-options">
  817. <label>
  818. <input
  819. type="file"
  820. class="image-upload"
  821. accept="image/*"
  822. />
  823. </label>
  824. </div>
  825. </div>
  826. </div>
  827. <div class="col-xs-6 col-md-4">
  828. <div class="box text-right">
  829. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn9"
  830. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(9)"
  831. >Set as Cover Photo</button>
  832. <div class="btn btn-primary-filled btn-rotate">
  833. <button class="rotate-left">
  834. <i class="material-icons">
  835. rotate_90_degrees_ccw
  836. </i>
  837. </button>
  838. <button class="rotate-right">
  839. <i class="material-icons">
  840. rotate_90_degrees_ccw
  841. </i>
  842. </button>
  843. </div>
  844. <div class="js--image-preview" id="img9"></div>
  845. <div class="upload-options">
  846. <label>
  847. <input
  848. type="file"
  849. class="image-upload"
  850. accept="image/*"
  851. />
  852. </label>
  853. </div>
  854. </div>
  855. </div>
  856. <div class="col-xs-6 col-md-4">
  857. <div class="box text-right">
  858. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn10"
  859. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(10)"
  860. >Set as Cover Photo</button>
  861. <div class="btn btn-primary-filled btn-rotate">
  862. <button class="rotate-left">
  863. <i class="material-icons">
  864. rotate_90_degrees_ccw
  865. </i>
  866. </button>
  867. <button class="rotate-right">
  868. <i class="material-icons">
  869. rotate_90_degrees_ccw
  870. </i>
  871. </button>
  872. </div>
  873. <div class="js--image-preview" id="img10"></div>
  874. <div class="upload-options">
  875. <label>
  876. <input
  877. type="file"
  878. class="image-upload"
  879. accept="image/*"
  880. />
  881. </label>
  882. </div>
  883. </div>
  884. </div>
  885.  
  886. <div class="col-xs-6 col-md-4">
  887. <div class="box text-right">
  888. <button class="btn btn-secondary-filled btn-set-cover-photo" id="setCoverPhotoBtn11"
  889. th:text="#{button.set_cover_photo}" onclick="setAsCoverPhoto(11)"
  890. >Set as Cover Photo</button>
  891. <div class="btn btn-primary-filled btn-rotate">
  892. <button class="rotate-left">
  893. <i class="material-icons">
  894. rotate_90_degrees_ccw
  895. </i>
  896. </button>
  897. <button class="rotate-right">
  898. <i class="material-icons">
  899. rotate_90_degrees_ccw
  900. </i>
  901. </button>
  902. </div>
  903. <div class="js--image-preview" id="img11"></div>
  904. <div class="upload-options">
  905. <label>
  906. <input
  907. type="file"
  908. class="image-upload"
  909. accept="image/*"
  910. />
  911. </label>
  912. </div>
  913. </div>
  914. </div>
  915. <div th:if="false" class="col-xs-6 col-md-4">
  916. <div class="box box-add lastme">
  917. <div class="js--image-preview"></div>
  918. <div class="thumb-inner centered">
  919. <div>
  920. <div class="icons">
  921. <i class="fas fa-plus-circle"></i>
  922. </div>
  923. <small th:text="#{property.add_more_photos}"
  924. >Add more photos</small
  925. >
  926. </div>
  927. </div>
  928. <div class="upload-options">
  929. <label>
  930. <input
  931. type="file"
  932. class="image-upload"
  933. accept="image/*"
  934. />
  935. <input type="hidden" id="image7" />
  936. </label>
  937. </div>
  938. </div>
  939. </div>
  940. </div>
  941. </div>
  942. </div>
  943. <div id="step-3" class="">
  944. <div id="form-step-2" role="form" data-toggle="validator">
  945. <div class="extra-info">
  946. <div class="text-center stat-msg">
  947. <em th:text="#{property.photo_uploaded}"
  948. >Photo successfully uploaded!</em
  949. >
  950. </div>
  951. <div class="inner-main">
  952. <div class="slot-extra">
  953. <strong
  954. class="content-title text-center"
  955. th:text="#{property.furnishing_title}"
  956. >Furnishing</strong
  957. >
  958. <div class="extra-inner">
  959. <div class="row">
  960. <div class="col-xs-6 col-sm-4">
  961. <div class="check-wrap">
  962. <label
  963. class="checkbox checkbox-sm checkbox-inline-sm"
  964. >
  965. <input type="checkbox" id="cbTv" />
  966. <span class="checkbox__icon"></span>
  967. <th:block th:text="#{furnish.tv}"
  968. >TV</th:block
  969. >
  970. </label>
  971. </div>
  972. </div>
  973. <div class="col-xs-6 col-sm-4">
  974. <div class="check-wrap">
  975. <label
  976. class="checkbox checkbox-sm checkbox-inline-sm"
  977. >
  978. <input type="checkbox" id="cbCurtain" />
  979. <span class="checkbox__icon"></span>
  980. <th:block th:text="#{furnish.curtain}"
  981. >Curtain</th:block
  982. >
  983. </label>
  984. </div>
  985. </div>
  986. <div class="col-xs-6 col-sm-4">
  987. <div class="check-wrap">
  988. <label
  989. class="checkbox checkbox-sm checkbox-inline-sm"
  990. >
  991. <input type="checkbox" id="cbMattress" />
  992. <span class="checkbox__icon"></span>
  993. <th:block th:text="#{furnish.mattress}"
  994. >Mattress</th:block
  995. >
  996. </label>
  997. </div>
  998. </div>
  999. <div class="col-xs-6 col-sm-4">
  1000. <div class="check-wrap">
  1001. <label
  1002. class="checkbox checkbox-sm checkbox-inline-sm"
  1003. >
  1004. <input
  1005. type="checkbox"
  1006. id="cbWashingMachine"
  1007. />
  1008. <span class="checkbox__icon"></span>
  1009. <th:block th:text="#{furnish.washing_machine}"
  1010. >Washing machine</th:block
  1011. >
  1012. </label>
  1013. </div>
  1014. </div>
  1015. <div class="col-xs-6 col-sm-4">
  1016. <div class="check-wrap">
  1017. <label
  1018. class="checkbox checkbox-sm checkbox-inline-sm"
  1019. >
  1020. <input type="checkbox" id="cbHood" />
  1021. <span class="checkbox__icon"></span>
  1022. <th:block th:text="#{furnish.hood_hub}"
  1023. >Hood & hub</th:block
  1024. >
  1025. </label>
  1026. </div>
  1027. </div>
  1028. <div class="col-xs-6 col-sm-4">
  1029. <div class="check-wrap">
  1030. <label
  1031. class="checkbox checkbox-sm checkbox-inline-sm"
  1032. >
  1033. <input type="checkbox" id="cbAc" />
  1034. <span class="checkbox__icon"></span>
  1035. <th:block th:text="#{furnish.ac}"
  1036. >A/C</th:block
  1037. >
  1038. </label>
  1039. </div>
  1040. </div>
  1041. <div class="col-xs-6 col-sm-4">
  1042. <div class="check-wrap">
  1043. <label
  1044. class="checkbox checkbox-sm checkbox-inline-sm"
  1045. >
  1046. <input type="checkbox" id="cbWaterHeater" />
  1047. <span class="checkbox__icon"></span>
  1048. <th:block th:text="#{furnish.water_heater}"
  1049. >Water heater</th:block
  1050. >
  1051. </label>
  1052. </div>
  1053. </div>
  1054. <div class="col-xs-6 col-sm-4">
  1055. <div class="check-wrap">
  1056. <label
  1057. class="checkbox checkbox-sm checkbox-inline-sm"
  1058. >
  1059. <input type="checkbox" id="cbDiningTable" />
  1060. <span class="checkbox__icon"></span>
  1061. <th:block th:text="#{furnish.dining_table}"
  1062. >Dining table</th:block
  1063. >
  1064. </label>
  1065. </div>
  1066. </div>
  1067. <div class="col-xs-6 col-sm-4">
  1068. <div class="check-wrap">
  1069. <label
  1070. class="checkbox checkbox-sm checkbox-inline-sm"
  1071. >
  1072. <input type="checkbox" id="cbWardrobe" />
  1073. <span class="checkbox__icon"></span>
  1074. <th:block th:text="#{furnish.wardrobe}"
  1075. >Wardrobe</th:block
  1076. >
  1077. </label>
  1078. </div>
  1079. </div>
  1080. <div class="col-xs-6 col-sm-4">
  1081. <div class="check-wrap">
  1082. <label
  1083. class="checkbox checkbox-sm checkbox-inline-sm"
  1084. >
  1085. <input type="checkbox" id="cbKitchenCabinet" />
  1086. <span class="checkbox__icon"></span>
  1087. <th:block th:text="#{furnish.kitchen_cabinet}"
  1088. >Kitchen cabinet</th:block
  1089. >
  1090. </label>
  1091. </div>
  1092. </div>
  1093. <div class="col-xs-6 col-sm-4">
  1094. <div class="check-wrap">
  1095. <label
  1096. class="checkbox checkbox-sm checkbox-inline-sm"
  1097. >
  1098. <input type="checkbox" id="cbOven" />
  1099. <span class="checkbox__icon"></span>
  1100. <th:block th:text="#{furnish.oven}"
  1101. >Oven</th:block
  1102. >
  1103. </label>
  1104. </div>
  1105. </div>
  1106. <div class="col-xs-6 col-sm-4">
  1107. <div class="check-wrap">
  1108. <label
  1109. class="checkbox checkbox-sm checkbox-inline-sm"
  1110. >
  1111. <input type="checkbox" id="cbFridge" />
  1112. <span class="checkbox__icon"></span>
  1113. <th:block th:text="#{furnish.fridge}"
  1114. >Refrigerator</th:block
  1115. >
  1116. </label>
  1117. </div>
  1118. </div>
  1119. <div class="col-xs-6 col-sm-4">
  1120. <div class="check-wrap">
  1121. <label
  1122. class="checkbox checkbox-sm checkbox-inline-sm"
  1123. >
  1124. <input type="checkbox" id="cbSofa" />
  1125. <span class="checkbox__icon"></span>
  1126. <th:block th:text="#{furnish.sofa}"
  1127. >Sofa</th:block
  1128. >
  1129. </label>
  1130. </div>
  1131. </div>
  1132. <div class="col-xs-6 col-sm-4">
  1133. <div class="check-wrap">
  1134. <label
  1135. class="checkbox checkbox-sm checkbox-inline-sm"
  1136. >
  1137. <input type="checkbox" id="cbMicrowave" />
  1138. <span class="checkbox__icon"></span>
  1139. <th:block th:text="#{furnish.microwave}"
  1140. >Microwave</th:block
  1141. >
  1142. </label>
  1143. </div>
  1144. </div>
  1145. <div class="col-xs-6 col-sm-4">
  1146. <div class="check-wrap">
  1147. <label
  1148. class="checkbox checkbox-sm checkbox-inline-sm"
  1149. >
  1150. <input type="checkbox" id="cbBedframe" />
  1151. <span class="checkbox__icon"></span>
  1152. <th:block th:text="#{furnish.bed_frame}"
  1153. >Bed frame</th:block
  1154. >
  1155. </label>
  1156. </div>
  1157. </div>
  1158. <div class="col-xs-6 col-sm-4">
  1159. <div class="check-wrap">
  1160. <label
  1161. class="checkbox checkbox-sm checkbox-inline-sm"
  1162. >
  1163. <input type="checkbox" id="cbInternet" />
  1164. <span class="checkbox__icon"></span>
  1165. <th:block th:text="#{furnish.internet}"
  1166. >Internet</th:block
  1167. >
  1168. </label>
  1169. </div>
  1170. </div>
  1171. </div>
  1172. </div>
  1173. </div>
  1174. <div class="slot-extra">
  1175. <strong class="content-title text-center"
  1176. >Facilities</strong
  1177. >
  1178. <div class="extra-inner">
  1179. <div class="row">
  1180. <div class="col-xs-6 col-sm-4">
  1181. <div class="check-wrap">
  1182. <label
  1183. class="checkbox checkbox-sm checkbox-inline-sm"
  1184. >
  1185. <input type="checkbox" id="cbBbq" />
  1186. <span class="checkbox__icon"></span>
  1187. <th:block th:text="#{facility.bbq}"
  1188. >Barbeque area</th:block
  1189. >
  1190. </label>
  1191. </div>
  1192. </div>
  1193. <div class="col-xs-6 col-sm-4">
  1194. <div class="check-wrap">
  1195. <label
  1196. class="checkbox checkbox-sm checkbox-inline-sm"
  1197. >
  1198. <input
  1199. type="checkbox"
  1200. id="cbCoveredParking"
  1201. />
  1202. <span class="checkbox__icon"></span>
  1203. <th:block
  1204. th:text="#{facility.covered_parking}"
  1205. >Covered parking</th:block
  1206. >
  1207. </label>
  1208. </div>
  1209. </div>
  1210. <div class="col-xs-6 col-sm-4">
  1211. <div class="check-wrap">
  1212. <label
  1213. class="checkbox checkbox-sm checkbox-inline-sm"
  1214. >
  1215. <input type="checkbox" id="cbGym" />
  1216. <span class="checkbox__icon"></span>
  1217. <th:block th:text="#{facility.gymnasium}"
  1218. >Gymnasium</th:block
  1219. >
  1220. </label>
  1221. </div>
  1222. </div>
  1223. <div class="col-xs-6 col-sm-4">
  1224. <div class="check-wrap">
  1225. <label
  1226. class="checkbox checkbox-sm checkbox-inline-sm"
  1227. >
  1228. <input type="checkbox" id="cbBasketball" />
  1229. <span class="checkbox__icon"></span>
  1230. <th:block th:text="#{facility.basketball}"
  1231. >Basketball</th:block
  1232. >
  1233. </label>
  1234. </div>
  1235. </div>
  1236. <div class="col-xs-6 col-sm-4">
  1237. <div class="check-wrap">
  1238. <label
  1239. class="checkbox checkbox-sm checkbox-inline-sm"
  1240. >
  1241. <input type="checkbox" id="cbRestaurant" />
  1242. <span class="checkbox__icon"></span>
  1243. <th:block th:text="#{facility.restaurant}"
  1244. >Restaurant</th:block
  1245. >
  1246. </label>
  1247. </div>
  1248. </div>
  1249. <div class="col-xs-6 col-sm-4">
  1250. <div class="check-wrap">
  1251. <label
  1252. class="checkbox checkbox-sm checkbox-inline-sm"
  1253. >
  1254. <input type="checkbox" id="cbDobby" />
  1255. <span class="checkbox__icon"></span>
  1256. <th:block th:text="#{facility.dobby}"
  1257. >Dobby</th:block
  1258. >
  1259. </label>
  1260. </div>
  1261. </div>
  1262. <div class="col-xs-6 col-sm-4">
  1263. <div class="check-wrap">
  1264. <label
  1265. class="checkbox checkbox-sm checkbox-inline-sm"
  1266. >
  1267. <input type="checkbox" id="cbNursery" />
  1268. <span class="checkbox__icon"></span>
  1269. <th:block th:text="#{facility.nursery}"
  1270. >Nursery</th:block
  1271. >
  1272. </label>
  1273. </div>
  1274. </div>
  1275. <div class="col-xs-6 col-sm-4">
  1276. <div class="check-wrap">
  1277. <label
  1278. class="checkbox checkbox-sm checkbox-inline-sm"
  1279. >
  1280. <input type="checkbox" id="cbPlayground" />
  1281. <span class="checkbox__icon"></span>
  1282. <th:block th:text="#{facility.playground}"
  1283. >Playground</th:block
  1284. >
  1285. </label>
  1286. </div>
  1287. </div>
  1288. <div class="col-xs-6 col-sm-4">
  1289. <div class="check-wrap">
  1290. <label
  1291. class="checkbox checkbox-sm checkbox-inline-sm"
  1292. >
  1293. <input type="checkbox" id="cbSauna" />
  1294. <span class="checkbox__icon"></span>
  1295. <th:block th:text="#{facility.sauna}"
  1296. >Sauna</th:block
  1297. >
  1298. </label>
  1299. </div>
  1300. </div>
  1301. <div class="col-xs-6 col-sm-4">
  1302. <div class="check-wrap">
  1303. <label
  1304. class="checkbox checkbox-sm checkbox-inline-sm"
  1305. >
  1306. <input type="checkbox" id="cbSwimming" />
  1307. <span class="checkbox__icon"></span>
  1308. <th:block th:text="#{facility.swimming}"
  1309. >Swimming pool</th:block
  1310. >
  1311. </label>
  1312. </div>
  1313. </div>
  1314. <div class="col-xs-6 col-sm-4">
  1315. <div class="check-wrap">
  1316. <label
  1317. class="checkbox checkbox-sm checkbox-inline-sm"
  1318. >
  1319. <input type="checkbox" id="cbTennis" />
  1320. <span class="checkbox__icon"></span>
  1321. <th:block th:text="#{facility.tennis}"
  1322. >Tennis court</th:block
  1323. >
  1324. </label>
  1325. </div>
  1326. </div>
  1327. <div class="col-xs-6 col-sm-4">
  1328. <div class="check-wrap">
  1329. <label
  1330. class="checkbox checkbox-sm checkbox-inline-sm"
  1331. >
  1332. <input type="checkbox" id="cbSecurity24hr" />
  1333. <span class="checkbox__icon"></span>
  1334. <th:block th:text="#{facility.security24hr}"
  1335. >24hr security</th:block
  1336. >
  1337. </label>
  1338. </div>
  1339. </div>
  1340. <div class="col-xs-6 col-sm-4">
  1341. <div class="check-wrap">
  1342. <label
  1343. class="checkbox checkbox-sm checkbox-inline-sm"
  1344. >
  1345. <input type="checkbox" id="cbMart" />
  1346. <span class="checkbox__icon"></span>
  1347. <th:block th:text="#{facility.mart}"
  1348. >Mart</th:block
  1349. >
  1350. </label>
  1351. </div>
  1352. </div>
  1353. <div class="col-xs-6 col-sm-4">
  1354. <div class="check-wrap">
  1355. <label
  1356. class="checkbox checkbox-sm checkbox-inline-sm"
  1357. >
  1358. <input type="checkbox" id="cbSquash" />
  1359. <span class="checkbox__icon"></span>
  1360. <th:block th:text="#{facility.squash}"
  1361. >Squash court</th:block
  1362. >
  1363. </label>
  1364. </div>
  1365. </div>
  1366. <div class="col-xs-6 col-sm-4">
  1367. <div class="check-wrap">
  1368. <label
  1369. class="checkbox checkbox-sm checkbox-inline-sm"
  1370. >
  1371. <input type="checkbox" id="cbBadminton" />
  1372. <span class="checkbox__icon"></span>
  1373. <th:block th:text="#{facility.badminton}"
  1374. >Badminton</th:block
  1375. >
  1376. </label>
  1377. </div>
  1378. </div>
  1379. <div class="col-xs-6 col-sm-4">
  1380. <div class="check-wrap">
  1381. <label
  1382. class="checkbox checkbox-sm checkbox-inline-sm"
  1383. >
  1384. <input type="checkbox" id="cbElevator" />
  1385. <span class="checkbox__icon"></span>
  1386. <th:block th:text="#{facility.elevator}"
  1387. >Elevator</th:block
  1388. >
  1389. </label>
  1390. </div>
  1391. </div>
  1392. </div>
  1393. </div>
  1394. </div>
  1395. <div class="slot-extra">
  1396. <strong
  1397. class="content-title text-center"
  1398. th:text="#{property.description_title}"
  1399. >Description</strong
  1400. >
  1401. <div class="extra-inner">
  1402. <textarea
  1403. name=""
  1404. id="description"
  1405. cols="30"
  1406. rows="10"
  1407. class="big-des form-control"
  1408. >
  1409. </textarea>
  1410. </div>
  1411. </div>
  1412. <div class="slot-extra">
  1413. <strong class="content-title text-center"
  1414. >&nbsp;</strong
  1415. >
  1416. <div class="extra-inner">
  1417. <div class="row">
  1418. <div class="col-xs-6 col-sm-4">
  1419. <div class="check-wrap">
  1420. <label
  1421. class="checkbox checkbox-sm checkbox-inline-sm"
  1422. >
  1423. <input type="checkbox" id="cbAllRace" />
  1424. <span class="checkbox__icon"></span>
  1425. <th:block
  1426. th:text="#{extra_info.accept_all_races}"
  1427. >Accept all races</th:block
  1428. >
  1429. </label>
  1430. </div>
  1431. </div>
  1432. <div class="col-xs-6 col-sm-4">
  1433. <div class="check-wrap">
  1434. <label
  1435. class="checkbox checkbox-sm checkbox-inline-sm"
  1436. >
  1437. <input type="checkbox" id="cbPet" />
  1438. <span class="checkbox__icon"></span>
  1439. <th:block th:text="#{extra_info.pet_friendly}"
  1440. >Pet-friendly</th:block
  1441. >
  1442. </label>
  1443. </div>
  1444. </div>
  1445. <div class="col-xs-6 col-sm-4" th:if="false">
  1446. <div class="check-wrap">
  1447. <label
  1448. class="checkbox checkbox-sm checkbox-inline-sm">
  1449. <input type="checkbox" />
  1450. <span class="checkbox__icon"></span>
  1451. <th:block th:text="#{extra_info.handicapped}"
  1452. >Handicapped</th:block
  1453. >
  1454. </label>
  1455. </div>
  1456. </div>
  1457. </div>
  1458. </div>
  1459. </div>
  1460. <div class="slot-extra">
  1461. <strong class="content-title">&nbsp;</strong>
  1462. <div class="row extra-inner">
  1463. <div class="col-date col-xs-12 col-md-6">
  1464. <div class="input-inline-group d-flex">
  1465. <label
  1466. for="dateAvailable"
  1467. th:text="#{property.avaliable_date_text}"
  1468. >Availability date:</label
  1469. >
  1470. <input
  1471. th:placeholder="#{property_ava_date.placeholder}"
  1472. type="text"
  1473. id="dateAvailable"
  1474. class="form-control datepicker-nice"
  1475. data-language="en"
  1476. data-position="bottom left"
  1477. />
  1478. </div>
  1479. </div>
  1480. <div class="col-xs-12 col-md-6" th:if="false">
  1481. <div class="input-inline-group d-flex">
  1482. <label
  1483. for="dateIn"
  1484. th:text="#{property.minimum_stay}"
  1485. >Minimum stay:</label
  1486. >
  1487. <div class="input-wrap select-wrap">
  1488. <div class="status">
  1489. <select
  1490. name="sources"
  1491. id="sources"
  1492. class="custom-select select-sm sources"
  1493. placeholder="Any"
  1494. >
  1495. <option selected value="rent">Any</option>
  1496. <option value="buy">Many</option>
  1497. </select>
  1498. </div>
  1499. </div>
  1500. </div>
  1501. </div>
  1502. </div>
  1503. </div>
  1504. <div class="slot-extra">
  1505. <strong class="content-title">&nbsp;</strong>
  1506. <div class="slot-inner">
  1507. <div class="note-box">
  1508. <div class="head d-flex">
  1509. <div
  1510. class="txt-left"
  1511. th:text="#{property.insurance_note}"
  1512. >
  1513. LANDLORD INSURANCE AS DEPOSIT
  1514. </div>
  1515. <div class="right">
  1516. <img
  1517. src="/assets/img/icons/no-deposit.svg"
  1518. width="30"
  1519. alt=""
  1520. />
  1521. <img
  1522. src="/assets/img/icons/allinaz.svg"
  1523. width="110"
  1524. alt=""
  1525. />
  1526. </div>
  1527. </div>
  1528. <div class="sub-inner">
  1529. <strong
  1530. class="content-title"
  1531. th:text="#{property.secured_note}"
  1532. >Be secured up to RM26,000</strong
  1533. >
  1534. <p th:text="#{property.bottom_info}">
  1535. When you sign up and rent with SPEEDHOME, your
  1536. property is insured up to RM15,000. You can also
  1537. claim up to RM1,000 in unpaid utility bills and
  1538. 2 months’ of rent.
  1539. </p>
  1540. </div>
  1541. </div>
  1542. </div>
  1543. </div>
  1544. </div>
  1545. </div>
  1546. </div>
  1547. </div>
  1548. </div>
  1549. </div>
  1550. </form>
  1551. </div>
  1552. </main>
  1553. <div replace="common/footer :: footer"></div>
  1554. <div id="uploadPhotoError" class="white-popup mfp-hide text-center">
  1555. <div class="user-container upload-photo-error">
  1556. <div class="popup-header">Whoopsie Daisy</div>
  1557. <div class="user-faces">
  1558. <img
  1559. src="/assets/img/icons/warning.svg" width="60"
  1560. />
  1561. </div>
  1562. <div class="user-title">
  1563. You need to upload at least 4 photos to proceed.
  1564. </div>
  1565. <div class="btn-wrapper">
  1566. <div class="">
  1567. <span
  1568. id="btnCloseErrorPopup"
  1569. class="btn btn-curv btn-dark-gray-filled"
  1570. >Got it
  1571. </span>
  1572. </div>
  1573. </div>
  1574. </div>
  1575. </div>
  1576. <div th:replace="common/filter :: filter"></div>
  1577. <div class="m-cookies"></div>
  1578. <script src="/assets/js/jquery.min.js"></script>
  1579. <script src="/assets/js/owl.carousel.min.js"></script>
  1580. <script src="/assets/js/jquery.autocomplete.min.js"></script>
  1581. <script src="/assets/js/jquery.magnific-popup.min.js"></script>
  1582. <script src="/assets/js/jquery.smartWizard.min.js"></script>
  1583. <script src="/assets/js/wizardInit.js"></script>
  1584. <script src="/assets/js/moment.js"></script>
  1585. <script src="/assets/js/pikaday.js"></script>
  1586. <script src="/assets/js/jquery-ui.js"></script>
  1587. <script src="/assets/js/jquery-ui-slider-pips.js"></script>
  1588. <script src="/assets/js/main.js"></script>
  1589. <script src="/assets/js/intlTelInput.js"></script>
  1590. <script>
  1591. $("#btnCloseErrorPopup").on("click", function () {
  1592. $.magnificPopup.close();
  1593. $(this).scrollTop(0);
  1594. });
  1595. var picker = new Pikaday({
  1596. field: document.getElementById("dateAvailable"),
  1597. format: "DD/MM/YYYY",
  1598. minDate: new Date(),
  1599. });
  1600.  
  1601. </script>
  1602.  
  1603. <div th:replace="common/post-autocomplete-js"></div>
  1604. <div th:replace="common/tracking :: tracking"></div>
  1605. <div th:replace="common/login :: login"></div>
  1606.  
  1607. <script th:inline="javascript">
  1608. var edited = null;
  1609. var propType = /*[[${property.type}]]*/;
  1610. var propFurnish = /*[[${property.furnishType}]]*/;
  1611. var propPrice = $("#price").val();
  1612. var furnishes = $("#propFurnishes").val();
  1613. var facilities = $("#propFacilities").val();
  1614. var carpark = /*[[${property.carpark}]]*/;
  1615. var bathroom = /*[[${property.bathroom}]]*/;
  1616. var bedroom = /*[[${property.bedroom}]]*/;
  1617. var bathroomType = /*[[${property.bathroomType}]]*/;
  1618. var roomMate = /*[[${property.roommate}]]*/;
  1619. var roomType = /*[[${property.roomType}]]*/;
  1620.  
  1621. var isOwner = /*[[${property.owner}]]*/;
  1622. var isNegotiable = /*[[${property.negotiable}]]*/;
  1623. var isFullyFurnishable = /*[[${property.fullyFurnishable}]]*/;
  1624. var isAllRaces = /*[[${property.allRaces}]]*/;
  1625. var isPetFriendly = /*[[${property.petFriendly}]]*/;
  1626. var description = /*[[${property.description}]]*/;
  1627. var availDate = /*[[${property.availability}]]*/;
  1628.  
  1629. var tempDate = availDate.substring(0, availDate.indexOf('T'));
  1630. var year = tempDate.substring(0,4);
  1631. var mon = tempDate.substring(5,7);
  1632. var day = tempDate.substring(8,10);
  1633. var finalDate = day + "/" + mon + "/" + year;
  1634.  
  1635. document.getElementById("dateAvailable").value = finalDate;
  1636. document.getElementById("description").value = description;
  1637. $("#price").val(propPrice.substring(0, propPrice.length - 3));
  1638.  
  1639. $("#carpark").attr('placeholder', carpark);
  1640. $("#carpark").val(carpark);
  1641.  
  1642. $("#bathroom").attr('placeholder', bathroom);
  1643. $("#bathroom").val(bathroom);
  1644.  
  1645. if(propType != "ROOM"){
  1646. $("#bedroom").attr('placeholder', bedroom);
  1647. $("#bedroom").val(bedroom);
  1648. } else {
  1649. // Set bathroom type
  1650. if(bathroomType == "SHARED")
  1651. {
  1652. $("#roomBathroom").attr('placeholder', 'Shared');
  1653. $("#roomBathroom").val(bathroomType);
  1654. }else{
  1655. $("#roomBathroom").attr('placeholder', 'Private');
  1656. $("#roomBathroom").val(bathroomType);
  1657. }
  1658.  
  1659. // Pre populate Number of Pax
  1660. $("#roomPax").attr('placeholder', roomMate);
  1661. $("#roomPax").val(roomMate);
  1662.  
  1663. // Pre populate Room Type
  1664. switch(roomType){
  1665. case "SMALL" :
  1666. $("#roomSize").attr('placeholder', 'Single');
  1667. $("#roomSize").val(roomType);
  1668. break;
  1669. case "MEDIUM" :
  1670. $("#roomSize").attr('placeholder', 'Middle');
  1671. $("#roomSize").val(roomType);
  1672. break;
  1673. case "MASTER" :
  1674. $("#roomSize").attr('placeholder', 'Master');
  1675. $("#roomSize").val(roomType);
  1676. break;
  1677. }
  1678. }
  1679.  
  1680. if(isOwner) {
  1681. $("#owner").prop("checked", true);
  1682. }
  1683.  
  1684. if(isNegotiable) {
  1685. $("#negotiable").prop("checked" , true);
  1686. }
  1687.  
  1688. if(isFullyFurnishable) {
  1689. $("#fullyFurnishable").prop("checked" , true);
  1690. }
  1691.  
  1692. if(isAllRaces) {
  1693. $("#cbAllRace").prop("checked" , true);
  1694. }
  1695.  
  1696. if(isPetFriendly) {
  1697. $("#cbPet").prop("checked" , true);
  1698. }
  1699.  
  1700. if(propType == 'HIGHRISE'){
  1701. $("#type").attr('placeholder', "High-Rise");
  1702. $("#type").val("HIGHRISE");
  1703. $("#blockBathroom").show();
  1704. $("#blockBedroom").show();
  1705. $("#blockSqft").show();
  1706. $("#blockStorey").hide();
  1707. $("#blockRoomPax").hide();
  1708. $("#blockRoomSize").hide();
  1709. $("#blockRoomBathroom").hide();
  1710. } else if (propType == 'LANDED'){
  1711. $("#type").attr('placeholder', "Landed");
  1712. $("#type").val("LANDED");
  1713. $("#blockStorey").show();
  1714. $("#blockBathroom").show();
  1715. $("#blockBedroom").show();
  1716. $("#blockSqft").show();
  1717. $("#blockFloor").hide();
  1718. $("#blockRoomPax").hide();
  1719. $("#blockRoomSize").hide();
  1720. $("#blockRoomBathroom").hide();
  1721. } else {
  1722. $("#type").attr('placeholder', "Room");
  1723. $("#type").val("ROOM");
  1724. $("#blockStorey").hide();
  1725. $("#blockRoomPax").show();
  1726. $("#blockRoomSize").show();
  1727. $("#blockRoomBathroom").show();
  1728. $("#blockBathroom").hide();
  1729. $("#blockBedroom").hide();
  1730. $("#blockSqft").hide();
  1731. }
  1732.  
  1733. if(propFurnish == 'FULL'){
  1734. $("#furnishingTypeSelect").attr('placeholder', 'Fully furnished');
  1735. $("#furnishingTypeSelect").val("FULL");
  1736. } else if (propFurnish == 'PARTIAL'){
  1737. $("#furnishingTypeSelect").attr('placeholder', 'Partially furnished');
  1738. $("#furnishingTypeSelect").val("PARTIAL");
  1739. } else {
  1740. $("#furnishingTypeSelect").attr('placeholder', 'Unfurnished');
  1741. $("#furnishingTypeSelect").val("NONE");
  1742. }
  1743.  
  1744. $("#img0").ready(function(){getImageURL("0","#img0");});
  1745. $("#img1").ready(function(){getImageURL("1","#img1");});
  1746. $("#img2").ready(function(){getImageURL("2","#img2");});
  1747. $("#img3").ready(function(){getImageURL("3","#img3");});
  1748. $("#img4").ready(function(){getImageURL("4","#img4");});
  1749. $("#img5").ready(function(){getImageURL("5","#img5");});
  1750. $("#img6").ready(function(){getImageURL("6","#img6");});
  1751. $("#img7").ready(function(){getImageURL("7","#img7");});
  1752. $("#img8").ready(function(){getImageURL("8","#img8");});
  1753. $("#img9").ready(function(){getImageURL("9","#img9");});
  1754. $("#img10").ready(function(){getImageURL("10","#img10");});
  1755. $("#img11").ready(function(){getImageURL("11","#img11");});
  1756.  
  1757. function getImageURL(e, id){
  1758. var propImageURL = /*[[${property.images}]]*/;
  1759. var cnst = 1;
  1760. var indx = (parseFloat(cnst) + parseFloat(e));
  1761.  
  1762. if (indx <= propImageURL.length){
  1763. previewCurrentImage(propImageURL[e].url, propImageURL[e].id, id);
  1764. }
  1765. }
  1766.  
  1767. function previewCurrentImage(url, propImageId, id) {
  1768. let thumb = document.querySelector(id)
  1769. $.ajax({
  1770. url: "/api/post/get/image",
  1771. type: "POST",
  1772. data: JSON.stringify({ url : url }),
  1773. contentType: "application/json; charset=utf-8",
  1774. success: function(data){
  1775. $(id).css("background-image", "url('data:image/jpeg;base64," + data.replace(/(\r\n|\n|\r)/gm, "") + "')");
  1776. $(id).attr("value", propImageId);
  1777. }
  1778. });
  1779. }
  1780.  
  1781. var furnishes = /*[[${property.furnishes}]]*/;
  1782. var facilities = /*[[${property.facilities}]]*/;
  1783. var checkboxId = document.querySelectorAll("input[type='checkbox']");
  1784.  
  1785. if(furnishes.length > 0){
  1786. for(i = 0 ; i < checkboxId.length ; i++){
  1787. for (cnt = 0 ; cnt < furnishes.length ; cnt++){
  1788. var checkedFurnish = furnishes[cnt];
  1789. //var nunders = s.indexOf('?');
  1790. var resultId = "cb" + checkedFurnish.replace("_","");
  1791. //var resultId = "cb" + checkedFurnish.substring(0, checkedFurnish.indexOf('_'));
  1792.  
  1793. var checkId = checkboxId[i].id;
  1794. var checkIdToLower = checkId.toLowerCase();
  1795.  
  1796. //alert(checkIdToLower + " " + resultId);
  1797. if(checkIdToLower == resultId){
  1798. $("#" + checkId).prop("checked", true);
  1799. }
  1800. }
  1801. }
  1802. }
  1803.  
  1804. if(facilities.length > 0){
  1805. for(i = 0 ; i < checkboxId.length ; i++){
  1806. for (ctr = 0 ; ctr < facilities.length ; ctr++){
  1807. var checkedFacilities = facilities[ctr];
  1808. var resultId = "cb" + checkedFacilities.replace("_","");
  1809.  
  1810. var checkId = checkboxId[i].id;
  1811. var checkIdToLower = checkId.toLowerCase();
  1812.  
  1813. if(checkIdToLower == resultId){
  1814. $("#" + checkId).prop("checked", true);
  1815. }
  1816. }
  1817. }
  1818. }
  1819.  
  1820. $(document).ready(function() {
  1821. // change type select
  1822. $(".housingType")
  1823. .find(".custom-option")
  1824. .on("click", function() {
  1825. var type = $(this).data("value");
  1826. if(type == 'LANDED'){
  1827. $("#blockFloor").hide();
  1828. $("#blockStorey").show();
  1829.  
  1830. $("#blockRoomPax").hide();
  1831. $("#blockRoomSize").hide();
  1832. $("#blockRoomBathroom").hide();
  1833. $("#blockBathroom").show();
  1834. $("#blockBedroom").show();
  1835. $("#blockSqft").show();
  1836. }else{
  1837. //high rise or room
  1838. $("#blockFloor").show();
  1839. $("#blockStorey").hide();
  1840.  
  1841. if(type == 'ROOM'){
  1842. $("#blockRoomPax").show();
  1843. $("#blockRoomSize").show();
  1844. $("#blockRoomBathroom").show();
  1845. $("#blockBathroom").hide();
  1846. $("#blockBedroom").hide();
  1847. $("#blockSqft").hide();
  1848. }else{
  1849. $("#blockRoomPax").hide();
  1850. $("#blockRoomSize").hide();
  1851. $("#blockRoomBathroom").hide();
  1852. $("#blockBathroom").show();
  1853. $("#blockBedroom").show();
  1854. $("#blockSqft").show();
  1855. }
  1856. }
  1857. });
  1858.  
  1859. // Initialize the leaveStep event
  1860. $("#smartwizard").on("leaveStep", function(
  1861. e,
  1862. anchorObject,
  1863. stepNumber,
  1864. stepDirection
  1865. ) {
  1866.  
  1867. //Edit property
  1868. var id = $("#propId").val();
  1869. var name = $("#propName").val();
  1870. var type = $("#type").val();
  1871. var owner = checkIfTicked("negotiable");
  1872. var storeys = $("#storeys").val();
  1873. var floor = $("#floor").val();
  1874. var furnishingType = $("#furnishingType").val();
  1875. var roomSize = $("#roomSize").val();
  1876. var roomPax = $("#roomPax").val();
  1877. var roomBathroom = $("#roomBathroom").val();
  1878. var address = $("#address").val();
  1879. var bathroom = $("#bathroom").val();
  1880. var postcode = $("#postcode").val();
  1881. var bedroom = $("#bedroom").val();
  1882. var sqft = $("#sqft").val();
  1883. var carpark = $("#carpark").val();
  1884. var price = $("#price").val();
  1885. var negotiable = checkIfTicked("negotiable");
  1886. var fullyFurnishable = checkIfTicked("fullyFurnishable");
  1887.  
  1888.  
  1889.  
  1890. if (stepNumber == 0 && stepDirection == "forward") {
  1891. if(name == '' || type == '' || address == '' || carpark == '' || price == '' || furnishingType == ''){
  1892. $("#step-1").find('input[required]').filter(function() {
  1893. $(this).scrollTop(0);
  1894. $(this).removeClass("error");
  1895. $("span[for='" + $(this).attr('id') + "']").remove();
  1896.  
  1897. if( $(this).val().length === 0 ) {
  1898. var label = $("label[for='" + $(this).attr('id') + "']");
  1899. $(this).addClass("error");
  1900. $(this).parent().addClass('invalid');
  1901. // debugger
  1902. $(this).nextAll('span.error').addClass('show');
  1903. }
  1904.  
  1905. // keyup events
  1906. $(this).keyup(function () {
  1907. if( $(this).val().length > 1 ) {
  1908. $(this).removeClass("error");
  1909. $(this).parent().removeClass('invalid');
  1910. $(this).next('.error').hide();
  1911. }
  1912. });
  1913. });
  1914. return false;
  1915. }
  1916.  
  1917. if(type == null){
  1918. type = $("#propType").val();
  1919. }
  1920.  
  1921. if(type == 'LANDED'){
  1922. if(storeys == ''){
  1923. alert('Please fill up all the details.');
  1924. return false;
  1925. }
  1926. }else{
  1927. if(floor == ''){
  1928. // alert('Please fill up all floor the details.');
  1929. let _floorField = $('#floor');
  1930. _floorField.removeClass("error");
  1931. $("span[for='" + _floorField.attr('id') + "']").remove();
  1932. let label = $("label[for='" + _floorField.attr('id') + "']");
  1933. _floorField.addClass("error");
  1934. _floorField.parent().addClass('invalid');
  1935. $(_floorField).nextAll('span.error').addClass('show');
  1936. return false;
  1937. }
  1938. }
  1939.  
  1940. $(floor,postcode,sqft,price).on('keyup', function (e) {
  1941. if(name.length > 1) {
  1942. $(this).parent().removeClass('invalid');
  1943. }
  1944. });
  1945.  
  1946. if(type == 'ROOM'){
  1947. if(roomBathroom == '' || roomPax == '' || roomSize == ''){
  1948. alert('Please fill up all the details.');
  1949. return false;
  1950. }
  1951. }else{
  1952. if(bathroom == '' || bedroom == '' || sqft == ''){
  1953. alert('Please fill up all the details.');
  1954. return false;
  1955. }
  1956.  
  1957. if(!isNormalInteger(sqft)){
  1958. let _priceField = $('#sqft');
  1959. _sqftField.parent().addClass('invalid');
  1960. $(_sqftField).nextAll('span.error').removeClass('show');
  1961. $(_sqftField).nextAll('span.error-v2').removeClass('show');
  1962. $(_sqftField).nextAll('span.error-v3').addClass('show');
  1963. return false;
  1964. }
  1965. }
  1966.  
  1967. if(type !== 'ROOM'){
  1968. if (sqft <= 99 || sqft >= 99999) {
  1969. //alert('Budget should be more than 1');
  1970. let _sqftField = $('#sqft');
  1971. _sqftField.removeClass("error");
  1972. $("span[for='" + _sqftField.attr('id') + "']").remove();
  1973. let label = $("label[for='" + _sqftField.attr('id') + "']");
  1974. _sqftField.addClass("error");
  1975. _sqftField.parent().addClass('invalid');
  1976. $(_sqftField).nextAll('span.error').removeClass('show');
  1977. $(_sqftField).nextAll('span.error-v2').addClass('show');
  1978. return false
  1979. }
  1980. }
  1981.  
  1982. if(name.length < 4){
  1983. alert('Name need to be at least 4 characters long.');
  1984. return false;
  1985. }
  1986.  
  1987. if(postcode.length != 5){
  1988. alert('Postcode needs to be 5 digit long.');
  1989. return false;
  1990. }
  1991.  
  1992. if(!isNormalInteger(postcode)){
  1993. let _postcodeField = $('#postcode');
  1994. _postcodeField.parent().addClass('invalid');
  1995. $(_postcodeField).nextAll('span.error').removeClass('show');
  1996. $(_postcodeField).nextAll('span.error-v2').removeClass('show');
  1997. $(_postcodeField).nextAll('span.error-v3').addClass('show');
  1998. return false;
  1999. }
  2000.  
  2001. if(!isNormalInteger(price)){
  2002. let _priceField = $('#price');
  2003. // alert('Please insert a valid value for price.');
  2004. _priceField.parent().addClass('invalid');
  2005. $(_priceField).nextAll('span.error').removeClass('show');
  2006. $(_priceField).nextAll('span.error-v2').removeClass('show');
  2007. $(_priceField).nextAll('span.error-v3').addClass('show');
  2008. return false;
  2009. }
  2010. } else if (
  2011. stepNumber == 1 &&
  2012. stepDirection == "forward" &&
  2013. edited == null
  2014. ){
  2015. debugger;
  2016. var count = 0;
  2017. for(var i = 0; i < 12; i++){
  2018. var val = $("#img" + i).css("background-image");
  2019. if (val != null && val != "" && val.startsWith('url("data:image')) {
  2020. count++;
  2021. }
  2022. }
  2023.  
  2024. if(count < 4){
  2025. // alert('Plese submit at least 4 photos.');
  2026. $.magnificPopup.open({
  2027. items: {
  2028. src: '#uploadPhotoError'
  2029. },
  2030. type: 'inline'
  2031. });
  2032. return false;
  2033. }
  2034.  
  2035. editListing();
  2036.  
  2037. return false;
  2038. //added
  2039. $('.status').removeClass('invalid');
  2040. }
  2041. });
  2042.  
  2043. var id = $("#propId").val();
  2044.  
  2045. function editListing(){
  2046. var name = $("#propName").val();
  2047. var type = $("#type").val();
  2048. var owner = checkIfTicked("negotiable");
  2049. var storeys = $("#storeys").val();
  2050. var furnishType = $('#furnishingTypeSelect option:selected').val();
  2051. var floor = $("#floor").val();
  2052. var address = $("#address").val();
  2053. var bathroom = $('#bathroom option:selected').val();
  2054. var postcode = $("#postcode").val();
  2055. var bedroom = $('#bedroom option:selected').val();
  2056. var sqft = $("#sqft").val();
  2057. var carpark = $('#carpark option:selected').val();
  2058. var price = $("#price").val();
  2059. var negotiable = checkIfTicked("negotiable");
  2060. var fullyFurnishable = checkIfTicked("fullyFurnishable");
  2061. var roomSize = $("#roomSize").val();
  2062. var roomPax = $("#roomPax").val();
  2063. var roomBathroom = $("#roomBathroom").val();
  2064. var description = $("#description").val();
  2065. var dateAvailable = $("#dateAvailable").val();
  2066. var furnishes = /*[[${property.furnishes}]]*/;
  2067. var facilities = /*[[${property.facilities}]]*/;
  2068.  
  2069. $('.loader-wrapper').show();
  2070.  
  2071. $.ajax({
  2072. url: "/api/post/edit",
  2073. data: JSON.stringify({
  2074. id : id,
  2075. name: name,
  2076. type: type,
  2077. owner: owner,
  2078. storeys: type == "LANDED" ? storeys : null,
  2079. level: type != "LANDED" ? floor : null,
  2080. roomType: type == "ROOM" ? roomSize : null,
  2081. address: address,
  2082. bathroom: bathroom,
  2083. bathroomType: type == "ROOM" ? roomBathroom : null,
  2084. postcode: postcode,
  2085. bedroom: bedroom,
  2086. sqft: sqft,
  2087. roommate: type == "ROOM" ? roomPax : null,
  2088. carpark: carpark,
  2089. price: price,
  2090. description: description,
  2091. dateAvailable : dateAvailable,
  2092. furnishType: furnishType,
  2093. negotiable: negotiable,
  2094. fullyFurnishable: fullyFurnishable,
  2095. furnishes: furnishes,
  2096. facilities: facilities
  2097. }),
  2098. type: "PUT",
  2099. dataType: "json",
  2100. contentType: "application/json; charset=utf-8",
  2101. success: function(data) {
  2102. propId = data.id;
  2103. edited = "Done";
  2104. propRef = data.ref;
  2105. deleteExistingPhotos();
  2106. },
  2107. error: function(response, error) {
  2108. $('.loader-wrapper').hide();
  2109. alert(response + " " + error);
  2110. }
  2111. });
  2112. }
  2113.  
  2114. function deleteExistingPhotos(){
  2115. for (i = 0 ; i < 12 ; i++) {
  2116. if($("#img" + i ).attr("class") == 'js--image-preview js--no-default-changed')
  2117. {
  2118. var value = $("#img" + i).attr("value");
  2119.  
  2120. if($("#img" + i).attr("value") !== undefined)
  2121. {
  2122. var imgId = $("#img" + i).attr("value");
  2123.  
  2124. $.ajax({
  2125. url: "/api/post/delete/image/" + imgId,
  2126. type: "DELETE",
  2127. async: false,
  2128. success: function(data){
  2129. uploadPhoto(i);
  2130. },
  2131. error: function(response, error) {
  2132. alert(response + " " +error);
  2133. }
  2134. });
  2135. } else {
  2136. uploadPhoto(i);
  2137. }
  2138. }
  2139. }
  2140.  
  2141. $('.loader-wrapper').hide();
  2142. $("#smartwizard").smartWizard("next");
  2143. window.scrollTo(0, 0);
  2144. $('.sw-btn-next').hide();
  2145. $('#btnFinish').show();
  2146. $('#btnFinish').removeClass( "disabledd" )
  2147. }
  2148. var tmpAnimation = 0;
  2149. $(".rotate-right").click(function(){
  2150. var element = $(this).parent().nextAll('.js--image-preview');
  2151. debugger;
  2152. let id= element[0].id.replace("img","")
  2153. let _elementUrl=element.css("background-image");
  2154. let data= _elementUrl.replace('url("','').replace('")','').toString();
  2155. tmpAnimation = tmpAnimation + 90;
  2156.  
  2157. $({degrees: tmpAnimation - 90}).animate({degrees: tmpAnimation}, {
  2158. duration: 200,
  2159. step: function(now) {
  2160. // element.css({
  2161. // transform: 'rotate(' + now + 'deg)'
  2162. // });
  2163. }
  2164. });
  2165. rotateBase64Image(data, element,id);
  2166. //uploadPhoto(id);
  2167. });
  2168.  
  2169. $(".rotate-left").click(function(){
  2170. var element = $(this).parent().nextAll('.js--image-preview');
  2171. tmpAnimation = tmpAnimation - 90;
  2172. let id= element[0].id.replace("img","")
  2173. let _elementUrl=element.css("background-image");
  2174. let data= _elementUrl.replace('url("','').replace('")','').toString();
  2175. $({degrees: tmpAnimation + 90}).animate({degrees: tmpAnimation}, {
  2176. duration: 200,
  2177. step: function(now) {
  2178. // element.css({
  2179. // transform: 'rotate(' + now + 'deg)'
  2180. // });
  2181. }
  2182. });
  2183. rotateBase64Image(data, element,id);
  2184. //uploadPhoto(id);
  2185. });
  2186.  
  2187.  
  2188. function rotateBase64Image(base64data, element,id) {
  2189. var canvas = document.getElementById("c");
  2190. var ctx = canvas.getContext("2d");
  2191. debugger;
  2192.  
  2193.  
  2194. var image = new Image();
  2195.  
  2196. image.src = base64data;
  2197. image.onload = function() {
  2198. debugger;
  2199. canvas.height = image.height;
  2200. canvas.width = image.width;
  2201. ctx.translate(image.width, image.height);
  2202. ctx.rotate(180 * Math.PI / 180);
  2203. ctx.drawImage(image, 0, 0);
  2204. callback(canvas.toDataURL(),id,element);
  2205. };
  2206. }
  2207.  
  2208. function uploadPhoto(i) {
  2209. debugger;
  2210. var coverPhoto = false;
  2211. var coverPhotoId= $('#coverPhotoId').val();
  2212. if (i == coverPhotoId) {
  2213. coverPhoto = true;
  2214. }
  2215.  
  2216. var val = $("#img" + i).css("background-image");
  2217.  
  2218. if (val != null && val != "" && val.startsWith('url("data:image')) {
  2219. $.ajax({
  2220. url: "/api/post/create/" + id + "/image",
  2221. data: JSON.stringify({ image: val, coverPhoto: coverPhoto }),
  2222. type: "POST",
  2223. dataType: "json",
  2224. contentType: "application/json; charset=utf-8",
  2225. success: function(data, response) {
  2226. //$('.loader-wrapper').hide();
  2227. },
  2228. error: function(response, error) {
  2229. $('.loader-wrapper').hide();
  2230. alert(response + " " + error);
  2231. }
  2232. });
  2233. }
  2234. }
  2235. function callback(base64data,i,element) {
  2236. debugger;
  2237. // console.log(base64data);
  2238. // var imgId = $("#img" + i).attr("value");
  2239. // $.ajax({
  2240. // url: "/api/post/delete/image/" + imgId,
  2241. // type: "DELETE",
  2242. // async: false,
  2243. // success: function(data){
  2244. // uploadBaseImage(base64data,imgId,i);
  2245. // },
  2246. // error: function(response, error) {
  2247. // alert(response + " " +error);
  2248. // }
  2249. // });
  2250. element.addClass('js--no-default-changed');
  2251. element.css({
  2252. 'background-image': 'url("'+base64data + '")'
  2253. });
  2254.  
  2255.  
  2256. }
  2257. function uploadBaseImage(base64data,id1,i) {
  2258. console.log(base64data);
  2259. var coverPhoto = false;
  2260. var coverPhotoId= $('#coverPhotoId').val();
  2261. if (i == coverPhotoId) {
  2262. coverPhoto = true;
  2263. }
  2264. let val = 'url("'+base64data + '")';
  2265. $.ajax({
  2266. url: "/api/post/create/" + id + "/image",
  2267. data: JSON.stringify({ image: val, coverPhoto: coverPhoto }),
  2268. type: "POST",
  2269. dataType: "json",
  2270. contentType: "application/json; charset=utf-8",
  2271. success: function(data, response) {
  2272. //$('.loader-wrapper').hide();
  2273. },
  2274. error: function(response, error) {
  2275. $('.loader-wrapper').hide();
  2276. alert(response + " " + error);
  2277. }
  2278. });
  2279. }
  2280. });
  2281.  
  2282.  
  2283. function checkIfTicked(tag) {
  2284. var result = document.getElementById(tag).checked;
  2285. return result;
  2286. }
  2287.  
  2288. function uploadListing(){
  2289. var name = $("#propName").val();
  2290. var type = $("#type").val();
  2291. var owner = checkIfTicked("negotiable");
  2292. var storeys = $("#storeys").val();
  2293. var floor = $("#floor").val();
  2294. var address = $("#address").val();
  2295. var bathroom = $("#bathroom").val();
  2296. var postcode = $("#postcode").val();
  2297. var bedroom = $("#bedroom").val();
  2298. var sqft = $("#sqft").val();
  2299. var carpark = $("#carpark").val();
  2300. var price = $("#price").val();
  2301. var negotiable = checkIfTicked("negotiable");
  2302. var fullyFurnishable = checkIfTicked("fullyFurnishable");
  2303. var furnishes = [];
  2304. var facilities = [];
  2305.  
  2306. if (checkIfTicked("cbTv")) {
  2307. furnishes.push("tv");
  2308. }
  2309. if (checkIfTicked("cbCurtain")) {
  2310. furnishes.push("curtain");
  2311. }
  2312. if (checkIfTicked("cbMattress")) {
  2313. furnishes.push("mattress");
  2314. }
  2315. if (checkIfTicked("cbWashingMachine")) {
  2316. furnishes.push("washing_machine");
  2317. }
  2318. if (checkIfTicked("cbHood")) {
  2319. furnishes.push("hood");
  2320. }
  2321. if (checkIfTicked("cbAc")) {
  2322. furnishes.push("ac");
  2323. }
  2324. if (checkIfTicked("cbWaterHeater")) {
  2325. furnishes.push("water_heater");
  2326. }
  2327. if (checkIfTicked("cbDiningTable")) {
  2328. furnishes.push("dining_table");
  2329. }
  2330. if (checkIfTicked("cbWardrobe")) {
  2331. furnishes.push("wardrobe");
  2332. }
  2333. if (checkIfTicked("cbKitchenCabinet")) {
  2334. furnishes.push("kitchen_cabinet");
  2335. }
  2336. if (checkIfTicked("cbOven")) {
  2337. furnishes.push("oven");
  2338. }
  2339. if (checkIfTicked("cbFridge")) {
  2340. furnishes.push("fridge");
  2341. }
  2342. if (checkIfTicked("cbSofa")) {
  2343. furnishes.push("sofa");
  2344. }
  2345. if (checkIfTicked("cbMicrowave")) {
  2346. furnishes.push("microwave");
  2347. }
  2348. if (checkIfTicked("cbBedframe")) {
  2349. furnishes.push("bed_frame");
  2350. }
  2351. if (checkIfTicked("cbInternet")) {
  2352. furnishes.push("internet");
  2353. }
  2354.  
  2355. if (checkIfTicked("cbBbq")) {
  2356. facilities.push("bbq");
  2357. }
  2358. if (checkIfTicked("cbGym")) {
  2359. facilities.push("gym");
  2360. }
  2361. if (checkIfTicked("cbBasketball")) {
  2362. facilities.push("basketball");
  2363. }
  2364. if (checkIfTicked("cbRestaurant")) {
  2365. facilities.push("restaurant");
  2366. }
  2367. if (checkIfTicked("cbDobby")) {
  2368. facilities.push("dobby");
  2369. }
  2370. if (checkIfTicked("cbNursery")) {
  2371. facilities.push("nursery");
  2372. }
  2373. if (checkIfTicked("cbPlayground")) {
  2374. facilities.push("playground");
  2375. }
  2376. if (checkIfTicked("cbSauna")) {
  2377. facilities.push("sauna");
  2378. }
  2379. if (checkIfTicked("cbSwimming")) {
  2380. facilities.push("swimming");
  2381. }
  2382. if (checkIfTicked("cbTennis")) {
  2383. facilities.push("tennis");
  2384. }
  2385. if (checkIfTicked("cbSecurity24hr")) {
  2386. facilities.push("security24hr");
  2387. }
  2388. if (checkIfTicked("cbMart")) {
  2389. facilities.push("mart");
  2390. }
  2391. if (checkIfTicked("cbSquash")) {
  2392. facilities.push("squash");
  2393. }
  2394. if (checkIfTicked("cbBadminton")) {
  2395. facilities.push("badminton");
  2396. }
  2397. if (checkIfTicked("cbElevator")) {
  2398. facilities.push("elevator");
  2399. }
  2400. if (checkIfTicked("cbCoveredParking")) {
  2401. facilities.push("covered_parking");
  2402. }
  2403.  
  2404. var description = $("#description").val();
  2405. var dateAvailable = $("#dateAvailable").val();
  2406.  
  2407. if (dateAvailable == "") {
  2408. alert("Please fill up your availability date");
  2409. return;
  2410. }
  2411.  
  2412. $('.loader-wrapper').show();
  2413. $.ajax({
  2414. url: "/api/post/update",
  2415. data: JSON.stringify({
  2416. id: propId,
  2417. description: description,
  2418. availability: dateAvailable,
  2419. petFriendly: checkIfTicked("cbPet"),
  2420. allRaces: checkIfTicked("cbAllRace"),
  2421. furnishes: furnishes,
  2422. facilities: facilities
  2423. }),
  2424. type: "PUT",
  2425. dataType: "json",
  2426. contentType: "application/json; charset=utf-8",
  2427. success: function(data, response) {
  2428. $('.loader-wrapper').hide();
  2429. localStorage.setItem("Success","Status")
  2430. window.location.href = [[${@urlHelper.format(language, '/dashboard/listings')}]];
  2431. },
  2432. error: function(response, error) {
  2433. $('.loader-wrapper').hide();
  2434. alert(response + " " + error);
  2435. }
  2436. });
  2437. }
  2438.  
  2439. // Toolbar extra buttons
  2440. var btnFinish = $('<button id="btnFinish"></button>').text('Finish')
  2441. .addClass('btn btn-secondary sw-btn-next');
  2442.  
  2443. // Smart Wizard initialize
  2444. $("#smartwizard").smartWizard({
  2445. selected: 0,
  2446. theme: "dots",
  2447. transitionEffect: "fade",
  2448. showStepURLhash: false,
  2449. anchorSettings: {
  2450. markDoneStep: true, // add done css
  2451. markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
  2452. removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
  2453. enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  2454. },
  2455. toolbarSettings: {
  2456. toolbarPosition: "bottom",
  2457. toolbarExtraButtons: [btnFinish]
  2458. }
  2459. });
  2460.  
  2461. // External Button Events
  2462. $("#reset-btn").on("click", function() {
  2463. // Reset wizard
  2464. $("#smartwizard").smartWizard("reset");
  2465. return true;
  2466. });
  2467.  
  2468. $("#prev-btn").on("click", function() {
  2469. // Navigate previous
  2470. $("#smartwizard").smartWizard("prev");
  2471. return true;
  2472. });
  2473.  
  2474. $("#next-btn").on("click", function() {
  2475. // Navigate next
  2476. $("#smartwizard").smartWizard("next");
  2477. return true;
  2478. });
  2479.  
  2480. $("#theme_selector").on("change", function() {
  2481. // Change theme
  2482. $("#smartwizard").smartWizard("theme", $(this).val());
  2483. return true;
  2484. });
  2485.  
  2486. $(document).ready(function() {
  2487. setTimeout(function() {
  2488. window.scrollTo(0, 0);
  2489. }, 1);
  2490.  
  2491. $('#btnFinish').hide();
  2492.  
  2493. $("#btnFinish").click(function() {
  2494. uploadListing();
  2495. });
  2496. });
  2497.  
  2498. $(".progressbar li").each(function() {
  2499. if (
  2500. $(this)
  2501. .next("li")
  2502. .hasClass("done")
  2503. ) {
  2504. debugger;
  2505. $(this).addClass("done");
  2506. }
  2507. });
  2508.  
  2509. function isNormalInteger(str) {
  2510. var n = Math.floor(Number(str));
  2511. return n !== Infinity && String(n) === str && n > 0;
  2512. }
  2513. $('#type').prop('disabled', 'disabled');
  2514. </script>
  2515. <script th:inline="javascript">
  2516. $(document).ready(function() {
  2517. var propImages = /*[[${property.images}]]*/;
  2518. for(var i=0; i<propImages.length; i++){
  2519. if(propImages[i].coverPhoto)
  2520. markCoverPhoto(i);
  2521. }
  2522.  
  2523. });
  2524. function markCoverPhoto(i){
  2525. var setCoverPhoto=/*[[#{button.set_cover_photo}]]*/;
  2526. var coverPhoto=/*[[#{button.cover_photo}]]*/;
  2527. for(var j=0; j<12; j++){
  2528. if(i!=j)
  2529. $('#setCoverPhotoBtn'+j).html(setCoverPhoto);
  2530. else
  2531. $('#setCoverPhotoBtn'+j).html(coverPhoto);
  2532. }
  2533. }
  2534.  
  2535. function setAsCoverPhoto(i){
  2536. $('#coverPhotoId').val(i);
  2537.  
  2538. if($("#img" + i ).attr("class") != 'js--image-preview js--no-default-changed'){
  2539. if($("#img" + i).attr("value") !== undefined){
  2540.  
  2541. var propId = $("#propId").val();
  2542. var imgId = $("#img" + i).attr("value");
  2543.  
  2544. $.ajax({
  2545. url: "/api/post/update/"+propId+"/image/" + imgId,
  2546.  
  2547. data: JSON.stringify({
  2548. coverPhoto:true
  2549. }),
  2550. type: "PUT",
  2551. dataType: "json",
  2552. contentType: "application/json; charset=utf-8",
  2553. async: false,
  2554. success: function(data){
  2555. markCoverPhoto(i);
  2556. },
  2557. error: function(response, error) {
  2558. var errormsg=/*[[#{error_message.set_cover_photo}]]*/;
  2559. alert(errormsg);
  2560. }
  2561. });
  2562. }
  2563. }
  2564. }
  2565.  
  2566.  
  2567.  
  2568.  
  2569. if($('.js--image-preview').attr('style')){
  2570. $(this).parent().addClass('show')
  2571. }
  2572. </script>
  2573.  
  2574. </body>
  2575. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!