SHARE
TWEET

Untitled

a guest Dec 9th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. //get the html elements
  4. const btnSubmit = document.querySelector('#btnSubmit');
  5. const meetingsList = document.querySelector('.meetingsList');
  6. const formName = document.querySelector('#formName');
  7. const formTitle = document.querySelector('#formTitle');
  8. const formLocalization = document.querySelector('#formLocalization');
  9. const formDate = document.querySelector('#formDate');
  10. const formBike = document.querySelector('#formBike');
  11. const formPeople = document.querySelector('#formPeople');
  12. const formDuration = document.querySelector('#formDuration');
  13. const formDistance = document.querySelector('#formDistance');
  14. const formLevel = document.querySelector('#formLevel');
  15. const formDescription = document.querySelector('#formDescription');
  16. const formInfo = document.querySelector('#formInfo');
  17. const box1 = document.querySelector('.section__box1');
  18. const sectionTitle = document.querySelector('.section__title');
  19. const link = document.querySelector('.meetingsList__link');
  20. const card = document.querySelector('.meetingCard');
  21. const box4 = document.querySelector('.section__box4');
  22. let id = 1;
  23. let sumData;
  24. // http class
  25.  
  26. class HTTPRequests {
  27.  
  28.   //just empty constructor for now
  29.   constructor() {
  30.  
  31.   }
  32.  
  33.   //GET request
  34.   async get(url) {
  35.     const response = await fetch(url);
  36.     const resData = await response.json();
  37.     return resData;
  38.   }
  39.  
  40.   //POST request
  41.   async post(url, data) {
  42.     const response = await fetch(url, {
  43.       method: 'POST',
  44.       headers: {
  45.         'Content-type': 'application/json'
  46.       },
  47.       body: JSON.stringify(data)
  48.     });
  49.     const resData = await response.json();
  50.     return resData;
  51.   }
  52. }
  53.  
  54. //UI class
  55.  
  56. class UI {
  57.   constructor() {
  58.     this.meetingsList = document.querySelector('.meetingsList');
  59.     this.formName = document.querySelector('#formName');
  60.     this.formTitle = document.querySelector('#formTitle');
  61.     this.formLocalization = document.querySelector('#formLocalization');
  62.     this.formDate = document.querySelector('#formDate');
  63.     this.formBike = document.querySelector('#formBike');
  64.     this.formPeople = document.querySelector('#formPeople');
  65.     this.formDuration = document.querySelector('#formDuration');
  66.     this.formDistance = document.querySelector('#formDistance');
  67.     this.formLevel = document.querySelector('#formLevel');
  68.     this.formDescription = document.querySelector('#formDescription');
  69.     this.formInfo = document.querySelector('#formInfo');
  70.     this.btnSubmit = document.querySelector('#btnSubmit');
  71.     this.box4 = document.querySelector('.section__box4');
  72.   }
  73.  
  74.   //Rendering meeting List
  75.   showMeetings(meetings) {
  76.  
  77.     //make a empty var for a render one meeting item
  78.     let output = '';
  79.  
  80.     //a loop through our data to render a html meeting item
  81.     meetings.forEach(meeting => {
  82.       id = meeting.id;
  83.       id++;
  84.       output += `
  85.         <li class="meetingsList__item">
  86.           <a class="meetingsList__link" href="#" data-id="${meeting.id}">
  87.             <span class="meetingsList__text" id="title">${meeting.title}</span>
  88.             <span class="meetingsList__text" id="date">${meeting.date}</span>
  89.             <span class="meetingsList__text" id="name">${meeting.name}</span>
  90.           </a>
  91.         </li>
  92.       `;
  93.     });
  94.  
  95.     //add the output to html
  96.     this.meetingsList.innerHTML = output;
  97.   }
  98.  
  99.   //showCard
  100.   showCard(sumData) {
  101.     let output = '';
  102.  
  103.       output = ` <ul class="meetingCard">
  104.       <li class="meetingCard__item"><span class="meetingCard__title">Organizator: </span><span class="meetingCard__text">${sumData.name}</span></li>
  105.       <li class="meetingCard__item"><span class="meetingCard__title">Nazwa: </span><span class="meetingCard__text">${sumData.title}</span></li>
  106.       <li class="meetingCard__item"><span class="meetingCard__title">Lokalizacja: </span><span class="meetingCard__text">${sumData.localization}</span></li>
  107.       <li class="meetingCard__item"><span class="meetingCard__title">Data: </span><span class="meetingCard__text">${sumData.date}</span></li>
  108.       <li class="meetingCard__item"><span class="meetingCard__title">Rower: </span><span class="meetingCard__text">${sumData.bike}</span></li>
  109.       <li class="meetingCard__item"><span class="meetingCard__title">Liczba osób: </span><span class="meetingCard__text">${sumData.people}</span></li>
  110.       <li class="meetingCard__item"><span class="meetingCard__title">Czas trwania: </span><span class="meetingCard__text">${sumData.duration}</span></li>
  111.       <li class="meetingCard__item"><span class="meetingCard__title">Trasa </span><span class="meetingCard__text">${sumData.distance}</span></li>
  112.       <li class="meetingCard__item"><span class="meetingCard__title">Poziom trudności: </span><span class="meetingCard__text">${sumData.level}</span></li>
  113.       <li class="meetingCard__item"><span class="meetingCard__title">Opis trasy: </span><span class="meetingCard__text">${sumData.description}</span></li>
  114.       <li class="meetingCard__item"><span class="meetingCard__title">Dodatkowe informacje: </span><span class="meetingCard__text">${sumData.info}</span></li>
  115.  
  116.  
  117.     </ul>
  118.     <div class="btnGroup btnGroup--active"> <!-- btn--active-->
  119.       <button class="btn btn--yellow" id="update-btn">Zaktualizuj ustawkę</button>
  120.       <button class="btn btn--red" id="delete-btn">Skasuj ustawkę</button>
  121.     </div>`;
  122.  
  123.   box4.innerHTML = output;
  124.   }
  125.  
  126.   //show alert if the meeting is added
  127.   showAlert(msg, className) {
  128.  
  129.     //create div
  130.     const div = document.createElement('div');
  131.     //add class
  132.     div.className = className;
  133.     //add text
  134.     div.appendChild(document.createTextNode(msg));
  135.     //insert to html
  136.     box1.insertBefore(div,sectionTitle);
  137.  
  138.     // alert disapear after 2s
  139.     setTimeout(() => {
  140.       this.clearAlert();
  141.     },2000);
  142.   }
  143.  
  144.   // delete alert
  145.   clearAlert() {
  146.     const alert = document.querySelector('.alert');
  147.  
  148.     if(alert) {
  149.       alert.remove();
  150.     }
  151.   }
  152.   // clear form inputs after submit
  153.   clearForm() {
  154.     this.meetingsList.value = '';
  155.     this.formName.value = '';
  156.     this.formTitle.value = '';
  157.     this.formLocalization.value = '';
  158.     this.formDate.value = '';
  159.     this.formBike.value = '';
  160.     this.formPeople.value = '';
  161.     this.formDuration.value = '';
  162.     this.formDistance.value = '';
  163.     this.formLevel.value = '';
  164.     this.formDescription.value = '';
  165.     this.formInfo.value = '';
  166.     this.btnSubmit.value = '';
  167.   }
  168. }
  169.  
  170.  
  171. // App
  172.  
  173. // make a object of http
  174. url = 'https://jsonbox.io/box_bc8f76851b8b77c9ff0b';
  175. // url = 'http://localhost:3000/data.json';
  176. const http = new HTTPRequests();
  177.  
  178. // make an object of UI
  179. const ui = new UI();
  180.  
  181. // function getMeetings
  182. const getMeetings = () => {
  183.   //make a get request
  184.   http.get(url)
  185.     .then(data => ui.showMeetings(data))
  186.     .catch(error => console.log(error));
  187. }
  188.  
  189. //function sendMeeting
  190. const sendMeeting = (event) => {
  191.  
  192.  
  193.   // get the value of inputs
  194.  
  195.   const name = formName.value;
  196.   const title = formTitle.value;
  197.   const localization = formLocalization.value;
  198.   const date = formDate.value;
  199.   const bike = formBike.value
  200.   const people = formPeople.value;
  201.   const duration = formDuration.value;
  202.   const distance = formDistance.value;
  203.   const level = formLevel.value;
  204.   const description = formDescription.value;
  205.   const info = formInfo.value;
  206.  
  207.   //make summary data
  208.     sumData = {
  209.     id,
  210.     name,
  211.     title,
  212.     localization,
  213.     date,
  214.     bike,
  215.     people,
  216.     duration,
  217.     distance,
  218.     level,
  219.     description,
  220.     info
  221.   }
  222.  
  223.   //make a post request
  224.   http.post(url, sumData)
  225.     .then(getMeetings())
  226.     .then(ui.showAlert('Ustawka dodana', 'alert alert--success'))
  227.     .then(ui.clearForm())
  228.     .catch(error => console.log(error));
  229.     event.preventDefault();
  230.  
  231. }
  232.  
  233. //function to show meeting card
  234. const toggleCard = (event) => {
  235.   event.preventDefault();
  236.  
  237.   if(event.target.parentElement.classList.contains('meetingsList__link')) {
  238.     id = event.target.parentElement.dataset.id;
  239.  
  240.   }
  241.  
  242.   if(id) {
  243.     http.get(url)
  244.       .then(console.table(sumData.name))
  245.       .then(ui.showCard(sumData))
  246.       .catch(error => console.log(error))
  247.  
  248.   }
  249. }
  250.  
  251. // Listener for load all meetings
  252. document.addEventListener('DOMContentLoaded', getMeetings);
  253.  
  254. //listener for add meeting
  255. btnSubmit.addEventListener('click', sendMeeting);
  256.  
  257. // listener for toggle a meeting card
  258. meetingsList.addEventListener('click', toggleCard);
  259.  
  260. //listener for delete meeting
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