Submit form on log count select option change.

Author: mo-esmp

src/Serilog.Ui.Web/Views/Logs/Index.cshtml

@@ -19,7 +19,7 @@
 <form method="get" asp-action="Index">
     <div class="row">
         <div class="col-sm-12 col-md-6">
-            <div class="table-select">
+            <div class="table-select" id="logCount">
                 <label>
                     Show
                     <select asp-items="@Model.CountSelectListItems" name="count" class="form-control form-control-sm">
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    <table class="table" id="log-table">
+    <table class="table" id="logTable">
         <thead class="thead-dark">
             <tr>
                 <th scope="col">#</th>
@@ -68,7 +68,7 @@
 
                 <tr>
                     <th scope="row">@log.Id</th>
-                    <td class="text-center"><span style="padding: 5px;" class="@levelClass text-white">@log.Level</span></td>
+                    <td class="text-center"><span class="log-level text-white @levelClass">@log.Level</span></td>
                     <td class="text-center">@log.Timestamp</td>
                     <td>
                         <span class="overflow-auto"> @log.Message</span>

src/Serilog.Ui.Web/Views/Logs/_Paging.cshtml

@@ -32,7 +32,7 @@
         if (Model.Page == i)
         {
         <li class="page-item active">
-            <span class="page-link disabled">
+            <span data-val="@i" class="page-link disabled">
                 @i
                 <span class="sr-only">(current)</span>
             </span>

src/Serilog.Ui.Web/wwwroot/css/main.css

@@ -280,12 +280,18 @@ a[data-toggle="collapse"] {
         border-color: #3e64ff !important;
     }
 
-#log-table tbody tr:nth-of-type(odd) {
+#logTable tbody tr:nth-of-type(odd) {
     background-color: rgba(0,0,0,.05);
 }
 
-#log-table tbody tr:last-child {
-    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
+#logTable tbody tr:last-child {
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+#logTable .log-level {
+    display: inline-block;
+    padding: 5px;
+    width: 92px;
 }
 
 .table .thead-dark th {

src/Serilog.Ui.Web/wwwroot/js/main.js

@@ -2,20 +2,25 @@
     "use strict";
 
     var fullHeight = function () {
-        $('.js-fullheight').css('height', $(window).height());
+        $(".js-fullheight").css("height", $(window).height());
         $(window).resize(function () {
-            $('.js-fullheight').css('height', $(window).height());
+            $(".js-fullheight").css("height", $(window).height());
         });
     };
     fullHeight();
 
-    $('#sidebarCollapse').on('click', function () {
-        $('#sidebar').toggleClass('active');
+    $("#sidebarCollapse").on("click", function () {
+        $("#sidebar").toggleClass("active");
     });
 
-    $('.page-link').on('click', function (e) {
+    $(".page-link").on("click", function (e) {
         e.preventDefault();
-        $('#page').val($(this).attr("data-val"));
-        $('form').submit()
+        $("#page").val($(this).attr("data-val"));
+        $("form").submit()
     });
+
+    $("#logCount").on("change", function () {
+        $("#page").val($(".page-link.disabled").attr("data-val"));
+        $("form").submit()
+    })
 })(jQuery);