Advertisement
Guest User

Untitled

a guest
Aug 30th, 2018
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.72 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Biggest Catch</title>
  6. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7.  
  8. <style>
  9. h1 { text-align: center; }
  10. input { display: block; }
  11. div { border: 1px solid black; padding: 5px; display: inline-table; width: 24%; }
  12. div#aside { margin-top: 8px; width: 15%; border: 2px solid grey; }
  13. div#catches{ width:auto; }
  14. button { display: inline-table; margin: 5% 0 5% 5%; width: 39%; }
  15. button.add { width: 90%; }
  16. button.load { width: 90%; padding: 10px; }
  17. button.load { vertical-align: top; }
  18. fieldset { display: inline-table; vertical-align: top; }
  19. fieldset#main { width: 70%; }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>Biggest Catches</h1>
  24. <fieldset id="main">
  25. <legend>Catches</legend>
  26. <div id="catches">
  27. <div class="catch" data-id="<id-goes-here>">
  28. <label>Angler</label>
  29. <input type="text" class="angler" value="Paulo Amorim"/>
  30. <label>Weight</label>
  31. <input type="number" class="weight" value="636"/>
  32. <label>Species</label>
  33. <input type="text" class="species" value="Atlantic Blue Marlin"/>
  34. <label>Location</label>
  35. <input type="text" class="location" value="Vitória, Brazil"/>
  36. <label>Bait</label>
  37. <input type="text" class="bait" value="trolled pink"/>
  38. <label>Capture Time</label>
  39. <input type="number" class="captureTime" value="80"/>
  40. <button class="update">Update</button>
  41. <button class="delete">Delete</button>
  42. </div>
  43. </div>
  44. </fieldset>
  45. <div id="aside">
  46. <button class="load">Load</button>
  47. <fieldset id="addForm">
  48. <legend>Add Catch</legend>
  49. <label>Angler</label>
  50. <input type="text" class="angler"/>
  51. <label>Weight</label>
  52. <input type="number" class="weight"/>
  53. <label>Species</label>
  54. <input type="text" class="species"/>
  55. <label>Location</label>
  56. <input type="text" class="location"/>
  57. <label>Bait</label>
  58. <input type="text" class="bait"/>
  59. <label>Capture Time</label>
  60. <input type="number" class="captureTime"/>
  61. <button class="add">Add</button>
  62. </fieldset>
  63. </div>
  64. <script>
  65. function attachEvents(){
  66.  
  67. const USERNAME = "Simeon";
  68. const PASSWORD = "s";
  69. const BASE_64 = btoa(USERNAME + ":" + PASSWORD);
  70. const AUTH = {"Authorization": "Basic " + BASE_64};
  71. const serviseUrl = `https://baas.kinvey.com/appdata/kid_rJfaJ1xP7/biggestCatches`;
  72.  
  73. let arrayOfForms = [];
  74.  
  75. $(".load").on("click", loadForms);
  76. $(".add").on("click", addForms);
  77. $(".delete").on("click", deleteForms);
  78. //$(".update").on("click", updateForms);//
  79.  
  80. //$("[data-id]").remove();
  81.  
  82. function loadForms() {
  83. $.ajax({
  84. method: "GET",
  85. url: serviseUrl,
  86. headers: AUTH
  87. }).then(function (response) {
  88.  
  89. arrayOfForms = response;
  90. updateCatches();
  91.  
  92.  
  93. }).catch(function () {
  94.  
  95. })
  96.  
  97. }
  98. function updateCatches() {
  99. $("#catches").empty();
  100. arrayOfForms.map(res => {
  101. let div = $(`<div class='catch' id='${res._id}'>`);
  102. div.append($("<label>Angler</label>"));
  103. div.append($(`<input type="text" class='angler' value="${res.angler}"/>`));
  104. div.append($("<label>Weight</label>"));
  105. div.append($(`<input type="number" class="weight" value="${res.weight}"/>`));
  106. div.append($("<label>Species</label>"));
  107. div.append($(`<input type="text" class='species' value="${res.species}"/>`));
  108. div.append($("<label>Location</label>"));
  109. div.append($(`<input type="text" class='location' value="${res.location}"/>`));
  110. div.append($("<label>Bait</label>"));
  111. div.append($(`<input type="text" class='bait' value="${res.bait}"/>`));
  112. div.append($("<label>Capture Time</label>"));
  113. div.append($(`<input type="number" class='captureTime' value="${res.captureTime}"/>`));
  114. div.append($("<button class='update'>Update</button>"));
  115. div.append($("<button class='delete'>Delete</button>"));
  116.  
  117. $("#catches").append(div);
  118. $("#main").append($("#catches"));
  119.  
  120. $(".delete").on("click", deleteForms);
  121. $(".update").on("click", updateForms);
  122. })
  123. }
  124. function addForms() {
  125.  
  126. let angler = $("#addForm input.angler").val();
  127. let weight = $("#addForm input.weight").val();
  128. let species = $("#addForm input.species").val();
  129. let location = $("#addForm input.location").val();
  130. let bait = $("#addForm input.bait").val();
  131. let captureTime = $("#addForm input.captureTime").val();
  132.  
  133. $.ajax({
  134. method: "Post",
  135. url: serviseUrl,
  136. headers: AUTH,
  137. data: {"angler": angler, "weight": weight, "species": species, "location": location, "bait": bait, "captureTime": captureTime}
  138. }).then(function () {
  139. $("#addForm input.angler").val("");
  140. $("#addForm input.weight").val("");
  141. $("#addForm input.species").val("");
  142. $("#addForm input.location").val("");
  143. $("#addForm input.bait").val("");
  144. $("#addForm input.captureTime").val("");
  145.  
  146. loadForms();
  147. }).catch(function () {
  148.  
  149. })
  150. }
  151. function deleteForms(){
  152.  
  153. let formId = $(this).closest(".catch").attr("id");
  154. let form = arrayOfForms.find(obj => {
  155. return obj._id === formId
  156. });
  157.  
  158. $.ajax({
  159. method: "DELETE",
  160. url: serviseUrl + "/" + formId,
  161. headers: AUTH,
  162. data: {"angler": form.angler, "weight": form.weight, "species": form.species, "location": form.location, "bait": form.bait, "captureTime": form.captureTime}
  163.  
  164. }).then(function () {
  165.  
  166. loadForms();
  167. }).catch(function (err) {
  168.  
  169.  
  170. })
  171.  
  172.  
  173.  
  174. }
  175.  
  176. function updateForms() {
  177. let formId = $(this).closest(".catch").attr("id");
  178. let form = arrayOfForms.find(obj => {
  179. return obj._id === formId
  180.  
  181. });
  182. form.angler = $("#" + form._id + " .angler").val()
  183. form.weight = $("#" + form._id + " .weight").val()
  184. form.species = $("#" + form._id + " .species").val()
  185. form.location = $("#" + form._id + " .location").val()
  186. form.bait = $("#" + form._id + " .bait").val()
  187. form.captureTime = $("#" + form._id + " .captureTime").val()
  188.  
  189. console.log(form.angler);
  190. $.ajax({
  191. method: "PUT",
  192. url: serviseUrl + "/" + formId,
  193. headers: AUTH,
  194. data: {"angler": form.angler, "weight": form.weight, "species": form.species, "location": form.location, "bait": form.bait, "captureTime": form.captureTime}
  195.  
  196. }).then(function () {
  197. console.log("Upgraded");
  198. loadForms();
  199. }).catch(function (err) {
  200.  
  201.  
  202. })
  203. }
  204. }
  205. attachEvents()
  206. </script>
  207. </body>
  208. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement