Display relative timestamps in dashboard
This commit is contained in:
parent
ae93557d15
commit
9c8cbfd8ff
@ -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>
|
Loading…
Reference in New Issue
Block a user