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/nomenclatures/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 | resetAndAppendServices(selectedServices);
|
---|
105 | });
|
---|
106 | $('#calendar').fullCalendar('refetchEvents');
|
---|
107 | });
|
---|
108 |
|
---|
109 | $("#service").change(function () {
|
---|
110 | var selectedVal = $("#service").find(':selected').val();
|
---|
111 | var service = selectedServices.find(item => item.id == selectedVal);
|
---|
112 | setRatingCard(service['serviceType']['name'], service['rating'], service['reviewsCount'], selectedVal);
|
---|
113 | });
|
---|
114 |
|
---|
115 | $("#startdatetime").change(function() {
|
---|
116 | var date = new Date(document.getElementById("startdatetime").valueAsDate);
|
---|
117 | var selectedVal = $("#service").find(':selected').val();
|
---|
118 | var minutes = selectedServices.find(item => item.id == selectedVal)['duration'];
|
---|
119 | date.setMinutes(date.getMinutes() + minutes);
|
---|
120 | document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
|
---|
121 | });
|
---|
122 |
|
---|
123 | /* initialize the calendar
|
---|
124 | -----------------------------------------------------------------*/
|
---|
125 | loadCalendar();
|
---|
126 |
|
---|
127 | resetRatingCard();
|
---|
128 |
|
---|
129 | $("#createAppointment").click(function() {
|
---|
130 | var appointment = {};
|
---|
131 | var business = {};
|
---|
132 | business['id'] = parseInt($("#company").val());
|
---|
133 | appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
|
---|
134 | appointment['startTime'] = $("#startdatetime").val();
|
---|
135 |
|
---|
136 | $.ajax({
|
---|
137 | url: "http://localhost:8080/api/appointment",
|
---|
138 | type:"POST",
|
---|
139 | data: JSON.stringify(appointment),
|
---|
140 | contentType:"application/json; charset=utf-8",
|
---|
141 | dataType: 'text',
|
---|
142 | success: function(succ){
|
---|
143 | alert("Successful appointment!");
|
---|
144 | var companyId = parseInt($("#company").find(':selected').val());
|
---|
145 | getAppointmentsByBusiness(companyId, events);
|
---|
146 | destroyCalendar();
|
---|
147 | loadCalendar(events);
|
---|
148 | },
|
---|
149 | error: function(error) {
|
---|
150 | alert(error.responseText);
|
---|
151 | }
|
---|
152 | });
|
---|
153 | });
|
---|
154 |
|
---|
155 | });
|
---|
156 |
|
---|
157 | document.getElementById("login").addEventListener("click", function(event){
|
---|
158 | window.location = "/login";
|
---|
159 | });
|
---|
160 |
|
---|
161 | function resetAndAppendServices(services) {
|
---|
162 | var $el = $("#service");
|
---|
163 | emptyDropdown($el);
|
---|
164 |
|
---|
165 | $.each(services, function (index, obj) {
|
---|
166 | $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
|
---|
167 | });
|
---|
168 | }
|
---|
169 |
|
---|
170 | function emptyDropdown(element) {
|
---|
171 | var defaultOption = element.children().get(0);
|
---|
172 | element.children().remove();
|
---|
173 | element.append(defaultOption);
|
---|
174 | }
|
---|
175 |
|
---|
176 | /*loadCalendar([{'title': 'Gjoko', 'start': '2023-09-01 01:00:00', 'end': '2023-09-01 01:30:00', 'allDay':false, 'color': 'blue'}])*/
|
---|
177 |
|
---|
178 | function getAppointmentsByBusiness(businessId, events) {
|
---|
179 | $.ajax({
|
---|
180 | url: "http://localhost:8080/api/appointment/business/" + businessId,
|
---|
181 | type:"GET",
|
---|
182 | contentType:"application/json; charset=utf-8",
|
---|
183 | dataType: 'text',
|
---|
184 | success: function(data){
|
---|
185 | // reset events
|
---|
186 | events = [];
|
---|
187 | console.log(data);
|
---|
188 | $.each(JSON.parse(data), function (index, object) {
|
---|
189 | var event = {}
|
---|
190 | event['title'] = object['title'];
|
---|
191 | event['start'] = object['startTime'].replace('T', ' ');
|
---|
192 | event['end'] = object['endTime'].replace('T', ' ');
|
---|
193 | event['allDay'] = false;
|
---|
194 | event['color'] = 'blue';
|
---|
195 | events.push(event);
|
---|
196 | });
|
---|
197 |
|
---|
198 | },
|
---|
199 | error: function(error) {
|
---|
200 | console.log(error.responseText);
|
---|
201 | }
|
---|
202 | });
|
---|
203 | }
|
---|
204 |
|
---|
205 | function loadCalendar(events) {
|
---|
206 | $('#calendar').fullCalendar({
|
---|
207 | header: {
|
---|
208 | left: 'title',
|
---|
209 | center: 'agendaWeek',
|
---|
210 | right: 'prev,next today'
|
---|
211 | },
|
---|
212 | editable: false,
|
---|
213 | edit: function (start, end, allDay) {
|
---|
214 | console.log(start);
|
---|
215 | console.log(end);
|
---|
216 | },
|
---|
217 | firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
|
---|
218 | selectable: false,
|
---|
219 | defaultView: 'agendaWeek',
|
---|
220 |
|
---|
221 | axisFormat: 'h:mm',
|
---|
222 | columnFormat: {
|
---|
223 | month: 'ddd', // Mon
|
---|
224 | week: 'ddd d', // Mon 7
|
---|
225 | day: 'dddd M/d', // Monday 9/7
|
---|
226 | agendaDay: 'dddd d'
|
---|
227 | },
|
---|
228 | titleFormat: {
|
---|
229 | month: 'MMMM yyyy', // September 2009
|
---|
230 | week: "MMMM yyyy", // September 2009
|
---|
231 | day: 'MMMM yyyy' // Tuesday, Sep 8, 2009
|
---|
232 | },
|
---|
233 | allDaySlot: false,
|
---|
234 | selectHelper: true,
|
---|
235 | select: function(start, end, allDay) {
|
---|
236 | var title = prompt('Event Title:');
|
---|
237 | if (title) {
|
---|
238 | calendar.fullCalendar('renderEvent',
|
---|
239 | {
|
---|
240 | title: title,
|
---|
241 | start: start,
|
---|
242 | end: end,
|
---|
243 | allDay: allDay
|
---|
244 | },
|
---|
245 | true // make the event "stick"
|
---|
246 | );
|
---|
247 | }
|
---|
248 | calendar.fullCalendar('unselect');
|
---|
249 | },
|
---|
250 | droppable: false, // this allows things to be dropped onto the calendar !!!
|
---|
251 | drop: function(date, allDay) { // this function is called when something is dropped
|
---|
252 |
|
---|
253 | // retrieve the dropped element's stored Event Object
|
---|
254 | var originalEventObject = $(this).data('eventObject');
|
---|
255 |
|
---|
256 | // we need to copy it, so that multiple events don't have a reference to the same object
|
---|
257 | var copiedEventObject = $.extend({}, originalEventObject);
|
---|
258 |
|
---|
259 | // assign it the date that was reported
|
---|
260 | copiedEventObject.start = date;
|
---|
261 | copiedEventObject.allDay = allDay;
|
---|
262 |
|
---|
263 | // render the event on the calendar
|
---|
264 | // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
---|
265 | $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
---|
266 |
|
---|
267 | // is the "remove after drop" checkbox checked?
|
---|
268 | if ($('#drop-remove').is(':checked')) {
|
---|
269 | // if so, remove the element from the "Draggable Events" list
|
---|
270 | $(this).remove();
|
---|
271 | }
|
---|
272 | console.log('dropped');
|
---|
273 |
|
---|
274 | },
|
---|
275 | events: function (start, end, callback) {
|
---|
276 | var selectedVal = $("#company").find(':selected').val();
|
---|
277 | if(!isNaN(parseInt(selectedVal))) {
|
---|
278 | $.ajax({
|
---|
279 | url: "http://localhost:8080/api/appointment/business/" + selectedVal,
|
---|
280 | type:"GET",
|
---|
281 | contentType:"application/json; charset=utf-8",
|
---|
282 | dataType: 'text',
|
---|
283 | success: function(data){
|
---|
284 | // reset events
|
---|
285 | var events = [];
|
---|
286 | $.each(JSON.parse(data), function (index, object) {
|
---|
287 | var event = {}
|
---|
288 | event['title'] = object['title'];
|
---|
289 | event['start'] = object['startTime'].replace('T', ' ');
|
---|
290 | event['end'] = object['endTime'].replace('T', ' ');
|
---|
291 | event['allDay'] = false;
|
---|
292 | event['color'] = '#3b71ca';
|
---|
293 | event['textColor'] = '#FFFFFF';
|
---|
294 | events.push(event);
|
---|
295 | });
|
---|
296 | // load events
|
---|
297 | callback(events);
|
---|
298 | },
|
---|
299 | error: function(error) {
|
---|
300 | console.log(error.responseText);
|
---|
301 | }
|
---|
302 | });
|
---|
303 | }
|
---|
304 | },
|
---|
305 | });
|
---|
306 | }
|
---|
307 |
|
---|
308 | function goToProfile() {
|
---|
309 | window.location = "/customer_admin";
|
---|
310 | }
|
---|
311 |
|
---|
312 | function destroyCalendar() {
|
---|
313 | $('#calendar').fullCalendar('destroy');
|
---|
314 | }
|
---|
315 |
|
---|
316 | function resetRatingCard() {
|
---|
317 | $('#rating-service-name').empty();
|
---|
318 | $('#rating-value').empty();
|
---|
319 | $('#rating-count').empty();
|
---|
320 | $('#reviews-li').remove();
|
---|
321 | }
|
---|
322 |
|
---|
323 | function setRatingCard(name, value, count, serviceId) {
|
---|
324 | $('#rating-service-name').text(name);
|
---|
325 | $('#rating-value').text(value);
|
---|
326 | $('#rating-count').text(count);
|
---|
327 | $('#reviews-li').remove();
|
---|
328 | getReviewsForService(serviceId);
|
---|
329 |
|
---|
330 | }
|
---|
331 |
|
---|
332 | function getReviewsForService(serviceId){
|
---|
333 | $.ajax({
|
---|
334 | url: "http://localhost:8080/api/review/" + serviceId
|
---|
335 | }).then(function (data) {
|
---|
336 | var $el = $("#reviewsModalBody");
|
---|
337 | $('#reviews-ul').append($('<td class="form-outline mb-4"><button type="button" id="reviews-li" class="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#showReviewsModal">Checkout reviews</button></td>'));
|
---|
338 | $el.empty();
|
---|
339 |
|
---|
340 | $.each(data, function (index, obj) {
|
---|
341 | var element = '<div class="card m-3" style="max-width: 300px; padding: 0;">';
|
---|
342 | element += '<div class="card-header" style="' + generateHeaderStyle(obj['rating']) + '">' + generateStars(obj['rating']) + '</div>';
|
---|
343 | element += '<ul class="list-group list-group-flush">';
|
---|
344 | element += '<li class="list-group-item"><i><b>Business:</b></i> ' + obj['businessName'] + '</li>';
|
---|
345 | element += '<li class="list-group-item"><i><b>Service:</b></i> ' + obj['serviceName'] + '</li>';
|
---|
346 | element += '<li class="list-group-item"><i><b>Reviewer:</b></i> ' + obj['customerName'] + '</li>';
|
---|
347 | element += '<li class="list-group-item"><i><b>Comment:</b></i> ' + obj['comment'] + '</li>';
|
---|
348 | element += '<li class="list-group-item"><small class="text-body-secondary"><i>Created:</i> ' + obj['created'] + '</small></li>';
|
---|
349 | element += '</ul>';
|
---|
350 | element += '</div>';
|
---|
351 |
|
---|
352 | $el.append(element);
|
---|
353 | });
|
---|
354 | });
|
---|
355 | }
|
---|
356 |
|
---|
357 | function generateStars(number) {
|
---|
358 | return '☆'.repeat(number);
|
---|
359 | }
|
---|
360 |
|
---|
361 | function generateHeaderStyle(number) {
|
---|
362 | var style = '';
|
---|
363 | switch (number) {
|
---|
364 | case 5:
|
---|
365 | style = 'background-color: RGBA(13,110,253,var(--bs-bg-opacity,1)) !important; ';
|
---|
366 | break;
|
---|
367 | case 4:
|
---|
368 | style = 'background-color: RGBA(25,135,84,var(--bs-bg-opacity,1)) !important; ';
|
---|
369 | break;
|
---|
370 | case 3:
|
---|
371 | style = 'background-color: RGBA(108,117,125,var(--bs-bg-opacity,1)) !important; ';
|
---|
372 | break;
|
---|
373 | case 2:
|
---|
374 | style = 'background-color: RGBA(255,193,7,var(--bs-bg-opacity,1)) !important; ';
|
---|
375 | break;
|
---|
376 | case 1:
|
---|
377 | style = 'background-color: RGBA(220,53,69,var(--bs-bg-opacity,1)) !important; ';
|
---|
378 | break;
|
---|
379 | }
|
---|
380 |
|
---|
381 | style += ' color: #fff !important;'
|
---|
382 | return style;
|
---|
383 | } |
---|