added camera preview

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

src/App.jsx

@@ -3,7 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import Diagramm from "./components/Diagramm.jsx";
 import HistoryTable from "./components/HistoryTable.jsx";
 import CurrentDataChart from "./components/CurrentDataChart.jsx";
-import RegressionShart from "./components/RegressionShart.jsx";
+import LivePreview from "./components/LivePreview.jsx";
 
 /**
  * @component App
@@ -70,6 +70,8 @@ export default function App() {
             <Diagramm data={allData}/>
 
             <HistoryTable allData={allData}/>
+
+            <LivePreview />
         </div>
     )
 

src/components/LivePreview.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+function LivePreview() {
+    const [showStream, setShowStream] = useState(true);
+
+    // Ersetze die IP mit der IP deines Raspberry Pi
+    const streamUrl = "http://172.20.10.2:8000/video_feed";
+
+    return (
+        <div style={{ textAlign: 'center', marginTop: '20px' }}>
+            <h2>Raspberry Pi Live Kamera</h2>
+
+            <div style={{ margin: '10px' }}>
+                <button onClick={() => setShowStream(!showStream)}>
+                    {showStream ? "Stream stoppen" : "Stream starten"}
+                </button>
+            </div>
+
+            {showStream ? (
+                <div style={{ border: '2px solid #333', display: 'inline-block', borderRadius: '8px', overflow: 'hidden' }}>
+                    <img
+                        src={streamUrl}
+                        alt="Kamera Live Stream"
+                        style={{ width: '100%', maxWidth: '640px', height: 'auto', display: 'block' }}
+                        onError={(e) => {
+                            e.target.src = "https://via.placeholder.com/640x480?text=Kamera+nicht+erreichbar";
+                        }}
+                    />
+                </div>
+            ) : (
+                <div style={{ width: '640px', height: '480px', backgroundColor: '#ddd', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
+                    Stream ist pausiert
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default LivePreview;