Split event display into Pending, Active, Upcoming and Past Events

Events that need to be started are most important, event that are running are next most important, events in the future are next, and old events are least; now the hierarchy of the page reflects that. Remove a bunch of not-super-useful columns from event display. This'll work better on mobile and "k value" and "host/cohost" were not super useful columns. "Finalized" is now implied by location on the page and can go too.
PennyDreadfulMTG · Nov 21, 2024 · c884981 · c884981
1 parent c851224
commit c884981
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 93 deletions.
diff --git a/gatherling/Views/Components/HostEvents.php b/gatherling/Views/Components/HostEvents.php
@@ -6,25 +6,41 @@
 
 use function Safe\strtotime;
 
-class HostActiveEvents extends Component
+class HostEvents extends Component
 {
-    /** @var array<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string, startTime: Time}> */
-    public array $events = [];
+    /** @var list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string, startTime: Time}> */
+    public array $pendingEvents = [];
+    /** @var list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string, startTime: Time}> */
+    public array $activeEvents = [];
+
+    public bool $hasPendingEvents;
+    public bool $hasActiveEvents;
+
     public Icon $playersIcon;
     public Icon $structureIcon;
     public Icon $standingsIcon;
 
-    /** @param array<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string}> $events */
-    public function __construct(array $events)
+    /**
+     * @param list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string}> $pendingEvents
+     * @param list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string}> $activeEvents
+     */
+    public function __construct(array $pendingEvents, array $activeEvents)
     {
         $this->playersIcon = new Icon('lucide:users');
         $this->structureIcon = new Icon('lucide:trophy');
         $this->standingsIcon = new Icon('lucide:chevron-right');
 
+        $this->hasPendingEvents = count($pendingEvents) > 0;
+        $this->hasActiveEvents = count($activeEvents) > 0;
+
         $now = time();
-        foreach ($events as $event) {
+        foreach ($pendingEvents as $event) {
+            $event['startTime'] = new Time(strtotime($event['start']), $now);
+            $this->pendingEvents[] = $event;
+        }
+        foreach ($activeEvents as $event) {
             $event['startTime'] = new Time(strtotime($event['start']), $now);
-            $this->events[] = $event;
+            $this->activeEvents[] = $event;
         }
     }
 }
diff --git a/gatherling/Views/Components/ResultDropMenu.php b/gatherling/Views/Components/ResultDropMenu.php
@@ -6,10 +6,7 @@
 
 class ResultDropMenu extends DropMenu
 {
-    /**
-     * @param array<string, string> $extraOptions
-     * @return array{name: string, default: string, options: array<int, array{value: string, text: string}>}
-     */
+    /** @param array<string, string> $extraOptions */
     public function __construct(string $name, array $extraOptions = [])
     {
         $options = [

diff --git a/gatherling/Views/Pages/EventList.php b/gatherling/Views/Pages/EventList.php
@@ -8,23 +8,26 @@
 use Gatherling\Models\HostedEventDto;
 use Gatherling\Models\Player;
 use Gatherling\Views\Components\FormatDropMenu;
-use Gatherling\Views\Components\HostActiveEvents;
+use Gatherling\Views\Components\HostEvents;
 use Gatherling\Views\Components\SeasonDropMenu;
 use Gatherling\Views\Components\SeriesDropMenu;
+use Gatherling\Views\Components\Time;
 
 use function Gatherling\Helpers\db;
 use function Gatherling\Helpers\get;
 use function Safe\strtotime;
 
 class EventList extends Page
 {
-    public ?HostActiveEvents $hostActiveEvents;
+    public ?HostEvents $hostEvents;
     public FormatDropMenu $formatDropMenu;
     public SeriesDropMenu $seriesDropMenu;
     public SeasonDropMenu $seasonDropMenu;
     public bool $hasPlayerSeries;
     /** @var list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string}> */
-    public array $events = [];
+    public array $upcomingEvents;
+    /** @var list<array{name: string, format: string, players: int, host: string, start: string, active: int, finalized: int, cohost: string, series: string, kvalueDisplay: string, link: string, isOngoing: bool, currentRound: int, settingsLink: string, registrationLink: string, matchesLink: string, standingsLink: string, structureSummary: string}> */
+    public array $pastEvents;
     public bool $hasMore;
 
     public function __construct(string $seriesName, string $format, ?int $season)
@@ -44,7 +47,7 @@ public function __construct(string $seriesName, string $format, ?int $season)
             32 => 'Championship',
         ];
 
-        $activeEvents = $seriesShown = [];
+        $pendingEvents = $activeEvents = $upcomingEvents = $pastEvents = $seriesShown = [];
         foreach ($events as $event) {
             $seriesShown[] = $event->series;
             $baseLink = 'event.php?name=' . rawurlencode($event->name) . '&view=';
@@ -68,19 +71,26 @@ public function __construct(string $seriesName, string $format, ?int $season)
                 'standingsLink' => "{$baseLink}standings",
                 'structureSummary' => (new Event($event->name))->structureSummary(),
             ];
-            $this->events[] = $eventInfo;
-            if ($event->active == 1 || (!$event->finalized && strtotime($event->start) <= strtotime('+1 day'))) {
+            if (!$event->active && !$event->finalized && strtotime($event->start) <= strtotime('+1 hour')) {
+                $pendingEvents[] = $eventInfo;
+            } elseif ($event->active == 1) {
                 $activeEvents[] = $eventInfo;
+            } elseif (strtotime($event->start) > strtotime('+1 hour')) {
+                $upcomingEvents[] = $eventInfo;
+            } else {
+                $pastEvents[] = $eventInfo;
             }
         }
+        $this->upcomingEvents = array_reverse($upcomingEvents);
+        $this->pastEvents = $pastEvents;
 
         if ($seriesName) {
             $seriesShown = $playerSeries;
         } else {
             $seriesShown = array_values(array_unique($seriesShown));
         }
 
-        $this->hostActiveEvents = count($activeEvents) > 0 ? new HostActiveEvents($activeEvents) : null;
+        $this->hostEvents = new HostEvents($pendingEvents, $activeEvents);
         $this->formatDropMenu = new FormatDropMenu(get()->optionalString('format'), true);
         $this->seriesDropMenu = new SeriesDropMenu($seriesName, 'All', $seriesShown);
         $this->seasonDropMenu = new SeasonDropMenu($season, 'All');
@@ -114,7 +124,7 @@ function queryEvents(Player $player, array $playerSeries, string $seriesName, st
         $sql .= ' AND e.season = :season';
         $params['season'] = $season;
     }
-    $sql .= ' GROUP BY e.name ORDER BY e.finalized, e.start DESC LIMIT 100';
+    $sql .= ' GROUP BY e.name ORDER BY e.start DESC LIMIT 100';
 
     return db()->select($sql, HostedEventDto::class, $params);
 }
diff --git a/gatherling/templates/eventList.mustache b/gatherling/templates/eventList.mustache
@@ -5,9 +5,9 @@
         </form>
     </div>
 {{/hasPlayerSeries}}
-{{#hostActiveEvents}}
-    {{> hostActiveEvents}}
-{{/hostActiveEvents}}
+{{#hostEvents}}
+    {{> hostEvents}}
+{{/hostEvents}}
 <h2>Filter Events</h2>
 <form action="event.php" method="get">
     <table class="form">
@@ -45,39 +45,43 @@
         </tr>
     </table>
 </form>
-<h2>All Events</h2>
-<table cellpadding="3">
+<h2>Upcoming Events</h2>
+<table>
     <tr>
         <td><b>Event</b></td>
-        <td><b>Format</b></td>
-        <td><b>K-Value</b></td>
         <td class="c"><b>Players</b></td>
-        <td><b>Host(s)</b></td>
-        <td class="c"><b>Finalized</b></td>
     </tr>
-    {{#events}}
+    {{#upcomingEvents}}
         <tr>
-            <td>{{#isOngoing}}* {{/isOngoing}}<a href="{{link}}">{{name}}</a></td>
-            <td>{{format}}</td>
-            <td>{{kvalueDisplay}}</td>
+            <td><a href="{{link}}">{{name}}</a></td>
             <td class="c">{{players}}</td>
-            <td>{{host}}{{#cohost}}/{{cohost}}{{/cohost}}</td>
-            <td class="c">{{#finalized}}&#x2714;{{/finalized}}</td>
-        </tr>
-    {{/events}}
-    {{#hasMore}}
-        <tr>
-            <td colspan="5" width="500">&nbsp;</td>
         </tr>
+    {{/upcomingEvents}}
+    <tr>
+        <td colspan="2">&nbsp;</td>
+    </tr>
+</table>
+
+<h2>Past Events</h2>
+<table>
+    <tr>
+        <td><b>Event</b></td>
+        <td class="c"><b>Players</b></td>
+    </tr>
+    {{#pastEvents}}
         <tr>
-            <td colspan="5" class="c">
-                <i>This list only shows the 100 most recent results.
-                Please use the filters at the top of this page to find older
-                results.</i>
-            </td>
+        <!-- BAKERT scratch host, cohost, isOngoging, kvalueDisplay, format, spllit itnno two buckets -->
+            <td><a href="{{link}}">{{name}}</a></td>
+            <td class="c">{{players}}</td>
         </tr>
-    {{/hasMore}}
+    {{/pastEvents}}
     <tr>
-        <td colspan="5" width="500">&nbsp;</td>
+        <td colspan="2">&nbsp;</td>
     </tr>
 </table>
+
+{{#hasMore}}
+    <p><i>This list only shows the 100 most recent results.
+    Please use the filters at the top of this page to find older
+    results.</i></p>
+{{/hasMore}}
diff --git a/gatherling/templates/partials/eventCard.mustache b/gatherling/templates/partials/eventCard.mustache
@@ -0,0 +1,38 @@
+<div class="event-card">
+    <div class="card-header">
+        <div class="title-section">
+            <a href="{{link}}"><h3>{{name}}</h3></a>
+            <div>
+                <a class="event-type" href="{{settingsLink}}">
+                    {{#structureIcon}}{{> icon}}{{/structureIcon}}
+                    {{structureSummary}}
+                </a>
+            </div>
+        </div>
+        <div>
+            <a class="player-count" href="{{registrationLink}}">
+                {{#playersIcon}}{{> icon}}{{/playersIcon}}
+                <span>{{players}}</span>
+            </a>
+        </div>
+    </div>
+
+    <div class="round-status">
+        {{#active}}
+            <a href="{{matchesLink}}">Round {{currentRound}}</a>
+            <a href="{{standingsLink}}" class="event-action">
+                View Standings
+                {{#standingsIcon}}{{> icon}}{{/standingsIcon}}
+            </a>
+        {{/active}}
+        {{^active}}
+            <a href="{{settingsLink}}" class="event-action">
+                {{#startTime}}{{> time}}{{/startTime}}
+            </a>
+            <a href="{{registrationLink}}" class="event-action">
+                Start Event
+                {{#standingsIcon}}{{> icon}}{{/standingsIcon}}
+            </a>
+        {{/active}}
+    </div>
+</div>
diff --git a/gatherling/templates/partials/hostEvents.mustache b/gatherling/templates/partials/hostEvents.mustache
@@ -1,44 +1,17 @@
-<h2>Current Events</h2>
-<div class="event-grid">
-    {{#events}}
-        <div class="event-card">
-            <div class="card-header">
-                <div class="title-section">
-                    <a href="{{link}}"><h3>{{name}}</h3></a>
-                    <div>
-                        <a class="event-type" href="{{settingsLink}}">
-                            {{#structureIcon}}{{> icon}}{{/structureIcon}}
-                            {{structureSummary}}
-                        </a>
-                    </div>
-                </div>
-                <div>
-                    <a class="player-count" href="{{registrationLink}}">
-                        {{#playersIcon}}{{> icon}}{{/playersIcon}}
-                        <span>{{players}}</span>
-                    </a>
-                </div>
-            </div>
+{{#hasPendingEvents}}
+    <h2>Pending Events</h2>
+    <div class="event-grid">
+        {{#pendingEvents}}
+            {{> eventCard}}
+        {{/pendingEvents}}
+    </div>
+{{/hasPendingEvents}}
 
-            <div class="round-status">
-                {{#active}}
-                    <a href="{{matchesLink}}">Round {{currentRound}}</a>
-                    <a href="{{standingsLink}}" class="event-action">
-                        View Standings
-                        {{#standingsIcon}}{{> icon}}{{/standingsIcon}}
-                    </a>
-                {{/active}}
-                {{^active}}
-                    <a href="{{settingsLink}}" class="event-action">
-                        {{#startTime}}{{> time}}{{/startTime}}
-                    </a>
-                    <a href="{{registrationLink}}" class="event-action">
-                        Start Event
-                        {{#standingsIcon}}{{> icon}}{{/standingsIcon}}
-                    </a>
-                {{/active}}
-            </div>
-
-        </div>
-    {{/events}}
-</div>
+{{#hasActiveEvents}}
+    <h2>Active Events</h2>
+    <div class="event-grid">
+        {{#activeEvents}}
+            {{> eventCard}}
+        {{/activeEvents}}
+    </div>
+{{/hasActiveEvents}}
diff --git a/psalm-baseline.xml b/psalm-baseline.xml
@@ -374,10 +374,6 @@
     <DocblockTypeContradiction>
       <code><![CDATA[$players[$counter] == null]]></code>
     </DocblockTypeContradiction>
-    <InvalidArgument>
-      <code><![CDATA[$t4]]></code>
-      <code><![CDATA[$t8]]></code>
-    </InvalidArgument>
     <MixedArgument>
       <code><![CDATA[$activePlayers[$i]['player']]]></code>
       <code><![CDATA[$activePlayers[$pairing[$i]]['player']]]></code>