Add search arguments

Author: InfinityGhost

OpenTabletDriver.Web/Controllers/PluginsController.cs

@@ -1,6 +1,9 @@
+using System.Collections.Generic;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
+using OpenTabletDriver.Web.Core.Plugins;
 using OpenTabletDriver.Web.Core.Services;
+using OpenTabletDriver.Web.Models;
 
 namespace OpenTabletDriver.Web.Controllers
 {
@@ -14,10 +17,14 @@ public PluginsController(IPluginMetadataService pluginMetadataService)
         private IPluginMetadataService pluginMetadataService;
 
         [ResponseCache(Duration = 300)]
-        public async Task<IActionResult> Index()
+        public async Task<IActionResult> Index(string search = null)
         {
-            var metadata = await pluginMetadataService.GetPlugins();
-            return View(metadata);
+            var model = new EnumerableSearchViewModel<PluginMetadata>()
+            {
+                Items = await pluginMetadataService.GetPlugins(),
+                Search = search
+            };
+            return View(model);
         }
     }
 }

OpenTabletDriver.Web/Controllers/TabletsController.cs

@@ -2,8 +2,10 @@
 using System.Net.Http;
 using System.Runtime.Versioning;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Html;
 using Microsoft.AspNetCore.Mvc;
 using OpenTabletDriver.Web.Core.Services;
+using OpenTabletDriver.Web.Models;
 
 namespace OpenTabletDriver.Web.Controllers
 {
@@ -13,7 +15,7 @@ public class TabletsController : Controller
             "https://github.com/OpenTabletDriver/OpenTabletDriver/raw/master/TABLETS.md";
 
         [ResponseCache(Duration = 300)]
-        public async Task<IActionResult> Index()
+        public async Task<IActionResult> Index(string search = null)
         {
             using (var client = new HttpClient())
             using (var httpStream = await client.GetStreamAsync(TABLETS_MARKDOWN_URL))
@@ -25,7 +27,13 @@ public async Task<IActionResult> Index()
                     "<table>",
                     "<table id=\"tablets\" class=\"table table-hover\">"
                 );
-                return View(model: patchedHtml);
+
+                var model = new ContentSearchViewModel
+                {
+                    Content = new HtmlString(patchedHtml),
+                    Search = search
+                };
+                return View(model);
             }
         }
     }

OpenTabletDriver.Web/Models/ContentSearchViewModel.cs

@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Html;
+
+namespace OpenTabletDriver.Web.Models
+{
+    public class ContentSearchViewModel
+    {
+        public IHtmlContent Content { set; get; }
+        public string Search { set; get; }
+    }
+}

OpenTabletDriver.Web/Models/EnumerableSearchViewModel.cs

@@ -0,0 +1,10 @@
+using System.Collections.Generic;
+
+namespace OpenTabletDriver.Web.Models
+{
+    public class EnumerableSearchViewModel<T>
+    {
+        public IEnumerable<T> Items { set; get; }
+        public string Search { set; get; }
+    }
+}

OpenTabletDriver.Web/Views/Plugins/Index.cshtml

@@ -1,11 +1,11 @@
 @using OpenTabletDriver.Web.Core.Plugins
 @using System.Data.Common
 
-@model IEnumerable<PluginMetadata>
+@model EnumerableSearchViewModel<PluginMetadata>
 
 @{
     ViewBag.Title = "Plugins";
-    var pluginVersions = Model.Select(m => m.SupportedDriverVersion)
+    var pluginVersions = Model.Items.Select(m => m.SupportedDriverVersion)
         .Distinct()
         .OrderByDescending(v => v.ToString());
 }
@@ -14,13 +14,14 @@
     <div class="d-flex mb-3">
         <div class="flex-fill">
             <div class="form-floating me-3">
-                <input type="text" class="form-control" id="searchInput" placeholder="Search" onkeyup="filter()"/>
+                <input type="text" class="form-control" id="searchInput" placeholder="Search" onkeyup="filterInput()"
+                       value="@Model.Search"/>
                 <label for="searchInput">Search</label>
             </div>
         </div>
         <div class="flex-fill">
             <div class="form-floating">
-                <select class="form-select" id="pluginVersionSelector" onchange="filter()">
+                <select class="form-select" id="pluginVersionSelector" onchange="filterInput()">
                     <option value="">All Versions</option>
                     @foreach (var version in pluginVersions)
                     {
@@ -33,7 +34,7 @@
     </div>
 
     <div id="metadataList">
-        @foreach (var metadata in Model)
+        @foreach (var metadata in Model.Items)
         {
             <div class="card mb-2 plugin-metadata-card"
                  data-name="@metadata.Name" data-version="@metadata.SupportedDriverVersion">
@@ -74,7 +75,22 @@
 @section Scripts
 {
     <script type="text/javascript">
-        filter();
+        document.onreadystatechange = function () {
+            if (document.readyState == "complete") {
+                filter();
+            }
+        };
+
+        function filterInput() {
+            let searchInput = document.getElementById('searchInput');
+            let text = searchInput.value;
+            let action = 'Plugins';
+            if (text.length > 0) {
+                action += '?search=' + encodeURIComponent(text);
+            }
+            window.history.replaceState('', '', action);
+            filter();
+        }
 
         function filter() {
             let selector = document.getElementById('pluginVersionSelector');

OpenTabletDriver.Web/Views/Tablets/Index.cshtml

@@ -2,19 +2,37 @@
     ViewData["Title"] = "Tablets";
 }
 
-@model string
+@model ContentSearchViewModel
 
 <div class="container">
     <div class="form-floating mb-3">
-        <input type="text" class="form-control" id="searchInput" placeholder="Search" onkeyup="search()"/>
+        <input id="searchInput" type="text" class="form-control" onkeyup="searchInput()" placeholder="Search"
+               value="@Model.Search"/>
         <label for="searchInput">Search</label>
     </div>
-    @Html.Raw(Model)
+    @Model.Content
 </div>
 
 @section Scripts
 {
     <script type="text/javascript">
+        document.onreadystatechange = function () {
+            if (document.readyState == "complete") {
+                search();
+            }
+        };
+
+        function searchInput() {
+            let input = document.getElementById('searchInput');
+            let text = input.value;
+            let action = 'Tablets'
+            if (text.length > 0) {
+                action += '?search=' + encodeURIComponent(text);
+            }
+            window.history.replaceState('', '', action);
+            search();
+        }
+
         function search() {
             let input = document.getElementById('searchInput');
             let filter = input.value.toUpperCase();