From 4be86d5d12263f82987879621b26c5be89c6fac1 Mon Sep 17 00:00:00 2001
From: Krzysztof Wieclaw <k.wieclaw@samsung.com>
Date: Thu, 15 Nov 2018 17:15:21 +0100
Subject: [PATCH] Added paging

---
 GearRacingCloud/Controllers/HomeController.cs      |  7 +++-
 GearRacingCloud/Controllers/TestController.cs      | 10 ++---
 .../HelperMethods/StringDisplayExtensions.cs       | 30 +++++++++++++
 GearRacingCloud/Startup.cs                         |  2 +-
 GearRacingCloud/Views/Home/Index.cshtml            | 33 ++++++++++-----
 .../Views/Shared/_LayoutRefreshing.cshtml          | 49 ++++++++++++++++++++++
 GearRacingCloud/Views/Test/FullCar.cshtml          | 24 +++++++----
 GearRacingCloud/Views/Test/FullLap.cshtml          | 30 ++++++++-----
 GearRacingCloud/wwwroot/css/site.css               | 45 ++++++++++----------
 9 files changed, 174 insertions(+), 56 deletions(-)
 create mode 100644 GearRacingCloud/HelperMethods/StringDisplayExtensions.cs
 create mode 100644 GearRacingCloud/Views/Shared/_LayoutRefreshing.cshtml

diff --git a/GearRacingCloud/Controllers/HomeController.cs b/GearRacingCloud/Controllers/HomeController.cs
index 345c111..2aa73f4 100644
--- a/GearRacingCloud/Controllers/HomeController.cs
+++ b/GearRacingCloud/Controllers/HomeController.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Timers;
 using System.Collections.Generic;
 using System.Diagnostics;
 using System.Linq;
