Merge pull request #182 from jcachuryb/master

CSS issues Fixed. Changed button text to Grid. Dashboard Booking ID opens history

Author: xzzy

parkstay/frontend/parkstay/.babelrc

@@ -114,7 +114,7 @@ <h1 id="site-title" class="site-logo">
                   <a
                     href="#"
                     class="dropdown-toggle"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     role="button"
                     aria-haspopup="true"
                     aria-expanded="false"
@@ -144,6 +144,7 @@ <h1 id="site-title" class="site-logo">
         <div class="col-md-12"></div>
       </div>
     </div>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> -->
 
     <div class="container" id="dashboard-table-container">
       <div id="app">

parkstay/frontend/parkstay/index.html

@@ -1209,7 +1209,7 @@ onMounted(function () {
     width: 100%;
 }
 
-.dropdown-menu:before {
+#addBooking .dropdown-menu:before {
     position: absolute;
     top: -12px;
     left: 12px;
@@ -1221,7 +1221,7 @@ onMounted(function () {
     content: '';
 }
 
-.dropdown-menu {
+#addBooking .dropdown-menu {
     top: 120%;
     width: 300px;
 }

parkstay/frontend/parkstay/src/components/booking/addbooking.vue

@@ -1183,7 +1183,7 @@ onMounted(function () {
     width: 100%;
 }
 
-.dropdown-menu:before {
+#bookingCloseClasses .dropdown-menu:before {
     position: absolute;
     top: -12px;
     left: 12px;
@@ -1195,7 +1195,7 @@ onMounted(function () {
     content: '';
 }
 
-.dropdown-menu {
+#bookingCloseClasses .dropdown-menu {
     top: 120%;
     width: 300px;
 }

parkstay/frontend/parkstay/src/components/booking/booking-close-classes.vue

@@ -919,7 +919,8 @@ onBeforeRouteEnters()
     width: 100%;
 }
 
-.dropdown-menu:before {
+#changeBooking {
+    .dropdown-menu:before {
     position: absolute;
     top: -12px;
     left: 12px;
@@ -934,7 +935,7 @@ onBeforeRouteEnters()
 .dropdown-menu {
     top: 120%;
     width: 300px;
-}
+}}
 
 .guests li {
     padding: 10px;

parkstay/frontend/parkstay/src/components/booking/changebooking2.vue

@@ -171,7 +171,7 @@ const dtOptions = ref({
       searchable: false,
       mRender: function (data, type, full) {
         return full.status != "Canceled"
-          ? "<a href='/api/get_confirmation/" +
+          ? "<a href='/booking-history/" +
           full.id +
           "' target='_blank' class='text-primary'>PB" +
           data +

parkstay/frontend/parkstay/src/components/booking/dashboard.vue

@@ -29,7 +29,7 @@
                                 <div class="form-group">
                                     <div class="dropdown">
                                         <input type="text" class="form-control dropdown-toggle" name="guests"
-                                            placeholder="Guest" data-toggle="dropdown" aria-haspopup="true"
+                                            placeholder="Guest" data-bs-toggle="dropdown" aria-haspopup="true"
                                             aria-expanded="true" v-model="guestsText">
                                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                             <li v-for="guest in guestsPicker">
@@ -243,7 +243,7 @@ onMounted(function () {
     background-size: 100% 2px, 100% 1px;
 }
 
-.dropdown-menu:before {
+#booking-picker .dropdown-menu:before {
     position: absolute;
     top: -12px;
     left: 12px;
@@ -255,22 +255,22 @@ onMounted(function () {
     content: '';
 }
 
-.dropdown-menu {
+#booking-picker .dropdown-menu {
     top: 120%;
     width: 300px;
 }
 
-.dropdown-menu li {
+#booking-picker .dropdown-menu li {
     padding: 10px;
     margin-right: 10px;
     border-bottom: 1px solid #ccc;
 }
 
-.dropdown-menu li:last-child {
+#booking-picker .dropdown-menu li:last-child {
     border-bottom: 0;
 }
 
-.dropdown-menu .item {
+#booking-picker .dropdown-menu .item {
     line-height: 2;
 }
 

parkstay/frontend/parkstay/src/components/utils/bookingpicker.vue

@@ -17,7 +17,7 @@ import { DateTime, TempusDominus } from "@eonasdan/tempus-dominus";
 import * as select2 from "@select2";
 select2.default()
 import "jquery-validation";
-import 'bootstrap/dist/js/bootstrap.min.js'; // needed for datetimepicker
+// import 'bootstrap/dist/js/bootstrap.js'; // needed for datetimepicker // not needed
 import "slick-carousel-browserify";
 import awesomplete from "awesomplete";
 import daterangepicker from "bootstrap-daterangepicker";

parkstay/frontend/parkstay/src/hooks.js

@@ -22,8 +22,8 @@
                                             title="Distance from selected location"
                                             alt="Distance from selected location">
                                             {{ campground.distance_short }}km 
-                                            <i class="bi bi-question-circle" data-bs-toggle="tooltip"
-                                                data-bs-placement="right"
+                                            <i class="bi bi-info-circle-fill distance-info-icon"
+                                                data-bs-toggle="tooltip" data-bs-placement="right"
                                                 data-bs-title="Straight-line distance from searched place."></i>
                                         </div>
                                     </div>
@@ -71,18 +71,22 @@
                                                     }} per night</small></i></p>
 
                                         <a v-if="campground.campground_type == 0 && (booking_arrival_days <= campground.max_advance_booking || permission_to_make_advanced_booking == true)"
-                                            :class="{'button':true,  
-                                                    'formButton1': campgroundAvailablity[campground.id].total_bookable > 0,
-                                                    'formButton4': campgroundAvailablity[campground.id].total_bookable == 0 }" 
-                                            style="width:100%;" v-bind:href="parkstayUrl + '/search-availability/campground/?site_id=' + campground.id + '&' + bookingParam"
+                                            :class="{
+                                                'button': true,
+                                                'formButton1': campgroundAvailablity[campground.id].total_bookable > 0,
+                                                'formButton4': campgroundAvailablity[campground.id].total_bookable == 0
+                                            }"
+                                            style="width:100%;"
+                                            v-bind:href="parkstayUrl + '/search-availability/campground/?site_id=' + campground.id + '&' + bookingParam"
                                             target="_self">See availability</a>
                                         <a v-else-if="campground.campground_type == 1 || campground.campground_type == 4"
                                             class="button formButton" style="width:100%;"
                                             v-bind:href="parkstayUrl + '/search-availability/campground/?site_id=' + campground.id + '&' + bookingParam"
                                             target="_self">More Information</a>
                                         <a v-else class="button formButton2"
                                             v-bind:href="parkstayUrl + '/search-availability/campground/?site_id=' + campground.id + '&' + bookingParam"
-                                            style="width:100%;" target="_self">More information<i class="bi bi-box-arrow-up-right ms-2"></i> </a>
+                                            style="width:100%;" target="_self">More information<i
+                                                class="bi bi-box-arrow-up-right ms-2"></i> </a>
                                     </div>
                                 </div>
                             </div>
@@ -193,9 +197,12 @@ export default {
             if (this.$refs.carousel) {
                 this.$refs.carousel.slideTo(0)
                 this.$refs.carousel.updateSlideWidth()
-                const tooltipTriggerList = document.querySelectorAll('.carousel-slide-card [data-bs-toggle="tooltip"]')
-                const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
             }
+            this.$nextTick(() => {
+
+                const tooltipTriggerList = document.querySelectorAll('.carousel-slide-card [data-bs-toggle="tooltip"]')
+                const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => bootstrap.Tooltip.getOrCreateInstance(tooltipTriggerEl))
+            })
         }
     },
     methods: {
@@ -330,6 +337,10 @@ export default {
         padding: 7px;
         padding-right: 0px;
     }
+
+    .distance-info-icon {
+        color: #0081df;
+    }
 }
 
 [v-cloak] {
@@ -476,8 +487,11 @@ export default {
         background-color: green;
     }
 
-    .button.formButton, .button.formButton1, .button.formButton2, 
-    .button.formButton5, .button.formButton4  {
+    .button.formButton,
+    .button.formButton1,
+    .button.formButton2,
+    .button.formButton5,
+    .button.formButton4 {
         display: block;
         width: 100%;
     }