Changeset 77205be for src/main/resources/static/js/homepage.js

Timestamp:

12/26/23 18:50:43 (6 months ago)

Author:

gjoko kostadinov <gjokokostadinov@…>

Branches:

master

Children:

1413ee2

Parents:

950fa0d

Message:

Add entire code

File:

• src/main/resources/static/js/homepage.js (modified) (5 diffs, 1 prop)

src/main/resources/static/js/homepage.js

@@ -3 +3 @@
     var businesses = {};
     var date = new Date();
+    var selectedServices = {};
+    var events = [];
     var d = date.getDate();
     var m = date.getMonth();
@@ -69 +71 @@
 
     $("#companyType").change(function () {
+        resetRatingCard();
         var selectedVal = $(this).find(':selected').val();
         var selectedObj = businessTypes[selectedVal - 1];
@@ -75 +78 @@
         }).then(function (data) {
             businesses = data;
-            console.log(data);
             var $el = $("#company");
             var $servicesEl = $("#service");
@@ -84 +86 @@
                 $el.append("<option value=" + obj.id + ">" + obj.companyName + "</option>");
             });
+
+            if (data && data.length === 1) {
+                selectedServices = data[0]["services"];
+                resetAndAppendServices(selectedServices);
+            }
         });
     });
 
     $("#company").change(function () {
+        resetRatingCard();
         var selectedVal = $(this).find(':selected').val();
         $.ajax({
             url: "http://localhost:8080/api/appointment/business/" + selectedVal
         }).then(function (data) {
-            console.log(data);
-            var $el = $("#service");
-            emptyDropdown($el);
-
-            var services = businesses.find(item => item.id == selectedVal)['services'];
-            console.log(services);
-
-            $.each(services, function (index, obj) {
-                $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
-            });
-        });
-    });
-
+            // get already stored service from in-memory
+            selectedServices = businesses.find(item => item.id == selectedVal)['services'];
+            resetAndAppendServices(selectedServices);
+        });
+        $('#calendar').fullCalendar('refetchEvents');
+    });
+
+    $("#service").change(function () {
+        var selectedVal = $("#service").find(':selected').val();
+        var service = selectedServices.find(item => item.id == selectedVal);
+        setRatingCard(service['serviceType']['name'], service['rating'], service['reviewsCount'], selectedVal);
+    });
+
+    $("#startdatetime").change(function() {
+        var date = new Date(document.getElementById("startdatetime").valueAsDate);
+        var selectedVal = $("#service").find(':selected').val();
+        var minutes = selectedServices.find(item => item.id == selectedVal)['duration'];
+        date.setMinutes(date.getMinutes() + minutes);
+        document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
+    });
 
     /* initialize the calendar
     -----------------------------------------------------------------*/
