wip(Dashboard): grid widgets

assets/bootstrap.js

@@ -10,6 +10,7 @@ import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Popover from '@stimulus-components/popover';
 import Dialog from '@stimulus-components/dialog';
 import Dropdown from '@stimulus-components/dropdown';
+
 import 'animate.css';
 
 const app = startStimulusApp();

assets/components/preview-content-dialog.js

@@ -28,6 +28,9 @@ export default class PreviewContentDialog extends HTMLDialogElement {
     }
 
     display({ heading, content }) {
+        if (this.hasAttribute('mdWidth')) {
+            this.style.width = this.getAttribute('mdWidth');
+        }
         this.setHeading(heading);
         this.setContent(content);
         this.showModal();

assets/controllers/dashboard_widgets_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+import {GridStack} from "../vendor/gridstack/gridstack.index.js";
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    grid;
+
+    initialize() {
+
+    }
+
+    connect() {
+        this.grid = GridStack.init({
+            column: 2,
+            alwaysShowResizeHandle: true,
+            margin: "2rem",
+            resizable: {
+                handles: 'e,se,s,sw,w'
+            }
+        });
+
+        this.grid.load();
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}

importmap.php

@@ -70,4 +70,7 @@ return [
     '@ungap/custom-elements' => [
         'version' => '1.3.0',
     ],
+    'gridstack' => [
+        'version' => '12.3.3',
+    ],
 ];

src/Base/Service/MediaFiles.php

@@ -168,6 +168,37 @@ class MediaFiles
         return false;
     }
 
