more dashboard pretty

This commit is contained in:
Jetsparrow 2022-05-17 15:05:06 +03:00
parent 12ca7f08f7
commit eeca884982
3 changed files with 65 additions and 13 deletions

View File

@ -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; }

View File

@ -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>

View File

@ -67,11 +67,11 @@ div.page-main {
width: 100%;
}
.topics-list .topic-info {
.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 {
}