Add status bar

2026-04-16 16:11:54 +02:00
parent 788cf08fef
commit b1f35b4c26
5 changed files with 134 additions and 12 deletions
@@ -349,9 +349,7 @@
 	    </tr>
          </table>
 	  <p>
-	    For further details see:
-	  </p>
-	  <p>
+	    For further details see:<br>
 	    W. Eckstein, <i>Computer Simulation of Ion-Solid Interactions</i>,<br>
 	    Springer Series in Materials Science, Vol. 10 (Springer-Verlag, Berlin, 1991).<br>
 	    <a href="https://doi.org/10.1007/978-3-642-73513-4">
@@ -361,14 +359,18 @@
 	</div>
      </div>
  </td></tr>
-  <tr style="width: 100%;//visibility: hidden;">
-    <td>
-      <div class="w3-light-grey">
-	<div id="pBar" class="w3-container w3-green w3-center" style="width:0%">0%</div>
-      </div> 
-    </td>
-  </tr>
 </table>
+<div id="statusBar" class="status-bar">
+  <span class="status-item"><strong>Folder:</strong> <span id="statusWorkPath">-</span></span>
+  <span class="status-item"><strong>Backend:</strong> <span id="statusBackend">-</span></span>
+  <span class="status-item"><strong>Last save:</strong> <span id="statusLastSave">Not saved yet</span></span>
+  <span class="status-item"><strong>Run:</strong> <span id="statusRun">Idle</span></span>
+  <div class="status-progress">
+    <div class="status-progress-track">
+      <div id="pBar" class="status-progress-fill">0%</div>
+    </div>
+  </div>
+</div>
 </body>
 <script>

@@ -382,6 +384,9 @@
          workPath.value = process.cwd();
      }
  }
+  if (typeof syncStatusBar === 'function') {
+      syncStatusBar();
+  }
  // Open the default Layers tab
  document.getElementById("btnLayers").click();
  