+    /**
+     * @param string $tvshowTitle
+     * @return array<SplFileInfo>|false
+     */
+    public function tvshowExists(string $tvshowTitle): Map|false
+    {
+        $existingEpisodes = $this->getEpisodes($tvshowTitle, false);
+
+        if ($existingEpisodes->isEmpty()) {
+            return false;
+        }
+
+        $episodes = new Map;
+        /** @var SplFileInfo $episode */
+        foreach ($existingEpisodes as $episode) {
+            $ptn = (object) (new PTN())->parse($episode->getFilename());
+
+            if (!property_exists($ptn, 'season') || !property_exists($ptn, 'episode')) {
+                continue;
+            }
+
+            $episodes->push($episode);
+        }
+
+        if ($episodes->count() > 0) {
+            return $episodes;
+        }
+
+        return false;
+    }
+
     public function movieExists(string $title)
     {
         $filepath = $this->moviesPath . DIRECTORY_SEPARATOR . $title;

src/Library/Action/Command/GetMediaFromLibraryCommand.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Library\Action\Command;
+
+use OneToMany\RichBundle\Contract\CommandInterface;
+
+/**
+ * @implements CommandInterface<GetMediaFromLibraryCommand>
+ */
+class GetMediaFromLibraryCommand implements CommandInterface
+{
+    public function __construct(
+        public ?int    $userId = null,
+        public ?string $mediaType = null,
+        public ?string $imdbId = null,
+        public ?string $title = null,
+        public ?string $season = null,
+        public ?string $episode = null,
+    ) {}
+}

src/Library/Action/Handler/GetMediaInfoFromLibraryHandler.php

@@ -0,0 +1,169 @@
+<?php
+
+namespace App\Library\Action\Handler;
+
+use Aimeos\Map;
+use App\Base\Enum\MediaType;
+use App\Base\Service\MediaFiles;
+use App\Base\Util\PTN;
+use App\Library\Action\Command\GetMediaFromLibraryCommand;
+use App\Library\Action\Result\GetMediaFromLibraryResult;
+use App\Monitor\Framework\Repository\MonitorRepository;
+use App\Tmdb\TmdbClient;
+use App\Tmdb\TmdbResult;
+use OneToMany\RichBundle\Contract\CommandInterface as C;
+use OneToMany\RichBundle\Contract\HandlerInterface;
+use OneToMany\RichBundle\Contract\ResultInterface as R;
+use Psr\Log\LoggerInterface;
+
+/**
+ * @implements HandlerInterface<GetMediaFromLibraryCommand,GetMediaFromLibraryResult>
+ */
+class GetMediaInfoFromLibraryHandler implements HandlerInterface
+{
+    public function __construct(
+        private readonly TmdbClient $tmdb,
+        private readonly MediaFiles $mediaFiles,
+        private readonly LoggerInterface $logger,
+        private readonly MonitorRepository $monitorRepository,
+    ) {}
+
+    public function handle(C $command): R
+    {
+        $result = new GetMediaFromLibraryResult();
+        $tmdbResult = $this->fetchTmdbData($command->imdbId, $command->mediaType);
+
+        if (null === $tmdbResult) {
+            $this->logger->warning('[GetMediaInfoFromLibraryHandler] TMDb result was not found, this may lead to issues in the rest of the library search', (array) $command);
+        }
+
+        $this->setResultExists($tmdbResult->mediaType, $tmdbResult->title, $result);
+        if ($result->notExists()) {
+            return $result;
+        }
+
+        $this->parseFromTmdbResult($tmdbResult, $result);
+
+        if ($command->mediaType === MediaType::TvShow->value) {
+            $this->setEpisodes($tmdbResult, $result);
+            $this->setSeasons($tmdbResult, $result);
+            $this->setMonitors($command->userId, $command->imdbId, $result);
+        }
+
+        return $result;
+    }
+
+    private function fetchTmdbData(string $imdbId, string $mediaType): ?TmdbResult
+    {
+        return match($mediaType) {
+            MediaType::Movie->value => $this->tmdb->movieDetails($imdbId),
+            MediaType::TvShow->value => $this->tmdb->tvShowDetails($imdbId),
+            default => null,
+        };
+    }
+
+    private function setResultExists(string $mediaType, string $title, GetMediaFromLibraryResult $result): void
+    {
+        $fsResult = match($mediaType) {
+            MediaType::Movie->value => $this->mediaFiles->movieExists($title),
+            MediaType::TvShow->value => $this->mediaFiles->tvShowExists($title),
+            default => false,
+        };
+        if (false === $fsResult) {
+            $result->setExists(false);
+        } else {
+            $result->setExists(true);
+        }
+    }
+
+    public function parseFromTmdbResult(TmdbResult $tmdbResult, GetMediaFromLibraryResult $result): void
+    {
+        $result->setTitle($tmdbResult->title);
+        $result->setMediaType($tmdbResult->mediaType);
+        $result->setImdbId($tmdbResult->imdbId);
+    }
+
+    public function setEpisodes(TmdbResult $tmdbResult, GetMediaFromLibraryResult $result): void
+    {
+        $existingEpisodeFiles = $this->mediaFiles->tvshowExists($tmdbResult->title);
+
+        $existingEpisodeMap = [];
+        foreach ($existingEpisodeFiles as $file) {
+            /** @var \SplFileInfo $file */
+            $ptn = (object) new PTN()->parse($file->getBasename());
+
+            if (!array_key_exists($ptn->season, $existingEpisodeMap)) {
+                $existingEpisodeMap[$ptn->season] = [];
+            }
+
+            if (!in_array($ptn->episode, $existingEpisodeMap[$ptn->season])) {
+                $existingEpisodeMap[$ptn->season][] = $ptn->episode;
+            }
+        }
+
+        $existingEpisodes = [];
+        $missingEpisodes = [];
+        foreach ($tmdbResult->episodes as $season => $episodes) {
+            foreach ($episodes as $episode) {
+                if (array_key_exists($season, $existingEpisodeMap)) {
+                    if (in_array($episode->episodeNumber, $existingEpisodeMap[$season])) {
+                        $existingEpisodes[] = $episode;
+                    } else {
+                        $missingEpisodes[] = $episode;
+                    }
+                } else {
+                    $missingEpisodes[] = $episode;
+                }
+            }
+        }
+        $result->setEpisodes($existingEpisodes);
+        $result->setMissingEpisodes($missingEpisodes);
+    }
+
+    public function setSeasons(TmdbResult $tmdbResult, GetMediaFromLibraryResult $result): void
+    {
+        $existingEpisodeFiles = $this->mediaFiles->tvshowExists($tmdbResult->title);
+
+        $existingEpisodeMap = [];
+        foreach ($existingEpisodeFiles as $file) {
+            /** @var \SplFileInfo $file */
+            $ptn = (object) new PTN()->parse($file->getBasename());
+            $existingEpisodeMap[$ptn->season][] = $ptn->episode;
+        }
+
+        $existingFullSeasons = [];
+        $existingPartialSeasons = [];
+        $missingSeasons = [];
+        foreach ($existingEpisodeMap as $season => $episodes) {
+            if (count($tmdbResult->episodes[$season]) === count($episodes)) {
+                $existingFullSeasons[] = $season;
+            } elseif (count($episodes) > 0) {
+                $existingPartialSeasons[] = $season;
+            }
+        }
+
+        $seasons = array_keys($tmdbResult->episodes);
+        foreach ($seasons as $season) {
+            if (!in_array($season, $existingFullSeasons) && !in_array($season, $existingPartialSeasons)) {
+                $missingSeasons[] = $season;
+            }
+        }
+
+        $result->setSeasons($existingFullSeasons);
+        $result->setPartialSeasons($existingPartialSeasons);
+        $result->setMissingSeasons($missingSeasons);
+    }
+
+    public function setMonitors(int $userId, string $imdbId, GetMediaFromLibraryResult $result)
+    {
+        $result->setMonitorCount(
+            $this->monitorRepository->countUserChildrenByParentId($userId, $imdbId)
+        );
+        $result->setActiveMonitorCount(
+            $this->monitorRepository->countUserActiveChildrenByParentId($userId, $imdbId)
+        );
+        $result->setCompleteMonitorCount(
+            $this->monitorRepository->countUserCompleteChildrenByParentId($userId, $imdbId)
+        );
+    }
+}

src/Library/Action/Input/GetMediaInfoFromLibraryInput.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Library\Action\Input;
+
+use App\Library\Action\Command\GetMediaFromLibraryCommand;
+use OneToMany\RichBundle\Attribute\SourceRequest;
+use OneToMany\RichBundle\Contract\CommandInterface as C;
+use OneToMany\RichBundle\Contract\InputInterface;
+
+/**
+ * @implements InputInterface<GetMediaInfoFromLibraryInput, GetMediaFromLibraryCommand>
+ */
+class GetMediaInfoFromLibraryInput implements InputInterface
+{
+    public function __construct(
+        #[SourceRequest('imdbId', nullify: true)]
+        public ?string $imdbId = null,
+        #[SourceRequest('title', nullify: true)]
+        public ?string $title = null,
+        #[SourceRequest('season', nullify: true)]
+        public ?string $season = null,
+        #[SourceRequest('episode', nullify: true)]
+        public ?string $episode = null,
+    ) {}
+
+    public function toCommand(): C
+    {
+        if (null === $this->imdbId && null === $this->title) {
+            throw new \InvalidArgumentException('Either imdbId or title must be set', 400);
+        }
+
+        return new GetMediaFromLibraryCommand(
+            imdbId: $this->imdbId,
+            title: $this->title,
+            season: $this->season,
+            episode: $this->episode,
+        );
+    }
+}

src/Library/Action/Result/GetMediaFromLibraryResult.php

@@ -0,0 +1,171 @@
+<?php
+
+namespace App\Library\Action\Result;
+
+use OneToMany\RichBundle\Contract\ResultInterface;
+
+class GetMediaFromLibraryResult implements ResultInterface
+{
+    private bool $exists;
+    private ?string $title = null;
+    private ?string $imdbId = null;
+    private ?string $mediaType = null;
+    private ?array $episodes = null;
+    private ?array $missingEpisodes = null;
+    private ?array $seasons = null;
+    private ?array $partialSeasons = null;
+    private ?array $missingSeasons = null;
+    private ?int $monitorCount = null; // Monitor Repo
+    private ?int $activeMonitorCount = null; // Monitor Repo
+    private ?int $completeMonitorCount = null; // Monitor Repo
+
+    public function exists(): bool
+    {
+        return $this->exists;
+    }
+
+    public function notExists(): bool
+    {
+        return !$this->exists;
+    }
+
+    public function setExists(bool $exists): void
+    {
+        $this->exists = $exists;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(?string $title): void
+    {
+        $this->title = $title;
+    }
+
+    public function getImdbId(): ?string
+    {
+        return $this->imdbId;
+    }
+
+    public function setImdbId(?string $imdbId): void
+    {
+        $this->imdbId = $imdbId;
+    }
+
+    public function getMediaType(): ?string
+    {
+        return $this->mediaType;
+    }
+
+    public function setMediaType(?string $mediaType): void
+    {
+        $this->mediaType = $mediaType;
+    }
+
+    public function getEpisodes(): ?array
+    {
+        return $this->episodes;
+    }
+
+    public function setEpisodes(?array $episodes): void
+    {
+        $this->episodes = $episodes;
+    }
+
+    public function getEpisodeCount(): ?int
+    {
+        return count($this->episodes);
+    }
+
+    public function getMissingEpisodes(): ?array
+    {
+        return $this->missingEpisodes;
+    }
+
+    public function setMissingEpisodes(?array $missingEpisodes): void
+    {
+        $this->missingEpisodes = $missingEpisodes;
+    }
+
+    public function getMissingEpisodeCount(): ?int
+    {
+        return count($this->missingEpisodes);
+    }
+
+    public function getSeasons(): ?array
+    {
+        return $this->seasons;
+    }
+
+    public function setSeasons(?array $seasons): void
+    {
+        $this->seasons = $seasons;
+    }
+
+    public function getSeasonCount(): ?int
+    {
+        return count($this->seasons);
+    }
+
+    public function getPartialSeasons(): ?array
+    {
+        return $this->partialSeasons;
+    }
+
+    public function setPartialSeasons(?array $partialSeasons): void
+    {
+        $this->partialSeasons = $partialSeasons;
+    }
+
+    public function getPartialSeasonCount(): ?int
+    {
+        return count($this->partialSeasons);
+    }
+
+    public function getMissingSeasons(): ?array
+    {
+        return $this->missingSeasons;
+    }
+
+    public function setMissingSeasons(?array $missingSeasons): void
+    {
+        $this->missingSeasons = $missingSeasons;
+    }
+
+    public function getMissingSeasonCount(): ?int
+    {
+        return count($this->missingSeasons);
+    }
+
+    public function getMonitorCount(): ?int
+    {
+        return $this->monitorCount;
+    }
+
+    public function setMonitorCount(?int $monitorCount): void
+    {
+        $this->monitorCount = $monitorCount;
+    }
+
+    public function getActiveMonitorCount(): ?int
+    {
+        return $this->activeMonitorCount;
+    }
+
+    public function setActiveMonitorCount(?int $activeMonitorCount): void
+    {
+        $this->activeMonitorCount = $activeMonitorCount;
+    }
+
+    public function getCompleteMonitorCount(): ?int
+    {
+        return $this->completeMonitorCount;
+    }
+
+    public function setCompleteMonitorCount(?int $completeMonitorCount): void
+    {
+        $this->completeMonitorCount = $completeMonitorCount;
+    }
+}

src/Monitor/Framework/Controller/ApiController.php

@@ -98,6 +98,7 @@ class ApiController extends AbstractController
                 'allDay' => true,
                 'backgroundColor' => $eventColors[$monitor->getImdbId()],
                 'borderColor' => $eventColors[$monitor->getImdbId()],
+                'attachment' => $monitor->getPoster(),
             ];
         });
 

