allow for an image banner

crud.py

@@ -92,14 +92,15 @@ async def create_event(data: CreateEvent) -> Event:
     event_id = urlsafe_short_hash()
     await db.execute(
         """
-        INSERT INTO events.events (id, wallet, name, info, closing_date, event_start_date, event_end_date, currency, amount_tickets, price_per_ticket, sold)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        INSERT INTO events.events (id, wallet, name, info, banner, closing_date, event_start_date, event_end_date, currency, amount_tickets, price_per_ticket, sold)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
         """,
         (
             event_id,
             data.wallet,
             data.name,
             data.info,
+            data.banner,
             data.closing_date,
             data.event_start_date,
             data.event_end_date,

migrations.py

@@ -153,3 +153,10 @@ async def m004_add_currency(db):
         )
 
     await db.execute("DROP TABLE events.events_old")
+
+
+async def m005_add_image_banner(db):
+    """
+    Add a column to allow an image banner for the event
+    """
+    await db.execute("ALTER TABLE events.events ADD COLUMN banner TEXT;")

models.py

@@ -7,6 +7,7 @@ class CreateEvent(BaseModel):
     wallet: str
     name: str
     info: str
+    banner: Optional[str]
     closing_date: str
     event_start_date: str
     event_end_date: str
@@ -25,6 +26,7 @@ class Event(BaseModel):
     wallet: str
     name: str
     info: str
+    banner: Optional[str]
     closing_date: str
     event_start_date: str
     event_end_date: str

templates/events/display.html

@@ -1,9 +1,10 @@
 {% extends "public.html" %} {% block page %}
 <div class="row q-col-gutter-md justify-center">
   <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
-    <q-card class="q-pa-lg">
+    <q-card>
+      <q-img v-if="banner" :src="banner" transition="slide-up"></q-img>
       <q-card-section class="q-pa-none">
-        <h3 class="q-my-none">{{ event_name }}</h3>
+        <h3 class="q-my-none q-pa-lg">{{ event_name }}</h3>
         <br />
         <div v-html="formatDescription"></div>
         <br />
@@ -124,6 +125,7 @@
     created() {
       this.info = '{{ event_info | tojson }}'
       this.info = this.info.substring(1, this.info.length - 1)
+      this.banner = JSON.parse('{{ event_banner | tojson |safe }}')
     },
     computed: {
       formatDescription() {

templates/events/index.html

@@ -209,7 +209,15 @@
           label="Info about the event"
           hint="Markdown supported"
         ></q-input>
-        <div class="row">
+        <q-input
+          filled
+          dense
+          v-model.trim="formDialog.data.banner"
+          type="url"
+          label="Image URL"
+          hint="Optional banner image to display on the event page"
+        ></q-input>
+        <div class="row q-mt-lg">
           <div class="col-4">Ticket closing date</div>
           <div class="col-8">
             <q-input
@@ -334,6 +342,7 @@
             {name: 'id', align: 'left', label: 'ID', field: 'id'},
             {name: 'name', align: 'left', label: 'Name', field: 'name'},
             {name: 'info', align: 'left', label: 'Info', field: 'info'},
+            {name: 'banner', align: 'left', label: 'Banner', field: 'banner'},
             {
               name: 'event_start_date',
               align: 'left',
@@ -447,7 +456,6 @@
       exportticketsCSV: function () {
         LNbits.utils.exportCSV(this.ticketsTable.columns, this.tickets)
       },
-
       getEvents: function () {
         var self = this
 

views.py

@@ -58,6 +58,7 @@ async def display(request: Request, event_id):
             "event_name": event.name,
             "event_info": event.info,
             "event_price": event.price_per_ticket,
+            "event_banner": event.banner,
         },
     )