dimitrix85

Fisher-Game

Nov 16th, 2019
57
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let actions = {
  2.     addBtn: () => addFish(),
  3.     load: () => loadAll(),
  4.     delete: (e) => deleteFish(e),
  5.     update: (e) => updateFish(e)
  6. }
  7.  
  8. let htmlElements = {
  9.     catches: () => document.getElementById("catches"),
  10.     addform: () => document.getElementById("addForm")
  11. }
  12.  
  13. function attachEvents() {
  14.     document.addEventListener("click", handlerEvent)
  15. }
  16.  
  17. function addFish() {
  18.  
  19.     let node = htmlElements.addform();
  20.  
  21.     let newFish = {
  22.         angler: node.children[2].value,
  23.         weight: node.children[4].value,
  24.         species: node.children[6].value,
  25.         location: node.children[8].value,
  26.         bait: node.children[10].value,
  27.         captureTime: node.children[12].value,
  28.     }
  29.     let header = makeHeaders("POST", newFish);
  30.  
  31.     requestHandler(header)
  32.         .then(() => {
  33.             loadAll();
  34.         })
  35. }
  36.  
  37. function deleteFish(e) {
  38.     let header = makeHeaders("DELETE");
  39.     let fishId = e.target.attributes["targetId"].value;
  40.  
  41.     requestHandler(header, fishId)
  42.         .then(() => {
  43.             loadAll();
  44.         })
  45. }
  46.  
  47. function loadAll() {
  48.     let header = makeHeaders("GET");
  49.     requestHandler(header)
  50.         .then(x => {
  51.             htmlElements.catches().innerHTML = "";
  52.             Object.entries(x).forEach(element => {
  53.                 let [id, data] = element;
  54.                 let hr = document.createElement("hr");
  55.                 let fragment = document.createDocumentFragment();
  56.                 let catchtDiv = document.createElement("div");
  57.                 catchtDiv.classList.add("catch");
  58.                 catchtDiv.setAttribute("data-id", id);
  59.  
  60.                 let angler = createInput("Angler", "text", "angler", data.angler);
  61.                 let weight = createInput("Weight", "number", "weight", data.weight);
  62.                 let species = createInput("Species", "text", "species", data.species);
  63.                 let location = createInput("Location", "text", "location", data.location);
  64.                 let bait = createInput("Bait", "text", "bait", data.bait);
  65.                 let captureTime = createInput("Capture Time", "number", "captureTime", data.captureTime);
  66.                 let updateBtn = createBtn("Update", "update", "update", id);
  67.                 let deleteBtn = createBtn("Delete", "delete", "delete", id);
  68.  
  69.                 fragment
  70.                     .append(angler.label, angler.input, angler.hr,
  71.                         weight.label, weight.input, weight.hr,
  72.                         species.label, species.input, species.hr,
  73.                         location.label, location.input, location.hr,
  74.                         bait.label, bait.input, bait.hr,
  75.                         captureTime.label, captureTime.input, captureTime.hr,
  76.                         updateBtn, deleteBtn);
  77.                 catchtDiv.append(fragment);
  78.                 htmlElements.catches().append(catchtDiv);
  79.  
  80.             });
  81.         });
  82. }
  83.  
  84. function updateFish(e){
  85.  
  86.     let node = e.target.parentElement;
  87.     let id = node.attributes["data-id"].value;
  88.     let fish = {
  89.         angler: node.children[1].value,
  90.         weight: node.children[4].value,
  91.         species: node.children[7].value,
  92.         location: node.children[10].value,
  93.         bait: node.children[13].value,
  94.         captureTime: node.children[16].value,
  95.     }
  96. debugger;
  97.     let header = makeHeaders("PUT", fish)
  98.  
  99.     requestHandler(header,id)
  100.     .then(()=>{
  101.         loadAll();
  102.     })
  103. }
  104.  
  105.  
  106. function handlerEvent(e) {
  107.     if (typeof actions[e.target.id] === "function") {
  108.         actions[e.target.id](e);
  109.     }
  110. }
  111.  
  112. function createInput(content, type, clas, value) {
  113.     let label = document.createElement("label");
  114.     label.textContent = content;
  115.     let input = document.createElement("input");
  116.     input.type = type;
  117.     input.classList.add(clas);
  118.     input.defaultValue = value;
  119.     let hr = document.createElement("hr");
  120.     return {
  121.         label,
  122.         input,
  123.         hr
  124.     }
  125. }
  126.  
  127. function createBtn(content, clas, tagId, id) {
  128.     let btn = document.createElement("button");
  129.     btn.textContent = content;
  130.     btn.setAttribute("targetId", id);
  131.     btn.id = tagId;
  132.     btn.classList.add(clas);
  133.  
  134.     return btn;
  135. }
  136.  
  137. function requestHandler(headers, id) {
  138.     let baseUrl = "https://fisher-game.firebaseio.com/catches"
  139.  
  140.     if (id) {
  141.         baseUrl = baseUrl + `/${id}.json`
  142.     }
  143.     else {
  144.         baseUrl = baseUrl + ".json"
  145.     }
  146.  
  147.     return fetch(baseUrl, headers).then(handelError).then(x => x.json());
  148.  
  149. }
  150.  
  151. function handelError(x) {
  152.     if (!x.ok) {
  153.         throw new Error("Bad request");
  154.     }
  155.  
  156.     return x;
  157. }
  158.  
  159. function makeHeaders(method, body) {
  160.  
  161.     let header = {
  162.         method: method,
  163.         headers: {
  164.             "Content-Type": "application/json"
  165.         }
  166.     }
  167.  
  168.     if (method === "POST" || method === "PUT") {
  169.         header.body = JSON.stringify(body);
  170.     }
  171.  
  172.     return header;
  173. }
  174.  
  175. attachEvents();
RAW Paste Data