Add mobile friendly selection to modal

app/static/base.css

@@ -146,6 +146,14 @@ Form styling options
     text-decoration: none;
 }
 
+/* 
+    MODAL CSS
+*/
+/* Ensure dropdown appears in front of modal */
+.select2-container--open { 
+    z-index: 2000; 
+}
+
 /* HEX codes for colours used through out website don't delete */
 
 /* Colour pallete taken from https://visme.co/blog/website-color-schemes/

app/templates/admin/manage_bookings.html

@@ -7,7 +7,6 @@
             <i class="fa-solid fa-filter"></i> Filter
         </button>
     </div>
-
     <!-- Hidden Filter Modal -->
     <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
         <div class="modal-dialog">
@@ -20,11 +19,15 @@
                     <form id="filter-form">
                         <div class="mb-3">
                             <label for="depart_location" class="form-label">Depart Location:</label>
-                            <input type="text" class="form-control" id="depart_location" name="depart_location">
+                            <select class="form-control select2-multiple" id="depart_location" name="depart_location[]" multiple="multiple">
+                                <!-- Options will be dynamically added -->
+                            </select>
                         </div>
                         <div class="mb-3">
                             <label for="destination_location" class="form-label">Destination Location:</label>
-                            <input type="text" class="form-control" id="destination_location" name="destination_location">
+                            <select class="form-control select2-multiple" id="destination_location" name="destination_location[]" multiple="multiple">
+                                <!-- Options will be dynamically added -->
+                            </select>
                         </div>
                         <div class="mb-3">
                             <label for="min_depart_time" class="form-label">Minimum Depart Time:</label>
@@ -55,10 +58,9 @@
             </div>
         </div>
     </div>
-
     <!-- Data table starts -->
     <div class="table-container">
-        <table id="manage_bookings" class="table table-striped table-bordered display" style="width:95%">
+        <table id="manage_bookings" class="table table-striped table-bordered display" style="width:100%">
             <thead>
                 <tr>
                     <th>Depart Location</th>
@@ -92,6 +94,12 @@
 </style>
 <script>
     $(document).ready(function() {
+        // Initialize Select2
+        $('.select2-multiple').select2({
+            placeholder: "Select locations",
+            width: '100%'
+        });
+
         const table = $('#manage_bookings').DataTable({
             pageLength: 25,
             lengthChange: false,
@@ -100,8 +108,8 @@
                 url: "{{ url_for('api.get_data') }}",
                 dataSrc: '',
                 data: function(d) {
-                    d.depart_location = $('#depart_location').val();
-                    d.destination_location = $('#destination_location').val();
+                    d.depart_location = $('#depart_location').val() ? $('#depart_location').val().join(',') : '';
+                    d.destination_location = $('#destination_location').val() ? $('#destination_location').val().join(',') : '';
                     d.min_depart_time = $('#min_depart_time').val();
                     d.max_depart_time = $('#max_depart_time').val();
                     d.min_fair_cost = $('#min_fair_cost').val();
@@ -130,26 +138,29 @@
                             </div>
                         </div>`
                 }
-            ],
-            drawCallback: function(settings) {
-                $('.dropdown-toggle').dropdown();
-            }
+            ]
+        });
+
+        // Dynamically populate the dropdowns with location options
+        const locations = ['USA', 'Budapest', 'Location3']; // Replace with actual locations
+        locations.forEach(location => {
+            $('#depart_location, #destination_location').append(new Option(location, location));
         });
 
+        // Apply filters and reload table
         $('#apply-filters').on('click', function() {
             table.ajax.reload();
             $('#filterModal').modal('hide');
         });
 
+        // Edit and Delete buttons functionality
         $('#manage_bookings tbody').on('click', '.edit-btn', function() {
             const data = table.row($(this).parents('tr')).data();
-            // Handle edit action
             alert('Edit entry for ' + data.depart_location);
         });
 
         $('#manage_bookings tbody').on('click', '.delete-btn', function() {
             const data = table.row($(this).parents('tr')).data();
-            // Handle delete action
             alert('Delete entry for ' + data.depart_location);
         });
     });

app/templates/base.html

@@ -10,14 +10,18 @@
         <link rel="stylesheet" href="https://kit.fontawesome.com/11fd621de6.js" crossorigin="anonymous">
         <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css">
+        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
         <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
         <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
         <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
+        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
+        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
+
         <title>Horizon Travels</title>
     </head>
         
-    
 <body>
     <div class="main_content">
         <div class="wrapper">

app/templates/bookings/listings.html

@@ -98,6 +98,10 @@
     <script>
         // Initialize Bootstrap modal with jQuery
         $(document).ready(function() {
+            $('.select2-multiple').select2({ 
+                width: 'resolve', // Automatically adjust width 
+                placeholder: 'Select an option', });
+
             $('#imageModal .btn-close, #imageModal .btn-secondary').on('click', function() {
                 console.log("Close button clicked");
                 $('#imageModal').modal('hide');