src/Monitor/Framework/Controller/WebController.php

@@ -3,12 +3,17 @@
 namespace App\Monitor\Framework\Controller;
 
 use App\Download\Action\Input\DeleteDownloadInput;
+use App\Library\Action\Command\GetMediaFromLibraryCommand;
+use App\Library\Action\Handler\GetMediaInfoFromLibraryHandler;
 use App\Monitor\Action\Handler\AddMonitorHandler;
 use App\Monitor\Action\Handler\DeleteMonitorHandler;
 use App\Monitor\Action\Input\AddMonitorInput;
 use App\Monitor\Action\Input\DeleteMonitorInput;
 use App\Monitor\Framework\Entity\Monitor;
 use App\Monitor\Framework\Repository\MonitorRepository;
+use App\Search\Action\Command\GetMediaInfoCommand;
+use App\Search\Action\Handler\GetMediaInfoHandler;
+use App\Tmdb\TmdbClient;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
@@ -37,10 +42,27 @@ class WebController extends AbstractController
     }
 
     #[Route('/monitors/{id}', name: 'app.monitor.view', methods: ['GET'])]
-    public function viewMonitor(Monitor $monitor)
+    public function viewMonitor(Monitor $monitor, GetMediaInfoHandler $getMediaInfoHandler, GetMediaInfoFromLibraryHandler $handler)
     {
+        $media = $getMediaInfoHandler->handle(
+            new GetMediaInfoCommand(
+                imdbId: $monitor->getImdbId(),
+                mediaType: 'tvshows',
+            )
+        );
+        $libraryResult = $handler->handle(
+            new GetMediaFromLibraryCommand(
+                $this->getUser()->getId(),
+                $media->media->mediaType,
+                $media->media->imdbId,
+                $media->media->title,
+            )
+        );
+
         return $this->render('monitor/view.html.twig', [
             'monitor' => $monitor,
+            'results' => $media,
+            'library' => $libraryResult
         ]);
     }
 }

