Added data and updated Logging

Xeue · Oct 9, 2024 · a32550c · a32550c
1 parent 1100ce6
commit a32550c
Show file tree

Hide file tree

Showing 14 changed files with 724 additions and 10,502 deletions.
diff --git a/main.js b/main.js
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "ping": "^0.4.4",
     "source-map-support": "^0.5.21",
     "ws": "^8.13.0",
-    "xeue-config": "^2.2.3",
+    "xeue-config": "^2.2.4",
     "xeue-logs": "^2.3.1",
     "xeue-sql": "^2.0.6",
     "xeue-webserver": "^2.0.2"

diff --git a/static/css/app.css b/static/css/app.css
@@ -4,24 +4,71 @@ body {
    inset: 0;
 }
 
-.logsView {
-   display: none;
-}
-
-body.showLogs .logsView {
-   display: inline;
+.navbar {
+   height: 50px;
+   flex-shrink: 0;
+ }
+
+#mainFrame,
+#dataFrame,
+#aboutFrame,
+#logsCont {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: none;
+}
+
+[data-page="main"] {
+   #mainFrame {
+      display: block;
+   }
+   [data-page="main"] {
+      display: none;
+   }
+}
+
+[data-page="about"] {
+   #aboutFrame {
+      display: block;
+   }
+   [data-page="about"] {
+      display: none;
+   }
+}
+
+[data-page="data"] {
+   #dataFrame {
+      display: block;
+   }
+   [data-page="data"] {
+      display: none;
+   }
+}
+
+[data-page="logs"] {
+   #logsCont {
+      display: flex;
+   }
+   .logsView {
+      display: inline;
+   }
+   [data-page="logs"] {
+      display: none;
+   }
 }
 
-body.showLogs #frame,
-body.loaded #cancel {
+.logsView {
    display: none;
 }
 
-body.showLogs #logsCont {
-   display: flex;
-}
-
-body #logsCont {
+body.loaded #cancel {
    display: none;
 }
 
@@ -112,46 +159,6 @@ label:has(:checked) {
    color: #009e9e
 }
 
-.green {
-   background-color: #417f3f;
-   border-top: 1px solid #459942 !important
-}
-
-.red {
-   background-color: #7f3f3f;
-   border-top: 1px solid #954f4f !important
-}
-
-.blue {
-   background-color: #3f6a7f;
-   border-top: 1px solid #4c8099 !important
-}
-
-.purple {
-   background-color: #7a3f7f;
-   border-top: 1px solid #99539f !important
-}
-
-.green:hover {
-   background-color: #28b538;
-   border-top: 1px solid #3ce34f !important
-}
-
-.red:hover {
-   background-color: #d50303;
-   border-top: 1px solid #ff5f5f !important
-}
-
-.blue:hover {
-   background-color: #00abff;
-   border-top: 1px solid #62cafd !important
-}
-
-.purple:hover {
-   background-color: #ce00df;
-   border-top: 1px solid #f253ff !important
-}
-
 .versionInfo {
    align-self: center;
    margin-right: auto;
@@ -160,25 +167,11 @@ label:has(:checked) {
    color: #fff
 }
 
-#frame {
-   position: fixed;
-   top: 0;
-   bottom: 0;
-   left: 0;
-   right: 0;
-   width: 100%;
-   height: 100%;
-   overflow: hidden;
-   border: none;
-}
-
-#frame.hidden,
 button.hidden {
    display: none;
 }
 
 #logsCont {
