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