fix: search results not rendering automatically

Dockerfile

@@ -1,19 +0,0 @@
-FROM dunglas/frankenphp:php8.4
-
-ENV SERVER_NAME=":80"
-ENV CADDY_GLOBAL_OPTIONS="auto_https off"
-ENV APP_RUNTIME="Runtime\\FrankenPhpSymfony\\Runtime"
-ENV APP_VERSION="0.0.1"
-
-RUN install-php-extensions \
-	pdo_mysql \
-	gd \
-	intl \
-	zip \
-	opcache
-
-RUN apt update && apt install -y wget
-
-HEALTHCHECK --interval=3s --timeout=3s --retries=10 CMD [ "php", "/app/bin/console", "startup:status" ]
-
-COPY --chmod=0755 docker/app/Caddyfile /etc/frankenphp/Caddyfile

assets/controllers/search_bar_controller.js

@@ -38,21 +38,21 @@ export default class extends Controller {
             return `
             <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">
                 <svg viewBox="0 0 24 24" fill="currentColor" height="20" width="20" data-loading-icon-target="icon" class="text-end" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"></animateTransform></path></svg>
-            </span>
+            </span>`;
-`;
         }
         event.detail.options.render.option = (data, escape) => {
-            if (data.data.description.length > 60) {
+            console.log(data);
-                data.data.description = data.data.description.substring(0, 107) + "...";
+            if (data.data.overview.length > 60) {
+                data.data.overview = data.data.overview.substring(0, 107) + "...";
             }
+
             return `<div class="flex flex-row">
                         <img src="${data.data.poster}" class="w-16 rounded-md">
                         <div class="p-2 flex flex-col">
                             <h2>${data.data.title}</h2>
-                            <p class="max-w-[60ch] text-wrap">${data.data.description}</p>
+                            <p class="max-w-[60ch] text-wrap">${data.data.overview}</p>
                         </div>
-                    </div>
+                    </div>`;
-`
         }
     }
 

assets/styles/app.css

@@ -199,6 +199,10 @@ dialog[data-dialog-target="dialog"][closing] {
     @apply flex flex-col gap-1 justify-between;
 }
 
+/** FullCalendar **/
+#upcoming_episodes_calendar .fc-event-main .fc-event-title-container {
+    cursor: pointer !important;
+}
 .fc-col-header-cell {
     @apply bg-orange-500/60 text-white;
 }

bash/build_base.sh

@@ -1,7 +1,14 @@
-# torsearch-app is built from this base, and torsearch-worker & torsearch-scheduler are built from torsearch-app
+# torsearch-app is built from this base
-# This image is used to speed up build times
+export APP_FRANKENPHP_TAG=php8.4
-export FRANKENPHP_TAG=php8.4
 
-docker buildx build --platform=linux/amd64 -f docker/Dockerfile.base -t code.caldwell.digital/home/torsearch-base:${FRANKENPHP_TAG} -t code.caldwell.digital/home/torsearch-base:latest --build-arg "FRANKENPHP_TAG=${FRANKENPHP_TAG}" .
+docker buildx build --platform=linux/amd64 -f docker/Dockerfile.base.app -t code.caldwell.digital/home/torsearch-base:${APP_FRANKENPHP_TAG} -t code.caldwell.digital/home/torsearch-base:latest --build-arg "FRANKENPHP_TAG=${APP_FRANKENPHP_TAG}" .
-docker push code.caldwell.digital/home/torsearch-base:${FRANKENPHP_TAG}
+docker push code.caldwell.digital/home/torsearch-base:${APP_FRANKENPHP_TAG}
 docker push code.caldwell.digital/home/torsearch-base:latest
+
+# torsearch-worker & torsearch-scheduler are built from this base
+export WORKER_FRANKENPHP_TAG=php8.4-alpine
+
+docker buildx build --platform=linux/amd64 -f docker/Dockerfile.base.worker -t code.caldwell.digital/home/torsearch-base-worker:${WORKER_FRANKENPHP_TAG} -t code.caldwell.digital/home/torsearch-base-worker:latest --build-arg "FRANKENPHP_TAG=${WORKER_FRANKENPHP_TAG}" .
+docker push code.caldwell.digital/home/torsearch-base-worker:${WORKER_FRANKENPHP_TAG}
+docker push code.caldwell.digital/home/torsearch-base-worker:latest
+

compose.yml

@@ -15,7 +15,11 @@ services:
 
 
   app:
-    build: .
+    build:
+      dockerfile: docker/Dockerfile.base.app
+      context: .
+      args:
+        FRANKENPHP_TAG: php8.4
     restart: unless-stopped
     volumes:
       - $PWD:/app
@@ -33,7 +37,11 @@ services:
 
 
   worker:
-    build: .
+    build:
+      dockerfile: docker/Dockerfile.base.worker
+      context: .
+      args:
+        FRANKENPHP_TAG: php8.4-alpine
     restart: unless-stopped
     volumes:
       - $PWD:/app
@@ -41,11 +49,15 @@ services:
     tty: true
     environment:
       TZ: America/Chicago
-    command: php /app/bin/console messenger:consume async -vv --time-limit=3600
+    command: php /app/bin/console messenger:consume async --time-limit=3600 -vv
 
 
   scheduler:
-    build: .
+    build:
+      dockerfile: docker/Dockerfile.base.worker
+      context: .
+      args:
+        FRANKENPHP_TAG: php8.4-alpine
     restart: unless-stopped
     volumes:
       - $PWD:/app

templates/monitor/upcoming-episodes.html.twig

@@ -19,7 +19,7 @@
             <a href="{{ path('app.monitors.ical', {email: app.user.email}) }}" title="Subscribe to the 'Upcoming Episodes' calendar via iCal. Click to export the events to a .ics file or copy the link and use it to subscribe in a calendar app that supports iCal/ics calendars." class="mb-2 self-end dark:text-white decoration-underline">
                 <twig:ux:icon name="lets-icons:calendar-add-light" width="24" class="text-orange-500" />
             </a>
-            <div id="calendar" class="text-white">
+            <div id="upcoming_episodes_calendar" class="text-white">
             </div>
         </twig:Card>
     </div>
@@ -33,15 +33,22 @@
             }
         }
         document.addEventListener('DOMContentLoaded', async function() {
+            const modal = document.getElementById('previewModal');
             let data = await fetch('/api/monitor/upcoming-episodes');
             data = (await data.json())['data'];
 
-            const calendarEl = document.getElementById('calendar');
+            const calendarEl = document.getElementById('upcoming_episodes_calendar');
             const calendar = new FullCalendar.Calendar(calendarEl, {
                 initialView: getView(),
                 events: data['episodes'],
                 windowResize: function(arg) {
                     this.changeView(getView());
+                },
+                eventClick: function (data) {
+                    modal.display({
+                        heading: data.event.title,
+                        content: `<p>${data.event.startStr}</p>`
+                    })
                 }
             });
             calendar.render();