-   display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
@@ -195,6 +188,7 @@ button.hidden {
 
 body.micaActive {
    background: transparent !important;
+   color-scheme: auto;
 }
 
 .bg-title {

diff --git a/static/css/web.css b/static/css/web.css
@@ -22,6 +22,11 @@ html {
   height: 100%;
 }
 
+.navbar {
+  height: 50px;
+  flex-shrink: 0;
+}
+
 #toggleConfig:hover {
     opacity: 1;
 }
@@ -372,4 +377,8 @@ td[data-value=Password]:after {
 
 .portMonGroup tr td:nth-of-type(3) {
   min-width: 14rem;
+}
+
+div.jsoneditor-tree {
+  background-color: transparent !important;
 }
diff --git a/static/js/index.js b/static/js/index.js
@@ -45,10 +45,14 @@ document.addEventListener('DOMContentLoaded', () => {
 	});
 
 	window.electronAPI.loaded((event, url) => {
-		const frame = document.getElementById('frame');
-		frame.setAttribute('src', url);
-		const body = document.getElementById('body');
-		body.classList.add('loaded');
+		const _mainFrame = document.getElementById('mainFrame');
+		const _dataFrame = document.getElementById('dataFrame');
+		const _aboutFrame = document.getElementById('aboutFrame');
+		_mainFrame.setAttribute('src', url+'/app');
+		_dataFrame.setAttribute('src', url+'/appData');
+		_aboutFrame.setAttribute('src', url+'/appAbout');
+		const _body = document.getElementById('body');
+		_body.classList.add('loaded');
 	});
 
 	window.electronAPI.log((event, log) => {
@@ -64,63 +68,47 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	window.electronAPI.ready();
 
-	document.getElementById('exit').addEventListener('click', () => {
-		exitModal.show();
-	});
-	document.getElementById('cancel').addEventListener('click', () => {
-		const body = document.getElementById('body');
-		if (body.classList.contains('loaded')) {
+	on('click', '#exit', () => exitModal.show())
+	on('click', '#cancel', () => {
+		const _body = document.getElementById('body');
+		if (_body.classList.contains('loaded')) {
 			configModal.hide();
 			window.electronAPI.config('stop');
 		} else {
 			exitModal.show();
 		}
-	});
-	document.getElementById('exitYes').addEventListener('click', () => {
-		window.electronAPI.window('exit');
-	});
-	document.getElementById('exitMinimise').addEventListener('click', () => {
+	})
+
+	on('click', '#exitYes', () => window.electronAPI.window('exit'));
+	on('click', '#exitCancel', () => exitModal.hide());
+	on('click', '#exitMinimise', () => {
 		exitModal.hide();
 		window.electronAPI.window('minimise');
 	});
-	document.getElementById('exitCancel').addEventListener('click', () => {
-		exitModal.hide();
-	});
-
-	const toggleButton = document.getElementById('toggleView');
-	toggleButton.addEventListener('click', () => {
-		const body = document.getElementById('body');
-		if (body.classList.contains('showLogs')) {
-			toggleButton.innerText = 'Show Logs';
-		} else {
-			toggleButton.innerText = 'Show Monitoring';
-		}
-		body.classList.toggle('showLogs');
-	});
 
-	document.getElementById('startConfig').addEventListener('click', () => {
-		window.electronAPI.config('start');
-	});
-
-	document.getElementById('showConfig').addEventListener('click', () => {
-		window.electronAPI.config('show');
-	});
+	on('click', '.pageShow', _element => {
+		const _body = document.getElementById('body');
+		const page = _element.getAttribute('data-page');
+		_body.setAttribute('data-page', page);
+		if (page == 'data') document.getElementById('dataFrame').src += '';
+		if (page == 'about') document.getElementById('aboutFrame').src += '';
+	})
 
-	document.getElementById('clearLogs').addEventListener('click', () => {
-		document.getElementById('logs').innerHTML = '';
-	});
+	on('click', '#startConfig', () => window.electronAPI.config('start'));
+	on('click', '#showConfig', () => window.electronAPI.config('show'));
+	on('click', '#clearLogs', () => document.getElementById('logs').innerHTML = '');
 
-	document.getElementById('next').addEventListener('click', () => {
-		const answerCont = document.getElementById('answerCont');
+	on('click', '#next', () => {
+		const _answerCont = document.getElementById('answerCont');
 		let value;
-		if (answerCont.classList.contains('freeform')) {
+		if (_answerCont.classList.contains('freeform')) {
 			value = document.getElementById('answer').value;
 		} else {
 			value = document.querySelector('input[name="answer"]:checked').value;
 		}
 
-		if (value == '') value = answerCont.getAttribute('data-current');
-
+		if (value == '') value = _answerCont.getAttribute('data-current');
+		console.log(value);
 		window.electronAPI.configAnswer(value);
 	});
 });
@@ -133,7 +121,6 @@ function doLog(log) {
 	let currentCul = getClass(log.textColour);
 	let currnetSpec = 1;
 	let output = `<span class="logTimestamp">[${log.timeString}]</span><span class="logLevel ${getClass(log.levelColour)}">(${log.level})</span><span class="${getClass(log.colour)} logCatagory">${log.catagory}${log.seperator} </span>`;
-	let first = true;
 	const logArr = log.message.split('\x1b[');
 	logArr.forEach((element, index) => {
 		const num = parseInt(element.substr(0, element.indexOf('m')));
@@ -174,3 +161,22 @@ function getClass(num) {
 	if (num == 1) return 'brightLog';
 	return 'whiteLog';
 }
+
+
+/* Utility */
+
+function on(eventNames, selectors, callback) {
+	if (!Array.isArray(selectors)) selectors = [selectors];
+	if (!Array.isArray(eventNames)) eventNames = [eventNames];
+	selectors.forEach(selector => {
+		eventNames.forEach(eventName => {
+			if (selector.nodeType) {
+				selector.addEventListener(eventName, event => {callback(event.target)});
+			} else {
+				document.addEventListener(eventName, event => {
+					if (event.target.matches(selector)) callback(event.target);
+				});
+			};
+		});
+	});
+};