API tools faq
paste
Advertisement
Guest User

edit.html

a guest
Nov 18th, 2018
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.08 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  4. <meta charset="UTF-8">
  5. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  7. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  8. <style>
  9. body{background-image:url('./img/index.jpg');background-repeat:no-repeat;background-size: 100%;background-attachment: fixed;}
  10. .bg{background-color: rgba(0,0,0, 0.7);color:white;}
  11. </style>
  12. </head>
  13. <body>
  14. <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  15. <h5 class="my-0 mr-md-auto font-weight-normal"><img style="max-height:50px;" src="./img/icons.png"></h5>
  16. <nav class="my-2 my-md-0 mr-md-3">
  17. <a class="p-2 text-dark" href="liste.html#achat">Acheter</a>
  18. <a class="p-2 text-dark" href="liste.html#louer">Louer</a>
  19. <a class="p-2 text-dark" href="liste.html#perso">Voir vos biens</a>
  20. <a class="p-2 text-dark" href="#" id="leave">Quitter</a>
  21. </nav>
  22. <a class="btn btn-outline-danger" href="recherche.html" id="btn-admin" style="display:none;">Admin Panel</a>
  23. </div>
  24. <div class="container-fluid" style="max-width: 80%;">
  25. <div id="alert-container"></div>
  26. <div class="row">
  27. <div class="col-md-3">
  28. <div class="bg mb-4 shadow-sm" id="card">
  29. <img class="card-img-top" data-src="holder.js/100px200/" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
  30. <div class="card-body">
  31. <h4 class="card-title pricing-card-title adresse"></h4>
  32. <ul class="list-unstyled mt-3 mb-4 info">
  33. </ul>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="col-md-5">
  38. <div class="bg">
  39. <div class="card-header">
  40. Gestion de la location
  41. </div>
  42. <div class="card-body">
  43. <p class="card-text">Vous pouvez depuis cette page activer la location et définir le loyer. Vous pouvez aussi gèrer vos locataires</p>
  44. <p class="card-text">
  45. Liste de vos locataires :
  46. <ul id="locataire">
  47. </ul>
  48. </p>
  49. <button class="btn btn-primary btn-block" data-type="loyer">Virer les loyers sur votre compte</button>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="col-md-4">
  54. <div class="bg">
  55. <div class="card-header">
  56. Gestion du biens
  57. </div>
  58. <div class="card-body" style="text-align:center">
  59. <p class="card-text">Modifier le montant du loyer de votre bien</p>
  60. <form class="form-inline">
  61. <div class="form-group mx-sm-3 mb-2">
  62. <input type="number" class="form-control" id="prixloc" placeholder="Montant du loyer">
  63. </div>
  64. <button type="submit" class="btn btn-primary mb-2" data-type="prixlocation">Modifier le prix</button>
  65. </form>
  66. <p class="card-text">Activer ou non la location de votre bien</p>
  67. <p class="card-text">
  68. <button id="locationBtn" class="btn mb-2" data-type="location"></button>
  69. </p>
  70. <p class="card-text">Vous souhaitez vous séparer de votre bien ? C'est par ici</p>
  71. <p class="card-text">
  72. <button class="btn btn-danger mb-2" data-type="vendre">Revendre votre bien</button>
  73. </p>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div id="alert" class="alert alert-dismissible fade show" role="alert" style="display:none;">
  80. <span class="alert-message"></span>
  81. <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  82. <span aria-hidden="true">&times;</span>
  83. </button>
  84. </div>
  85. <script>
  86. let id;
  87. updateMaison = (maison) => {
  88. id = maison.id
  89. console.log(maison)
  90. $(() => {
  91. let $maison = $("#card")
  92. $maison.find(".adresse").html(maison.adresse)
  93. $maison.find("img").attr("src", "img/" + maison.type.id + '.jpg')
  94. $ulInfo = $maison.find(".info")
  95. $ulInfo.empty()
  96. $li = $("<li></li>")
  97. $ulInfo.append($li.clone().html("Valeur du bien : " + maison.prixAchat + "$"))
  98. $ulInfo.append($li.clone().html("Surface : " + m2parType[maison.type.id] + " m²"))
  99. $ulInfo.append($li.clone().html("Locataire : " + maison.locataires.length + '/' + maison.type.maxLocataire))
  100. if(maison.location_status == 1) {
  101. $ulInfo.append($li.clone().html('Location : <span style="font-weight:700;color:green;">Activée</span>'))
  102. $("#locationBtn").removeClass("btn-success").addClass("btn-danger").html("Désactiver la location")
  103. }else {
  104. $ulInfo.append($li.clone().html('Location : <span style="font-weight:700;color:red;">Deactivée</span>'))
  105. $("#locationBtn").removeClass("btn-danger").addClass("btn-success").html("Activer la location")
  106. }
  107. $ulInfo.append($li.clone().html("Montant du loyer : " + maison.prixLocation + "$"))
  108. $ulInfo.append($li.clone().html("Loyer à virer : " + maison.coffre + "$"))
  109.  
  110. $locataire = $("#locataire")
  111. $locataire.empty()
  112. if(maison.listLocataire.length) {
  113. maison.listLocataire.forEach(loc => {
  114. $locataire.append("<li>" + loc.pName +" <a class=\"virer\" data-id=\""+ loc.pId +"\" href=\"#\">Virer</a></li>")
  115. });
  116. }else {
  117. $locataire.append("<li>Vous n'avez aucun locataire</li>")
  118. }
  119. })
  120. }
  121. $(() => {
  122. id = window.location.hash.replace("#", "")
  123. mp.trigger("serverCallMaison", "maison-needMaisonInfo", id);
  124.  
  125. $(document).on("click", ".btn", (e) => {
  126. let type = $(e.target).data("type");
  127. let data = { type, id }
  128. if(type == "prixlocation") {
  129. data.prix = parseInt($("#prixloc").val())
  130. if(isNaN(data.prix)) {
  131. newMessage("danger", "Le prix de location saisis est incorect")
  132. return
  133. }
  134. }
  135. mp.trigger("serverCallMaison", "maison-needMaisonAction", JSON.stringify(data));
  136.  
  137. })
  138. $(document).on("click", ".virer", (e) => {
  139. let type = "virer";
  140. let idLoc = $(e.target).data("id");
  141. mp.trigger("serverCallMaison", "maison-needMaisonAction", JSON.stringify({ type, id, idLoc }));
  142. })
  143. })
  144. </script>
  145. <script src="events.js"></script>
  146. </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!