-
-    var calendar =  $('#calendar').fullCalendar({
+    loadCalendar();
+
+    resetRatingCard();
+
+    $("#createAppointment").click(function() {
+        var appointment = {};
+        var business  = {};
+        business['id'] = parseInt($("#company").val());
+        appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
+        appointment['startTime'] = $("#startdatetime").val();
+
+        $.ajax({
+            url: "http://localhost:8080/api/appointment",
+            type:"POST",
+            data: JSON.stringify(appointment),
+            contentType:"application/json; charset=utf-8",
+            dataType: 'text',
+            success: function(succ){
+                alert("Successful appointment!");
+                var companyId = parseInt($("#company").find(':selected').val());
+                getAppointmentsByBusiness(companyId, events);
+                destroyCalendar();
+                loadCalendar(events);
+            },
+            error: function(error) {
+                alert(error.responseText);
+            }
+        });
+    });
+
+});
+
+document.getElementById("login").addEventListener("click", function(event){
+   window.location = "/login";
+});
+
+function resetAndAppendServices(services) {
+    var $el = $("#service");
+    emptyDropdown($el);
+
+    $.each(services, function (index, obj) {
+        $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
+    });
+}
+
+function emptyDropdown(element) {
+    var defaultOption = element.children().get(0);
+    element.children().remove();
+    element.append(defaultOption);
+}
+
+/*loadCalendar([{'title': 'Gjoko', 'start': '2023-09-01 01:00:00', 'end': '2023-09-01 01:30:00', 'allDay':false, 'color': 'blue'}])*/
+
+function getAppointmentsByBusiness(businessId, events) {
+    $.ajax({
+        url: "http://localhost:8080/api/appointment/business/" + businessId,
+        type:"GET",
+        contentType:"application/json; charset=utf-8",
+        dataType: 'text',
+        success: function(data){
+            // reset events
+            events = [];
+            console.log(data);
+           $.each(JSON.parse(data), function (index, object) {
+               var event = {}
+               event['title'] = object['title'];
+               event['start'] = object['startTime'].replace('T', ' ');
+               event['end'] = object['endTime'].replace('T', ' ');
+               event['allDay'] = false;
+               event['color'] = 'blue';
+               events.push(event);
+           });
+
+        },
+        error: function(error) {
+            console.log(error.responseText);
+        }
+    });
+}
+
+function loadCalendar(events) {
+    $('#calendar').fullCalendar({
         header: {
             left: 'title',
@@ -178 +273 @@
 
         },
-
-        events: [
-            {
-                title: 'All Day Event',
-                start: new Date(y, m, 1)
-            },
-            {
-                id: 999,
-                title: 'Repeating Event',
-                start: new Date(y, m, d-3, 16, 0),
-                allDay: false,
-                className: 'info'
-            },
-            {
-                id: 999,
-                title: 'Repeating Event',
-                start: new Date(y, m, d+4, 16, 0),
-                allDay: false,
-                className: 'info'
-            },
-            {
-                title: 'Meeting',
-                start: new Date(y, m, d, 10, 30),
-                allDay: false,
-                className: 'info'
-            },
-            {
-                title: 'Lunch',
-                start: new Date(y, m, d, 12, 0),
-                end: new Date(y, m, d, 14, 0),
-                allDay: false,
-                className: 'info'
-            },
-            {
-                title: 'Birthday Party',
-                start: new Date(y, m, d+1, 19, 0),
-                end: new Date(y, m, d+1, 22, 30),
-                allDay: false,
-            },
-            {
-                title: 'Click for Google',
-                start: new Date(y, m, 28),
-                end: new Date(y, m, 29),
-                url: 'http://google.com/',
-                className: 'success'
-            }
-        ],
-    });
-
-    $("#createAppointment").click(function() {
-        var appointment = {};
-        appointment['business'] = {'id': parseInt($("#company").val())};
-        appointment['service'] = {'id': parseInt($("#service").val())};
-        appointment['startTime'] = $("#startdatetime").val();
-
-        $.ajax({
-            url: "http://localhost:8080/api/appointment",
-            type:"POST",
-            data: JSON.stringify(appointment),
-            contentType:"application/json; charset=utf-8",
-            dataType: 'text',
-            success: function(succ){
-                console.log('success');
-            },
-            error: function(err) {
-                console.log(JSON.stringify(err));
-            }
-        });
-    })
-
-});
-
-document.getElementById("login").addEventListener("click", function(event){
-   window.location = "/login";
-});
-
-function emptyDropdown(element) {
-    var defaultOption = element.children().get(0);
-    element.children().remove().end().append(defaultOption);
-}
+        events: function (start, end, callback) {
+            var selectedVal = $("#company").find(':selected').val();
+            if(!isNaN(parseInt(selectedVal))) {
+                $.ajax({
+                    url: "http://localhost:8080/api/appointment/business/" + selectedVal,
+                    type:"GET",
+                    contentType:"application/json; charset=utf-8",
+                    dataType: 'text',
+                    success: function(data){
+                        // reset events
+                        var events = [];
+                        $.each(JSON.parse(data), function (index, object) {
+                            var event = {}
+                            event['title'] = object['title'];
+                            event['start'] = object['startTime'].replace('T', ' ');
+                            event['end'] = object['endTime'].replace('T', ' ');
+                            event['allDay'] = false;
+                            event['color'] = '#3b71ca';
+                            event['textColor'] = '#FFFFFF';
+                            events.push(event);
+                        });
+                        // load events
+                        callback(events);
+                    },
+                    error: function(error) {
+                        console.log(error.responseText);
+                    }
+                });
+            }
+        },
+    });
+}
+
+function goToProfile() {
+    window.location = "/customer_admin";
+}
+
+function destroyCalendar() {
+    $('#calendar').fullCalendar('destroy');
+}
+
+function resetRatingCard() {
+    $('#rating-service-name').empty();
+    $('#rating-value').empty();
+    $('#rating-count').empty();
+    $('#reviews-li').remove();
+}
+
+function setRatingCard(name, value, count, serviceId) {
+    $('#rating-service-name').text(name);
+    $('#rating-value').text(value);
+    $('#rating-count').text(count);
+    $('#reviews-li').remove();
+    getReviewsForService(serviceId);
+
+}
+
+function getReviewsForService(serviceId){
+    $.ajax({
+        url: "http://localhost:8080/api/review/" + serviceId
+    }).then(function (data) {
+        var $el = $("#reviewsModalBody");
+        $('#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>'));
+        $el.empty();
+
+        $.each(data, function (index, obj) {
+            var element = '<div class="card m-3" style="max-width: 300px; padding: 0;">';
+            element +=  '<div class="card-header" style="' + generateHeaderStyle(obj['rating']) + '">' + generateStars(obj['rating']) + '</div>';
+            element += '<ul class="list-group list-group-flush">';
+            element += '<li class="list-group-item"><i><b>Business:</b></i> ' + obj['businessName'] + '</li>';
+            element += '<li class="list-group-item"><i><b>Service:</b></i> ' + obj['serviceName'] + '</li>';
+            element += '<li class="list-group-item"><i><b>Reviewer:</b></i> ' + obj['customerName'] + '</li>';
+            element += '<li class="list-group-item"><i><b>Comment:</b></i> ' + obj['comment'] + '</li>';
+            element += '<li class="list-group-item"><small class="text-body-secondary"><i>Created:</i> ' + obj['created'] + '</small></li>';
+            element += '</ul>';
+            element += '</div>';
+
+            $el.append(element);
+        });
+    });
+}
+
+function generateStars(number) {
+    return '☆'.repeat(number);
+}
+
+function generateHeaderStyle(number) {
+    var style = '';
+    switch (number) {
+        case 5:
+            style = 'background-color: RGBA(13,110,253,var(--bs-bg-opacity,1)) !important; ';
+            break;
+        case 4:
+            style = 'background-color: RGBA(25,135,84,var(--bs-bg-opacity,1)) !important; ';
+            break;
+        case 3:
+            style = 'background-color: RGBA(108,117,125,var(--bs-bg-opacity,1)) !important; ';
+            break;
+        case 2:
+            style = 'background-color: RGBA(255,193,7,var(--bs-bg-opacity,1)) !important; ';
+            break;
+        case 1:
+            style = 'background-color: RGBA(220,53,69,var(--bs-bg-opacity,1)) !important; ';
+            break;
+    }
+
+    style += ' color: #fff !important;'
+    return style;
+}