Ignore:
Timestamp:
01/15/24 00:11:01 (10 months ago)
Author:
gjoko kostadinov <gjokokostadinov@…>
Branches:
master
Children:
943857c
Parents:
e8999eb
Message:

Add services search functionality.

Location:
src/main/resources/static/js
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • src/main/resources/static/js/business_admin.js

    re8999eb rf29cd58  
    3535            '        </div>' +
    3636            '    </div>' +
     37            '    <div class="row" style="margin-top:10px;">' +
     38            '        <div class="form-outline col-md-10 d-grid">' +
     39            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
     40            '        </div>' +
     41            '    </div>' +
    3742            '</div>');
    3843        event.preventDefault();
     
    4954            var time = $($($(label).parent()).siblings()[0]).children()[0].value;
    5055            var price = $($($(label).parent()).siblings()[1]).children()[0].value;
     56            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
    5157
    5258            var serviceType = {};
     
    6167            service['duration'] = parseInt(time);
    6268            service['price'] = parseInt(price);
     69            service['description'] = description;
    6370            servicesObj.push(service);
    6471        });
     
    251258        $.each(business['services'], function (index, obj) {
    252259
    253             var element = '<div class=\"form-outline mb-4\">' +
     260            var element =
     261                '<div class=\"form-outline mb-4\">' +
    254262                '    <div class="row">' +
    255263                '        <div class="col-md-6">\n' +
     
    270278                '        </div>' +
    271279                '    </div>' +
     280                '    <div class="row" style="margin-top:10px;">' +
     281                '        <div class="form-outline col-md-10 d-grid">' +
     282                '            <input type="text" id="' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description"  value=\"' + obj.description + '" />' +
     283                '        </div>' +
     284                '    </div>' +
    272285                '</div>';
    273286
  • src/main/resources/static/js/homepage.js

    re8999eb rf29cd58  
    9494    });
    9595
    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 
    11696    $("#startdatetime").change(function() {
    11797        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'];
     98        var minutes = parseInt($("#service").attr('duration'));
    12099        date.setMinutes(date.getMinutes() + minutes);
    121100        document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
     
    131110        var appointment = {};
    132111        var business  = {};
    133         business['id'] = parseInt($("#company").val());
    134         appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
     112        business['id'] = parseInt($('#company').attr('business-id'));
     113        appointment['service'] = {'id': parseInt($('#service').attr('service-id')), 'business':business};
    135114        appointment['startTime'] = $("#startdatetime").val();
     115        console.log(appointment);
    136116
    137117        $.ajax({
     
    143123            success: function(succ){
    144124                alert("Successful appointment!");
    145                 var companyId = parseInt($("#company").find(':selected').val());
     125                var companyId = parseInt($('#company').attr('business-id'));
    146126                getAppointmentsByBusiness(companyId, events);
    147127                destroyCalendar();
     
    154134    });
    155135
     136    $('#search-input').keypress(function (e) {
     137
     138        var key = e.which;
     139        if(key === 13) { // the enter key code
     140            searchServices();
     141            return false;
     142        }
     143    });
     144
    156145});
    157146
     
    176165    element.append(defaultOption);
    177166}
    178 
    179 /*loadCalendar([{'title': 'Gjoko', 'start': '2023-09-01 01:00:00', 'end': '2023-09-01 01:30:00', 'allDay':false, 'color': 'blue'}])*/
    180167
    181168function getAppointmentsByBusiness(businessId, events) {
     
    273260                $(this).remove();
    274261            }
    275             console.log('dropped');
    276262
    277263        },
    278264        events: function (start, end, callback) {
    279             var selectedVal = $("#company").find(':selected').val();
     265            var selectedVal = $('#company').attr('business-id');
    280266            if(!isNaN(parseInt(selectedVal))) {
    281267                $.ajax({
     
    358344}
    359345
     346function searchServices() {
     347    let value = document.getElementById("search-input").value;
     348    $.ajax({
     349        type: 'GET',
     350        url: "http://localhost:8080/api/service?searchKeyword=" + value,
     351        success: function(data, textStatus, request) {
     352
     353            // clear previous data
     354            $('#searchResultsModalBody').html('');
     355
     356            if (data.length === 0) {
     357                showNoSearchResultsFound();
     358            } else {
     359                showSearchResults(data);
     360            }
     361
     362        },
     363        error: function (request, textStatus, errorThrown) {
     364            console.log(errorThrown);
     365        }
     366    });
     367}
     368
     369function showSearchResults(data) {
     370    var searchResultsBody = $('#searchResultsModalBody')
     371    searchResultsBody.append(
     372        '<div class="form-outline col-lg-12 row">\n' +
     373        '            <div class="form-outline col-lg-12">\n' +
     374        '                <div class="table-responsive">\n' +
     375        '                    <table class="table">\n' +
     376        '                        <thead>\n' +
     377        '                        <tr>\n' +
     378        '                            <th scope="col">#</th>\n' +
     379        '                            <th scope="col">Business</th>\n' +
     380        '                            <th scope="col">Service name</th>\n' +
     381        '                            <th scope="col">Service Description</th>\n' +
     382        '                            <th scope="col">Durantion/Price</th>\n' +
     383        '                            <th scope="col">Rating/ReviewCount</th>\n' +
     384        '                            <th scope="col">Make reserviation</th>\n' +
     385        '                        </tr>\n' +
     386        '                        </thead>\n' +
     387        '                        <tbody id="search-results-table-body">\n' +
     388        '                        </tbody>\n' +
     389        '                    </table>\n' +
     390        '                </div>\n' +
     391        '            </div>\n' +
     392        '        </div>');
     393    let $el = $('#search-results-table-body');
     394
     395    $.each(data, function (index, obj) {
     396        var element=
     397            '<tr>' +
     398            '   <th scope="row">' + (parseInt(index) + 1) + '</th>' +
     399            '   <td>' + obj['businessName'] + '</td>' +
     400            '   <td>' + obj['serviceName'] + '</td>' +
     401            '   <td>' + obj['description'] + '</td>' +
     402            '   <td>' + obj['duration'] + '/' + obj['price'] + '</td>' +
     403            '   <td>' + obj['rating'] + '/' + obj['reviewsCount'] + '</td>' +
     404            '   <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>' +
     405            '</tr>';
     406
     407        $el.append(element);
     408    });
     409
     410    $('#searchModal').modal('show');
     411}
     412
     413function makeReservation(name, value, count, serviceId, businessName, businessId, duration) {
     414    $('#searchModal').modal('hide');
     415    $('#body-after-search').css("display", "inline");
     416    $('#welcome-message').css('display', 'none');
     417    $('#calendar').fullCalendar('render');
     418    setRatingCard(name, value, count, serviceId);
     419    $('#company').val(businessName);
     420    $('#company').attr('business-id', businessId);
     421    $('#service').val(name);
     422    $('#service').attr('duration', duration);
     423    $('#service').attr('service-id', serviceId);
     424    $('#calendar').fullCalendar('refetchEvents');
     425}
     426
     427function showNoSearchResultsFound() {
     428    $('#searchResultsModalBody').text('Sorry we have no results for the thing that you search, please close the modal and search for something else.');
     429    $('#searchModal').modal('show');
     430}
     431
    360432function generateStars(number) {
    361433    return '☆'.repeat(number);
  • src/main/resources/static/js/register_business.js

    re8999eb rf29cd58  
    1717        var $el = $("#predefined_services");
    1818        $el.empty();
     19        console.log(selectedObj['serviceTypes']);
    1920        $.each(selectedObj['serviceTypes'], function (index, obj) {
    2021            $el.append(
    21                 '<div class=\"form-outline mb-4\">' +
     22                '<div class="form-outline mb-4">' +
    2223                '    <div class="row">' +
    2324                '        <div class="col-md-6">\n' +
    24                 '            <input class="form-check-input" type="checkbox" value=\"' + obj.id + '\" id=\"' + obj.id + '\">\n' +
    25                 '            <label class="form-check-label" for=\"' + obj.id + '\">\n' +
     25                '            <input class="form-check-input" type="checkbox" value="' + obj.id + '" id="' + obj.id + '">\n' +
     26                '            <label class="form-check-label" for="' + obj.id + '">\n' +
    2627                obj.name +
    2728                '            </label>\n' +
    2829                '        </div>' +
    29                 '        <div class=\"form-outline col-md-2 d-grid\">' +
    30                 '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '\" class=\"form-control\" placeholder="time" />' +
     30                '        <div class="form-outline col-md-2 d-grid">' +
     31                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '" class="form-control" placeholder="time" />' +
    3132                '        </div>' +
    32                 '        <div class=\"form-outline col-md-2 d-grid\">' +
    33                 '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "price" + '\" class=\"form-control\" placeholder="price" />' +
     33                '        <div class="form-outline col-md-2 d-grid">' +
     34                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
     35                '        </div>' +
     36                '    </div>' +
     37                '    <div class="row" style="margin-top:10px;">' +
     38                '        <div class="form-outline col-md-10 d-grid">' +
     39                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
    3440                '        </div>' +
    3541                '    </div>' +
     
    5864            '        </div>' +
    5965            '        <div class="form-outline col-md-2 d-grid">' +
    60             '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price"+ '" class="form-control" placeholder="price" />' +
     66            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
     67            '        </div>' +
     68            '        <div class="row" style="margin-top:10px;">' +
     69            '            <div class="form-outline col-md-10 d-grid">' +
     70            '                <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
     71            '            </div>' +
    6172            '        </div>' +
    6273            '    </div>' +
     
    90101            var time = $($($(label).parent()).siblings()[0]).children()[0].value;
    91102            var price = $($($(label).parent()).siblings()[1]).children()[0].value;
     103            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
    92104
    93105            var serviceType = {}
     
    99111            service['duration'] = time;
    100112            service['price'] = price;
     113            service['description'] = description;
    101114            servicesObj.push(service);
    102115        });
Note: See TracChangeset for help on using the changeset viewer.