diff --git a/server/index.gohtml b/server/index.gohtml index 9267cbf8..3c248729 100644 --- a/server/index.gohtml +++ b/server/index.gohtml @@ -381,7 +381,7 @@
ntfy is a simple HTTP-based pub-sub notification service. This is a ntfy topic. diff --git a/server/static/css/app.css b/server/static/css/app.css index 5a84c95c..4efcdb4d 100644 --- a/server/static/css/app.css +++ b/server/static/css/app.css @@ -377,18 +377,27 @@ li { display: none; } -#detail .detailDate { +#detail .detailEntry { + margin-bottom: 20px; +} + +#detail .detailDate, #detail .detailTags { color: #888; font-size: 0.9em; } +#detail .detailDate img { + width: 20px; + height: 20px; + vertical-align: bottom; +} + #detail .detailTitle { font-weight: bold; font-size: 1.1em; } #detail .detailMessage { - margin-bottom: 20px; font-size: 1.1em; } diff --git a/server/static/img/close_black_24dp.svg b/server/static/img/close.svg similarity index 100% rename from server/static/img/close_black_24dp.svg rename to server/static/img/close.svg diff --git a/server/static/img/priority-1.svg b/server/static/img/priority-1.svg new file mode 100644 index 00000000..df6a0a49 --- /dev/null +++ b/server/static/img/priority-1.svg @@ -0,0 +1,47 @@ + + diff --git a/server/static/img/priority-2.svg b/server/static/img/priority-2.svg new file mode 100644 index 00000000..10a89ad1 --- /dev/null +++ b/server/static/img/priority-2.svg @@ -0,0 +1,43 @@ + + diff --git a/server/static/img/priority-4.svg b/server/static/img/priority-4.svg new file mode 100644 index 00000000..a1723cf8 --- /dev/null +++ b/server/static/img/priority-4.svg @@ -0,0 +1,43 @@ + + diff --git a/server/static/img/priority-5.svg b/server/static/img/priority-5.svg new file mode 100644 index 00000000..2e2c4447 --- /dev/null +++ b/server/static/img/priority-5.svg @@ -0,0 +1,47 @@ + + diff --git a/server/static/img/send_black_24dp.svg b/server/static/img/send.svg similarity index 100% rename from server/static/img/send_black_24dp.svg rename to server/static/img/send.svg diff --git a/server/static/img/clear_black_24dp.svg b/server/static/img/unsubscribe.svg similarity index 100% rename from server/static/img/clear_black_24dp.svg rename to server/static/img/unsubscribe.svg diff --git a/server/static/js/app.js b/server/static/js/app.js index 270b6ca7..90901e88 100644 --- a/server/static/js/app.js +++ b/server/static/js/app.js @@ -60,7 +60,7 @@ const subscribeInternal = (topic, persist, delaySec) => { if (!topicEntry) { topicEntry = document.createElement('li'); topicEntry.id = `topic-${topic}`; - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; topicsList.appendChild(topicEntry); } topicsHeader.style.display = ''; @@ -68,7 +68,7 @@ const subscribeInternal = (topic, persist, delaySec) => { // Open event source let eventSource = new EventSource(`${topic}/sse`); eventSource.onopen = () => { - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; delaySec = 0; // Reset on successful connection }; eventSource.onerror = (e) => { @@ -152,22 +152,35 @@ const rerenderDetailView = () => { detailEventsList.removeChild(detailEventsList.firstChild); } topics[currentTopic]['messages'].forEach(m => { - let dateDiv = document.createElement('div'); - let titleDiv = document.createElement('div'); - let messageDiv = document.createElement('div'); - let eventDiv = document.createElement('div'); + const entryDiv = document.createElement('div'); + const dateDiv = document.createElement('div'); + const titleDiv = document.createElement('div'); + const messageDiv = document.createElement('div'); + const tagsDiv = document.createElement('div'); + + entryDiv.classList.add('detailEntry'); dateDiv.classList.add('detailDate'); - dateDiv.innerHTML = new Date(m.time * 1000).toLocaleString(); + const dateStr = new Date(m.time * 1000).toLocaleString(); + if (m.priority && [1,2,4,5].includes(m.priority)) { + dateDiv.innerHTML = `${dateStr} `; + } else { + dateDiv.innerHTML = `${dateStr}`; + } messageDiv.classList.add('detailMessage'); messageDiv.innerText = m.message; - eventDiv.appendChild(dateDiv); + entryDiv.appendChild(dateDiv); if (m.title) { titleDiv.classList.add('detailTitle'); titleDiv.innerText = m.title; - eventDiv.appendChild(titleDiv) + entryDiv.appendChild(titleDiv); } - eventDiv.appendChild(messageDiv); - detailEventsList.appendChild(eventDiv); + entryDiv.appendChild(messageDiv); + if (m.tags) { + tagsDiv.classList.add('detailTags'); + tagsDiv.innerText = "Tags: " + m.tags.join(", "); + entryDiv.appendChild(tagsDiv); + } + detailEventsList.appendChild(entryDiv); }) if (topics[currentTopic]['messages'].length === 0) { detailNoNotifications.style.display = '';