diff --git a/app/static/base.css b/app/static/base.css
index 5c761e7f0b55e9df17ecee26dd3b05250a47dc67..d6cf4805ac604a8a4f09be1039fab031fdebab4a 100644
--- a/app/static/base.css
+++ b/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/
diff --git a/app/templates/admin/manage_bookings.html b/app/templates/admin/manage_bookings.html
index e925d0ab1f38b53dfbf520e4dc401a7cecd6a441..c5feb80281f69a0b67bd18abbaf0db02d4e7bca6 100644
--- a/app/templates/admin/manage_bookings.html
+++ b/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,16 +94,22 @@
</style>
<script>
$(document).ready(function() {
+ // Initialize Select2
+ $('.select2-multiple').select2({
+ placeholder: "Select locations",
+ width: '100%'
+ });
+
const table = $('#manage_bookings').DataTable({
- pageLength: 25,
+ pageLength: 25,
lengthChange: false,
searching: false,
ajax: {
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);
});
});
diff --git a/app/templates/base.html b/app/templates/base.html
index c08818e9a5496d7153a531dab4b07bbbb59cc51b..417dfda5002325010913e8fe450d6eef0d4941bf 100644
--- a/app/templates/base.html
+++ b/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">
diff --git a/app/templates/bookings/listings.html b/app/templates/bookings/listings.html
index 1237234872f7e6d17c6556cfb1af3cb6df74f197..e7807399cc69580ea16667d7bc7cb5557e71c1fd 100644
--- a/app/templates/bookings/listings.html
+++ b/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');