From 01e07d190eecc7642638fee34b807e5b2c32efc1 Mon Sep 17 00:00:00 2001
From: Ethan-clay03 <ethanclay2017@gmail.com>
Date: Wed, 15 Jan 2025 12:46:48 +0000
Subject: [PATCH] Fix bookings page and simplify logic by moving into flask
route
---
app/bookings/routes.py | 16 +++++++++++++++-
app/templates/base.html | 5 +++++
app/templates/bookings/listings.html | 27 +++++++++++++--------------
3 files changed, 33 insertions(+), 15 deletions(-)
diff --git a/app/bookings/routes.py b/app/bookings/routes.py
index 0078b51..e86c3bf 100644
--- a/app/bookings/routes.py
+++ b/app/bookings/routes.py
@@ -1,6 +1,7 @@
from flask import render_template, redirect, url_for, g
from app.bookings import bp
from app.models import Listings, ListingImages
+import json
@bp.route('/home')
def index():
@@ -18,12 +19,25 @@ def index():
def redirect_index():
return redirect(url_for('bookings.index'), code=301)
+
@bp.route('/listings')
def listings():
all_listings = Listings.get_all_listings()
-
+
+ for item in all_listings:
+ main_image = next((img for img in item.listing_images if img.main_image), None)
+ if main_image:
+ item.main_image_url = url_for('main.upload_file', filename=main_image.image_location)
+ elif item.listing_images:
+ item.main_image_url = url_for('main.upload_file', filename=item.listing_images[0].image_location)
+ else:
+ item.main_image_url = "/path/to/default-image.jpg"
+
+ item.image_urls = json.dumps([url_for('main.upload_file', filename=img.image_location) for img in item.listing_images])
+
return render_template('bookings/listings.html', items=all_listings)
+
@bp.route('/listing/<int:id>')
def show_listing(id):
Listings.get
diff --git a/app/templates/base.html b/app/templates/base.html
index 2c7b1c3..a6b4189 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -8,7 +8,12 @@
<script src="https://kit.fontawesome.com/11fd621de6.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap_overrides.css')}}">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizon Travels</title>
</head>
diff --git a/app/templates/bookings/listings.html b/app/templates/bookings/listings.html
index 3bdf8a7..e553c5f 100644
--- a/app/templates/bookings/listings.html
+++ b/app/templates/bookings/listings.html
@@ -6,10 +6,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simplified Carousel Example</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.container {
width: 60%;
@@ -83,13 +79,9 @@
<div id="resultsContainer">
{% for item in items %}
- <div class="results" onclick="window.location.href='/bookings/listing/{{ item.id }}'">
+ <div class="results" onclick="handleClick(event, {{ item.id }})">
<div>
- {% if item.listing_images and item.listing_images[0] %}
- <img src="{{ url_for('main.upload_file', filename=item.listing_images[0].image_location) }}" alt="Main Image" class="main-image" onclick="event.stopPropagation(); showModal([{% for image in item.listing_images %}'{{ url_for('main.upload_file', filename=image.image_location) }}'{% if not loop.last %}, {% endif %}{% endfor %}])">
- {% else %}
- <img src="/path/to/default-image.jpg" alt="Default Image" class="main-image">
- {% endif %}
+ <img src="{{ item.main_image_url }}" alt="Main Image" class="main-image" onclick="event.stopPropagation(); showModal({{ item.image_urls | safe }});">
</div>
<div>
<div class="title">{{ item.depart_location }}</div>
@@ -97,9 +89,8 @@
<div class="delivery">{{ item.destination_location }}</div>
<div>Save up to 10% with multi-buy</div>
</div>
- </div>
-{% endfor %}
-
+ </div>
+ {% endfor %}
</div>
</div>
@@ -142,6 +133,7 @@
});
});
+ // Shows pop up with images attached to specific booking
function showModal(imageUrls) {
console.log("showModal called with imageUrls:", imageUrls);
@@ -162,7 +154,7 @@
div.appendChild(img);
carouselInner.appendChild(div);
- // Create carousel indicator
+ // Create carousel indicators
var li = document.createElement('li');
li.setAttribute('data-target', '#carouselExampleIndicators');
li.setAttribute('data-slide-to', index);
@@ -191,6 +183,13 @@
}
});
}
+
+ // Only redirects when image is NOT clicked
+ function handleClick(event, id) {
+ if (!event.target.classList.contains('main-image')) {
+ window.location.href = '/bookings/listing/' + id;
+ }
+ }
</script>
</body>
</html>
--
GitLab