SHARE
TWEET

Untitled

a guest Nov 17th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2.     myFetch
  3. } from "./myFetch.js";
  4.  
  5. const html = {
  6.     $catches: () => document.getElementById("catches"),
  7.     $form: () => document.getElementById("addForm"),
  8.     $loadBtn: () => document.querySelector("button.load"),
  9.     $addBtn: () => document.querySelector("button.add"),
  10.     $weight: (x) => x.querySelector("input.weight"),
  11.     $angler: (x) => x.querySelector("input.angler"),
  12.     $species: (x) => x.querySelector("input.species"),
  13.     $location: (x) => x.querySelector("input.location"),
  14.     $captureTime: (x) => x.querySelector("input.captureTime"),
  15.     $bait: (x) => x.querySelector("input.bait"),
  16.     $updateBtn: (x) => x.querySelector("button.update"),
  17.     $deleteBtn: (x) => x.querySelector("button.delete")
  18. };
  19.  
  20. const copyOfExample = document.querySelector("#catches>div:nth-child(1)").cloneNode(true);
  21.  
  22. function addCatch() {
  23.     const state = html.$form();
  24.     const body = {
  25.         "angler": html.$angler(state).value,
  26.         "bait": html.$bait(state).value,
  27.         "captureTime": html.$captureTime(state).value,
  28.         "location": html.$location(state).value,
  29.         "species": html.$species(state).value,
  30.         "weight": html.$weight(state).value
  31.     }
  32.  
  33.     myFetch("POST", body);
  34.     showCatches()
  35. }
  36.  
  37. async function showCatches() {
  38.     let data = await myFetch();
  39.  
  40.     clearHtml()
  41.     Object.entries(data).forEach((el) => {
  42.         createCatch(el);
  43.     });
  44. }
  45.  
  46. function createCatch(data) {
  47.     let copy = copyOfExample.caaloneNode(true);
  48.  
  49.     let [id, stats] = data;
  50.     copy.setAttribute("data-id", id);
  51.  
  52.     Object.entries(stats).forEach(([stat, val]) => {
  53.         html[`$${stat}`](copy).value = val;
  54.     });
  55.  
  56.     const updateBinded = updateCatch.bind(copy, id);
  57.     const deleteBinded = deleteCatch.bind(copy, id);
  58.  
  59.     html.$updateBtn(copy).addEventListener("click", updateBinded);
  60.     html.$deleteBtn(copy).addEventListener("click", deleteBinded);
  61.  
  62.     html.$catches().appendChild(copy);
  63. }
  64.  
  65. function updateCatch(id) {
  66.  
  67. }
  68.  
  69. function deleteCatch(id) {
  70.     myFetch('DELETE', undefined, id);
  71.     showCatches();
  72. }
  73.  
  74. function clearHtml() {
  75.     html.$catches().innerHTML = '';
  76. }
  77.  
  78. function attachEvents() {
  79.     html.$loadBtn().addEventListener("click", showCatches);
  80.     html.$addBtn().addEventListener("click", addCatch);
  81. }
  82.  
  83. attachEvents();
  84.  
  85. -------------------------------------------------------
  86. function generateURL(id = "") {
  87.     return `https://bus-stops-54acb.firebaseio.com/Fisher/${id}/.json`;
  88. }
  89.  
  90. const methodsHeaders = {
  91.     POST: (body) => {
  92.         return {
  93.             method: "POST",
  94.             headers: {
  95.                 "content-type": "application/json"
  96.             },
  97.             body: JSON.stringify(body)
  98.         };
  99.     },
  100.     UPDATE: (body) => {
  101.         return {
  102.             method: "PUT",
  103.             headers: {
  104.                 "content-type": "application. json"
  105.             },
  106.             body: JSON.stringify(body)
  107.         };
  108.     },
  109.     DELETE: () => {
  110.         return {
  111.             method: "DELETE"
  112.         };
  113.     }
  114. };
  115.  
  116. export function myFetch(method,body,id) {
  117.     if (method) {
  118.         const header = methodsHeaders[method](body);
  119.  
  120.         return id ?
  121.             fetch(generateURL(id), header) :
  122.             fetch(generateURL(), header);
  123.     }
  124.  
  125.     return fetch(generateURL()).then((d) => d.json());
  126. }
RAW Paste Data
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
 
Top