src/Monitor/Framework/Repository/MonitorRepository.php

@@ -41,4 +41,83 @@ class MonitorRepository extends ServiceEntityRepository
             ->getQuery();
         return $query->getResult();
     }
+
+    public function getActiveUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status IN (:statuses)')
+            ->andWhere('(m.title LIKE :term OR m.imdbId LIKE :term OR m.monitorType LIKE :term OR m.status LIKE :term)')
+            ->andWhere('m.parent IS NULL')
+            ->setParameter('statuses', ['New', 'In Progress', 'Active'])
+            ->setParameter('term', '%'.$this->term.'%')
+            ->orderBy('m.id', 'DESC')
+            ->getQuery()
+        );
+    }
+
+    public function getChildMonitorsByParentId(int $parentId)
+    {
+        return $this->asPaginator(
+            $this->monitorRepository->createQueryBuilder('m')
+                ->andWhere("m.parent = :parentId")
+                ->setParameter('parentId', $parentId)
+                ->orderBy('m.id', 'DESC')
+                ->getQuery()
+        );
+    }
+
+    public function getCompleteUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status = :status')
+            ->andWhere('(m.title LIKE :term OR m.imdbId LIKE :term OR m.monitorType LIKE :term OR m.status LIKE :term)')
+            ->setParameter('status', 'Complete')
+            ->setParameter('term', '%'.$this->term.'%')
+            ->orderBy('m.id', 'DESC')
+            ->getQuery()
+        );
+    }
+
+    public function countUserChildrenByParentId(int $userId, string $imdbId): ?int
+    {
+        return $this->createQueryBuilder('m')
+            ->select('COUNT(m.id)')
+            ->andWhere('m.user = :user')
+            ->andWhere('m.imdbId = :imdbId')
+            ->setParameter('user', $userId)
+            ->setParameter('imdbId', $imdbId)
+            ->getQuery()
+            ->getSingleScalarResult()
+        ;
+    }
+
+    public function countUserActiveChildrenByParentId(int $userId, string $imdbId): ?int
+    {
+        return $this->createQueryBuilder('m')
+            ->select('COUNT(m.id)')
+            ->andWhere('m.user = :user')
+            ->andWhere('m.imdbId = :imdbId')
+            ->andWhere('m.status IN (:statuses)')
+            ->setParameter('user', $userId)
+            ->setParameter('statuses', ['Active', 'New', 'In Progress'])
+            ->setParameter('imdbId', $imdbId)
+            ->getQuery()
+            ->getSingleScalarResult()
+        ;
+    }
+
+    public function countUserCompleteChildrenByParentId(int $userId, string $imdbId): ?int
+    {
+        return $this->createQueryBuilder('m')
+            ->select('COUNT(m.id)')
+            ->andWhere('m.user = :user')
+            ->andWhere('m.imdbId = :imdbId')
+            ->andWhere('m.status IN (:statuses)')
+            ->setParameter('user', $userId)
+            ->setParameter('statuses', ['Complete'])
+            ->setParameter('imdbId', $imdbId)
+            ->getQuery()
+            ->getSingleScalarResult()
+        ;
+    }
 }