@@ -10,9 +11,11 @@ namespace GearRacingCloud.Controllers
 {
     public class HomeController : Controller
     {
-        public IActionResult Index()
+        const int perPage = 5;
+        public IActionResult Index([FromQuery] int id)
         {
-            return View(Laps.GetInstance().GetLaps());
+            var laps = Laps.GetInstance().GetLaps().OrderBy(l => l.laptime).Skip(id * perPage).Take(perPage);
+            return View((laps,id, perPage));
         }
 
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
diff --git a/GearRacingCloud/Controllers/TestController.cs b/GearRacingCloud/Controllers/TestController.cs
index bdcc386..8b3c6dc 100644
--- a/GearRacingCloud/Controllers/TestController.cs
+++ b/GearRacingCloud/Controllers/TestController.cs
@@ -14,7 +14,7 @@ namespace GearRacingCloud.Controllers
 {
     public class TestController : Controller
     {
-        const int perSize = 5;
+        const int perPage = 5;
         private HttpContent _CreateJsonContent(string json)
         {
             var buffer = System.Text.Encoding.UTF8.GetBytes(json);
@@ -55,15 +55,15 @@ namespace GearRacingCloud.Controllers
         [Route("test/full-lap.html")]
         public IActionResult FullLap([FromQuery] int id)
         {
-            IEnumerable<Lap> laps = Laps.GetInstance().GetLaps().Skip(id * perSize).Take(perSize);
-            return View(laps);
+            IEnumerable<Lap> laps = Laps.GetInstance().GetLaps().Skip(id * perPage).Take(perPage);
+            return View((laps,id, perPage));
         }
 
         [Route("test/full-car.html")]
         public IActionResult FullCar([FromQuery] int id)
         {
-            IEnumerable<Car> cars = Cars.GetInstance().GetCars().Skip(id * perSize).Take(perSize);
-            return View(cars);
+            IEnumerable<Car> cars = Cars.GetInstance().GetCars().Skip(id * perPage).Take(perPage);
+            return View((cars,id, perPage));
         }
 
         [HttpPost]
diff --git a/GearRacingCloud/HelperMethods/StringDisplayExtensions.cs b/GearRacingCloud/HelperMethods/StringDisplayExtensions.cs
new file mode 100644
index 0000000..75a0d73
--- /dev/null
+++ b/GearRacingCloud/HelperMethods/StringDisplayExtensions.cs
@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace GearRacingCloud.HelperMethods
+{
+    static public class StringDisplayExtensions
+    {
+        static public string ShortenTo(this string s, int maxChars, char omitChar = '.')
+        {
+            if (maxChars >= s.Length)
+                return s;
+
+            if (maxChars < 2)
+                return s.Substring(0, maxChars);
+
+            if (maxChars == 2)
+                return s.Substring(0, 1) + ".";
+
+            int omitCharCount = Math.Min(maxChars - 2, 3);
+            int startCharsCount = (int)Math.Ceiling((maxChars - omitCharCount) / 2.0f);
+            int endCharsCount = (int)Math.Floor((maxChars - omitCharCount) / 2.0f);
+            string separator = new string(omitChar, omitCharCount);
+            string startChars = s.Substring(0, startCharsCount);
+            string endChars = s.Substring(s.Length - endCharsCount);
+            return startChars + separator + endChars;
+        }
+    }
+}
diff --git a/GearRacingCloud/Startup.cs b/GearRacingCloud/Startup.cs
index 23db974..3b1b2b3 100644
--- a/GearRacingCloud/Startup.cs
+++ b/GearRacingCloud/Startup.cs
@@ -57,7 +57,7 @@ namespace GearRacingCloud
             {
                 routes.MapRoute(
                     name: "default",
-                    template: "{controller=Home}/{action=Index}/{id?}");
+                    template: "{controller=Home}/{action=Index}");
             });
         }
     }
diff --git a/GearRacingCloud/Views/Home/Index.cshtml b/GearRacingCloud/Views/Home/Index.cshtml
index 2429daa..18362ba 100644
--- a/GearRacingCloud/Views/Home/Index.cshtml
+++ b/GearRacingCloud/Views/Home/Index.cshtml
@@ -1,43 +1,56 @@
-@model IEnumerable<Lap>
+@model (IEnumerable<Lap> Laps, int Id, int PerSize)
 
 @{
-    ViewData["Title"] = "Home Page";
+    Layout = "~/Views/Shared/_LayoutRefreshing.cshtml";
+    ViewData["Title"] = "Racing Results";
 }
 
 <div style="width: 80%" class="center-block">
     <h1 class="main-header">Lap Counter</h1>
     <table class="racing-table" style="table-layout: fixed; width: 100%">
         <colgroup>
+            <col style="width: 10%" />
             <col style="width: 30%" />
             <col style="width: 20%" />
-            <col style="width: 50%" />
+            <col style="width: 40%" />
         </colgroup>
         <thead>
             <tr>
+                <th>Pos.<div class="racing-line" /></th>
                 <th>Driver<div class="racing-line" /></th>
                 <th>Laptime<div class="racing-line" /></th>
                 <th>Car Id<div class="racing-line" /></th>
             </tr>
         </thead>
         <tbody>
-            @if (Model.Count() == 0)
+            @if (Model.Laps.Count() == 0)
             {
                 <tr>
-                    <th colspan="3"><p>No registered lap!</p></th>
+                    <td colspan="4"><p>No registered lap!</p></td>
                 </tr>
             }
 
-            @foreach (Lap lap in Model.OrderBy(l => l.laptime))
+            @foreach (var lapTuple in Model.Laps.Select((lap, i) => (lap, i)))
             {
                 <tr>
-                    <td><p>@lap.driver</p></td>
-                    <td><p>@TimeSpan.FromMilliseconds(lap.laptime).ToString(@"hh\:mm\:ss\:fff")</p></td>
-                    <td><p>@lap.carId</p></td>
+                    <td><p>@(lapTuple.Item2+Model.Id*Model.PerSize + 1).</p></td>
+                    <td><p>@lapTuple.Item1.driver</p></td>
+                    <td><p>@TimeSpan.FromMilliseconds(lapTuple.Item1.laptime).ToString(@"hh\:mm\:ss\:fff")</p></td>
+                    <td><p>@lapTuple.Item1.carId</p></td>
                 </tr>
             }
         </tbody>
     </table>
-
+    <p class="center-block">
+    @if (Model.Id > 0)
+    {
+        @Html.ActionLink("<<", "Index", "Home", new { id = Model.Id - 1 });
+    }
+    @if (Model.Laps.Count() == Model.PerSize)
+    {
+        @Html.ActionLink(">>", "Index", "Home", new { id = Model.Id + 1 });
+    }
+    </p>
     <div style="float: left">
         <p style="text-align: left; color: #616060" class="top">Gear Racing Cloud - 2018  &copy;</p>
         <img class="bottom" style="float: left; " src="~/images/table/line.png" />
diff --git a/GearRacingCloud/Views/Shared/_LayoutRefreshing.cshtml b/GearRacingCloud/Views/Shared/_LayoutRefreshing.cshtml
new file mode 100644
index 0000000..795a266
--- /dev/null
+++ b/GearRacingCloud/Views/Shared/_LayoutRefreshing.cshtml
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="refresh" content="15" />
+    <title>@ViewData["Title"] - Gear Racing Cloud</title>
+
+    <environment include="Development">
+        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="~/css/site.css" />
+    </environment>
+    <environment exclude="Development">
+        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
+              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
+              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
+        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
+    </environment>
+</head>
+<body>
+
+    <div class="container body-content">
+        @RenderBody();
+    </div>
+
+    <environment include="Development">
+        <script src="~/lib/jquery/dist/jquery.js"></script>
+        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
+        <script src="~/js/site.js" asp-append-version="true"></script>
+    </environment>
+    <environment exclude="Development">
+        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
+                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
+                asp-fallback-test="window.jQuery"
+                crossorigin="anonymous"
+                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
+        </script>
+        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
+                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
+                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
+                crossorigin="anonymous"
+                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
+        </script>
+        <script src="~/js/site.min.js" asp-append-version="true"></script>
+    </environment>
+
+    @RenderSection("Scripts", required: false)
+</body>
+</html>
diff --git a/GearRacingCloud/Views/Test/FullCar.cshtml b/GearRacingCloud/Views/Test/FullCar.cshtml
index 12264bb..97b967d 100644
--- a/GearRacingCloud/Views/Test/FullCar.cshtml
+++ b/GearRacingCloud/Views/Test/FullCar.cshtml
@@ -1,4 +1,5 @@
-@model IEnumerable<Car>
+@using GearRacingCloud.HelperMethods
+@model (IEnumerable<Car> Cars, int Id, int PerSize)
 
 @{
     ViewData["Title"] = "FullCarView";
@@ -24,26 +25,35 @@
             </tr>
         </thead>
         <tbody>
-            @if (Model.Count() == 0)
+            @if (Model.Cars.Count() == 0)
             {
                 <tr>
                     <td colspan="5"><p>No registered car!</p></td>
                 </tr>
             }
 
-            @foreach (Car car in Model.OrderBy(c => c.carName))
+            @foreach (Car car in Model.Cars.OrderBy(c => c.carName))
             {
                 <tr>
-                    <td><p>@car.carId</p></td>
+                    <td><p>@car.carId.ShortenTo(20)</p></td>
                     <td><p>@car.carIp</p></td>
-                    <td><p>@car.carName</p></td>
+                    <td><p>@car.carName.ShortenTo(20)</p></td>
                     <td><p>@car.apMac</p></td>
-                    <td><p>@car.apSsid</p></td>
+                    <td><p>@car.apSsid.ShortenTo(20)</p></td>
                 </tr>
             }
         </tbody>
     </table>
-
+    <p class="center-block">
+    @if (Model.Id > 0)
+    {
+        @Html.ActionLink("<<", "FullCar", "Test", new { id = Model.Id - 1 });
+    }
+    @if (Model.Cars.Count() == Model.PerSize)
+    {
+        @Html.ActionLink(">>", "FullCar", "Test", new { id = Model.Id + 1 });
+    }
+    </p>
     <div style="float: left">
         <p style="text-align: left; color: #616060" class="top">Gear Racing Cloud - 2018  &copy;</p>
         <img class="bottom" style="float: left; " src="~/images/table/line.png" />
diff --git a/GearRacingCloud/Views/Test/FullLap.cshtml b/GearRacingCloud/Views/Test/FullLap.cshtml
index 75c91a3..88e0cbf 100644
--- a/GearRacingCloud/Views/Test/FullLap.cshtml
+++ b/GearRacingCloud/Views/Test/FullLap.cshtml
@@ -1,4 +1,5 @@
-@model IEnumerable<Lap>
+@using GearRacingCloud.HelperMethods
+@model (IEnumerable<Lap> Laps, int Id, int PerSize)
 
 @{
     ViewData["Title"] = "FullLapView";
@@ -8,10 +9,10 @@
     <h1 class="main-header">Full Lap View</h1>
     <table class="racing-table" style="table-layout: fixed; width: 100%">
         <colgroup>
-            <col style="width:40%" />
+            <col style="width:30%" />
+            <col style="width:15%" />
+            <col style="width:15%" />
             <col style="width:15%" />
-            <col style="width:10%" />
-            <col style="width:10%" />
             <col style="width:25%" />
         </colgroup>
         <thead>
@@ -24,26 +25,35 @@
             </tr>
         </thead>
         <tbody>
-            @if (Model.Count() == 0)
+            @if (Model.Laps.Count() == 0)
             {
                 <tr>
                     <td class="text-center" colspan="5"><p>No registered lap!</p></td>
                 </tr>
             }
 
-            @foreach (Lap lap in Model.OrderByDescending(l => l.timeStamp))
+            @foreach (Lap lap in Model.Laps.OrderByDescending(l => l.timeStamp))
             {
                 <tr>
-                    <td>@lap.id</td>
+                    <td>@lap.id.ShortenTo(30)</td>
                     <td>@DateTime.FromBinary(lap.timeStamp).ToString()</td>
                     <td>@TimeSpan.FromMilliseconds(lap.laptime).ToString(@"hh\:mm\:ss\:fff")</td>
-                    <td>@lap.driver</td>
-                    <td>@lap.carId</td>
+                    <td>@lap.driver.ShortenTo(15)</td>
+                    <td>@lap.carId.ShortenTo(20)</td>
                 </tr>
             }
         </tbody>
     </table>
-
+    <p class="center-block">
+    @if (Model.Id > 0)
+    {
+        @Html.ActionLink("<<", "FullLap", "Test", new { id = Model.Id - 1 });
+    }
+    @if (Model.Laps.Count() == Model.PerSize)
+    {
+        @Html.ActionLink(">>", "FullLap", "Test", new { id = Model.Id + 1 });
+    }
+    </p>
     <div style="float: left">
         <p style="text-align: left; color: #616060" class="top">Gear Racing Cloud - 2018  &copy;</p>
         <img class="bottom" style="float: left; " src="~/images/table/line.png" />
diff --git a/GearRacingCloud/wwwroot/css/site.css b/GearRacingCloud/wwwroot/css/site.css
index 769c7a4..180e776 100644
--- a/GearRacingCloud/wwwroot/css/site.css
+++ b/GearRacingCloud/wwwroot/css/site.css
@@ -9,10 +9,7 @@ for details on configuring this project to bundle and minify static web assets.
 }
 
 body {
-    padding-top: 5%;
-    padding-bottom: 20px;
-    padding-left: 5%;
-    padding-right: 5%;
+    padding: 5%;
     background-image: url("/images/table/BG.png");
     background-repeat: no-repeat, repeat, repeat;
     background-size: cover;
@@ -103,32 +100,36 @@ html {
 }
 
 .main-header {
-    height: 54px;
+    height: 10%;
     color: #FFFFFF;
     font-family: SamsungOne800;
-    font-size: 70px;
+    font-size: 440%;
     line-height: 50px;
     text-align: left;
 }
 
-table.racing-table {
-    border-collapse: separate;
-    border-spacing: 0px 19px;
+.racing-line {
+    height: 2px;
+    opacity: 0.28;
+    background-color: #8D8283;
+    margin-right: 50px;
 }
 
-table.racing-table tr {
+table.racing-table {
+    border-collapse: separate;
+    border-spacing: 0px 2vh;
 }
 
 table.racing-table th {
-    height: 24px;
+    height: 10vh;
     color: #B62626;
     font-family: SamsungOne800;
-    font-size: 32px;
+    font-size: 200%;
     line-height: 50px;
     text-align: left;
 }
 
-table.racing-table td:first-child, th:first-child {
+table.racing-table td:first-child {
     padding-left: 10px;
 }
 
@@ -145,17 +146,19 @@ table.racing-table > tbody > tr:nth-of-type(2n) {
 }
 
 table.racing-table td {
-    height: 73px;
+    height: 6vh;
     font-family: SamsungOne450;
     text-align: left;
     color: white;
-    font-size: 24px;
-    padding-top: 11px;
+    font-size: x-large;
+    align-self: center;
+    vertical-align: central;
 }
 
-.racing-line {
-    height: 2px;
-    opacity: 0.28;
-    background-color: #8D8283;
-    margin-right: 50px;
+table.racing-table > thead > tr > th:last-child > .racing-line {
+    margin-right: 0px;
+}
+
+table.racing-table > tbody > tr > td:last-child > .racing-line {
+    margin-right: 0px;
 }
\ No newline at end of file
-- 
2.7.4