From eeca88498295b713743801f7a963cc6ed7f16497 Mon Sep 17 00:00:00 2001
From: Jetsparrow <jet@jetsparrow.top>
Date: Tue, 17 May 2022 15:05:06 +0300
Subject: [PATCH] more dashboard pretty

---
 .../Controllers/Ui/DashboardController.cs     | 24 ++++++++++-
 JetHerald/Views/Dashboard/Index.cshtml        | 14 ++++---
 JetHerald/wwwroot/css/global.css              | 40 ++++++++++++++++---
 3 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/JetHerald/Controllers/Ui/DashboardController.cs b/JetHerald/Controllers/Ui/DashboardController.cs
index 51d7f5c..74fe93f 100644
--- a/JetHerald/Controllers/Ui/DashboardController.cs
+++ b/JetHerald/Controllers/Ui/DashboardController.cs
@@ -28,12 +28,34 @@ public class DashboardController : Controller
         var vm = new DashboardViewModel
         {
             Topics = topics.ToArray(),
-            Hearts = hearts.ToLookup(h => h.TopicId)
+            Hearts = hearts.Where(h => h.ExpiryTs + TimeSpan.FromDays(90) >= DateTime.UtcNow ).ToLookup(h => h.TopicId)
         };
         return View(vm);
     }
 }
 
+
+public static class DateTimeExt
+{
+    public static string GetReadableDate(DateTime dt, DateTime now)
+    {
+        dt = dt.Date;
+        now = now.Date;
+        var daysDiff = (int)Math.Round((dt - now).TotalDays);
+
+        if (daysDiff == 0)
+            return "today";
+        if (daysDiff == 1)
+            return "tomorrow";
+        if (daysDiff == -1)
+            return "yesterday";
+        
+        if (Math.Abs(daysDiff) < 62)
+            return dt.ToString("MMM dd");
+        return dt.ToString("yyyy MMMM dd");
+    }
+}
+
 public class DashboardViewModel
 { 
     public Topic[] Topics { get; set; }
diff --git a/JetHerald/Views/Dashboard/Index.cshtml b/JetHerald/Views/Dashboard/Index.cshtml
index 604336b..e99da28 100644
--- a/JetHerald/Views/Dashboard/Index.cshtml
+++ b/JetHerald/Views/Dashboard/Index.cshtml
@@ -1,17 +1,19 @@
 @model DashboardViewModel
 @Html.ValidationSummary(false, "", new {})
 
-<a asp-controller="Topic" asp-action="Create"> Create new topic</a>
+<a asp-controller="Topic" asp-action="Create" class="btn"> Create new topic</a>
 <div class="clocks">
-    <div class="clock">@DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss") UTC</div>
+    <div class="clock">@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") @TimeZoneInfo.Local.StandardName</div>
 </div>
 <div class="topics-list">
     @foreach (var topic in @Model.Topics)
     {
         <div class="topic-info">
             <h3>@topic.Name</h3>
-            <div><span class="token-descr"> Read: </span><span class="token-field">@topic.ReadToken</span></div>
-            <div><span class="token-descr">Write: </span><span class="token-field">@topic.WriteToken</span></div>
+            <div>
+                <span class="token-descr"> Read: </span><span class="token-field">@topic.ReadToken</span>
+                <span class="token-descr">Write: </span><span class="token-field">@topic.WriteToken</span>
+            </div>
 
             @if (@Model.Hearts.Contains(topic.TopicId))
             {
@@ -27,8 +29,8 @@
                         <tr> 
                             <td>@heart.Name</td>
                             <td>@heart.Status</td>
-                            <td class="numeric">@heart.LastBeatTs.ToString("yyyy-dd-MM HH:mm:ss")</td>
-                            <td class="numeric">@heart.ExpiryTs.ToString("yyyy-dd-MM HH:mm:ss")</td>
+                            <td class="numeric">@DateTimeExt.GetReadableDate(heart.LastBeatTs.ToLocalTime(), DateTime.Now) @heart.LastBeatTs.ToLocalTime().ToString("HH:mm:ss")</td>
+                            <td class="numeric">@DateTimeExt.GetReadableDate(heart.ExpiryTs.ToLocalTime(), DateTime.Now) @heart.ExpiryTs.ToLocalTime().ToString("HH:mm:ss")</td>
                         </tr>
                     }
                 </table>
diff --git a/JetHerald/wwwroot/css/global.css b/JetHerald/wwwroot/css/global.css
index 8291915..6540fd7 100644
--- a/JetHerald/wwwroot/css/global.css
+++ b/JetHerald/wwwroot/css/global.css
@@ -67,11 +67,11 @@ div.page-main {
 	width: 100%;
 }
 
-	.topics-list .topic-info {
-		padding: 10px;
-		margin: 5px;
-		border-bottom: 1px solid black;
-	}
+.topics-list .topic-info {
+	padding: 10px;
+	margin: 5px;
+	border-bottom: 1px solid black;
+}
 
 nav {
 	color: #eef;
@@ -276,6 +276,28 @@ label {
 	background-color: #80808080;
 }
 
+.btn {
+	background: #059;
+	padding: 0.5em;
+	padding-inline: 1em;
+	color: #eef;
+}
+
+.btn:hover {
+	background: #036;
+	color: #fff;
+}
+
+.clocks{
+	margin:1em;
+}
+
+.clock {
+	background: #ddddee;
+	text-align: center;
+	font-size: xx-large;
+}
+
 .token-descr {
 	font-family: monospace;
 	font-size: small;
@@ -287,12 +309,18 @@ label {
 
 .token-field {
 	font-family: monospace;
-	font-size:small;
+	font-size: small;
 	white-space: pre;
 	border: dashed 1px gray;
 	padding-inline: 4px;
 }
 
+.token-field:not(:hover) {
+	background-color: lightgray;
+	color:lightgray;
+}
+
+
 table.hearts-table {
 
 }