1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < title > Postgres DB Notifications</ title >
5+ < script type ="text/javascript ">
6+ window . onload = function ( ) {
7+ var conn ;
8+ var msg = document . getElementById ( "msg" ) ;
9+ var log = document . getElementById ( "log" ) ;
10+
11+ function appendLog ( item ) {
12+ var doScroll = log . scrollTop > log . scrollHeight - log . clientHeight - 1 ;
13+ log . appendChild ( item ) ;
14+ if ( doScroll ) {
15+ log . scrollTop = log . scrollHeight - log . clientHeight ;
16+ }
17+ }
18+
19+ document . getElementById ( "form" ) . onsubmit = function ( ) {
20+ var payload = { } ;
21+ payload . notificationType = parseInt ( $ ( "#form select" ) . val ( ) ) ;
22+ payload . notificationText = $ ( "#form input[type=text]" ) . val ( ) ;
23+ $ . ajax ( {
24+ url : '/addNotification' ,
25+ dataType : 'json' ,
26+ contentType : "application/json" ,
27+ timeout : 2000 ,
28+ data : JSON . stringify ( payload ) ,
29+ method : 'PUT'
30+ } ) . fail ( function ( jqXHR , textStatus , errorThrown ) {
31+ console . log ( 'addNotification ajax call failure' , jqXHR , textStatus , errorThrown ) ;
32+ } ) ;
33+ return false ;
34+ } ;
35+
36+ if ( window [ "WebSocket" ] ) {
37+ conn = new WebSocket ( "ws://" + document . location . host + "/ws" ) ;
38+ conn . onclose = function ( evt ) {
39+ var item = document . createElement ( "div" ) ;
40+ item . innerHTML = "<b>socket closed</b>" ;
41+ appendLog ( item ) ;
42+ } ;
43+ 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 ) ;
49+ }
50+ } ;
51+ } else {
52+ var item = document . createElement ( "div" ) ;
53+ item . innerHTML = "<b>Your browser does not support WebSockets.</b>" ;
54+ appendLog ( item ) ;
55+ }
56+ } ;
57+ </ script >
58+ < style >
59+ html {
60+ overflow : hidden;
61+ }
62+
63+ body {
64+ overflow : hidden;
65+ padding : 0 ;
66+ margin : 0 ;
67+ width : 100% ;
68+ height : 100% ;
69+ background : gray;
70+ }
71+
72+ # log {
73+ background : white;
74+ margin : 0 ;
75+ padding : 0.5em 0.5em 0.5em 0.5em ;
76+ position : absolute;
77+ top : 0.5em ;
78+ left : 0.5em ;
79+ right : 0.5em ;
80+ bottom : 3em ;
81+ overflow : auto;
82+ }
83+
84+ # form {
85+ padding : 0 0.5em 0 0.5em ;
86+ margin : 0 ;
87+ position : absolute;
88+ bottom : 1em ;
89+ left : 0px ;
90+ width : 100% ;
91+ overflow : hidden;
92+ }
93+
94+ </ style >
95+ </ head >
96+ < body >
97+ < div id ="log "> </ div >
98+ < form id ="form ">
99+ < select >
100+ < option value ="0 "> None</ option >
101+ < option value ="1 " selected > Email</ option >
102+ < option value ="2 "> SMS</ option >
103+ < option value ="3 "> Slack</ option >
104+ </ select >
105+ < input type ="text " id ="msg " size ="64 " autofocus />
106+ < input type ="submit " value ="New DB Notification " />
107+ </ form >
108+ </ body >
109+ < script src ="https://code.jquery.com/jquery-3.6.0.min.js " integrity ="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4= " crossorigin ="anonymous "> </ script >
110+ </ html >
0 commit comments