webui, gitignore

.gitignore

@@ -0,0 +1,6 @@
+web/package-lock.json
+web/node_modules
+**/*.swp
+**/*.swo
+gen/
+go.sum

web/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

web/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "stylelint-config-standard"
+}

web/OliveTinLogo.svg

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="OliveTinLogo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="219.78495"
+     inkscape:cy="104.46496"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="1600"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect1402"
+       style="fill:#faffff;fill-opacity:1;stroke:#000000;stroke-width:5.79097;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 24.325719,13.460641 h 53.884802 v 74.866538 c 0,0 -0.333558,7.417739 -26.071829,7.668294 -25.738271,0.250554 -27.812973,-7.668294 -27.812973,-7.668294 z"
+       sodipodi:nodetypes="ccczcc" />
+    <path
+       id="rect1469-6"
+       style="fill:#72b7f4;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 27.040421,58.263084 50.9643,61.8872 75.494083,58.263084 v 29.12149 c 0,0 -0.404835,6.088102 -24.431009,6.343392 -24.026173,0.25529 -24.022653,-6.343392 -24.022653,-6.343392 z"
+       sodipodi:nodetypes="cccczcc" />
+    <path
+       id="rect1469-7"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 26.873646,41.794388 23.923879,2.635333 24.529783,-2.635333 v 21.176145 c 0,0 -0.404835,4.427058 -24.431009,4.612696 -24.026173,0.185639 -24.022653,-4.612696 -24.022653,-4.612696 z"
+       sodipodi:nodetypes="cccczcc" />
+    <path
+       id="rect1469"
+       style="fill:#72b7f4;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 26.873646,16.335179 23.923879,3.168352 24.529783,-3.168352 v 25.459209 c 0,0 -0.404835,5.32247 -24.431009,5.545655 -24.026173,0.223185 -24.022653,-5.545655 -24.022653,-5.545655 z"
+       sodipodi:nodetypes="cccczcc" />
+    <ellipse
+       style="fill:#588000;fill-opacity:1;stroke:#000000;stroke-width:4.00217;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1436"
+       ry="19.291208"
+       rx="13.695867"
+       cy="28.679092"
+       cx="71.078308"
+       transform="rotate(25.917116)" />
+    <ellipse
+       style="fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:1.84188;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1436-5"
+       ry="4.4607549"
+       rx="4.933064"
+       cy="35.115124"
+       cx="-50.609451"
+       transform="matrix(-0.49066507,-0.87134826,0.99928809,-0.03772683,0,0)" />
+    <ellipse
+       style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:5.79097;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1440"
+       cx="51.2528"
+       cy="10.636649"
+       rx="26.897503"
+       ry="6.525641" />
+    <path
+       id="path1436-3"
+       style="fill:#e6e6e6;fill-opacity:1;stroke:#000000;stroke-width:0.574412;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:transform-center-x="-1.1166908"
+       inkscape:transform-center-y="0.49206772"
+       d="m 36.494243,8.7784525 c 1.841786,-0.1158042 2.469235,0.5295096 2.656071,1.4191125 0.186835,0.889603 -0.0974,1.788639 -1.939188,1.904443 -0.848904,0.05338 -2.422996,-0.462298 -3.064668,-0.677573 -0.750505,-0.251787 -1.565122,-0.327933 -1.665841,-0.807506 -0.09913,-0.472029 0.614422,-0.7401021 1.22232,-1.0768269 0.537767,-0.2978804 1.926784,-0.7072919 2.791306,-0.7616496 z"
+       sodipodi:nodetypes="sssssss" />
+  </g>
+</svg>

web/index.htm

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<title>OliveTin</title>
+		<link rel = "stylesheet" type = "text/css" href = "style.css" />
+		<link rel = "shortcut icon" type = "image/png" href = "OliveTinLogo.png" />
+	</head>
+
+	<body>
+		<main>
+			<div class = "group" id = "rootGroup" />
+		</main>
+		<footer>
+			<p><img src = "OliveTinLogo.png" height = "1em" class = "logo" /> <a href = "http://github.com/jamesread/OliveTin" target = "_new">OliveTin</a></p>
+		</footer>
+
+		<template id = "tplActionButton">
+			<p class = "title">Untitled Button</p>
+			<p><span class = "icon">&#x1f4a9;</span></p>
+		</template>
+
+		<script type = "module" src = "main.js"></script>
+	</body>
+</html>

web/js/classes.js