src/Monitor/Framework/Scheduler/MonitorDispatcher.php

@@ -33,7 +33,9 @@ class MonitorDispatcher
             'tvshows' => MonitorTvShowCommand::class,
         ];
 
-        $monitors = $this->monitorRepository->findBy(['status' => ['New', 'Active']]);
+        $monitors = $this->monitorRepository->findBy([
+            'status' => ['New', 'Active'],
+        ]);
 
         foreach ($monitors as $monitor) {
             $monitor->setStatus('In Progress');

templates/base.html.twig

@@ -11,7 +11,14 @@
         {% endblock %}
 
         {% block javascripts %}
-            {% block importmap %}{{ importmap('app') }}{% endblock %}
+            {% block pre_js %}{% endblock %}
+
+            {% block importmap %}
+                {{ importmap('app') }}
+            {% endblock %}
+
+            {% block post_js %}{% endblock %}
+
             <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
         {% endblock %}
     </head>

templates/components/MonitorListRow.html.twig

@@ -1,4 +1,4 @@
-<tr{{ attributes }} is="monitor-list-row" id="monitor_{{ monitor.id }}"  class="dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900"
+<tr{{ attributes }} is="monitor-list-row" id="monitor_{{ monitor.id }}"  class="dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 cursor-pointer"
    monitor-id="{{ monitor.id }}"
    parent-id="{{ monitor.parent.id ?? null }}"
    imdb-id="{{ monitor.imdbId }}"
@@ -28,11 +28,13 @@
     <td class="px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor|monitor_media_id }}
     </td>
+    {# Monitor is a CHILD monitor #}
     {% if null != monitor.parent %}
     <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor.searchCount }}
     </td>
     {% else %}
