added search

YongeStreet/Views/Home/City.cshtml

@@ -12,7 +12,8 @@
 <div class="uk-height-large uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" 
      style=""
      id="leaflet-map"
-     data-city="@Model.City">
+     data-city="@Model.City"
+     data-date="@Model.Date.ToString("yyyy-MM-dd")">
 </div>
 
 <table class="uk-table uk-table-striped">
@@ -50,4 +51,6 @@
     </tbody>
 </table>
 
-<script src="~/js/quebec-province-map.js" type="module"></script>
+<script src="~/js/quebec-province-map.js" type="module"></script>
+
+

YongeStreet/Views/Home/CityList_Partial.cshtml

@@ -0,0 +1,16 @@
+@model YongeStreet.Controllers.IndexModel
+
+@{
+    Layout = "";
+}
+
+
+
+@foreach(var city in Model.Cities)
+{
+    <tr>
+        <td>@Html.ActionLink(city.Name, "City", "Home",  new {City=city.Name})</td>
+        <td>@((city.TotalStreetSize / 1000 ).ToString("N"))</td>
+        <td>@string.Join(", ", city.AvailableDates)</td>
+    </tr>
+}

YongeStreet/Views/Home/Index.cshtml

@@ -6,6 +6,22 @@
 }
 
 
+<p>
+    Le Québec possède un reseau routier impréssionant.
+</p>
+
+
+<div class="uk-form-horizontal uk-margin-large">
+    <div class="uk-margin">
+        <label class="uk-form-label" for="city-name">Nom de Ville</label>
+        <div class="uk-form-controls">
+            <input class="uk-input" id="city-name" type="text" name="search" placeholder="Rimouski" hx-get="/Home/CityList_Partial"
+                   hx-trigger="keyup changed delay:500ms"
+                   hx-target="#city-table-body"
+                   hx-swap="innerHTML">
+        </div>
+    </div>
+</div>
 
 <table class="uk-table uk-table-striped">
     <thead>
@@ -15,16 +31,10 @@
         <th></th>
     </tr>
     </thead>
-    <tbody>
-    @foreach(var city in Model.Cities)
-    {
-        <tr>
-            <td>@Html.ActionLink(city.Name, "City", "Home",  new {City=city.Name})</td>
-            <td>@((city.TotalStreetSize / 1000 ).ToString("N"))</td>
-            <td>@string.Join(", ", city.AvailableDates)</td>
-        </tr>
-    }
-    
-    
+    <tbody id="city-table-body"
+           hx-get="/Home/CityList_Partial"
+           hx-trigger="load"
+           hx-target="#city-table-body"
+           hx-swap="innerHTML">
     </tbody>
 </table>

YongeStreet/Views/Shared/_Layout.cshtml

@@ -14,38 +14,23 @@
 <body>
 
 
-@* <nav class="uk-navbar-container"> *@
-@*     <div class="uk-container"> *@
-@*         <div uk-navbar> *@
-@* *@
-@*             <div class="uk-navbar-left"> *@
-@* *@
-@*                 <a class="uk-navbar-item uk-logo" href="/" aria-label="Back to Home"> *@
-@*                     <img src="~/images/logo.jpg" *@
-@*                          alt="" *@
-@*                          style="height: 1.7em;"/> *@
-@*                      *@
-@*                 </a> *@
-@* *@
-@*                 <ul class="uk-navbar-nav"> *@
-@*                     <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"> *@
-@*                         L'Insoutenable Longeur Du Réseau Routier *@
-@*                     </span> *@
-@*                 </ul> *@
-@*             </div> *@
-@* *@
-@*         </div> *@
-@*     </div> *@
-@* </nav> *@
 
 <br/>
 <div class="uk-container">
     
     @RenderBody()
+
+    <hr/>
+    <footer>
+        source: <a href="https://gitlab.com/all-dressed-programming/yongestreet">https://gitlab.com/all-dressed-programming/yongestreet</a>
+    </footer>
+    
 </div>
 
 
 
+
+
 <script src="~/js/site.js" asp-append-version="true"></script>
 @await RenderSectionAsync("Scripts", required: false)
 </body>