@@ -0,0 +1,92 @@
+class ActionButton extends window.HTMLButtonElement {
+  constructFromJson (json) {
+    this.title = json.title
+    this.states = []
+    this.stateLabels = []
+    this.currentState = 0
+    this.isWaiting = false
+    this.actionCallUrl = 'http://mindstorm4:1339/StartAction?actionName=' + this.title
+
+    if (json.icon !== undefined) {
+      this.unicodeIcon = unescape(json.icon)
+    } else {
+      this.unicodeIcon = '&#x1f4a9'
+    }
+
+    this.onclick = () => { this.startAction() }
+
+    this.constructTemplate()
+    this.updateHtml()
+  }
+
+  startAction () {
+    this.disabled = true
+    this.isWaiting = true
+    this.updateHtml()
+    this.classList = [] // Removes old animation classes
+
+    window.fetch(this.actionCallUrl).then(res => {
+      if (!res.ok) {
+        return res.json()
+      }
+    }).then(json => {
+      this.onActionResult()
+    }).catch(err => {
+      this.onActionError(err)
+    })
+  }
+
+  onActionResult (json) {
+    this.disabled = false
+    this.isWaiting = false
+    this.updateHtml()
+    this.classList.add('actionSuccess')
+  }
+
+  onActionError (err) {
+    console.log('callback error', err)
+    this.disabled = false
+    this.isWaiting = false
+    this.updateHtml()
+    this.classList.add('actionFailed')
+  }
+
+  constructTemplate () {
+    const tpl = document.getElementById('tplActionButton')
+    const content = tpl.content.cloneNode(true)
+
+    /*
+     * FIXME: Should probably be using a shadowdom here, but seem to
+     * get an error when combined with custom elements.
+     */
+
+    this.appendChild(content)
+
+    this.domTitle = this.querySelector('.title')
+    this.domIcon = this.querySelector('.icon')
+  }
+
+  updateHtml () {
+    if (this.isWaiting) {
+      this.domTitle.innerText = 'Waiting...'
+    } else {
+      this.domTitle.innerText = this.title
+    }
+
+    this.domIcon.innerHTML = this.unicodeIcon
+  }
+
+  getCurrentStateLabel (useLabels = true) {
+    if (useLabels) {
+      return this.stateLabels[this.currentState]
+    } else {
+      return this.states[this.currentState]
+    }
+  }
+
+  getNextStateLabel () {
+    return this.stateLabels[this.currentState + 1]
+  }
+}
+
+window.customElements.define('action-button', ActionButton, { extends: 'button' })

web/js/loader.js

@@ -0,0 +1,10 @@
+import './classes.js' // To define action-button
+
+export function loadContents (json) {
+  for (const jsonButton of json.actions) {
+    const a = document.createElement('button', { is: 'action-button' })
+    a.constructFromJson(jsonButton)
+
+    document.getElementById('rootGroup').appendChild(a)
+  }
+}

web/main.js

@@ -0,0 +1,9 @@
+'use strict'
+
+import { loadContents } from './js/loader.js'
+
+window.fetch('http://mindstorm4:1339/GetButtons').then(res => {
+  return res.json()
+}).then(res => {
+  loadContents(res)
+})

web/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "olivetin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {
+    "stylelint": "^13.13.0",
+    "stylelint-config-standard": "^22.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^7.25.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

web/style.css

@@ -0,0 +1,91 @@
+body {
+	background-color: #333;
+	color: white;
+	text-align: center;
+	font-family: sans-serif;
+	padding: 0;
+	margin: 0;
+}
+
+.group {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	grid-template-rows: auto auto auto auto;
+	padding: 1em;
+	grid-gap: 1em;
+	text-align: center;
+}
+
+div.entity {
+	background-color: #222;
+	box-shadow: 0 0 10px 0 #444;
+	display: grid;
+	grid-column: auto / span 2;
+	grid-row: auto / span 2;
+	grid-template-rows: auto min-content;
+	grid-template-columns: minmax(min-content, auto);
+}
+
+div.entity h2 {
+	grid-column: 1 / span all;
+}
+
+button {
+	padding: 1em;
+	color: white;
+	display: table-cell;
+	text-align: center;
+	border: 1px solid #666;
+	background-color: #222;
+	box-shadow: 0 0 10px 0 #444;
+	user-select: none;
+}
+
+button.good {
+	background-color: limegreen;
+}
+
+button:hover {
+	box-shadow: 0 0 10px 0 #666;
+	cursor: pointer;
+}
+
+button:disabled {
+	color: gray;
+	background-color: black;
+	cursor: not-allowed;
+}
+
+span.icon {
+	font-size: 3em;
+}
+
+.actionFailed {
+	animation: kfActionFailed 1s;
+}
+
+@keyframes kfActionFailed {
+	0% { background-color: black; }
+	20% { background-color: red; }
+	0% { background-color: inherit; }
+}
+
+.actionSuccess {
+	animation: kfActionSuccess 1s;
+}
+
+@keyframes kfActionSuccess {
+	0% { background-color: black; }
+	20% { background-color: green; }
+	0% { background-color: inherit; }
+}
+
+footer, footer a {
+	color: gray;
+}
+
+img.logo {
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}