From 5d0118319891aa9d29bf24bbe112a6fcf906fbbb Mon Sep 17 00:00:00 2001
From: jamesread <contact@jwread.com>
Date: Sun, 20 Jun 2021 00:12:51 +0100
Subject: [PATCH] Buttons are refreshed every 3s

---
 OliveTin.proto              |  5 +++--
 internal/config/config.go   |  1 +
 internal/grpcapi/grpcApi.go |  7 +++++--
 webui/js/ActionButton.js    |  7 +++++++
 webui/js/logger.js          | 14 ++++++++++++++
 webui/js/marshaller.js      | 11 ++++++++---
 webui/main.js               | 19 +++++++++++++------
 7 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 webui/js/logger.js

diff --git a/OliveTin.proto b/OliveTin.proto
index 15cd1e6..2e46f06 100644
--- a/OliveTin.proto
+++ b/OliveTin.proto
@@ -5,8 +5,9 @@ option go_package = "gen/grpc";
 import "google/api/annotations.proto";
 
 message ActionButton {
-	string title = 1;
-	string icon = 2;
+	string id = 1;
+	string title = 2;
+	string icon = 3;
 }
 
 message GetButtonsResponse {
diff --git a/internal/config/config.go b/internal/config/config.go
index ab429f1..2d05929 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -4,6 +4,7 @@ import ()
 
 // ActionButton represents a button that is shown in the webui.
 type ActionButton struct {
+	Id		string
 	Title   string
 	Icon    string
 	Shell   string
diff --git a/internal/grpcapi/grpcApi.go b/internal/grpcapi/grpcApi.go
index dadeadd..54cf2b8 100644
--- a/internal/grpcapi/grpcApi.go
+++ b/internal/grpcapi/grpcApi.go
@@ -6,6 +6,8 @@ import (
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"net"
+	"crypto/md5"
+	"fmt"
 
 	config "github.com/jamesread/OliveTin/internal/config"
 	executor "github.com/jamesread/OliveTin/internal/executor"
@@ -28,8 +30,9 @@ func (api *oliveTinAPI) GetButtons(ctx ctx.Context, req *pb.GetButtonsRequest) (
 
 	for _, action := range cfg.ActionButtons {
 		btn := pb.ActionButton{
-			Title: action.Title,
-			Icon:  lookupHTMLIcon(action.Icon),
+			Id:		fmt.Sprintf("%x", md5.Sum([]byte(action.Title))),
+			Title:	action.Title,
+			Icon:	lookupHTMLIcon(action.Icon),
 		}
 
 		res.Actions = append(res.Actions, &btn)
diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js
index 28ae48c..98498e5 100644
--- a/webui/js/ActionButton.js
+++ b/webui/js/ActionButton.js
@@ -18,6 +18,12 @@ class ActionButton extends window.HTMLButtonElement {
 
     this.constructTemplate()
     this.updateHtml()
+
+    this.setAttribute("id", "actionButton_" + json.id)
+  }
+
+  updateFromJson (json) {
+    console.log("updating button")
   }
 
   startAction () {
@@ -67,6 +73,7 @@ class ActionButton extends window.HTMLButtonElement {
 
     this.domTitle = this.querySelector('.title')
     this.domIcon = this.querySelector('.icon')
+
   }
 
   updateHtml () {
diff --git a/webui/js/logger.js b/webui/js/logger.js
new file mode 100644
index 0000000..86ad0ea
--- /dev/null
+++ b/webui/js/logger.js
@@ -0,0 +1,14 @@
+window.logs = []
+
+export function addToLog (evt) {
+	window.logs.append(evt)
+
+	showLog(evt)
+}
+
+function showLog (evt) {
+	let msg = document.createElement('pre')
+	msg.innerText = evt;
+
+	document.body.appendChild(msg)
+}
diff --git a/webui/js/marshaller.js b/webui/js/marshaller.js
index 5afeb5a..c50293a 100644
--- a/webui/js/marshaller.js
+++ b/webui/js/marshaller.js
@@ -2,9 +2,14 @@ import './ActionButton.js' // To define action-button
 
 export function marshalActionButtonsJsonToHtml (json) {
   for (const jsonButton of json.actions) {
-    const a = document.createElement('button', { is: 'action-button' })
-    a.constructFromJson(jsonButton)
+    var htmlButton = document.querySelector('#actionButton_' + jsonButton.id)
 
-    document.getElementById('rootGroup').appendChild(a)
+    if (htmlButton == null) {
+      htmlButton = document.createElement('button', { is: 'action-button' })
+      htmlButton.constructFromJson(jsonButton)
+      document.getElementById('rootGroup').appendChild(htmlButton)
+    } else {
+      htmlButton.updateFromJson(jsonButton)
+    }
   }
 }
diff --git a/webui/main.js b/webui/main.js
index f5bb803..d2a095d 100644
--- a/webui/main.js
+++ b/webui/main.js
@@ -3,19 +3,19 @@
 import { marshalActionButtonsJsonToHtml } from './js/marshaller.js'
 
 function showBigError (type, friendlyType, message) {
+  clearInterval(window.buttonInterval)
+
   console.error('Error ' + type + ': ', message)
 
   const domErr = document.createElement('div')
   domErr.classList.add('error')
-  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://github.com/jamesread/OliveTin' target = 'blank'/>OliveTin Documentation</a></p>"
+  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://olivetin.app/_errors_troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>"
 
   document.getElementById('rootGroup').appendChild(domErr)
 }
 
-function onInitialLoad (res) {
-  window.restBaseUrl = res.Rest
-
-  window.fetch(window.restBaseUrl + 'GetButtons', {
+function fetchGetButtons() {
+ window.fetch(window.restBaseUrl + 'GetButtons', {
     cors: 'cors'
     // No fetch options
   }).then(res => {
@@ -23,10 +23,17 @@ function onInitialLoad (res) {
   }).then(res => {
     marshalActionButtonsJsonToHtml(res)
   }).catch(err => {
-    showBigError('fetch-initial-buttons', 'getting initial buttons', err, 'blat')
+    showBigError('fetch-buttons', 'getting buttons', err, 'blat')
   })
 }
 
+function onInitialLoad (res) {
+  window.restBaseUrl = res.Rest
+
+  window.buttonInterval = setInterval(fetchGetButtons, 3000);
+  fetchGetButtons()
+}
+
 window.fetch('webUiSettings.json').then(res => {
   return res.json()
 }).then(res => {