API tools faq
paste
Guest User

Untitled

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