[77205be] | 1 | $(document).ready(function() {
|
---|
| 2 |
|
---|
| 3 | getCustomerInfo();
|
---|
| 4 |
|
---|
| 5 | getFutureAppointments();
|
---|
| 6 |
|
---|
| 7 | getPastAppointments();
|
---|
| 8 |
|
---|
| 9 | getReviewsForCustomer();
|
---|
| 10 |
|
---|
| 11 | $("#update_customer_button").click(function() {
|
---|
| 12 | var customerForSave = customer;
|
---|
| 13 | customerForSave['firstName'] = $('#firstName').val();
|
---|
| 14 | customerForSave['lastName'] = $('#lastName').val();
|
---|
| 15 | customerForSave['email'] = $('#email').val();
|
---|
| 16 | customerForSave['phoneNumber'] = $('#phoneNumber').val();
|
---|
| 17 | customerForSave['username'] = $('#username').val();
|
---|
| 18 |
|
---|
| 19 | $.ajax({
|
---|
| 20 | url: "http://localhost:8080/api/customer",
|
---|
| 21 | type:"PATCH",
|
---|
| 22 | data: JSON.stringify(customerForSave),
|
---|
| 23 | contentType:"application/json; charset=utf-8",
|
---|
| 24 | dataType: 'text',
|
---|
| 25 | success: function(succ){
|
---|
| 26 | alert( "Updates applied successfully" );
|
---|
| 27 | },
|
---|
| 28 | error: function(err) {
|
---|
| 29 | alert(err);
|
---|
| 30 | }
|
---|
| 31 | });
|
---|
| 32 | });
|
---|
| 33 |
|
---|
| 34 |
|
---|
| 35 | $("#post-review-button").click(function () {
|
---|
| 36 | var ratingRadios = document.getElementsByName('rating');
|
---|
| 37 | var rating = 0;
|
---|
| 38 | for (i = 0; i < ratingRadios.length; i++) {
|
---|
| 39 | if (ratingRadios[i].checked) {
|
---|
| 40 | rating = ratingRadios[i].value;
|
---|
| 41 | }
|
---|
| 42 | }
|
---|
| 43 | var id = $('.id-class').attr('id') ;
|
---|
| 44 | var message = $('#message-text').val();
|
---|
| 45 | postAppointmentReview(id, rating, message);
|
---|
| 46 | });
|
---|
| 47 |
|
---|
| 48 | $('#reviewModal').on('show.bs.modal', function (event) {
|
---|
| 49 | // Button that triggered the modal
|
---|
| 50 | const button = event.relatedTarget
|
---|
| 51 | // Extract info from data-bs-* attributes
|
---|
| 52 | const recipientName = button.getAttribute('data-bs-fullName');
|
---|
| 53 | const recipientId = button.getAttribute('data-bs-id');
|
---|
| 54 |
|
---|
| 55 | // Update the modal's content.
|
---|
| 56 | const modalTitle = reviewModal.querySelector('.modal-title');
|
---|
| 57 | const modalIdDiv = reviewModal.querySelector('.id-class');
|
---|
| 58 | const modalBodyInput = reviewModal.querySelector('.modal-body input');
|
---|
| 59 |
|
---|
| 60 | modalTitle.textContent = `Review for ${recipientName}`;
|
---|
| 61 |
|
---|
| 62 | modalIdDiv.id = recipientId;
|
---|
| 63 | modalBodyInput.value = recipientName;
|
---|
| 64 | })
|
---|
| 65 | });
|
---|
| 66 |
|
---|
| 67 | function goToHomePage() {
|
---|
| 68 | window.location = "/homepage";
|
---|
| 69 | }
|
---|
| 70 |
|
---|
| 71 | function getCustomerInfo() {
|
---|
| 72 | $.ajax({
|
---|
| 73 | url: "http://localhost:8080/api/customer/me"
|
---|
| 74 | }).success(function (customer) {
|
---|
| 75 | var $header = $("#fullName");
|
---|
| 76 | $header.text(customer['firstName'] + " " + customer['lastName']);
|
---|
| 77 |
|
---|
| 78 | // customer info
|
---|
| 79 | $('#firstName').val(customer['firstName']);
|
---|
| 80 | $('#lastName').val(customer['lastName']);
|
---|
| 81 | $('#phoneNumber').val(customer['phoneNumber']);
|
---|
| 82 | $('#email').val(customer['email']);
|
---|
| 83 | $('#username').val(customer['username']);
|
---|
| 84 | }).error(function (error) {
|
---|
| 85 | console.log(JSON.stringify(error));
|
---|
| 86 | });
|
---|
| 87 | }
|
---|
| 88 |
|
---|
| 89 | function getFutureAppointments(){
|
---|
| 90 | $.ajax({
|
---|
| 91 | url: "http://localhost:8080/api/appointment/future/me"
|
---|
| 92 | }).then(function (data) {
|
---|
| 93 | var $el = $("#appointments-table-body");
|
---|
| 94 | $el.empty();
|
---|
| 95 | $.each(data, function (index, obj) {
|
---|
| 96 | var element =
|
---|
| 97 | '<tr>' +
|
---|
| 98 | ' <th scope="row">' + (parseInt(index) + 1) + '</th>' +
|
---|
| 99 | ' <td>' + obj['fullName'] + '</td>' +
|
---|
| 100 | ' <td>' + obj['email'] + '</td>' +
|
---|
| 101 | ' <td>' + obj['phoneNumber'] + '</td>' +
|
---|
| 102 | ' <td>' + obj['timePeriod'] + '</td>' +
|
---|
| 103 | ' <td>' + obj['serviceName'] + '</td>';
|
---|
| 104 |
|
---|
| 105 | switch (obj['status']) {
|
---|
| 106 | case 'NEW':
|
---|
| 107 | element += ' <td><button type="button" class="btn btn-danger" onclick="cancelAppointment(' + obj['appointmentId'] + ')">Cancel appointment</button></td>';
|
---|
| 108 | break;
|
---|
| 109 | case 'CANCELLED_BY_CUSTOMER':
|
---|
| 110 | element += ' <td><button type="button" class="btn btn-secondary" disabled>Cancelled by customer</button></td>';
|
---|
| 111 | break;
|
---|
| 112 | case 'CANCELLED_BY_BUSINESS_OWNER':
|
---|
| 113 | element += ' <td><button type="button" class="btn btn-secondary" disabled>Cancelled by business owner</button></td>';
|
---|
| 114 | break;
|
---|
| 115 | }
|
---|
| 116 | element+='</tr>';
|
---|
| 117 |
|
---|
| 118 | $el.append(element);
|
---|
| 119 | });
|
---|
| 120 | });
|
---|
| 121 | }
|
---|
| 122 |
|
---|
| 123 | function getPastAppointments(){
|
---|
| 124 | $.ajax({
|
---|
| 125 | url: "http://localhost:8080/api/appointment/past/me"
|
---|
| 126 | }).then(function (data) {
|
---|
| 127 | var $el = $("#past-appointments-table-body");
|
---|
| 128 | $el.empty();
|
---|
| 129 | $.each(data, function (index, obj) {
|
---|
| 130 | var element=
|
---|
| 131 | '<tr>' +
|
---|
| 132 | ' <th scope="row">' + (parseInt(index) + 1) + '</th>' +
|
---|
| 133 | ' <td>' + obj['fullName'] + '</td>' +
|
---|
| 134 | ' <td>' + obj['email'] + '</td>' +
|
---|
| 135 | ' <td>' + obj['phoneNumber'] + '</td>' +
|
---|
| 136 | ' <td>' + obj['timePeriod'] + '</td>' +
|
---|
| 137 | ' <td>' + obj['serviceName'] + '</td>';
|
---|
| 138 |
|
---|
| 139 | switch (obj['status']) {
|
---|
| 140 | case 'NEW':
|
---|
| 141 | element += '<td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reviewModal" data-bs-id="' + obj['appointmentId'] + '" data-bs-fullName="' + obj['fullName'] + '">Leave a review</button></td>';
|
---|
| 142 | break;
|
---|
| 143 | case 'CANCELLED_BY_CUSTOMER':
|
---|
| 144 | element += ' <td><button type="button" class="btn btn-secondary" disabled>Cancelled by you</button></td>';
|
---|
| 145 | break;
|
---|
| 146 | case 'CANCELLED_BY_BUSINESS_OWNER':
|
---|
| 147 | element += ' <td><button type="button" class="btn btn-secondary" disabled>Cancelled by business owner</button></td>';
|
---|
| 148 | break;
|
---|
| 149 | case 'FINISHED_AND_REVIEWED_BY_USER':
|
---|
| 150 | element += ' <td><button type="button" class="btn btn-success" disabled>Already reviewed</button></td>';
|
---|
| 151 | break;
|
---|
| 152 | }
|
---|
| 153 | element+='</tr>';
|
---|
| 154 |
|
---|
| 155 | $el.append(element);
|
---|
| 156 | });
|
---|
| 157 | });
|
---|
| 158 | }
|
---|
| 159 | function generateStars(number) {
|
---|
| 160 | return '☆'.repeat(number);
|
---|
| 161 | }
|
---|
| 162 |
|
---|
| 163 | function generateBackgroundColor(number) {
|
---|
| 164 | var color = '';
|
---|
| 165 | switch (number) {
|
---|
| 166 | case 5:
|
---|
| 167 | color = 'text-bg-primary';
|
---|
| 168 | break;
|
---|
| 169 | case 4:
|
---|
| 170 | color = 'text-bg-success';
|
---|
| 171 | break;
|
---|
| 172 | case 3:
|
---|
| 173 | color = 'text-bg-secondary';
|
---|
| 174 | break;
|
---|
| 175 | case 2:
|
---|
| 176 | color = 'text-bg-warning';
|
---|
| 177 | break;
|
---|
| 178 | case 1:
|
---|
| 179 | color = 'text-bg-danger';
|
---|
| 180 | break;
|
---|
| 181 | }
|
---|
| 182 | return color;
|
---|
| 183 | }
|
---|
| 184 |
|
---|
| 185 | function getReviewsForCustomer(){
|
---|
| 186 | $.ajax({
|
---|
| 187 | url: "http://localhost:8080/api/review/me"
|
---|
| 188 | }).then(function (data) {
|
---|
| 189 | var $el = $("#my-reviews");
|
---|
| 190 | $el.empty();
|
---|
| 191 |
|
---|
| 192 | $.each(data, function (index, obj) {
|
---|
| 193 | var element = '<div class="card m-3" style="max-width: 300px; padding: 0;">';
|
---|
| 194 | element += '<div class="card-header ' + generateBackgroundColor(obj['rating']) + '">' + generateStars(obj['rating']) + '</div>';
|
---|
| 195 | element += '<ul class="list-group list-group-flush">';
|
---|
| 196 | element += '<li class="list-group-item"><i><b>Business:</b></i> ' + obj['businessName'] + '</li>';
|
---|
| 197 | element += '<li class="list-group-item"><i><b>Service:</b></i> ' + obj['serviceName'] + '</li>';
|
---|
| 198 | element += '<li class="list-group-item"><i><b>Reviewer:</b></i> ' + obj['customerName'] + '</li>';
|
---|
| 199 | element += '<li class="list-group-item"><i><b>Comment:</b></i> ' + obj['comment'] + '</li>';
|
---|
| 200 | element += '<li class="list-group-item"><small class="text-body-secondary"><i>Created:</i> ' + obj['created'] + '</small></li>';
|
---|
| 201 | element += '</ul>';
|
---|
| 202 | element += '</div>';
|
---|
| 203 |
|
---|
| 204 | $el.append(element);
|
---|
| 205 | });
|
---|
| 206 | });
|
---|
| 207 | }
|
---|
| 208 |
|
---|
| 209 | function postAppointmentReview(appointmentId, rating, review) {
|
---|
| 210 | var appointment = {};
|
---|
| 211 | var ratingObj = {};
|
---|
| 212 | appointment['id'] = parseInt(appointmentId);
|
---|
| 213 | ratingObj['appointment'] = appointment;
|
---|
| 214 | ratingObj['rating'] = parseInt(rating);
|
---|
| 215 | ratingObj['comment'] = review;
|
---|
| 216 |
|
---|
| 217 | $.ajax({
|
---|
| 218 | url: "http://localhost:8080/api/review",
|
---|
| 219 | type:"POST",
|
---|
| 220 | data: JSON.stringify(ratingObj),
|
---|
| 221 | contentType:"application/json; charset=utf-8",
|
---|
| 222 | dataType: 'text',
|
---|
| 223 | success: function(succ){
|
---|
| 224 | alert("Successful appointment!");
|
---|
| 225 | $('#reviewModal').modal('toggle');
|
---|
| 226 | getPastAppointments();
|
---|
[1413ee2] | 227 | getReviewsForCustomer();
|
---|
[77205be] | 228 | },
|
---|
| 229 | error: function(error) {
|
---|
| 230 | alert(error.responseText);
|
---|
| 231 | $('#reviewModal').modal('toggle');
|
---|
| 232 | }
|
---|
| 233 | });
|
---|
| 234 | }
|
---|
| 235 |
|
---|
| 236 | function cancelAppointment(appointmentId) {
|
---|
| 237 | if (confirm("Are you sure you want to cancel the appointment?")) {
|
---|
| 238 | $.ajax({
|
---|
| 239 | url: "http://localhost:8080/api/appointment/" + appointmentId,
|
---|
| 240 | type:"DELETE"
|
---|
| 241 | }).success(function (data) {
|
---|
| 242 | alert("Appointment successfully canceled.")
|
---|
[1413ee2] | 243 | getFutureAppointments();
|
---|
[77205be] | 244 | }).error(function (error) {
|
---|
| 245 | alert("Something went wrong.");
|
---|
| 246 | });
|
---|
| 247 | }
|
---|
| 248 | }
|
---|
| 249 |
|
---|