From edb7c825fc1b4a1230ca104fafa5286b2065f10c Mon Sep 17 00:00:00 2001
From: ChK <ckendel@gmail.com>
Date: Sun, 5 Apr 2026 08:08:13 +0200
Subject: [PATCH] Bilder

---
 public/client.js  | 17 +++++++++++++++++
 public/index.html |  5 ++---
 server/server.js  | 15 ++++++++++++++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/public/client.js b/public/client.js
index 1ddd5d5..b46d94c 100755
--- a/public/client.js
+++ b/public/client.js
@@ -123,6 +123,7 @@ async function fetchCSV() {
 
 async function renderSnapshot() {
   const table = document.getElementById("snapshot-table");
+  const pictureEl = document.getElementById("snapshot-info-picture");
   if (!table) return;
 
   try {
@@ -134,6 +135,22 @@ async function renderSnapshot() {
       infoEl.textContent = `Datei: ${data.filename}, Geändert: ${new Date(data.mtime).toLocaleString()}, Zeilen: ${rows.length}`;
     }
 
+    // Bild anzeigen, falls vorhanden
+    if (pictureEl) {
+      let imagesHtml = '';
+      if (data.imageFile) {
+        imagesHtml += `<img src="data:${data.imageFile.mimeType};base64,${data.imageFile.contentBase64}" alt="${data.imageFile.filename}" style="max-width: calc(50% - 2.5px); height: auto;">`;
+      }
+      if (data.image2) {
+        imagesHtml += `<img src="data:${data.image2.mimeType};base64,${data.image2.contentBase64}" alt="${data.image2.filename}" style="max-width: calc(50% - 2.5px); height: auto;">`;
+      }
+      if (imagesHtml) {
+        pictureEl.innerHTML = `<div style="display: flex; gap: 5px;">${imagesHtml}</div>`;
+      } else {
+        pictureEl.innerHTML = "";
+      }
+    }
+
     // Tabelle leeren
     table.innerHTML = "";
 
diff --git a/public/index.html b/public/index.html
index bfb004c..53a2fe1 100755
--- a/public/index.html
+++ b/public/index.html
@@ -80,9 +80,8 @@
     </div>
 
     <div class="section full">
-      <h2>Snapshot Image</h2>
-      <div id="snapshot-info"></div>
-      <table id="snapshot-table"></table>
+      <h2>Snapshot</h2>
+      <div id="snapshot-info-picture"></div>
     </div>
 
   </div>
diff --git a/server/server.js b/server/server.js
index 7f701e0..22d3644 100755
--- a/server/server.js
+++ b/server/server.js
@@ -209,6 +209,8 @@ app.get('/api/latest-snapshot', (req, res) => {
     const baseName = path.basename(latestFile.name, path.extname(latestFile.name));
     const imageFilename = `${baseName}_annotated.jpg`;
     const imagePath = path.join(snapshotsDir, imageFilename);
+    const imatePath2 = imagePath.includes('video0') ? imagePath.replace('video0', 'video1') : imagePath.replace('video1', 'video0');
+    
 
     fs.readFile(latestFile.path, 'utf8', (err, data) => {
       if (err) {
@@ -221,6 +223,7 @@ app.get('/api/latest-snapshot', (req, res) => {
         content: data
       };
 
+      // Lade beide Bilder
       fs.readFile(imagePath, { encoding: 'base64' }, (jpgErr, jpgBase64) => {
         if (!jpgErr && jpgBase64) {
           response.imageFile = {
@@ -229,7 +232,17 @@ app.get('/api/latest-snapshot', (req, res) => {
             contentBase64: jpgBase64
           };
         }
-        res.json(response);
+
+        fs.readFile(imatePath2, { encoding: 'base64' }, (jpgErr2, jpgBase642) => {
+          if (!jpgErr2 && jpgBase642) {
+            response.image2 = {
+              filename: path.basename(imatePath2),
+              mimeType: 'image/jpeg',
+              contentBase64: jpgBase642
+            };
+          }
+          res.json(response);
+        });
       });
     });
   });