Guest User

Untitled

a guest
Dec 9th, 2019
88
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