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 |
|
---|
158 | document.getElementById("login").addEventListener("click", function(event){
|
---|
159 | window.location = "/login";
|
---|
160 | });
|
---|
161 |
|
---|
162 | function 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 |
|
---|
173 | function 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 |
|
---|
181 | function 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 |
|
---|
208 | function 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 |
|
---|
311 | function goToProfile() {
|
---|
312 | window.location = "/customer_admin";
|
---|
313 | }
|
---|
314 |
|
---|
315 | function destroyCalendar() {
|
---|
316 | $('#calendar').fullCalendar('destroy');
|
---|
317 | }
|
---|
318 |
|
---|
319 | function resetRatingCard() {
|
---|
320 | $('#rating-service-name').empty();
|
---|
321 | $('#rating-value').empty();
|
---|
322 | $('#rating-count').empty();
|
---|
323 | $('#reviews-li').remove();
|
---|
324 | }
|
---|
325 |
|
---|
326 | function 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 |
|
---|
335 | function 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 |
|
---|
360 | function generateStars(number) {
|
---|
361 | return '☆'.repeat(number);
|
---|
362 | }
|
---|
363 |
|
---|
364 | function 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 | } |
---|