+    {# Monitor is a PARENT monitor #}
     <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor.children|length }}
     </td>

templates/components/PreviewModal.html.twig

@@ -1,4 +1,4 @@
-<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md dark:bg-gray-950/80 dark:border-2 dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-3xl">
+<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[{{ mdWidth|default('50rem') }}] rounded-md dark:bg-gray-950/80 dark:border-2 dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-3xl">
     <div class="flex flex-row justify-end">
         <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-middle text-red-600 hover:text-red-700" />
     </div>

templates/index/index.html.twig

@@ -4,20 +4,31 @@
 {% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
-    <div class="p-4 flex flex-col grow gap-4 z-10">
-        <div class="flex flex-col md:flex-row gap-4">
-            <twig:Card title="Active Downloads" class="w-full">
-                <twig:DownloadList :type="'active'" />
-            </twig:Card>
+    <div class="p-4 z-10">
+        <div class="grid-stack gs-2">
+            <div class="grid-stack-item" gs-x="1">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Active Downloads">
+                        <twig:DownloadList :type="'active'" />
+                    </twig:Card>
+                </div>
+            </div>
 
-            <twig:Card title="Recent Downloads" class="w-full">
-                <twig:DownloadList :type="'complete'" />
-            </twig:Card>
-        </div>
-        <div class="flex flex-col md:flex-row gap-4">
-            <twig:Card title="Monitors" class="w-full">
-                <twig:MonitorList :type="'active'" :isWidget="true" />
-            </twig:Card>
+            <div class="grid-stack-item"  gs-x="2">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Complete Downloads" >
+                        <twig:DownloadList :type="'complete'" />
+                    </twig:Card>
+                </div>
+            </div>
+
+            <div class="grid-stack-item" gs-x="3">
+                <div class="grid-stack-item-content">
+                    <twig:Card title="Active Monitors">
+                        <twig:MonitorList :type="'active'" />
+                    </twig:Card>
+                </div>
+            </div>
         </div>
         <div class="flex flex-col gap-4">
             <twig:Card title="Popular Movies" contentClass="grid grid-cols-2 gap-4 md:flex md:flex-row md:justify-between w-full">
@@ -45,5 +56,6 @@
                 {% endfor %}
             </twig:Card>
         </div>
+        <div class="grid-stack" data-controller="dashboard-widgets"></div>
     </div>
 {% endblock %}

templates/monitor/upcoming-episodes.html.twig

@@ -34,6 +34,7 @@
         }
         document.addEventListener('DOMContentLoaded', async function() {
             const modal = document.getElementById('previewModal');
+            modal.setAttribute('mdWidth', '25rem');
             let data = await fetch('/api/monitor/upcoming-episodes');
             data = (await data.json())['data'];
 
@@ -47,7 +48,12 @@
                 eventClick: function (data) {
                     modal.display({
                         heading: data.event.title,
-                        content: `<p>${data.event.startStr}</p>`
+                        content: `
+<div class="flex flex-col gap-4 justify-center items-center">
+    <img src="${data.event.extendedProps.attachment}" class="w-[90%] rounded-md" />
+    <p>${data.event.startStr}</p>
+</div>
+`
                     })
                 }
             });

templates/monitor/view.html.twig

@@ -6,6 +6,141 @@
 {% block body %}
     <div class="px-4 py-2">
         <twig:Card title="Viewing your monitors for {{ monitor.title }}">
