Changeset f29cd58 for src/main/resources/static

Timestamp:

01/15/24 00:11:01 (6 months ago)

Author:

gjoko kostadinov <gjokokostadinov@…>

Branches:

master

Children:

943857c

Parents:

e8999eb

Message:

Add services search functionality.

Location:

src/main/resources/static

Files:

• css/homepage.css (modified) (1 diff)
• js/business_admin.js (modified) (5 diffs)
• js/homepage.js (modified) (7 diffs)
• js/register_business.js (modified) (4 diffs)

src/main/resources/static/css/homepage.css

@@ -75 +75 @@
     padding: 10px;
 }
+
+.welcome_message {
+    width:480px;
+    margin:auto;
+}

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

@@ -35 +35 @@
             '        </div>' +
             '    </div>' +
+            '    <div class="row" style="margin-top:10px;">' +
+            '        <div class="form-outline col-md-10 d-grid">' +
+            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
+            '        </div>' +
+            '    </div>' +
             '</div>');
         event.preventDefault();
@@ -49 +54 @@
             var time = $($($(label).parent()).siblings()[0]).children()[0].value;
             var price = $($($(label).parent()).siblings()[1]).children()[0].value;
+            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
 
             var serviceType = {};
@@ -61 +67 @@
             service['duration'] = parseInt(time);
             service['price'] = parseInt(price);
+            service['description'] = description;
             servicesObj.push(service);
         });
@@ -251 +258 @@
         $.each(business['services'], function (index, obj) {
 
-            var element = '<div class=\"form-outline mb-4\">' +
+            var element =
+                '<div class=\"form-outline mb-4\">' +
                 '    <div class="row">' +
                 '        <div class="col-md-6">\n' +
@@ -270 +278 @@
                 '        </div>' +
                 '    </div>' +
+                '    <div class="row" style="margin-top:10px;">' +
+                '        <div class="form-outline col-md-10 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description"  value=\"' + obj.description + '" />' +
+                '        </div>' +
+                '    </div>' +
                 '</div>';
 

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

@@ -94 +94 @@
     });
 
