Add main image column, add logic to retrieve file links and add to listings slider

app/bookings/routes.py

 from flask import render_template, redirect, url_for
 from app.bookings import bp
-from app.models import Listings 
+from app.models import Listings, ListingImages 
 
 @bp.route('/home')
 def index():
@@ -12,5 +12,12 @@ def redirect_index():
 
 @bp.route('/listings')
 def listings():
+    listing_ids = []
     top_listings = Listings.get_top_listings(5)
-    return render_template('bookings/listings.html', top_listings=top_listings)
+    
+    for listing in top_listings:
+        listing_ids.append(listing.id)
+        
+    top_listing_images = ListingImages.get_selected_main_images(listing_ids)
+    
+    return render_template('bookings/listings.html', top_listings=top_listings, top_listing_images=top_listing_images)

app/models/__init__.py

 #Importing database models
 from .user import User
 from .listings import Listings
+from .listing_images import ListingImages 
\ No newline at end of file

app/models/listing_images.py

@@ -4,11 +4,20 @@ from app import db
 class ListingImages(db.Model):
     __tablename__ = 'listing_images'
 
-    id = db.Column(db.Integer(), nullable=False, primary_key=True),
-    listing_id = db.Column(db.Integer(), nullable=False),
-    image_location = db.Column(db.String(255), nullable=False),
+    id = db.Column(db.Integer(), nullable=False, primary_key=True)
+    listing_id = db.Column(db.Integer(), nullable=False)
+    image_location = db.Column(db.String(255), nullable=False)
     image_description = db.Column(db.String(255), nullable=True)
+    main_image = db.Column(db.SmallInteger(), nullable=False)
 
     @classmethod
-    def get_all_listings(cls):
-        pass    
\ No newline at end of file
+    def get_selected_main_images(cls, listing_ids):
+        
+        listing_images = cls.query.filter(
+            cls.listing_id.in_(listing_ids), 
+            cls.main_image == 1 
+        ).all()
+        
+        ordered_listing_images = {listing.listing_id: listing.image_location for listing in listing_images}
+        
+        return ordered_listing_images
\ No newline at end of file

app/templates/bookings/listings.html

@@ -13,7 +13,7 @@
                 <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="...">
+                            <img src="../uploads/listing_images/{{ top_listing_images[listing.id] }}.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>

migrations/versions/68d89ef13132_add_main_listing_image_column.py

+"""Add main Listing Image Column
+
+Revision ID: 68d89ef13132
+Revises: 489bab9aaf4f
+Create Date: 2024-11-29 10:29:38.126811
+
+"""
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import mysql
+
+# revision identifiers, used by Alembic.
+revision = '68d89ef13132'
+down_revision = '489bab9aaf4f'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+        op.add_column(
+        'listing_images',
+        sa.Column('main_image', sa.Boolean(), nullable=False, server_default=sa.sql.expression.false())
+    )
\ No newline at end of file