From 639665ff7e7c6e646b57f02761fa9b2b134ea308 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 3 Sep 2019 22:57:17 +0200
Subject: [PATCH] Added basic ui update via sse

---
 assets/js/load.js    | 62 +++++++++++++++++++++++++++++++++++++++++---
 pkg/router/router.go |  2 ++
 pkg/router/sse.go    |  6 +++--
 3 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/assets/js/load.js b/assets/js/load.js
index 30e76c4..abe3f43 100644
--- a/assets/js/load.js
+++ b/assets/js/load.js
@@ -1,7 +1,61 @@
-const source = new EventSource('/events');
-source.onmessage = function(e) {
-    console.log(e)
-};
+if(typeof(EventSource) !== "undefined") {
+    console.log('SSE supported');
+
+    const tableName = '#konfis'
+    const table = $( tableName )
+
+    let source = new EventSource('/events');
+    source.onmessage = e => {
+        console.debug('unsupported event!', e)
+    };
+    source.addEventListener('init', e => {
+        console.debug('init', e)
+        const data = JSON.parse(e.data)
+        table.html('');
+        $.each( data, (i, item) => {
+            if (item.gemeinde !== undefined) {
+                table.append('<tr data-id="' + item.id + '">  ' +
+                    '<td>' + item.name + '</td>  ' +
+                    '<td>' + item.gemeinde + '</td>  ' +
+                    '<td>' + item.kcoins + '</td>' +
+                    '</tr>');
+            } else {
+                table.append('<tr data-id="' + item.id + '">  ' +
+                    '<td>' + item.name + '</td> ' +
+                    '<td>' + item.kcoins + '</td>' +
+                    '<td>' + (item.coins_quota).toFixed(2) + '</td>  ' +
+                    '</tr>');
+            }
+        });
+    })
+    source.addEventListener('update', e => {
+        console.debug('update', e)
+        const data = JSON.parse(e.data)
+        $(tableName + ` tr`).each((i, tr) => {
+            if(tr.dataset.id == data.id) {
+                tr.innerHTML = '<td>' + data.name + '</td> ' +
+                    '<td>' + data.kcoins + '</td>' +
+                    '<td>' + (data.coins_quota).toFixed(2) + '</td>  '
+            }
+        })
+    })
+    source.addEventListener('create', e => {
+        console.debug('create', e)
+        const data = JSON.parse(e.data)
+    })
+    source.addEventListener('delete', e => {
+        console.debug('delete', e)
+        const data = JSON.parse(e.data)
+    })
+    source.onopen = evt => {
+        console.debug('SSE opened', evt)
+    }
+    source.onerror = evt => {
+        console.debug('SSE Error', evt)
+    }
+} else {
+    console.log('SSE not supported!');
+}
 
 /*
 setInterval(function() {
diff --git a/pkg/router/router.go b/pkg/router/router.go
index 67946bf..cc3c4b4 100644
--- a/pkg/router/router.go
+++ b/pkg/router/router.go
@@ -28,6 +28,8 @@ func NewEcho() *echo.Echo {
 		Format: "${time_rfc3339}: ${remote_ip} ${method} ${status} ${uri} - ${user_agent}\n",
 	}))
 
+	//log.SetLevel(log.DEBUG)
+
 	// Session middleware
 	e.Use(session.Middleware(sessions.NewCookieStore([]byte("secret"))))
 
diff --git a/pkg/router/sse.go b/pkg/router/sse.go
index 9fce163..29ef8e0 100644
--- a/pkg/router/sse.go
+++ b/pkg/router/sse.go
@@ -179,12 +179,14 @@ func (b *Broker) Serve(c echo.Context) error {
 }
 
 func sendJSONMessage(m *Message, f http.Flusher, rw http.ResponseWriter) {
-	jsonMessage, err := json.Marshal(m)
+	jsonMessage, err := json.Marshal(m.Data)
 	if err != nil {
 		log.Errorf("Error serializing json: %s", err)
 	}
 
-	_, err = fmt.Fprintf(rw, "%s\n\n", string(jsonMessage))
+	// The format is defined and has to be like this.
+	// This makes it however possible to register different event handlers for each event kind
+	_, err = fmt.Fprintf(rw, "event:%s\ndata: %s\n\n", m.Kind, string(jsonMessage))
 	if err != nil {
 		log.Errorf("Error sending message to client: %s", err)
 	}