minor UI changes

sam-bertin · Mar 26, 2024 · 671df1f · 671df1f
1 parent b75c5b8
commit 671df1f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 16 deletions.
diff --git a/app/templates/hotel_list.html b/app/templates/hotel_list.html
@@ -5,7 +5,6 @@
     Hotel List
 {% endblock %}
 
-
 {% block content %}
     <h1>Hotel List</h1>
 
@@ -19,21 +18,36 @@ <h1>Hotel List</h1>
         </select>
     </form>
 
-    <ul id="hotel-list">
+    <table class="table table-striped table-bordered">
+        <thead>
+        <tr>
+            <th>Code</th>
+            <th>Name</th>
+            <th>City</th>
+        </tr>
+        </thead>
+        <tbody id="hotel-list">
         {% for hotel in hotels %}
-            <li>{{ hotel.name }}</li>
+            <tr>
+                <td>{{ hotel.code }}</td>
+                <td>{{ hotel.name }}</td>
+                <td>{{ hotel.city.name }}</td>
+            </tr>
         {% empty %}
-            <li>No hotels found</li>
+            <tr>
+                <td colspan="3">No hotels found</td>
+            </tr>
         {% endfor %}
-    </ul>
+        </tbody>
+    </table>
 
     <script>
         // Display hotels of the selected city when the city is changed
         document.getElementById('city').addEventListener('change', function() {
             const cityId = this.value;
             const hotelList = document.getElementById('hotel-list');
 
-            // Remove all hotels from the list
+            // Remove all hotels from the table
             hotelList.innerHTML = '';
 
             // Fetch hotels of the selected city or all hotels if no city is selected
@@ -44,34 +58,61 @@ <h1>Hotel List</h1>
             fetch(url)
                 .then(response => response.json())
                 .then(hotels => {
-                    // Add hotels to the list
+                    // Add hotels to the table
                     hotels.forEach(hotel => {
-                        const hotelItem = document.createElement('li');
-                        hotelItem.textContent = `${hotel.code} - ${hotel.name}`;
-                        hotelList.appendChild(hotelItem);
+                        const hotelRow = document.createElement('tr');
+                        hotelRow.innerHTML = `
+                        <td>${hotel.code}</td>
+                        <td>${hotel.name}</td>
+                        <td>${hotel.city.name}</td>
+                    `;
+                        hotelList.appendChild(hotelRow);
                     });
+
+                    // Display "No hotels found" message if there are no hotels
+                    if (hotels.length === 0) {
+                        const noHotelsRow = document.createElement('tr');
+                        noHotelsRow.innerHTML = `
+                        <td colspan="3">No hotels found</td>
+                    `;
+                        hotelList.appendChild(noHotelsRow);
+                    }
                 });
         });
 
         // Display all hotels when the page is loaded
         document.addEventListener('DOMContentLoaded', function() {
             const hotelList = document.getElementById('hotel-list');
 
-            // Remove all hotels from the list
+            // Remove all hotels from the table
             hotelList.innerHTML = '';
 
             // Fetch all hotels
             fetch('{% url "hotels_by_city" %}')
                 .then(response => response.json())
                 .then(hotels => {
-                    // Add hotels to the list
+                    // Add hotels to the table
                     hotels.forEach(hotel => {
-                        const hotelItem = document.createElement('li');
-                        hotelItem.textContent = `${hotel.code} - ${hotel.name} - ${hotel.city.name}`;
-                        hotelList.appendChild(hotelItem);
+                        const hotelRow = document.createElement('tr');
+                        hotelRow.innerHTML = `
+                        <td>${hotel.code}</td>
+                        <td>${hotel.name}</td>
+                        <td>${hotel.city.name}</td>
+                    `;
+                        hotelList.appendChild(hotelRow);
                     });
+
+                    // Display "No hotels found" message if there are no hotels
+                    if (hotels.length === 0) {
+                        const noHotelsRow = document.createElement('tr');
+                        noHotelsRow.innerHTML = `
+                        <td colspan="3">No hotels found</td>
+                    `;
+                        hotelList.appendChild(noHotelsRow);
+                    }
                 });
         });
     </script>
 
-{% endblock %}
+
+{% endblock %}
diff --git a/templates/base.html b/templates/base.html
@@ -9,6 +9,9 @@
         {% endblock %}
     </title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">