Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- let loadButton = document.querySelector('main aside .load');
- loadButton.addEventListener('click', getCatches);
- let catchesContainer = document.getElementById('catches');
- catchesContainer.querySelectorAll('.catch').forEach(x => x.remove());
- let addButton = document.querySelector('#addForm .add');
- addButton.disabled = localStorage.getItem('token') === null;
- addButton.addEventListener('click', createCatch);
- async function getCatches() {
- let url = 'http://localhost:3030/data/catches';
- let getCatchesResponse = await fetch(url);
- let catches = await getCatchesResponse.json();
- console.log(catches);
- catchesContainer.querySelectorAll('.catch').forEach(x => x.remove());
- catchesContainer.append(...catches.map(c => createHtmlCatch(c)));
- }
- async function createCatch(){
- let anglerInput = document.querySelector('#addForm .angler');
- let weightInput = document.querySelector('#addForm .weight');
- let speciesInput = document.querySelector('#addForm .species');
- let locationInput = document.querySelector('#addForm .location');
- let baitInput = document.querySelector('#addForm .bait');
- let captureTimeInput = document.querySelector('#addForm .captureTime');
- let newCatch = {
- angler: anglerInput.value,
- weight: Number(weightInput.value),
- species: speciesInput.value,
- location: locationInput.value,
- bait: baitInput.value,
- captureTime: Number(captureTimeInput.value)
- };
- let createResponse = await fetch('http://localhost:3030/data/catches',
- {
- headers: {
- 'Content-Type': 'application/json',
- 'X-Authorization': localStorage.getItem('token')
- },
- method: 'Post',
- body: JSON.stringify(newCatch)
- });
- let createResult = await createResponse.json();
- let createdCatch = createHtmlCatch(createResult);
- catchesContainer.appendChild(createdCatch);
- }
- async function updateCatch(e){
- let curCatch = e.target.parentElement;
- let anglerInput = curCatch.querySelector('.angler');
- let weightInput = curCatch.querySelector('.weight');
- let speciesInput = curCatch.querySelector('.species');
- let locationInput = curCatch.querySelector('.location');
- let baitInput = curCatch.querySelector('.bait');
- let captureTimeInput = curCatch.querySelector('.captureTime');
- let updatedCatch = {
- angler: anglerInput.value,
- weight: Number(weightInput.value),
- species: speciesInput.value,
- location: locationInput.value,
- bait: baitInput.value,
- captureTime: Number(captureTimeInput.value)
- };
- let id = curCatch.dataset.id;
- let url = `http://localhost:3030/data/catches/${id}`;
- let updateResponse = await fetch(url, {
- headers: {
- 'Content-Type': 'application/json',
- 'X-Authorization': localStorage.getItem('token')
- },
- method: 'Put',
- body: JSON.stringify(updatedCatch)
- });
- let updateResult = await updateResponse.json();
- }
- async function deleteCatch(e){
- let curCatch = e.target.parentElement;
- let id = curCatch.dataset.id;
- let url = `http://localhost:3030/data/catches/${id}`;
- let deleteResponse = await fetch(url, {
- headers: {
- 'X-Authorization': localStorage.getItem('token')
- },
- method: 'Delete'
- });
- let deleteResult = await deleteResponse.json();
- if(deleteResponse.status === 200){
- curCatch.remove();
- }
- }
- function createHtmlCatch(curCatch) {
- let anglerLable = ce('label', undefined, 'Angler');
- let anglerInput = ce('input', {type: 'text', class:'angler'}, curCatch.angler);
- let hr1 = ce('hr');
- let weightLabel = ce('label', undefined, 'Weight');
- let weightInput = ce('input', {type:'number', class:'weight'}, curCatch.weight);
- let hr2 = ce('hr');
- let speciesLabel = ce('label', undefined, 'Species');
- let speciesInput = ce('input', {type:'text', class:'species'}, curCatch.species);
- let hr3 = ce('hr');
- let locationLabel = ce('label', undefined, 'Location');
- let locationInput = ce('input', {type:'text', class:'location'}, curCatch.location);
- let hr4 = ce('hr');
- let baitLabel = ce('label', undefined, 'Bait');
- let baitInput = ce('input', {type:'text', class:'bait'}, curCatch.bait);
- let hr5 = ce('hr');
- let captureTimeLabel = ce('label', undefined, 'Capture Time');
- let captureTimeInput = ce('input', {type:'number', class:'captureTime'}, curCatch.captureTime);
- let hr6 = ce('hr');
- let updateBtn = ce('button', {disabled:true, class:'update'}, 'Update');
- updateBtn.addEventListener('click', updateCatch);
- updateBtn.disabled = localStorage.getItem('userId') !== curCatch._ownerId;
- let deleteBtn = ce('button', {disabled:true, class:'delete'}, 'Delete');
- deleteBtn.addEventListener('click', deleteCatch);
- deleteBtn.disabled = localStorage.getItem('userId') !== curCatch._ownerId;
- let catchDiv = ce('div', {class:'catch'},
- anglerLable, anglerInput, hr1, weightLabel, weightInput, hr2, speciesLabel, speciesInput,
- hr3, locationLabel, locationInput, hr4, baitLabel, baitInput, hr5, captureTimeLabel,
- captureTimeInput, hr6, updateBtn, deleteBtn);
- catchDiv.dataset.id = curCatch._id;
- catchDiv.dataset.ownerId = curCatch._ownerId;
- return catchDiv;
- }
- function ce(tag, attributes, ...params) {
- let element = document.createElement(tag);
- let firstValue = params[0];
- if (params.length === 1 && typeof (firstValue) !== 'object') {
- if (['input', 'textarea'].includes(tag)) {
- element.value = firstValue;
- } else {
- element.textContent = firstValue;
- }
- } else {
- element.append(...params);
- }
- if (attributes !== undefined) {
- Object.keys(attributes).forEach(key => {
- element.setAttribute(key, attributes[key]);
- })
- }
- return element;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement