Buttons are refreshed every 3s

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 {

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

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,6 +30,7 @@ func (api *oliveTinAPI) GetButtons(ctx ctx.Context, req *pb.GetButtonsRequest) (
 
 	for _, action := range cfg.ActionButtons {
 		btn := pb.ActionButton{
+			Id:		fmt.Sprintf("%x", md5.Sum([]byte(action.Title))),
 			Title:	action.Title,
 			Icon:	lookupHTMLIcon(action.Icon),
 		}

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 () {

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)
+}

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)
+    }
   }
 }

webui/main.js

@@ -3,18 +3,18 @@
 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
-
+function fetchGetButtons() {
  window.fetch(window.restBaseUrl + 'GetButtons', {
     cors: 'cors'
     // No fetch options
@@ -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 => {