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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • src/main/resources/templates/homepage.html

    re8999eb rf29cd58  
    1616    <link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
    1717    <link href="css/homepage.css" rel="stylesheet"/>
    18     <link href="css/headers.css" rel="stylesheet" />
     18    <link href="css/headers.css" rel="stylesheet"/>
    1919</head>
    2020<body>
     
    2323<header class="p-3 mb-3 border-bottom">
    2424    <div class="row" style="justify-content: space-between;">
    25         <div class="col-md-8 mb-8">
     25        <div class="col-md-4 mb-4">
    2626            Welcome to the Schedlr
     27        </div>
     28        <div class="col-md-3 mb-3">
     29            <input class="form-control mr-sm-2" id="search-input" type="search" placeholder="Search" aria-label="Find services">
     30        </div>
     31
     32        <div class="col-md-1 mb-1">
     33            <button id="search" class="btn btn-primary btn-block" onclick="searchServices()">
     34                Search
     35            </button>
    2736        </div>
    2837        <div class="col-md-2 mb-2">
     
    4554<!-- Navbar end -->
    4655<div class="container">
    47     <div id='wrap'>
    48         <div id='calendar'></div>
    49         <div style='clear:both'></div>
    50     </div>
    51 
    52 
    53     <div class="card">
    54         <div class="form-outline mb-4">
    55             <select class="form-select" id="companyType" aria-label="Select company type">
    56                 <option disabled selected hidden>Company Type</option>
    57             </select>
     56    <div id='body-after-search' style="display:none;">
     57        <div id='wrap'>
     58            <div id='calendar'></div>
     59            <div style='clear:both'></div>
     60        </div>
     61        <div class="card">
     62            <div class="form-outline mb-4">
     63                <input id="company" disabled class="form-control" placeholder="company"
     64                       aria-label="company"/>
     65            </div>
     66            <div class="form-outline mb-4">
     67                <input id="service" disabled class="form-control" placeholder="service"
     68                       aria-label="service"/>
     69            </div>
     70            <div class="form-outline mb-4">
     71                <label for="startdatetime">Start:</label>
     72                <input type="datetime-local" id="startdatetime" name="startdatetime" style="float:right;">
     73            </div>
     74            <div class="form-outline mb-4">
     75                <label for="enddatetime">End:</label>
     76                <input type="datetime-local" id="enddatetime" name="enddatetime" style="float:right;">
     77            </div>
     78            <div class="form-outline mb-4">
     79                <button id="createAppointment" class="btn btn-primary btn-block">
     80                    Create Appointment
     81                </button>
     82            </div>
     83        </div>
     84        <div class="card form-outline mb-4" style="margin-top:30px;">
     85            <ul class="list-group list-group-flush" id="reviews-ul">
     86                <li class="list-group-item"><b>service name: </b><span id="rating-service-name"></span></li>
     87                <li class="list-group-item"><b>rating </b><span id="rating-value"></span></li>
     88                <li class="list-group-item" style="margin-bottom:10px;"><b>reviews count </b><span
     89                        id="rating-count"></span></li>
     90                <li class="list-group-item" id="reviews-li"><a href="#/reviews_page">Checkout reviews</a></li>
     91            </ul>
    5892        </div>
    5993
    60         <div class="form-outline mb-4">
    61             <select class="form-select" id="company" aria-label="Select company">
    62                 <option disabled selected hidden>Company</option>
    63             </select>
    64         </div>
    65         <div class="form-outline mb-4">
    66             <select class="form-select" id="service" aria-label="Select service">
    67                 <option disabled selected hidden>Service</option>
    68             </select>
    69         </div>
    70         <div class="form-outline mb-4">
    71             <label for="startdatetime">Start:</label>
    72             <input type="datetime-local" id="startdatetime" name="startdatetime" style="float:right;">
    73         </div>
    74         <div class="form-outline mb-4">
    75             <label for="enddatetime">End:</label>
    76             <input type="datetime-local" id="enddatetime" name="enddatetime" style="float:right;">
    77         </div>
    78         <div class="form-outline mb-4">
    79             <button id="createAppointment" class="btn btn-primary btn-block">
    80                 Create Appointment
    81             </button>
     94    </div>
     95    <div id="welcome-message" class="welcome_message">
     96        <div class="card text-center">
     97            <div class="card-body">
     98                <h1 class="card-title">
     99                    Welcome to Schedlr, please you the search bar to find the services you want.
     100                </h1>
     101            </div>
    82102        </div>
    83103    </div>
    84     <div class="card form-outline mb-4" style="margin-top:30px;" >
    85         <ul class="list-group list-group-flush" id="reviews-ul">
    86             <li class="list-group-item"><b>service name: </b><span id="rating-service-name"></span></li>
    87             <li class="list-group-item"><b>rating </b><span id="rating-value"></span></li>
    88             <li class="list-group-item" style="margin-bottom:10px;"><b>reviews count </b><span id="rating-count"></span></li>
    89             <li class="list-group-item" id="reviews-li"><a href="#/reviews_page">Checkout reviews</a></li>
    90         </ul>
    91     </div>
    92 
    93 </div>
    94 <div class="modal fade" id="showReviewsModal" tabindex="-1" aria-labelledby="showReviewsModalLabel" aria-hidden="true">
    95     <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" >
    96         <div class="modal-content">
    97             <div class="modal-header">
    98                 <h1>Reviews</h1>
    99                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    100             </div>
    101             <div class="modal-body form-outline col-lg-12 row" id="reviewsModalBody" style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
    102                 <div class="card m-3" style="max-width: 300px; padding: 0;">
    103                     <div class="card-header text-bg-success">
    104                         ☆☆☆☆☆
    105                     </div>
    106                     <ul class="list-group list-group-flush">
    107                         <li class="list-group-item"><i>Business:</i> Businessname<</li>
    108                         <li class="list-group-item"><i>Service:</i> Customer Name</li>
    109                         <li class="list-group-item"><i>Reviewer:</i> Customer Name</li>
    110                         <li class="list-group-item"><i>Comment:</i> Lorem ipsum diem amet</li>
    111                         <li class="list-group-item"><small class="text-body-secondary">Created on 29-11-2023T11:32:23</small></li>
    112                     </ul>
     104    <div class="modal fade" id="showReviewsModal" tabindex="-1" aria-labelledby="showReviewsModalLabel"
     105         aria-hidden="true">
     106        <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
     107            <div class="modal-content">
     108                <div class="modal-header">
     109                    <h1>Reviews</h1>
     110                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     111                </div>
     112                <div class="modal-body form-outline col-lg-12 row" id="reviewsModalBody"
     113                     style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
     114                </div>
     115                <div class="modal-footer">
     116                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    113117                </div>
    114118            </div>
    115             <div class="modal-footer">
    116                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
     119        </div>
     120    </div>
     121    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="showSearchResultsModalLabel" aria-hidden="true">
     122        <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
     123            <div class="modal-content">
     124                <div class="modal-header">
     125                    <h1>Search results</h1>
     126                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     127                </div>
     128                <div class="modal-body form-outline col-lg-12 row" id="searchResultsModalBody"
     129                     style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
     130                </div>
     131                <div class="modal-footer">
     132                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
     133                </div>
    117134            </div>
    118135        </div>
     136
    119137    </div>
    120138</div>
Note: See TracChangeset for help on using the changeset viewer.