feat: Add event type filter to server events index and update related JavaScript logic

Author: frasermolyneux

src/XtremeIdiots.Portal.Web/ApiControllers/ServerAdminController.cs

@@ -156,6 +156,7 @@ private async Task<IActionResult> GetChatLogPrivate(GameType? gameType, Guid? se
     public async Task<IActionResult> GetServerEventsAjax(
         [FromQuery] string? gameType,
         [FromQuery] Guid? gameServerId,
+        [FromQuery] string? eventType,
         CancellationToken cancellationToken = default)
     {
         return await ExecuteWithErrorHandlingAsync(async () =>
@@ -188,7 +189,7 @@ public async Task<IActionResult> GetServerEventsAjax(
             }
 
             var eventsApiResponse = await repositoryApiClient.GameServersEvents.V1.GetGameServerEvents(
-                parsedGameType, gameServerId, null,
+                parsedGameType, gameServerId, string.IsNullOrWhiteSpace(eventType) ? null : eventType.Trim(),
                 model.Start, model.Length, order, cancellationToken).ConfigureAwait(false);
 
             if (!eventsApiResponse.IsSuccess || eventsApiResponse.Result?.Data is null)

src/XtremeIdiots.Portal.Web/Views/ServerAdmin/ServerEventsIndex.cshtml

@@ -24,36 +24,41 @@
                         <option value="">All Servers</option>
                     </select>
                 </div>
+                <div class="filter-group">
+                    <label for="filterEventType" class="form-label">Event Type</label>
+                    <input type="text" id="filterEventType" class="form-control" placeholder="e.g. RconKickPlayer" />
+                </div>
                 <div class="filter-group reset-group">
                     <label class="form-label" for="resetFilters">Reset</label>
-                    <button type="button" id="resetFilters" class="btn btn-outline-secondary btn-sm">Reset Filters</button>
+                    <button type="button" id="resetFilters" class="btn btn-outline-secondary btn-sm">Reset
+                        Filters</button>
+                    </div>
                 </div>
-            </div>
 
-            <div class="ibox">
-                <div class="ibox-title">
-                    <i class="fa-solid fa-fw fa-timeline"></i> @ViewData["Title"]
-                </div>
-                <div class="ibox-content">
-                    <div class="table-responsive">
-                        <table id="dataTable" class="table table-striped table-hover w-100">
-                            <thead>
-                                <tr>
-                                    <th>Timestamp</th>
-                                    <th>Event Type</th>
-                                    <th>Server</th>
-                                    <th>Event Data</th>
-                                </tr>
-                            </thead>
-                        </table>
+                <div class="ibox">
+                    <div class="ibox-title">
+                        <i class="fa-solid fa-fw fa-timeline"></i> @ViewData["Title"]
+                    </div>
+                    <div class="ibox-content">
+                        <div class="table-responsive">
+                            <table id="dataTable" class="table table-striped table-hover w-100">
+                                <thead>
+                                    <tr>
+                                        <th>Timestamp</th>
+                                        <th>Event Type</th>
+                                        <th>Server</th>
+                                        <th>Event Data</th>
+                                    </tr>
+                                </thead>
+                            </table>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
-@section Scripts {
-    <form id="__af" method="post" style="display:none">@Html.AntiForgeryToken()</form>
-    <script src="~/js/server-events-index.js" asp-append-version="true"></script>
-}
+    @section Scripts {
+        <form id="__af" method="post" style="display:none">@Html.AntiForgeryToken()</form>
+        <script src="~/js/server-events-index.js" asp-append-version="true"></script>
+    }

src/XtremeIdiots.Portal.Web/wwwroot/js/server-events-index.js

@@ -2,6 +2,7 @@ $(document).ready(function () {
     var tableEl = $('#dataTable');
     var gameTypeSel = document.getElementById('filterGameType');
     var serverSel = document.getElementById('filterGameServer');
+    var eventTypeInput = document.getElementById('filterEventType');
     var allServers = [];
 
     function escapeHtml(str) {
@@ -42,11 +43,13 @@ $(document).ready(function () {
             data._serverEventsVersion = 1;
             if (gameTypeSel) data.gameType = gameTypeSel.value || '';
             if (serverSel) data.serverId = serverSel.value || '';
+            if (eventTypeInput) data.eventType = eventTypeInput.value || '';
         },
         stateLoadParams: function (settings, data) {
             if (data._serverEventsVersion !== 1) return false;
             if (gameTypeSel && data.gameType) gameTypeSel.value = data.gameType;
             if (serverSel && typeof data.serverId !== 'undefined') serverSel._pendingValue = data.serverId;
+            if (eventTypeInput && typeof data.eventType !== 'undefined') eventTypeInput.value = data.eventType;
         },
         columnDefs: [
             { targets: 0, responsivePriority: 1 },
@@ -73,6 +76,9 @@ $(document).ready(function () {
                 var srv = serverSel?.value;
                 if (srv) qs.push('gameServerId=' + encodeURIComponent(srv));
 
+                var eventType = eventTypeInput?.value?.trim();
+                if (eventType) qs.push('eventType=' + encodeURIComponent(eventType));
+
                 this.url = baseUrl + (qs.length ? ('?' + qs.join('&')) : '');
             }
         },
@@ -154,9 +160,14 @@ $(document).ready(function () {
         table.page('first').draw(false);
     });
 
+    eventTypeInput?.addEventListener('input', function () {
+        table.page('first').draw(false);
+    });
+
     document.getElementById('resetFilters')?.addEventListener('click', function () {
         if (gameTypeSel) gameTypeSel.value = '';
         if (serverSel) serverSel.value = '';
+        if (eventTypeInput) eventTypeInput.value = '';
         rebuildServerOptions();
         table.search('');
         table.page('first').draw(false);