|
4 | 4 | <title>Postgres DB Notifications</title> |
5 | 5 | <script type="text/javascript"> |
6 | 6 | window.onload = function () { |
7 | | - var conn; |
8 | | - var msg = document.getElementById("msg"); |
9 | | - var log = document.getElementById("log"); |
| 7 | + let conn; |
| 8 | + const log = document.getElementById("log"); |
10 | 9 |
|
11 | | - function appendLog(item) { |
12 | | - var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1; |
| 10 | + function newLogItem(html, selector) { |
| 11 | + const item = document.createElement("div"); |
| 12 | + if (selector) { |
| 13 | + item.className = selector; |
| 14 | + } |
| 15 | + if (html) { |
| 16 | + item.innerHTML = html; |
| 17 | + } |
| 18 | + appendLogItem(item); |
| 19 | + } |
| 20 | + |
| 21 | + function appendLogItem(item) { |
| 22 | + const doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1; |
13 | 23 | log.appendChild(item); |
14 | 24 | if (doScroll) { |
15 | 25 | log.scrollTop = log.scrollHeight - log.clientHeight; |
16 | 26 | } |
17 | 27 | } |
18 | 28 |
|
19 | 29 | document.getElementById("form").onsubmit = function () { |
20 | | - var payload = {}; |
| 30 | + const payload = {}; |
21 | 31 | payload.notificationType = parseInt($("#form select").val()); |
22 | 32 | payload.notificationText = $("#form input[type=text]").val(); |
23 | 33 | $.ajax({ |
|
35 | 45 |
|
36 | 46 | if (window["WebSocket"]) { |
37 | 47 | conn = new WebSocket("ws://" + document.location.host + "/ws"); |
| 48 | + conn.onopen = function (evt) { |
| 49 | + newLogItem("<b>socket opened</b>"); |
| 50 | + }; |
38 | 51 | conn.onclose = function (evt) { |
39 | | - var item = document.createElement("div"); |
40 | | - item.innerHTML = "<b>socket closed</b>"; |
41 | | - appendLog(item); |
| 52 | + newLogItem("<b>socket closed</b>"); |
42 | 53 | }; |
43 | 54 | conn.onmessage = function (evt) { |
44 | | - var messages = evt.data.split('\n'); |
45 | | - for (var i = 0; i < messages.length; i++) { |
46 | | - var item = document.createElement("div"); |
47 | | - item.innerText = messages[i]; |
48 | | - appendLog(item); |
| 55 | + newLogItem(null, 'mono'); |
| 56 | + const msgParts = evt.data.split('\n'); |
| 57 | + for (let i = 0; i < msgParts.length; i++) { |
| 58 | + const html = msgParts[i].replaceAll(" ", " ") |
| 59 | + newLogItem(html, 'mono'); |
49 | 60 | } |
50 | 61 | }; |
51 | 62 | } else { |
52 | | - var item = document.createElement("div"); |
53 | | - item.innerHTML = "<b>Your browser does not support WebSockets.</b>"; |
54 | | - appendLog(item); |
| 63 | + newLogItem(null, "<b>Your browser does not support WebSockets</b>"); |
55 | 64 | } |
56 | 65 | }; |
57 | 66 | </script> |
|
81 | 90 | overflow: auto; |
82 | 91 | } |
83 | 92 |
|
| 93 | +#log .mono { |
| 94 | + font-family: 'Courier New', monospace; |
| 95 | + min-height: 15px; |
| 96 | + |
| 97 | +} |
| 98 | + |
84 | 99 | #form { |
85 | 100 | padding: 0 0.5em 0 0.5em; |
86 | 101 | margin: 0; |
|
91 | 106 | overflow: hidden; |
92 | 107 | } |
93 | 108 |
|
| 109 | +#form input[type=text] { |
| 110 | + width: 300px; |
| 111 | +} |
94 | 112 | </style> |
95 | 113 | </head> |
96 | 114 | <body> |
|
0 commit comments