Add version number to settings dialog.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

package.json

@@ -24,7 +24,7 @@ import { isIE, isRaspbian, padLeft } from 'ks-util';
 import { AppService } from './app.service';
 import * as $ from 'jquery';
 
-const SVC_NAMESPACE = 'http://www.w3.org/2000/svg';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
 const SECOND_HAND_ANIMATION_TIME = 200;
 
@@ -131,7 +131,7 @@ export class Clock {
     for (let i = 0; i < 360; i += 6) {
       const x1 = center + radius * Math.cos(Math.PI * i / 180);
       const y1 = center + radius * Math.sin(Math.PI * i / 180);
-      const tickMark = document.createElementNS(SVC_NAMESPACE, 'circle');
+      const tickMark = document.createElementNS(SVG_NAMESPACE, 'circle');
 
       tickMark.setAttributeNS(null, 'cx', x1.toString());
       tickMark.setAttributeNS(null, 'cy', y1.toString());
@@ -144,7 +144,7 @@ export class Clock {
         const h = (i === 270 ? 12 : ((i + 90) % 360) / 30);
         const x2 = center + textRadius * Math.cos(Math.PI * i / 180);
         const y2 = center + textRadius * Math.sin(Math.PI * i / 180);
-        const text2 = document.createElementNS(SVC_NAMESPACE, 'text');
+        const text2 = document.createElementNS(SVG_NAMESPACE, 'text');
 
         text2.setAttributeNS(null, 'x', x2.toString());
         text2.setAttributeNS(null, 'y', y2.toString());
@@ -155,7 +155,7 @@ export class Clock {
 
         const x3 = center + constellationRadius * Math.cos(Math.PI * (-i - 15) / 180);
         const y3 = center + constellationRadius * Math.sin(Math.PI * (-i - 15) / 180);
-        const text3 = document.createElementNS(SVC_NAMESPACE, 'text');
+        const text3 = document.createElementNS(SVG_NAMESPACE, 'text');
 
         text3.setAttributeNS(null, 'x', x3.toString());
         text3.setAttributeNS(null, 'y', y3.toString());
@@ -171,8 +171,8 @@ export class Clock {
     planetSymbols.forEach((planet, index) => {
       const x = center + 10 + index * 2;
       const dy = 0.75 + (index % 2) * 2;
-      const rect = document.createElementNS(SVC_NAMESPACE, 'rect');
-      const text = document.createElementNS(SVC_NAMESPACE, 'text');
+      const rect = document.createElementNS(SVG_NAMESPACE, 'rect');
+      const text = document.createElementNS(SVG_NAMESPACE, 'text');
 
       rect.setAttributeNS(null, 'x', (x - 0.9).toString());
       rect.setAttributeNS(null, 'y', (center + dy - 2).toString());

src/clock.ts

@@ -193,7 +193,9 @@
           </div>
         </div>
         <div class="dialog-buttons">
-          <button id="settings-reload">Reload</button> &bull;
+          <span class="version-number">1.0.5</span>
+          <button id="settings-reload">Reload</button>
+          <span>&bull;</span>
           <button id="settings-cancel">Cancel</button>
           <button id="settings-ok">OK</button>
         </div>

src/index.html

@@ -174,10 +174,23 @@ body {
   position: absolute;
   bottom: 1em;
   right: 1em;
+  left: 1em;
+  display: flex;
+  align-items: center;
 
   & button {
     min-width: 80px; // Ignored by macOS Chrome
   }
+
+  & button:not(:first-child), span:not(:first-child) {
+    margin-left: 0.5em;
+  }
+}
+
+.version-number {
+  flex-grow: 1;
+  color: #CCC;
+  font-size: smaller;
 }
 
 .alert-buttons {