[client] Add version, build date, and changelog to UI

client_src/css/main.css

@@ -5,6 +5,7 @@
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
 
+@import "./nanomodal.css";
 @import "./popup.css";
 
 /** Ensure that some assets are copied that aren't by default **/

client_src/css/nanomodal.css

@@ -0,0 +1,5 @@
+.nanoModal {
+	max-width: 50vw;
+	max-height: 70vh;
+	overflow-y: scroll;
+}

client_src/js/Config.mjs

@@ -2,7 +2,7 @@
 
 export default {
 	version: "__VERSION__",
-	buid_date: new Date("__BUILD_DATE__"),
+	build_date: new Date("__BUILD_DATE__"),
 	// The url of api.php. Can be relative.
 	api_root: "../api.php",
 	// The default location to show on the map when loading the page.

client_src/js/UI.mjs

@@ -1,6 +1,7 @@
 "use strict";
 
 import SmartSettings from 'smartsettings';
+import NanoModal from 'nanomodal';
 
 import Config from './Config.mjs';
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
@@ -34,7 +35,6 @@ class UI {
 				}).bind(this)
 			},
 			{
-				// TODO: Add a setting for the different reading types here
 				type: "select",
 				name: "Reading Type",
 				items: this.reading_types.map((type) => type.friendly_text),
@@ -43,6 +43,15 @@ class UI {
 					
 					this.map_manager.heatmap.update_reading_type(new_type);
 				}).bind(this)
+			},
+			{
+				type: "button",
+				name: `${Config.version}, built ${Config.build_date.toDateString()}`,
+				callback: (async (_event) => {
+					NanoModal(
+						await GetFromUrl(`${Config.api_root}?action=changelog`)
+					).show();
+				})
 			}
 		]);
 		this.ui_panel.setIndex("Reading Type", this.reading_types.findIndex((type) => type.id == "PM25"));

package-lock.json

@@ -1820,6 +1820,11 @@
         }
       }
     },
+    "nanomodal": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/nanomodal/-/nanomodal-5.1.1.tgz",
+      "integrity": "sha1-qiEiUSr49vpr3G8y1nqm3whvfK0="
+    },
     "normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "leaflet-timedimension": "^1.1.0",
     "leaflet.markercluster": "^1.4.1",
     "moment": "^2.23.0",
+    "nanomodal": "^5.1.1",
     "smartsettings": "^1.2.3"
   },
   "devDependencies": {