Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Biggest Catch</title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- <style>
- h1 { text-align: center; }
- input { display: block; }
- div { border: 1px solid black; padding: 5px; display: inline-table; width: 24%; }
- div#aside { margin-top: 8px; width: 15%; border: 2px solid grey; }
- div#catches{ width:auto; }
- button { display: inline-table; margin: 5% 0 5% 5%; width: 39%; }
- button.add { width: 90%; }
- button.load { width: 90%; padding: 10px; }
- button.load { vertical-align: top; }
- fieldset { display: inline-table; vertical-align: top; }
- fieldset#main { width: 70%; }
- </style>
- </head>
- <body>
- <h1>Biggest Catches</h1>
- <fieldset id="main">
- <legend>Catches</legend>
- <div id="catches">
- <div class="catch" data-id="<id-goes-here>">
- <label>Angler</label>
- <input type="text" class="angler" value="Paulo Amorim"/>
- <label>Weight</label>
- <input type="number" class="weight" value="636"/>
- <label>Species</label>
- <input type="text" class="species" value="Atlantic Blue Marlin"/>
- <label>Location</label>
- <input type="text" class="location" value="Vitória, Brazil"/>
- <label>Bait</label>
- <input type="text" class="bait" value="trolled pink"/>
- <label>Capture Time</label>
- <input type="number" class="captureTime" value="80"/>
- <button class="update">Update</button>
- <button class="delete">Delete</button>
- </div>
- </div>
- </fieldset>
- <div id="aside">
- <button class="load">Load</button>
- <fieldset id="addForm">
- <legend>Add Catch</legend>
- <label>Angler</label>
- <input type="text" class="angler"/>
- <label>Weight</label>
- <input type="number" class="weight"/>
- <label>Species</label>
- <input type="text" class="species"/>
- <label>Location</label>
- <input type="text" class="location"/>
- <label>Bait</label>
- <input type="text" class="bait"/>
- <label>Capture Time</label>
- <input type="number" class="captureTime"/>
- <button class="add">Add</button>
- </fieldset>
- </div>
- <script>
- function attachEvents(){
- const USERNAME = "Simeon";
- const PASSWORD = "s";
- const BASE_64 = btoa(USERNAME + ":" + PASSWORD);
- const AUTH = {"Authorization": "Basic " + BASE_64};
- const serviseUrl = `https://baas.kinvey.com/appdata/kid_rJfaJ1xP7/biggestCatches`;
- let arrayOfForms = [];
- $(".load").on("click", loadForms);
- $(".add").on("click", addForms);
- $(".delete").on("click", deleteForms);
- //$(".update").on("click", updateForms);//
- //$("[data-id]").remove();
- function loadForms() {
- $.ajax({
- method: "GET",
- url: serviseUrl,
- headers: AUTH
- }).then(function (response) {
- arrayOfForms = response;
- updateCatches();
- }).catch(function () {
- })
- }
- function updateCatches() {
- $("#catches").empty();
- arrayOfForms.map(res => {
- let div = $(`<div class='catch' id='${res._id}'>`);
- div.append($("<label>Angler</label>"));
- div.append($(`<input type="text" class='angler' value="${res.angler}"/>`));
- div.append($("<label>Weight</label>"));
- div.append($(`<input type="number" class="weight" value="${res.weight}"/>`));
- div.append($("<label>Species</label>"));
- div.append($(`<input type="text" class='species' value="${res.species}"/>`));
- div.append($("<label>Location</label>"));
- div.append($(`<input type="text" class='location' value="${res.location}"/>`));
- div.append($("<label>Bait</label>"));
- div.append($(`<input type="text" class='bait' value="${res.bait}"/>`));
- div.append($("<label>Capture Time</label>"));
- div.append($(`<input type="number" class='captureTime' value="${res.captureTime}"/>`));
- div.append($("<button class='update'>Update</button>"));
- div.append($("<button class='delete'>Delete</button>"));
- $("#catches").append(div);
- $("#main").append($("#catches"));
- $(".delete").on("click", deleteForms);
- $(".update").on("click", updateForms);
- })
- }
- function addForms() {
- let angler = $("#addForm input.angler").val();
- let weight = $("#addForm input.weight").val();
- let species = $("#addForm input.species").val();
- let location = $("#addForm input.location").val();
- let bait = $("#addForm input.bait").val();
- let captureTime = $("#addForm input.captureTime").val();
- $.ajax({
- method: "Post",
- url: serviseUrl,
- headers: AUTH,
- data: {"angler": angler, "weight": weight, "species": species, "location": location, "bait": bait, "captureTime": captureTime}
- }).then(function () {
- $("#addForm input.angler").val("");
- $("#addForm input.weight").val("");
- $("#addForm input.species").val("");
- $("#addForm input.location").val("");
- $("#addForm input.bait").val("");
- $("#addForm input.captureTime").val("");
- loadForms();
- }).catch(function () {
- })
- }
- function deleteForms(){
- let formId = $(this).closest(".catch").attr("id");
- let form = arrayOfForms.find(obj => {
- return obj._id === formId
- });
- $.ajax({
- method: "DELETE",
- url: serviseUrl + "/" + formId,
- headers: AUTH,
- data: {"angler": form.angler, "weight": form.weight, "species": form.species, "location": form.location, "bait": form.bait, "captureTime": form.captureTime}
- }).then(function () {
- loadForms();
- }).catch(function (err) {
- })
- }
- function updateForms() {
- let formId = $(this).closest(".catch").attr("id");
- let form = arrayOfForms.find(obj => {
- return obj._id === formId
- });
- form.angler = $("#" + form._id + " .angler").val()
- form.weight = $("#" + form._id + " .weight").val()
- form.species = $("#" + form._id + " .species").val()
- form.location = $("#" + form._id + " .location").val()
- form.bait = $("#" + form._id + " .bait").val()
- form.captureTime = $("#" + form._id + " .captureTime").val()
- console.log(form.angler);
- $.ajax({
- method: "PUT",
- url: serviseUrl + "/" + formId,
- headers: AUTH,
- data: {"angler": form.angler, "weight": form.weight, "species": form.species, "location": form.location, "bait": form.bait, "captureTime": form.captureTime}
- }).then(function () {
- console.log("Upgraded");
- loadForms();
- }).catch(function (err) {
- })
- }
- }
- attachEvents()
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement