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

Timestamp:

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

Author:

gjoko kostadinov <gjokokostadinov@…>

Branches:

master

Children:

1413ee2

Parents:

950fa0d

Message:

Add entire code

Location:

src/main/resources/static/js

Files:

• admin.js (modified) (2 diffs, 1 prop)
• bootstrap.bundle.min.js (modified) (1 prop)
• bootstrap.bundle.min.js.map (modified) (1 prop)
• business_admin.js (modified) (3 diffs, 1 prop)
• customer_admin.js (added)
• fullcalendar.js (modified) (3 diffs)
• homepage.js (modified) (5 diffs, 1 prop)
• login.js (modified) (1 prop)
• logout.js (modified) (1 prop)
• register_business.js (modified) (3 diffs, 1 prop)

src/main/resources/static/js/admin.js

@@ -1 +1 @@
 $(document).ready(function() {
-    var companies = {};
+    let companies = [];
 
-    $.ajax({
-       url: "http://localhost:8080/api/business"
-    }).then(function (data) {
+    getCompanies().then(function (data) {
         companies = data;
-        var $el = $("#table_body");
-
-        $.each(data, function (index, obj) {
-            if(obj.businessStatus == "NEW" || obj.businessStatus == "DEACTIVATED") {
-                $el.append("<tr>\n" +
-                    "            <th scope=\"row\">" + obj.id + "</th>\n" +
-                    "            <td>" + obj.companyName + "</td>\n" +
-                    "            <td>" + obj.owner.firstName + " " + obj.owner.lastName + "</td>\n" +
-                    "            <td><input class=\"form-check-input\" type=\"checkbox\" value=\"" + obj.id +"\"></td>\n" +
-                    "        </tr>")
-            }
-            if (obj.businessStatus == "ACTIVE") {
-                $el.append("<tr>\n" +
-                    "            <th scope=\"row\">" + obj.id + "</th>\n" +
-                    "            <td>" + obj.companyName + "</td>\n" +
-                    "            <td>" + obj.owner.firstName + " " + obj.owner.lastName + "</td>\n" +
-                    "            <td><input class=\"form-check-input\" type=\"checkbox\" checked value=\"" + obj.id +"\"></td>\n" +
-                    "        </tr>")
-            }
-        });
     });
 
     $('#save_button').click(function () {
+        var companiesToSave = [];
         $.each($('#table_body tr'), function(index, row) {
-            if(companies[index].businessStatus == "NEW" &&  $($($(row).children() [3]).children()[0]).is(':checked')) {
-                companies[index]['businessStatus'] = 'ACTIVE';
+            if((companies[index].businessStatus === "NEW" || companies[index].businessStatus === "DEACTIVATED") &&  $($($(row).children() [3]).children()[0]).is(':checked')) {
+                let cloneCompany = { ...companies[index] }
+                cloneCompany['businessStatus'] = 'ACTIVE';
+                companiesToSave.push(cloneCompany);
             }
-            if(companies[index].businessStatus == "ACTIVE" && ! $($($(row).children() [3]).children()[0]).is(':checked')) {
-                companies[index]['businessStatus'] = 'DEACTIVATED';
+            if(companies[index].businessStatus === "ACTIVE" && !$($($(row).children() [3]).children()[0]).is(':checked')) {
+                let cloneCompany = { ...companies[index] }
+                cloneCompany['businessStatus'] = 'DEACTIVATED';
+                companiesToSave.push(cloneCompany);
             }
         });
-        console.log(JSON.stringify(companies));
+        console.log(JSON.stringify(companiesToSave));
+
+
         $.ajax({
             url: "http://localhost:8080/api/business",
             type:"PATCH",
-            data: JSON.stringify(companies),
+            data: JSON.stringify(companiesToSave),
             contentType:"application/json; charset=utf-8",
             dataType: 'text',
             success: function(succ){
+                getCompanies().then(function (data) {
+                    companies = data;
+                });
                 alert( "Updates applied successfully" );
             },
@@ -53 +41 @@
         event.preventDefault();
     });
+
+    function getCompanies() {
+        return $.ajax({
+            url: "http://localhost:8080/api/business"
+        }).then(function (data) {
+            var $el = $("#table_body");
+            $("#new_table tbody").html("");
+            $.each(data, function (index, obj) {
+                if(obj.businessStatus == "NEW" || obj.businessStatus == "DEACTIVATED") {
+                    $el.append("<tr>\n" +
+                        "            <th scope=\"row\">" + obj.id + "</th>\n" +
+                        "            <td>" + obj.companyName + "</td>\n" +
+                        "            <td>" + obj.owner.firstName + " " + obj.owner.lastName + "</td>\n" +
+                        "            <td><input class=\"form-check-input\" type=\"checkbox\" value=\"" + obj.id +"\"></td>\n" +
+                        "        </tr>")
+                }
+                if (obj.businessStatus == "ACTIVE") {
+                    $el.append("<tr>\n" +
+                        "            <th scope=\"row\">" + obj.id + "</th>\n" +
+                        "            <td>" + obj.companyName + "</td>\n" +
+                        "            <td>" + obj.owner.firstName + " " + obj.owner.lastName + "</td>\n" +
+                        "            <td><input class=\"form-check-input\" type=\"checkbox\" checked value=\"" + obj.id +"\"></td>\n" +
+                        "        </tr>")
+                }
+            });
+            return data;
+        });
+    }
 });

src/main/resources/static/js/business_admin.js

@@ -1 +1 @@
 $(document).ready(function() {
-
     var business = {};
 
-    $.ajax({
-        url: "http://localhost:8080/api/business/me"
-    }).then(function (data) {
-        business = data;
-        var $header = $("#header");
-
-        // header
-        $header.text($header.text() + " " + business["owner"]['firstName'] + " " + business['owner']['lastName']);
-
-        // business info
-        if(business['businessStatus'] == 'NEW') {
-            $('#new_business_warning').removeAttr("hidden");
-        }
-        $('#business_status').val(business['businessStatus']);
-        $('#business_type').val(business['businessType']['text']);
-
-        // owner info
-        $('#firstName').val(business['owner']['firstName']);
-        $('#lastName').val(business['owner']['lastName']);
-        $('#email').val(business['owner']['email']);
-        $('#username').val(business['owner']['username']);
-
-        // services info
-        var $el = $("#predefined_services_admin_panel");
-        $el.empty();
-        $.each(business['services'], function (index, obj) {
-            $el.append(
-                '<div class=\"form-outline mb-4\">' +
-                '    <div class="row">' +
-                '        <div class="col-md-6">\n' +
-                '            <input class="form-check-input" type="checkbox" checked value=\"' + obj.id + '\" id=\"' + obj.id + '\">\n' +
-                '            <label class="form-check-label" for=\"' + obj.id + '\">\n' +
-                obj['serviceType'].name +
-                '            </label>\n' +
-                '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "duration" + '\" class=\"form-control\" placeholder="time" value=\"' + obj.duration + '" />' +
-                '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "price" + '\" class=\"form-control\" placeholder="price" value=\"' + obj.price + '" />' +
-                '        </div>' +
-                '    </div>' +
-                '</div>');
-        });
-    });
+    getBusinessInfo(business);
+
+    getAppointments();
 
     $("#add_service").click(function () {
@@ -122 +79 @@
     $("#update_owner_button").click(function() {
         businesses = [];
-        console.log("Gjoko");
         business['owner']['firstName'] = $('#firstName').val();
         business['owner']['lastName'] = $('#lastName').val();
         business['owner']['email'] = $('#email').val();
+        business['owner']['phoneNumber'] = $('#phoneNumber').val();
         business['owner']['username'] = $('#username').val();
 
@@ -147 +104 @@
     event.preventDefault();
 });
+
+function cancelAppointment(appointmentId) {
+    if (confirm("Are you sure you want to cancel the appointment?")) {
+        $.ajax({
+            url: "http://localhost:8080/api/appointment/" + appointmentId,
+            type:"DELETE"
+        }).success(function (data) {
+            alert("Appointment successfully canceled.")
+            getAppointments();
+        }).error(function (error) {
+            alert("Something went wrong.");
+        });
+    }
+}
+
+function getAppointments() {
+    $.ajax({
+        url: "http://localhost:8080/api/appointment/future/me"
+    }).then(function (data) {
+        console.log(data);
+        var $el = $("#bookings-table-body");
+        $el.empty();
+        $.each(data, function (index, obj) {
+            var element =
+                '<tr>' +
+                '   <th scope="row">' + (parseInt(index) + 1) + '</th>' +
+                '   <td>' + obj['fullName'] + '</td>' +
+                '   <td>' + obj['email'] + '</td>' +
+                '   <td>' + obj['phoneNumber'] + '</td>' +
+                '   <td>' + obj['timePeriod'] + '</td>' +
+                '   <td>' + obj['serviceName'] + '</td>';
+
+            switch (obj['status']) {
+                case 'NEW':
+                    element += '   <td><button type="button" class="btn btn-danger" onclick="cancelAppointment(' + obj['appointmentId'] + ')">Cancel appointment</button></td>';
+                    break;
+                case 'CANCELLED_BY_CUSTOMER':
+                    element += '   <td><button type="button" class="btn btn-secondary" disabled>Cancelled by customer</button></td>';
+                    break;
+                case 'CANCELLED_BY_BUSINESS_OWNER':
+                    element += '   <td><button type="button" class="btn btn-secondary" disabled>Cancelled by business owner</button></td>';
+                    break;
+            }
+            element+='</tr>';
+
+            $el.append(element);
+        });
+    });
+}
+
+function getBusinessInfo(business) {
+    $.ajax({
+        url: "http://localhost:8080/api/business/me"
+    }).then(function (data) {
+        business = data;
+        var $header = $("#header");
+
+        // header
+        $header.text($header.text() + " " + business["owner"]['firstName'] + " " + business['owner']['lastName']);
+
+        // business info
+        if(business['businessStatus'] == 'NEW') {
+            $('#new_business_warning').removeAttr("hidden");
+        }
+        $('#business_status').val(business['businessStatus']);
+        $('#business_type').val(business['businessType']['text']);
+
+        // owner info
+        $('#firstName').val(business['owner']['firstName']);
+        $('#lastName').val(business['owner']['lastName']);
+        $('#phoneNumber').val(business['owner']['phoneNumber']);
+        $('#email').val(business['owner']['email']);
+        $('#username').val(business['owner']['username']);
+
+        // services info
+        var $el = $("#predefined_services_admin_panel");
+        $el.empty();
+        $.each(business['services'], function (index, obj) {
+            $el.append(
+                '<div class=\"form-outline mb-4\">' +
+                '    <div class="row">' +
+                '        <div class="col-md-6">\n' +
+                '            <input class="form-check-input" type="checkbox" checked value=\"' + obj.id + '\" id=\"' + obj.id + '\">\n' +
+                '            <label class="form-check-label" for=\"' + obj.id + '\">\n' + obj['serviceType'].name + '</label>\n' +
+                '        </div>' +
+                '        <div class=\"form-outline col-md-2 d-grid\">' +
+                '            <input type=\"text\" id=\"' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "duration" + '\" class=\"form-control\" placeholder="time" value=\"' + obj.duration + '" />' +
+                '        </div>' +
+                '        <div class=\"form-outline col-md-2 d-grid\">' +
+                '            <input type=\"text\" id=\"' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "price" + '\" class=\"form-control\" placeholder="price" value=\"' + obj.price + '" />' +
+                '        </div>' +
+                '    </div>' +
+                '</div>');
+        });
+    });
+}

src/main/resources/static/js/fullcalendar.js

@@ -332 +332 @@
         /* View Rendering
         -----------------------------------------------------------------------------*/
-        
-
         function changeView(newViewName) {
                 if (!currentView || newViewName != currentView.name) {
@@ -480 +478 @@
         // TODO: going forward, most of this stuff should be directly handled by the view
 
-
         function refetchEvents() { // can be called as an API method
                 clearEvents();
@@ -538 +535 @@
         }
 
-
-
         /* Header Updating
         -----------------------------------------------------------------------------*/
-
-
         function updateTitle() {
                 header.updateTitle(currentView.title);

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;
+}

src/main/resources/static/js/register_business.js

@@ -75 +75 @@
         ownerObj['username'] = $('#username').val();
         ownerObj['password'] = $('#password').val();
+        ownerObj['phoneNumber'] = $('#phoneNumber').val();
         businessObj['owner'] = ownerObj;
 
@@ -102 +103 @@
         });
         businessObj['services'] = servicesObj;
+        console.log(businessObj);
         $.ajax({
             url: "http://localhost:8080/api/business",
@@ -108 +110 @@
             contentType:"application/json; charset=utf-8",
             dataType: 'text',
-            success: function(succ){
+            success: function(success){
                 alert( "Well done! You have finished the registration process. " +
                     "Please check periodically to see if the company has been approved." );