Display relative timestamps in dashboard

This commit is contained in:
Jeffrey Paul 2025-05-22 09:15:31 -07:00
parent ae93557d15
commit 9c8cbfd8ff

View File

@ -85,9 +85,14 @@
.timestamp {
font-size: 0.9em;
color: #7f8c8d;
min-width: 180px;
min-width: 120px;
font-family: monospace;
}
.timestamp[title] {
cursor: help;
text-decoration: none;
border-bottom: 1px dotted #7f8c8d;
}
.source {
font-weight: bold;
color: #2980b9;
@ -213,7 +218,7 @@
<td class="source">{{.Source}}</td>
<td class="title">{{.Title}}</td>
<td><a href="{{.Link}}" class="article-link" target="_blank">{{.Summary}}</a></td>
<td class="timestamp">{{.FirstSeen.Format "2006-01-02 15:04:05 MST"}}</td>
<td class="timestamp" title="{{.FirstSeen.Format "2006-01-02 15:04:05 MST"}}" data-timestamp="{{.FirstSeen.Unix}}"></td>
</tr>
{{else}}
<tr>
@ -241,7 +246,7 @@
{{range .History}}
<tr>
<td class="id">{{.ID}}</td>
<td class="timestamp">{{.BroadcastTime.Format "2006-01-02 15:04:05 MST"}}</td>
<td class="timestamp" title="{{.BroadcastTime.Format "2006-01-02 15:04:05 MST"}}" data-timestamp="{{.BroadcastTime.Unix}}"></td>
<td class="importance {{if ge .Importance 70}}high{{else if ge .Importance 40}}medium{{else}}low{{end}}">{{.Importance}}</td>
<td class="source">{{.Source}}</td>
<td class="title">{{.Title}}</td>
@ -290,5 +295,58 @@
</table>
</div>
</div>
<script>
// Function to format relative time
function formatRelativeTime(timestamp) {
const now = Math.floor(Date.now() / 1000);
const diff = now - timestamp;
// Less than a minute
if (diff < 60) {
return 'just now';
}
// Less than an hour
if (diff < 3600) {
const minutes = Math.floor(diff / 60);
return `${minutes}m ago`;
}
// Less than a day
if (diff < 86400) {
const hours = Math.floor(diff / 3600);
return `${hours}h ago`;
}
// Less than a week
if (diff < 604800) {
const days = Math.floor(diff / 86400);
return `${days}d ago`;
}
// More than a week
const weeks = Math.floor(diff / 604800);
return `${weeks}w ago`;
}
// Update all timestamp elements
function updateRelativeTimes() {
const timestampElements = document.querySelectorAll('.timestamp[data-timestamp]');
timestampElements.forEach(el => {
const timestamp = parseInt(el.getAttribute('data-timestamp'), 10);
if (!isNaN(timestamp)) {
el.textContent = formatRelativeTime(timestamp);
}
});
}
// Update times on page load
document.addEventListener('DOMContentLoaded', updateRelativeTimes);
// Update times every minute
setInterval(updateRelativeTimes, 60000);
</script>
</body>
</html>