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 var vm = new DashboardViewModel
{ {
Topics = topics.ToArray(), 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); 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 class DashboardViewModel
{ {
public Topic[] Topics { get; set; } public Topic[] Topics { get; set; }

View File

@ -1,17 +1,19 @@
@model DashboardViewModel @model DashboardViewModel
@Html.ValidationSummary(false, "", new {}) @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="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>
<div class="topics-list"> <div class="topics-list">
@foreach (var topic in @Model.Topics) @foreach (var topic in @Model.Topics)
{ {
<div class="topic-info"> <div class="topic-info">
<h3>@topic.Name</h3> <h3>@topic.Name</h3>
<div><span class="token-descr"> Read: </span><span class="token-field">@topic.ReadToken</span></div> <div>
<div><span class="token-descr">Write: </span><span class="token-field">@topic.WriteToken</span></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)) @if (@Model.Hearts.Contains(topic.TopicId))
{ {
@ -27,8 +29,8 @@
<tr> <tr>
<td>@heart.Name</td> <td>@heart.Name</td>
<td>@heart.Status</td> <td>@heart.Status</td>
<td class="numeric">@heart.LastBeatTs.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">@heart.ExpiryTs.ToString("yyyy-dd-MM HH:mm:ss")</td> <td class="numeric">@DateTimeExt.GetReadableDate(heart.ExpiryTs.ToLocalTime(), DateTime.Now) @heart.ExpiryTs.ToLocalTime().ToString("HH:mm:ss")</td>
</tr> </tr>
} }
</table> </table>

View File

@ -276,6 +276,28 @@ label {
background-color: #80808080; 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 { .token-descr {
font-family: monospace; font-family: monospace;
font-size: small; font-size: small;
@ -293,6 +315,12 @@ label {
padding-inline: 4px; padding-inline: 4px;
} }
.token-field:not(:hover) {
background-color: lightgray;
color:lightgray;
}
table.hearts-table { table.hearts-table {
} }