-    $("#company").change(function () {
-        resetRatingCard();
-        var selectedVal = $(this).find(':selected').val();
-        $.ajax({
-            url: "http://localhost:8080/api/appointment/business/" + selectedVal
-        }).then(function (data) {
-            // get already stored service from in-memory
-            selectedServices = businesses.find(item => item.id == selectedVal)['services'];
-            console.log(selectedServices);
-            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'];
+        var minutes = parseInt($("#service").attr('duration'));
         date.setMinutes(date.getMinutes() + minutes);
         document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
@@ -131 +110 @@
         var appointment = {};
         var business  = {};
-        business['id'] = parseInt($("#company").val());
-        appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
+        business['id'] = parseInt($('#company').attr('business-id'));
+        appointment['service'] = {'id': parseInt($('#service').attr('service-id')), 'business':business};
         appointment['startTime'] = $("#startdatetime").val();
+        console.log(appointment);
 
         $.ajax({
@@ -143 +123 @@
             success: function(succ){
                 alert("Successful appointment!");
-                var companyId = parseInt($("#company").find(':selected').val());
+                var companyId = parseInt($('#company').attr('business-id'));
                 getAppointmentsByBusiness(companyId, events);
                 destroyCalendar();
@@ -154 +134 @@
     });
 
+    $('#search-input').keypress(function (e) {
+
+        var key = e.which;
+        if(key === 13) { // the enter key code
+            searchServices();
+            return false;
+        }
+    });
+
 });
 
@@ -176 +165 @@
     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) {
@@ -273 +260 @@
                 $(this).remove();
             }
-            console.log('dropped');
 
         },
         events: function (start, end, callback) {
-            var selectedVal = $("#company").find(':selected').val();
+            var selectedVal = $('#company').attr('business-id');
             if(!isNaN(parseInt(selectedVal))) {
                 $.ajax({
@@ -358 +344 @@
 }
 
+function searchServices() {
+    let value = document.getElementById("search-input").value;
+    $.ajax({
+        type: 'GET',
+        url: "http://localhost:8080/api/service?searchKeyword=" + value,
+        success: function(data, textStatus, request) {
+
+            // clear previous data
+            $('#searchResultsModalBody').html('');
+
+            if (data.length === 0) {
+                showNoSearchResultsFound();
+            } else {
+                showSearchResults(data);
+            }
+
+        },
+        error: function (request, textStatus, errorThrown) {
+            console.log(errorThrown);
+        }
+    });
+}
+
+function showSearchResults(data) {
+    var searchResultsBody = $('#searchResultsModalBody')
+    searchResultsBody.append(
+        '<div class="form-outline col-lg-12 row">\n' +
+        '            <div class="form-outline col-lg-12">\n' +
+        '                <div class="table-responsive">\n' +
+        '                    <table class="table">\n' +
+        '                        <thead>\n' +
+        '                        <tr>\n' +
+        '                            <th scope="col">#</th>\n' +
+        '                            <th scope="col">Business</th>\n' +
+        '                            <th scope="col">Service name</th>\n' +
+        '                            <th scope="col">Service Description</th>\n' +
+        '                            <th scope="col">Durantion/Price</th>\n' +
+        '                            <th scope="col">Rating/ReviewCount</th>\n' +
+        '                            <th scope="col">Make reserviation</th>\n' +
+        '                        </tr>\n' +
+        '                        </thead>\n' +
+        '                        <tbody id="search-results-table-body">\n' +
+        '                        </tbody>\n' +
+        '                    </table>\n' +
+        '                </div>\n' +
+        '            </div>\n' +
+        '        </div>');
+    let $el = $('#search-results-table-body');
+
+    $.each(data, function (index, obj) {
+        var element=
+            '<tr>' +
+            '   <th scope="row">' + (parseInt(index) + 1) + '</th>' +
+            '   <td>' + obj['businessName'] + '</td>' +
+            '   <td>' + obj['serviceName'] + '</td>' +
+            '   <td>' + obj['description'] + '</td>' +
+            '   <td>' + obj['duration'] + '/' + obj['price'] + '</td>' +
+            '   <td>' + obj['rating'] + '/' + obj['reviewsCount'] + '</td>' +
+            '   <td><button type="button" class="btn btn-primary" ' + 'onclick="makeReservation(\'' + obj['serviceName'] + '\',' + obj['rating'] + ',' + obj['reviewsCount'] + ',' + obj['id'] + ',\'' + obj['businessName'] + '\',' + obj['businessId'] + ',' + obj['duration'] +  ')" ' + '>Reserve</button></td>' +
+            '</tr>';
+
+        $el.append(element);
+    });
+
+    $('#searchModal').modal('show');
+}
+
+function makeReservation(name, value, count, serviceId, businessName, businessId, duration) {
+    $('#searchModal').modal('hide');
+    $('#body-after-search').css("display", "inline");
+    $('#welcome-message').css('display', 'none');
+    $('#calendar').fullCalendar('render');
+    setRatingCard(name, value, count, serviceId);
+    $('#company').val(businessName);
+    $('#company').attr('business-id', businessId);
+    $('#service').val(name);
+    $('#service').attr('duration', duration);
+    $('#service').attr('service-id', serviceId);
+    $('#calendar').fullCalendar('refetchEvents');
+}
+
+function showNoSearchResultsFound() {
+    $('#searchResultsModalBody').text('Sorry we have no results for the thing that you search, please close the modal and search for something else.');
+    $('#searchModal').modal('show');
+}
+
 function generateStars(number) {
     return '☆'.repeat(number);

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

@@ -17 +17 @@
         var $el = $("#predefined_services");
         $el.empty();
+        console.log(selectedObj['serviceTypes']);
         $.each(selectedObj['serviceTypes'], function (index, obj) {
             $el.append(
-                '<div class=\"form-outline mb-4\">' +
+                '<div class="form-outline mb-4">' +
                 '    <div class="row">' +
                 '        <div class="col-md-6">\n' +
-                '            <input class="form-check-input" type="checkbox" value=\"' + obj.id + '\" id=\"' + obj.id + '\">\n' +
-                '            <label class="form-check-label" for=\"' + obj.id + '\">\n' +
+                '            <input class="form-check-input" type="checkbox" value="' + obj.id + '" id="' + obj.id + '">\n' +
+                '            <label class="form-check-label" for="' + obj.id + '">\n' +
                 obj.name +
                 '            </label>\n' +
                 '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '\" class=\"form-control\" placeholder="time" />' +
+                '        <div class="form-outline col-md-2 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '" class="form-control" placeholder="time" />' +
                 '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "price" + '\" class=\"form-control\" placeholder="price" />' +
+                '        <div class="form-outline col-md-2 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
+                '        </div>' +
+                '    </div>' +
+                '    <div class="row" style="margin-top:10px;">' +
+                '        <div class="form-outline col-md-10 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
                 '        </div>' +
                 '    </div>' +
@@ -58 +64 @@
             '        </div>' +
             '        <div class="form-outline col-md-2 d-grid">' +
-            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price"+ '" class="form-control" placeholder="price" />' +
+            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
+            '        </div>' +
+            '        <div class="row" style="margin-top:10px;">' +
+            '            <div class="form-outline col-md-10 d-grid">' +
+            '                <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
+            '            </div>' +
             '        </div>' +
             '    </div>' +
@@ -90 +101 @@
             var time = $($($(label).parent()).siblings()[0]).children()[0].value;
             var price = $($($(label).parent()).siblings()[1]).children()[0].value;
+            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
 
             var serviceType = {}
@@ -99 +111 @@
             service['duration'] = time;
             service['price'] = price;
+            service['description'] = description;
             servicesObj.push(service);
         });