API tools faq
paste
Guest User

Untitled

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