Issue #6 Add app version to UI

.github/workflows/deploy.yml

@@ -28,6 +28,7 @@ jobs:
       - name: Build project
         run: |
           bin/generate-appinfo.sh public/appinfo.json
+          cp public/appinfo.json src/appinfo.json
           npm run build
 
       - name: Upload production-ready build files

bin/generate-appinfo.sh

@@ -50,7 +50,7 @@ json=$(cat <<EOF
     "buildDate": "$build_date",
     "version": "$version",
     "gitHash": "$git_hash",
-    "gitBranch": "$git_branch"
+    "gitBranch": "$git_branch",
     "mode": "$mode"
 }
 EOF

index.html

@@ -169,6 +169,11 @@
     </div>
     <div class="window-content-holder">
     <div class="window-content">
+      <p class="app-info">
+        version: <span class="app-version">n/a</span><br/>
+        build date: <span class="build-date">n/a</span>
+      </p>
+
       <p>Stuff in Space is a realtime 3D map of objects in Earth orbit, visualized using WebGL.</p>
 
       <p>The website updates daily with orbit data from <a href="http://www.space-track.org">Space-Track.org</a>
@@ -188,6 +193,9 @@
     </div>
   </div>
 
+  <div class="release-date-holder">
+    Build date: <span class="release-date">&nbsp;</span>
+  </div>
   </body>
 </html>
 

public/styles/style.css

@@ -558,4 +558,15 @@ canvas {
     -webkit-filter: none;
     background: black;
 }
+}
+
+.app-info {
+  font-size: 12px;
+}
+
+.release-date-holder {
+  position: absolute;
+  bottom: 13px;
+  right: 13px;
+  font-size: 12px;
 }

src/appinfo.json

@@ -0,0 +1,7 @@
+{
+  "buildDate": "0000-00-00:00:00:00Z",
+  "version": "",
+  "gitHash": "unknown",
+  "gitBranch": "unknown",
+  "mode": "none"
+}

src/hud/index.ts

@@ -291,7 +291,7 @@ function getCurrentSearch () {
   return searchBox.getCurrentSearch();
 }
 
-function init (viewerInstance: Viewer) {
+function init (viewerInstance: Viewer, appConfig: Record<string, any> = {}) {
   viewer = viewerInstance;
 
   windowManager.registerWindow('sat-infobox');
@@ -310,6 +310,11 @@ function init (viewerInstance: Viewer) {
   } else {
     onSatDataLoaded();
   }
+
+  console.log('xoooo', appConfig);
+  setHtml('.app-version', appConfig.appInfo.version);
+  setHtml('.build-date', appConfig.appInfo.buildDate);
+  setHtml('.release-date', appConfig.appInfo.buildDate);
 }
 
 export default {

src/index.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { createViewer } from './viewer/index';
 import defaultConfig from './config';
 import logger, { setLogLevel } from './utils/logger';
+import appinfo from './appinfo.json';
 
 import hud from './hud';
 
@@ -10,7 +11,7 @@ async function loadConfig () {
   const response = await axios.get(`${baseUrl}config.json`);
   let config = defaultConfig;
   if (response.data) {
-    config = { ...defaultConfig, ...response.data };
+    config = { ...defaultConfig, ...response.data, appInfo: appinfo };
   }
   logger.info(`.... ${config.baseUrl}`);
   return config;
@@ -24,7 +25,7 @@ async function main () {
   await viewer.init();
   viewer.animate();
 
-  hud.init(viewer);
+  hud.init(viewer, config);
 }
 
 document.addEventListener('DOMContentLoaded', () => {