+            <div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
+                {% if results.media.poster != null %}
+                    <img class="w-full md:w-[12.5rem] rounded-lg" src="{{ results.media.poster }}" />
+                {% else %}
+                    <div class="w-full md:w-[12.5rem] h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+                        <twig:ux:icon width="24" name="hugeicons:loading-01" />
+                    </div>
+                {% endif %}
+
+                <div class="w-full flex flex-col">
+                    <div class="mb-4 flex flex-row gap-2 justify-between">
+                        <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
+                            {{ results.media.title }} ({{ results.media.year }})
+                        </h3>
+                    </div>
+
+                    <p class="text-gray-50 mb-4">
+                        {{ results.media.description }}
+                    </p>
+
+                    <div class="text-gray-50 mb-2">
+                        <div id="people" class="mb-1">
+                            {% if results.media.stars != null %}
+                                <strong>Starring</strong>: {{ results.media.stars|join(', ') }} <br />
+                            {% endif %}
+
+                            {% if results.media.directors != null %}
+                                <strong>Directors</strong>: {{ results.media.directors|join(', ') }} <br />
+                            {% endif %}
+
+                            {% if results.media.producers != null %}
+                                <strong>Producers</strong>: {{ results.media.producers|join(', ') }} <br />
+                            {% endif %}
+
+                            {% if results.media.creators != null %}
+                                <strong>Creators</strong>: {{ results.media.creators|join(', ') }} <br />
+                            {% endif %}
+                        </div>
+
+                        <div id="dates" class="mb-1">
+                            {% if results.media.premiereDate %}
+                                <strong>Premiered</strong>: {{ results.media.premiereDate|date('n/j/Y', 'UTC') }} <br />
+                            {% endif %}
+                        </div>
+
+                        {% if results.media.genres != null %}
+                            <div id="genres" class="text-gray-50 my-4">
+{#                                <strong>Genres</strong>: <br />#}
+                                {% for genre in results.media.genres %}
+                                    <small class="px-2 py-1 border border-orange-500 rounded-full">{{ genre }}</small>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    {% if results.media.mediaType == "tvshows" %}
+                        <div class="flex flex-col gap-4">
+                            <div class="flex flex-col grow text-white">
+                                <strong class="mb-1">In Your Library</strong>
+                                <div class="flex flex-col md:flex-row  border-t-orange-500 text-xs gap-2">
+                                    <div class="flex flex-col">
+                                        <span class="text-sm mb-1">Seasons</span>
+                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
+                                                <span>{{ library.seasonCount }}</span> full
+                                            </span>
+                                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
+                                                <span>{{ library.partialSeasonCount }}</span> partial
+                                            </span>
+                                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
+                                                <span>{{ library.missingSeasonCount }}</span> missing
+                                            </span>
+                                        </div>
+                                    </div>
+
+                                    <div class="flex flex-col">
+                                        <span class="text-sm mb-1">Episodes</span>
+                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-cyan-500 rounded-lg text-white">
+                                                <span>{{ library.episodeCount }}</span> existing
+                                            </span>
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-cyan-500 rounded-lg text-white">
+                                                <span>{{ library.missingEpisodeCount }}</span> missing
+                                            </span>
+                                        </div>
+                                    </div>
+
+                                    <div class="flex flex-col">
+                                        <span class="text-sm mb-1">Monitors</span>
+                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
+                                                <span>{{ library.monitorCount }}</span> total
+                                            </span>
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
+                                                <span>{{ library.activeMonitorCount }}</span> active
+                                            </span>
+                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
+                                                <span>{{ library.completeMonitorCount }}</span> complete
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    {% endif %}
+
+                    {% if "movies" == results.media.mediaType %}
+                        <div class="flex flex-row justify-start items-end grow text-xs">
+                            <span class="results-count-badge py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white">
+                                <span class="results-count-number" id="movie_results_count">-</span> results
+                            </span>
+
+                            <twig:Turbo:Frame id="meb_{{ results.media.imdbId }}" src="{{ path('api.library.search', {
+                                title: results.media.title,
+                                block: 'media_exists_badge',
+                                target: "meb_" ~ results.media.imdbId
+                            }) }}">
+                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white" title="Movie has not been downloaded yet.">
+                                    missing
+                                </span>
+                            </twig:Turbo:Frame>
+
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title="Release date {{ results.media.episodeAirDate }}">
+                                {{ results.media.premiereDate|date('n/j/Y', 'UTC') }}
+                            </span>
+
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white" title="This movie has a runtime of {{ results.media.runtime }} minutes.">
+                                {{ results.media.runtime }} minutes
+                            </span>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
             <twig:MonitorList :parentMonitorId="monitor.id" :isWidget="false" :perPage="10"></twig:MonitorList>
         </twig:Card>
     </div>