@@ -96,6 +96,9 @@ function setWorkFolder(foldername) {
    const folder = Array.isArray(foldername) ? foldername[0] : foldername;
    if (folder) {
 	document.getElementById("workPath").value = folder;
+	if (typeof updateStatusBar === 'function') {
+	    updateStatusBar({ workPath: folder });
+	}
 	try {
 	    // Change process directory
 	    process.chdir(folder);
@@ -118,6 +121,9 @@ function fallbackBrowseForFolder() {

 function firstLoad() {
    document.getElementById("trimPath").value = process.cwd();
+    if (typeof syncStatusBar === 'function') {
+	syncStatusBar();
+    }

    const folderPicker = document.getElementById("folderPicker");
    if (folderPicker) {
@@ -157,6 +163,9 @@ function firstLoad() {
 	console.log('Save file to '+filename);
 	try {
 	    fs.writeFileSync(filename, trimSPcfg, 'utf-8');
+	    if (typeof updateStatusBar === 'function') {
+		updateStatusBar({ lastSave: filename });
+	    }
 	    if (typeof showTransientWarning === 'function') {
 		showTransientWarning('Saved configuration to ' + filename, document.getElementById('workPath'), 4000);
 	    }
@@ -3138,6 +3138,54 @@ function showTransientWarning(message, targetElement, duration = 4000) {
    }, duration);
 }

+let statusBarState = {
+    workPath: '',
+    backend: '',
+    lastSave: 'Not saved yet',
+    run: 'Idle'
+};
+
+function shortenStatusValue(value, maxLength = 56) {
+    if (!value) { return '-'; }
+    if (value.length <= maxLength) { return value; }
+    return '...' + value.slice(-(maxLength - 3));
+}
+
+function renderStatusBar() {
+    const workPathNode = document.getElementById('statusWorkPath');
+    const backendNode = document.getElementById('statusBackend');
+    const lastSaveNode = document.getElementById('statusLastSave');
+    const runNode = document.getElementById('statusRun');
+    if (!workPathNode || !backendNode || !lastSaveNode || !runNode) { return; }
+
+    workPathNode.textContent = shortenStatusValue(statusBarState.workPath);
+    workPathNode.title = statusBarState.workPath || '';
+    backendNode.textContent = shortenStatusValue(statusBarState.backend);
+    backendNode.title = statusBarState.backend || '';
+    lastSaveNode.textContent = shortenStatusValue(statusBarState.lastSave);
+    lastSaveNode.title = statusBarState.lastSave || '';
+    runNode.textContent = shortenStatusValue(statusBarState.run);
+    runNode.title = statusBarState.run || '';
+}
+
+function updateStatusBar(updates = {}) {
+    statusBarState = { ...statusBarState, ...updates };
+    renderStatusBar();
+}
+
+function syncStatusBar() {
+    const workPathField = document.getElementById('workPath');
+    const trimPathField = document.getElementById('trimPath');
+    let backend = amIWeb() ? 'Web backend' : 'Standalone app';
+    if (!amIWeb() && trimPathField && trimPathField.value) {
+	backend = trimPathField.value;
+    }
+    updateStatusBar({
+	workPath: workPathField ? workPathField.value : statusBarState.workPath,
+	backend: backend
+    });
+}
+
 function markDensityEstimated(fieldId, isEstimated) {
    const field = document.getElementById(fieldId);
    if (!field) { return; }
@@ -3610,12 +3658,15 @@ async function startSequence() {
 	trimBin = getTrimBinaryPath(All["trimPath"]);
 	// Check if workPath exists otherwise create it
 	checkDir(All['workPath']); // from TrimSPelec.js, Electron/Node specific
+	updateStatusBar({ backend: trimBin });
    } else {
 	// Add random string (5 char) to file names
 	randStr = (Math.random() + 1).toString(36).substring(7);
 	All["fileNamePrefix"] = randStr;
 	All["workPath"] = "/tmp/" + randStr;
+	updateStatusBar({ backend: 'Web backend' });
    }
+    updateStatusBar({ workPath: All["workPath"], run: 'Starting run...' });
    
    let Progress =0;
    document.getElementById("pBar").style.width = Progress + "%";
@@ -3678,6 +3729,7 @@ async function startSequence() {
 	Progress=Math.round(Progress+90/SValues.length);
 	document.getElementById("pBar").style.width = Progress + "%";
 	document.getElementById("pBar").innerHTML = Progress + "%";
+	updateStatusBar({ run: `Running ${iScan + 1}/${SValues.length}: ${ScanName}=${SValue}` });
 	await yieldToRenderer();
 	
 	// Single run: Start 
@@ -3756,6 +3808,7 @@ async function startSequence() {
    Progress=100;
    document.getElementById("pBar").style.width = Progress + "%";
    document.getElementById("pBar").innerHTML = Progress + "%";
+    updateStatusBar({ run: `Completed ${SValues.length} run(s)` });
    await yieldToRenderer();
    return(0);
 }
@@ -97,6 +97,61 @@ td {
    border: 1px solid #c5a100;
 }

+.status-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    align-items: center;
+    padding: 8px 14px;
+    background-color: #eef2f5;
+    border-top: 1px solid #b8c3cc;
+    color: #23313d;
+    font-size: 0.88rem;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+    z-index: 900;
+}
+
+.status-item {
+    min-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.status-item strong {
+    color: #10202c;
+}
+
+.status-progress {
+    flex: 1 1 260px;
+    min-width: 220px;
+}
+
+.status-progress-track {
+    width: 100%;
+    height: 22px;
+    background-color: #d7dee5;
+    border-radius: 999px;
+    overflow: hidden;
+    border: 1px solid #b8c3cc;
+}
+
+.status-progress-fill {
+    width: 0%;
+    height: 100%;
+    background-color: #2e8b57;
+    color: white;
+    text-align: center;
+    line-height: 20px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    transition: width 0.2s ease;
+}
+
 .group_name {
    padding-left:1em;
    padding-right:1em;
@@ -16,8 +16,8 @@ function getDefaultDialogPath() {

 function createWindow () {
    const win = new BrowserWindow({
-	width: 950,
-	height: 580,
+	width: 1000,
+	height: 610,
 	icon: "/usr/lib/TrimSP/resources/app/icon.png",
 	webPreferences: {
 	    contextIsolation: false,