source: src/main/resources/static/js/adminNewsCoupons.js@ 43c9090

Last change on this file since 43c9090 was 43c9090, checked in by macagaso <gasoskamarija@…>, 5 weeks ago

Updated version
  • Property mode set to 100644
File size: 10.7 KB
RevLine 
[743de55]1const newsList = document.getElementById('news-list');
2const newsForm = document.getElementById('news-form');
3const couponsList = document.getElementById('coupons-list');
4const couponsForm = document.getElementById('coupons-form');
5
6let selectedImage;
7let questionable;
[43c9090]8let helper;
[743de55]9
10let pageType;
11document.addEventListener('DOMContentLoaded',function (){
12 pageType = document.body.getAttribute('data-page');
13 if(pageType==='events'){
14
15 const openPopupButton = document.getElementById('open-popup');
16 const imagePopup = document.getElementById('image-popup');
17 const overlay = document.getElementById('overlay');
18 const imageInput = document.getElementById('image-url');
19 const imagePreview = document.getElementById('image-preview');
20 const saveButton = document.getElementById('save-button');
21 const cancelButton = document.getElementById('cancel-button');
22
23
24 openPopupButton.addEventListener('click', (e) => {
25 e.preventDefault();
26 imagePopup.style.display = 'block';
27 overlay.style.display = 'block';
28 });
29
30 imageInput.addEventListener('change', (event) => {
31 event.preventDefault();
32 selectedImage=null;
33 questionable=null;
34 const file = event.target.files[0];
35 questionable=file;
36 if (file) {
37 const reader = new FileReader();
38 reader.onload = (e) => {
39 imagePreview.style.display='inline';
40 imagePreview.innerHTML = `<img src="${e.target.result}" style="width: 100%; height: auto;">`;
[43c9090]41 selectedImage =e.target.result ;
[743de55]42
43 console.log(selectedImage);
44 saveButton.style.display = 'inline';
45 };
46 reader.readAsDataURL(questionable);
47 }
48 });
49
50 saveButton.addEventListener('click', () => {
51 if(selectedImage) {
52 let temp= document.getElementById('main-image');
53 temp.innerHTML=`<img src="${selectedImage}" style="width: 20%; height: 20%;">`;
54 closePopup();
55 }
56 else{
57 console.log('No image file selected');
58 }
59
60
61 });
62
63 cancelButton.addEventListener('click', ()=>{
64 closePopup();
65
66 });
67
68 function closePopup() {
69 imagePopup.style.display = 'none';
70 overlay.style.display = 'none';
71 imageInput.value = '';
72 imagePreview.innerHTML = '';
73 }
74 }
75});
76
77function elementCreation(ItemData){
78 const newItem = document.createElement('div');
79 newItem.classList.add('news-item');
80 newItem.setAttribute('data-id', ItemData.id);
81 if(pageType==='events'){
82 newItem.innerHTML = `
83 <h3>${ItemData.title}</h3>
84 <p>${ItemData.text}</p>
85 ${ItemData.imgSrc ? `<img src="${ItemData.imgSrc}" style="width: 50%; height: auto;" data-attribute="${ItemData.imgSrc}">` : ''}`
86 }
87 else{
88 newItem.innerHTML = `
89 <h3>${ItemData.title}</h3>
90 <p>${ItemData.code}</p>
91 <div>${ItemData.description}</div>`
92 }
93 newItem.innerHTML+=`<button onclick="edit(this)">Edit</button>
94 <button onclick="deleteBoth(this)">Delete</button>`
95 return newItem;
96}
97function eventsRetrieval(){
98 const url = pageType === 'events' ? `/api/news/getAllEvents` : `/api/coupons/getAllCoupons`;
99 fetch(url,{
100 method: 'GET',
101 headers: {
102 'Content-Type': 'application/json'
103 }
104 })
105 .then(response => {
106 if (!response.ok) {
107 throw new Error('Failed to fetch news.');
108 }
109 return response.json();
110 })
111 .then(data => {
112 data.forEach(ItemData => {
113 let newItem=elementCreation(ItemData);
114 pageType === 'events' ? newsList.appendChild(newItem) : couponsList.appendChild(newItem);
115 });
116 })
117 .catch(error => {
118 console.error('Error:', error);
119 alert('Failed to load news.');
120 });
121}
122
123window.onload=function(){
124 eventsRetrieval();
125}
126function clearData(){
127 if(pageType==='events'){
128 document.getElementById('text').value = '';
129 }
130 else if(pageType==='coupons'){
131 let temp1=document.getElementById('code');
132 temp1.value = '';
133 temp1.removeAttribute('data-initial');
134 let temp2=document.getElementById('description');
135 temp2.value = '';
136 temp2.removeAttribute('data-initial');
137 }
138 let temp3=document.getElementById('title');
139 temp3.value = '';
140 temp3.removeAttribute('data-initial');
141}
142function showForm() {
143 if(pageType==='events')
144 document.getElementById("main-image").innerHTML='';
145 pageType === 'events' ? newsForm.style.display = 'flex' : couponsForm.style.display='flex';
146}
147
148function hideForm() {
149 pageType === 'events' ? newsForm.style.display = 'none' : couponsForm.style.display='none';
150 clearData();
151 selectedImage = null;
152 questionable=null;
153}
154
155function submitForm() {
156 let param1,param2,param3;
157 param1 = document.getElementById('title').value;
158
159 if(pageType==='events'){
160 param2 = document.getElementById('text').value;
161 param3 = selectedImage;
162 }
163 else if(pageType==='coupons'){
164 param2 = document.getElementById('code').value;
165 param3 = document.getElementById('description').value;
166 }
167 if (param1 && param2) {
168 let newsData;
169 if (pageType === 'events') {
170 newsData = {
171 title: param1,
172 text: param2,
173 imgSrc: param3
174 };
175 } else {
176 newsData = {
177 title: param1,
178 code: param2,
179 description: param3
180 };
181 }
182 let initialTitle = document.getElementById('title').getAttribute('data-initial');
183 console.log(initialTitle);
184
185 if(initialTitle!==null){
186 let initialParam2,initialParam3;
187 if(pageType==='events'){
188 initialParam2=document.getElementById("text").getAttribute('data-initial');
189 initialParam3 = document.getElementsByTagName('img')[0].getAttribute('data-attribute');
190 }
191 else if(pageType==='coupons'){
192 initialParam2 = document.getElementById('code').getAttribute('data-initial');
193 initialParam3=document.getElementById('description').getAttribute('data-initial');
194 }
195 clearData();
196 if (initialTitle !== param1 || initialParam2 !== param2 || initialParam3 !== param3) {
197 console.log('Changes detected! Submitting the form.');
198 } else {
199 hideForm();
200 return;
201 }
202
203 const url = pageType === 'events' ? `/api/news/editEvent?identifier=${initialTitle}` : `/api/coupons/editCoupon?identifier=${initialTitle}`;
204 fetch(url, {
205 method: 'POST',
206 headers: {
207 'Content-Type': 'application/json'
208 },
209 body: JSON.stringify(newsData)
210 }).then(response => {
211 if (!response.ok) {
212 throw new Error('Network response was not ok');
213 }
214 console.log("Successfully edited");
215 hideForm();
216 if (pageType === 'events') {
217 newsList.innerHTML = '';
218 } else {
219 couponsList.innerHTML = '';
220 }
221 eventsRetrieval();
222 }).catch(error => {
223 console.error('Error occurred');
224 });
225
226 return;
227 }
228 const url = pageType === 'events' ? `/api/news/createEvent` : `/api/coupons/createCoupon`;
229 fetch(url, {
230 method: 'PUT',
231 headers: {
232 'Content-Type': 'application/json'
233 },
234 body: JSON.stringify(newsData)
235 })
236 .then(response => {
237 if (!response.ok) {
238 throw new Error('Failed to update news.');
239 }
240 return response.json();
241 })
242 .then(data => {
243 console.log('Data updated:', data);
244 let newItem = elementCreation(data);
245 if (pageType === 'events') {
246 newsList.appendChild(newItem);
247 } else {
248 couponsList.appendChild(newItem);
249 }
250 document.getElementById('form').reset();
251 hideForm();
252 })
253 .catch(error => {
254 console.error('Error during submission:', error);
255 alert('Failed to save the news/coupon. Please try again.');
256
257 });
258 clearData();
259 }
260 else
261 {
262 alert('Missing fields');
263 }
264}
265
266function deleteBoth(button) {
267
268 let temp=button.parentElement;
269 let value=temp.getAttribute('data-id');
270 const url = pageType === 'events' ? `/api/news/deleteEvent?userId=${value}` : `/api/coupons/deleteCoupon?userId=${value}`;
271 fetch(url, {
272 method: 'DELETE',
273 headers: {
274 'Content-Type': 'application/json'
275 }
276 })
277 .then(r => {
278 if(r.ok){
279 console.log('Element deleted successfully');
280 }
281 else{
282 console.error('Failed to delete element');
283 }
284 })
285 .catch(error => {
286 console.log("error deleting");
287 });
288
289 const newItem = button.parentElement;
290 pageType === 'events' ? newsList.removeChild(newItem) : couponsList.removeChild(newItem);
291
292}
293
294function edit(button) {
295 showForm();
296 const newsItem = button.parentElement;
297 const param1 = newsItem.querySelector('h3').textContent;
298 const param2 = newsItem.querySelector('p').textContent;
299
300 if(pageType==='events'){
301 document.getElementById('text').value = param2;
302 let importantValue=newsItem.querySelector('img').getAttribute("data-attribute");
[43c9090]303 selectedImage=importantValue;
[743de55]304 document.getElementById('main-image').innerHTML=`<img src="${importantValue}" style="width: 20%; height: 20%;">`;
305 }
306 else if(pageType==='coupons'){
307 const description=newsItem.querySelector('div').textContent;
308 document.getElementById('code').value = param2;
309 document.getElementById('code').setAttribute('data-initial',param2);
310 document.getElementById('description').value = description;
311 document.getElementById('description').setAttribute('data-initial',description);
312 }
313 document.getElementById('title').value = param1;
314 document.getElementById('title').setAttribute('data-initial', param1);
315
316}
317
Note: See TracBrowser for help on using the repository browser.