From ef7ebd73138c537b8da7ec0cfc1bc1cb16f12789 Mon Sep 17 00:00:00 2001
From: "Ethan Clay (UWE)" <ethan2.clay@live.uwe.ac.uk>
Date: Fri, 29 Nov 2024 10:28:19 +0000
Subject: [PATCH] Add CSS Slider, implement top 5 listings on core page,
beginning work on uploading destination images
---
app/bookings/routes.py | 4 +-
app/models/listings.py | 12 +++++-
app/static/listings_slider.css | 0
app/templates/base.html | 4 --
app/templates/bookings/listings.html | 60 ++++++++++++++++------------
5 files changed, 46 insertions(+), 34 deletions(-)
create mode 100644 app/static/listings_slider.css
diff --git a/app/bookings/routes.py b/app/bookings/routes.py
index 70ade7f..2939186 100644
--- a/app/bookings/routes.py
+++ b/app/bookings/routes.py
@@ -12,5 +12,5 @@ def redirect_index():
@bp.route('/listings')
def listings():
- all_listings = Listings.get_all_listings()
- return render_template('bookings/listings.html', all_listings=all_listings)
+ top_listings = Listings.get_top_listings(5)
+ return render_template('bookings/listings.html', top_listings=top_listings)
diff --git a/app/models/listings.py b/app/models/listings.py
index 423a2e3..3a51845 100644
--- a/app/models/listings.py
+++ b/app/models/listings.py
@@ -29,9 +29,17 @@ class Listings(db.Model):
business_tickets=business_tickets,
economy_tickets=economy_tickets)
- # Add the new flight to the session and commit
+ # Add the new flight to the database and commit
db.session.add(new_flight)
db.session.commit()
return new_flight
- #return cls.query.all()
+ #return cls.query.all()
+
+ @classmethod
+ def get_top_listings(cls, amount_of_listings = 5):
+ return cls.query.order_by(
+ cls.economy_tickets,
+ cls.business_tickets
+ ).limit(amount_of_listings).all()
+
\ No newline at end of file
diff --git a/app/static/listings_slider.css b/app/static/listings_slider.css
new file mode 100644
index 0000000..e69de29
diff --git a/app/templates/base.html b/app/templates/base.html
index 77f0c5f..983c0b2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -40,10 +40,6 @@
</ul>
</li>
</ul>
- <form class="d-flex">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
- </form>
</div>
</div>
</nav>
diff --git a/app/templates/bookings/listings.html b/app/templates/bookings/listings.html
index 47a201f..a832f2b 100644
--- a/app/templates/bookings/listings.html
+++ b/app/templates/bookings/listings.html
@@ -1,32 +1,40 @@
{% extends 'base.html' %}
-
+# Implements CSS Slider from https://swiffyslider.com/docs/
{% block content %}
+ <head>
+ <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='listings.css')}}"> -->
+ <script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
+ <link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
+ </head>
<div class="content">
- <div class="content">
- <p>{{all_listings}}</p>
- <h1>All Listings</h1>
- <table border="1">
- <thead>
- <tr>
- {% for column in column_names %}
- <th>{{ column.replace('_', ' ').title() }}</th>
- {% endfor %}
- </tr>
- </thead>
- <tbody>
- {% for listing in all_listings %}
- <tr>
- {% for column in column_names %}
- <td>{{ getattr(listing, column) }}</td>
- {% endfor %}
- </tr>
- {% else %}
- <tr>
- <td colspan="{{ column_names | length }}">No listings available.</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ <div class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible">
+ <ul class="slider-container py-4">
+ {% for listing in top_listings %}
+ <li class="slide-visible">
+ <div class="card shadow h-100">
+ <div class="ratio ratio-16x9">
+ <img src="../uploads/listing_images/{{listing.}}.jpg" class="card-img-top" loading="lazy" alt="...">
+ </div>
+ <div class="card-body p-3 p-xl-4">
+ <h3 class="card-title h5">{{listing.destination_location}}</h3>
+ <p class="card-text">Add Location description here once implemented</p>
+ <div><a href="#" class="btn btn-primary">Book now</a>
+ </div>
+ </div>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+
+ <button type="button" class="slider-nav" aria-label="Go left"></button>
+ <button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>
+
+ <div class="slider-indicators">
+ <button class="active" aria-label="Go to slide"></button>
+ <button aria-label="Go to slide" class=""></button>
+ <button aria-label="Go to slide" class=""></button>
+ <button aria-label="Go to slide" class=""></button>
+ </div>
</div>
</div>
{% endblock %}
\ No newline at end of file
--
GitLab