show version number in footer

_tools/git-version-stamper.js

@@ -0,0 +1,8 @@
+const git = require('git-last-commit')
+const fs = require('fs')
+
+git.getLastCommit((err, commit) => {
+  if (err) throw err
+  const data = JSON.stringify(commit)
+  fs.writeFile('version.json', data, e => console.error(e))
+})

index.html

@@ -46,7 +46,7 @@ <h3>Connection Details</h3>
         </form>
 
         <div v-show="connectionInfo.connected">
-            device <strong>{{ connectionInfo.deviceId }}</strong> connected to hub <strong>{{ connectionInfo.hubName }}</strong>
+            device <strong>{{ connectionInfo.deviceId }}</strong> connected to hub <strong>{{ connectionInfo.hubName }}</strong> <pre>{{ versionInfo }}</pre>
         </div>
 
         <div v-show="connectionInfo.connected">
@@ -98,14 +98,15 @@ <h4>Commands</h4>
             </div>
 
         </div>
+        <div class="footer">
+            <i>
+                Using <a href="https://github.com/eclipse/paho.mqtt.javascript">paho.mqtt.javascript</a> to communicate with Azure IoT hub. 
+                by <a href="https://twitter.com/ridomin">ridomin</a> <a href="http://github.com/ridomin/iothub-webclient">source </a> <pre>{{ versionInfo }}</pre>
+            </i>
+        </div>
     </div>
     <script src="index.js" type="module"></script>
-    <div class="footer">
-        <i>
-            Using <a href="https://github.com/eclipse/paho.mqtt.javascript">paho.mqtt.javascript</a> to communicate with Azure IoT hub. 
-            <a href="http://github.com/ridomin/iothub-webclient">source 0.0.01</a> by <a href="https://twitter.com/ridomin">ridomin</a>
-        </i>
-    </div>
+
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-66818411-7"></script>
 <script>
@@ -115,5 +116,6 @@ <h4>Commands</h4>
 
   gtag('config', 'UA-66818411-7');
 </script>
+
 </body>
 </html>

index.js

@@ -1,4 +1,5 @@
 import { AzIoTHubClient } from './AzIoTHubClient.js'
+import * as vf from './versionFromFile.js'
 
 const createApp = () => {
   let telemetryInterval
@@ -26,7 +27,8 @@ const createApp = () => {
       reportedPropJson: '{ deviceStatus: "200 OK" }',
       telemetryJson: '{ temperature: %d }',
       sentMessages: 0,
-      isTelemetryRunning: false
+      isTelemetryRunning: false,
+      versionInfo: ''
     },
     created () {
       /** @type { ConnectionInfo } connInfo */
@@ -37,6 +39,9 @@ const createApp = () => {
         this.connectionInfo.deviceKey = connInfo.deviceKey
         this.connectionInfo.modelId = connInfo.modelId
       }
+      vf.versionFromFile(v => {
+        this.versionInfo = v
+      })
     },
     methods: {
       async connect () {

package.json

@@ -5,7 +5,8 @@
   "repository": "https://github.com/ridomin/iothub-webclient",
   "scripts": {
     "start": "node node_modules/serve/bin/serve.js .",
-    "build" : "echo build not needed :-)"
+    "stamp": "_tools/git-version-stamper.js",
+    "build" : "echo build not needed :)"
   },
   "keywords": [
     "iot",
@@ -15,6 +16,7 @@
   "license": "ISC",
   "devDependencies": {
     "@types/paho-mqtt": "^1.0.4",
+    "git-last-commit": "^1.0.0",
     "serve": "^11.3.2",
     "standard": "^14.3.4"
   },

version.json

@@ -0,0 +1,20 @@
+{
+    "shortHash": "c5fd5ea",
+    "hash": "c5fd5ea31bd203ef1ba419cb509110903a048f90",
+    "subject": "show commit version",
+    "sanitizedSubject": "show-commit-version",
+    "body": "",
+    "authoredOn": "1597224359",
+    "committedOn": "1597224359",
+    "author": {
+        "name": "ridomin",
+        "email": "[email protected]"
+    },
+    "committer": {
+        "name": "ridomin",
+        "email": "[email protected]"
+    },
+    "notes": "",
+    "branch": "cicd",
+    "tags": []
+}

versionFromFile.js

@@ -0,0 +1,12 @@
+async function versionFromFile (cb) {
+  window.fetch('./version.json')
+    .then(j => {
+      j.json()
+        .then(d => {
+          console.log(d)
+          cb(d.shortHash)
+        })
+    })
+}
+
+export { versionFromFile }