source: src/main/resources/static/js/homepage.js@ 53765dd

Last change on this file since 53765dd was 53765dd, checked in by gjoko kostadinov <gjokokostadinov@…>, 6 months ago

Fix bugs.
  • Property mode set to 100755
File size: 13.9 KB
Line 
1$(document).ready(function() {
2 var businessTypes = {};
3 var businesses = {};
4 var date = new Date();
5 var selectedServices = {};
6 var events = [];
7 var d = date.getDate();
8 var m = date.getMonth();
9 var y = date.getFullYear();
10
11 /* className colors
12
13 className: default(transparent), important(red), chill(pink), success(green), info(blue)
14
15 */
16
17 $.ajax({
18 type: 'GET',
19 url: "http://localhost:8080/api/user/me",
20 success: function(data, textStatus, request) {
21 if (data) {
22 $('#create').parent().removeClass('hidden-button');
23 $('#profile').parent().removeClass('hidden-button');
24 $('#logout').parent().removeClass('hidden-button');
25 $('#login').parent().addClass('hidden-button');
26 } else {
27 $('#create').parent().addClass('hidden-button');
28 $('#profile').parent().addClass('hidden-button');
29 $('#logout').parent().addClass('hidden-button');
30 $('#login').parent().removeClass('hidden-button');
31 }
32 },
33 error: function (request, textStatus, errorThrown) {
34 console.log(errorThrown);
35 }
36 });
37 /* initialize the external events
38 -----------------------------------------------------------------*/
39
40 $('#external-events div.external-event').each(function() {
41
42 // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
43 // it doesn't need to have a start or end
44 var eventObject = {
45 title: $.trim($(this).text()) // use the element's text as the event title
46 };
47
48 // store the Event Object in the DOM element so we can get to it later
49 $(this).data('eventObject', eventObject);
50
51 // make the event draggable using jQuery UI
52 $(this).draggable({
53 zIndex: 999,
54 revert: true, // will cause the event to go back to its
55 revertDuration: 0 // original position after the drag
56 });
57
58 });
59
60 $.ajax({
61 url: "http://localhost:8080/api/nomenclature/businessTypes"
62 }).then(function (data) {
63 businessTypes = data;
64 var $el = $("#companyType");
65 emptyDropdown($el);
66
67 $.each(data, function (index, obj) {
68 $el.append("<option value=" + obj.value + ">" + obj.text + "</option>");
69 });
70 });
71
72 $("#companyType").change(function () {
73 resetRatingCard();
74 var selectedVal = $(this).find(':selected').val();
75 var selectedObj = businessTypes[selectedVal - 1];
76 $.ajax({
77 url: "http://localhost:8080/api/business/" + selectedObj.value
78 }).then(function (data) {
79 businesses = data;
80 var $el = $("#company");
81 var $servicesEl = $("#service");
82 emptyDropdown($el);
83 emptyDropdown($servicesEl);
84
85 $.each(data, function (index, obj) {
86 $el.append("<option value=" + obj.id + ">" + obj.companyName + "</option>");
87 });
88
89 if (data && data.length === 1) {
90 selectedServices = data[0]["services"];
91 resetAndAppendServices(selectedServices);
92 }
93 });
94 });
95
96 $("#company").change(function () {
97 resetRatingCard();
98 var selectedVal = $(this).find(':selected').val();
99 $.ajax({
100 url: "http://localhost:8080/api/appointment/business/" + selectedVal
101 }).then(function (data) {
102 // get already stored service from in-memory
103 selectedServices = businesses.find(item => item.id == selectedVal)['services'];
104 console.log(selectedServices);
105 resetAndAppendServices(selectedServices);
106 });
107 $('#calendar').fullCalendar('refetchEvents');
108 });
109
110 $("#service").change(function () {
111 var selectedVal = $("#service").find(':selected').val();
112 var service = selectedServices.find(item => item.id == selectedVal);
113 setRatingCard(service['serviceType']['name'], service['rating'], service['reviewsCount'], selectedVal);
114 });
115
116 $("#startdatetime").change(function() {
117 var date = new Date(document.getElementById("startdatetime").valueAsDate);
118 var selectedVal = $("#service").find(':selected').val();
119 var minutes = selectedServices.find(item => item.id == selectedVal)['duration'];
120 date.setMinutes(date.getMinutes() + minutes);
121 document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
122 });
123
124 /* initialize the calendar
125 -----------------------------------------------------------------*/
126 loadCalendar();
127
128 resetRatingCard();
129
130 $("#createAppointment").click(function() {
131 var appointment = {};
132 var business = {};
133 business['id'] = parseInt($("#company").val());
134 appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
135 appointment['startTime'] = $("#startdatetime").val();
136
137 $.ajax({
138 url: "http://localhost:8080/api/appointment",
139 type:"POST",
140 data: JSON.stringify(appointment),
141 contentType:"application/json; charset=utf-8",
142 dataType: 'text',
143 success: function(succ){
144 alert("Successful appointment!");
145 var companyId = parseInt($("#company").find(':selected').val());
146 getAppointmentsByBusiness(companyId, events);
147 destroyCalendar();
148 loadCalendar(events);
149 },
150 error: function(error) {
151 alert(error.responseText);
152 }
153 });
154 });
155
156});
157
158document.getElementById("login").addEventListener("click", function(event){
159 window.location = "/login";
160});
161
162function resetAndAppendServices(services) {
163 var $el = $("#service");
164 emptyDropdown($el);
165
166 $.each(services, function (index, obj) {
167 if (obj.serviceStatus === 'ACTIVE') {
168 $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
169 }
170 });
171}
172
173function emptyDropdown(element) {
174 var defaultOption = element.children().get(0);
175 element.children().remove();
176 element.append(defaultOption);
177}
178
179/*loadCalendar([{'title': 'Gjoko', 'start': '2023-09-01 01:00:00', 'end': '2023-09-01 01:30:00', 'allDay':false, 'color': 'blue'}])*/
180
181function getAppointmentsByBusiness(businessId, events) {
182 $.ajax({
183 url: "http://localhost:8080/api/appointment/business/" + businessId,
184 type:"GET",
185 contentType:"application/json; charset=utf-8",
186 dataType: 'text',
187 success: function(data){
188 // reset events
189 events = [];
190 console.log(data);
191 $.each(JSON.parse(data), function (index, object) {
192 var event = {}
193 event['title'] = object['title'];
194 event['start'] = object['startTime'].replace('T', ' ');
195 event['end'] = object['endTime'].replace('T', ' ');
196 event['allDay'] = false;
197 event['color'] = 'blue';
198 events.push(event);
199 });
200
201 },
202 error: function(error) {
203 console.log(error.responseText);
204 }
205 });
206}
207
208function loadCalendar(events) {
209 $('#calendar').fullCalendar({
210 header: {
211 left: 'title',
212 center: 'agendaWeek',
213 right: 'prev,next today'
214 },
215 editable: false,
216 edit: function (start, end, allDay) {
217 console.log(start);
218 console.log(end);
219 },
220 firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
221 selectable: false,
222 defaultView: 'agendaWeek',
223
224 axisFormat: 'h:mm',
225 columnFormat: {
226 month: 'ddd', // Mon
227 week: 'ddd d', // Mon 7
228 day: 'dddd M/d', // Monday 9/7
229 agendaDay: 'dddd d'
230 },
231 titleFormat: {
232 month: 'MMMM yyyy', // September 2009
233 week: "MMMM yyyy", // September 2009
234 day: 'MMMM yyyy' // Tuesday, Sep 8, 2009
235 },
236 allDaySlot: false,
237 selectHelper: true,
238 select: function(start, end, allDay) {
239 var title = prompt('Event Title:');
240 if (title) {
241 calendar.fullCalendar('renderEvent',
242 {
243 title: title,
244 start: start,
245 end: end,
246 allDay: allDay
247 },
248 true // make the event "stick"
249 );
250 }
251 calendar.fullCalendar('unselect');
252 },
253 droppable: false, // this allows things to be dropped onto the calendar !!!
254 drop: function(date, allDay) { // this function is called when something is dropped
255
256 // retrieve the dropped element's stored Event Object
257 var originalEventObject = $(this).data('eventObject');
258
259 // we need to copy it, so that multiple events don't have a reference to the same object
260 var copiedEventObject = $.extend({}, originalEventObject);
261
262 // assign it the date that was reported
263 copiedEventObject.start = date;
264 copiedEventObject.allDay = allDay;
265
266 // render the event on the calendar
267 // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
268 $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
269
270 // is the "remove after drop" checkbox checked?
271 if ($('#drop-remove').is(':checked')) {
272 // if so, remove the element from the "Draggable Events" list
273 $(this).remove();
274 }
275 console.log('dropped');
276
277 },
278 events: function (start, end, callback) {
279 var selectedVal = $("#company").find(':selected').val();
280 if(!isNaN(parseInt(selectedVal))) {
281 $.ajax({
282 url: "http://localhost:8080/api/appointment/business/" + selectedVal,
283 type:"GET",
284 contentType:"application/json; charset=utf-8",
285 dataType: 'text',
286 success: function(data){
287 // reset events
288 var events = [];
289 $.each(JSON.parse(data), function (index, object) {
290 var event = {}
291 event['title'] = object['title'];
292 event['start'] = object['startTime'].replace('T', ' ');
293 event['end'] = object['endTime'].replace('T', ' ');
294 event['allDay'] = false;
295 event['color'] = '#3b71ca';
296 event['textColor'] = '#FFFFFF';
297 events.push(event);
298 });
299 // load events
300 callback(events);
301 },
302 error: function(error) {
303 console.log(error.responseText);
304 }
305 });
306 }
307 },
308 });
309}
310
311function goToProfile() {
312 window.location = "/customer_admin";
313}
314
315function destroyCalendar() {
316 $('#calendar').fullCalendar('destroy');
317}
318
319function resetRatingCard() {
320 $('#rating-service-name').empty();
321 $('#rating-value').empty();
322 $('#rating-count').empty();
323 $('#reviews-li').remove();
324}
325
326function setRatingCard(name, value, count, serviceId) {
327 $('#rating-service-name').text(name);
328 $('#rating-value').text(value);
329 $('#rating-count').text(count);
330 $('#reviews-li').remove();
331 getReviewsForService(serviceId);
332
333}
334
335function getReviewsForService(serviceId){
336 $.ajax({
337 url: "http://localhost:8080/api/review/" + serviceId
338 }).then(function (data) {
339 var $el = $("#reviewsModalBody");
340 $('#reviews-ul').append($('<button type="button" id="reviews-li" class="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#showReviewsModal">Checkout reviews</button>'));
341 $el.empty();
342
343 $.each(data, function (index, obj) {
344 var element = '<div class="card m-3" style="max-width: 300px; padding: 0;">';
345 element += '<div class="card-header" style="' + generateHeaderStyle(obj['rating']) + '">' + generateStars(obj['rating']) + '</div>';
346 element += '<ul class="list-group list-group-flush">';
347 element += '<li class="list-group-item"><i><b>Business:</b></i> ' + obj['businessName'] + '</li>';
348 element += '<li class="list-group-item"><i><b>Service:</b></i> ' + obj['serviceName'] + '</li>';
349 element += '<li class="list-group-item"><i><b>Reviewer:</b></i> ' + obj['customerName'] + '</li>';
350 element += '<li class="list-group-item"><i><b>Comment:</b></i> ' + obj['comment'] + '</li>';
351 element += '<li class="list-group-item"><small class="text-body-secondary"><i>Created:</i> ' + obj['created'] + '</small></li>';
352 element += '</ul>';
353 element += '</div>';
354
355 $el.append(element);
356 });
357 });
358}
359
360function generateStars(number) {
361 return '☆'.repeat(number);
362}
363
364function generateHeaderStyle(number) {
365 var style = '';
366 switch (number) {
367 case 5:
368 style = 'background-color: RGBA(13,110,253,var(--bs-bg-opacity,1)) !important; ';
369 break;
370 case 4:
371 style = 'background-color: RGBA(25,135,84,var(--bs-bg-opacity,1)) !important; ';
372 break;
373 case 3:
374 style = 'background-color: RGBA(108,117,125,var(--bs-bg-opacity,1)) !important; ';
375 break;
376 case 2:
377 style = 'background-color: RGBA(255,193,7,var(--bs-bg-opacity,1)) !important; ';
378 break;
379 case 1:
380 style = 'background-color: RGBA(220,53,69,var(--bs-bg-opacity,1)) !important; ';
381 break;
382 }
383
384 style += ' color: #fff !important;'
385 return style;
386}
Note: See TracBrowser for help on using the repository browser.