Zellgewinnung
/
cell_loader_ctrl


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loader Dashboard</title>

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- React + ReactDOM + Babel -->
    <script
      src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div class="container mt-4">
      <h1>Loader Dashboard</h1>
      <div id="loader-controls"></div>
      <!-- React component will render here -->
    </div>

    <script type="text/babel">
      const { useState, useEffect } = React;

      function LoaderControls() {
        const [status, setStatus] = useState("idle");

        useEffect(() => {
          const interval = setInterval(async () => {
            const res = await fetch("/api/status");
            const data = await res.json();
            setStatus(data.loader_status);
          }, 1000);
          return () => clearInterval(interval);
        }, []);

        const startHoming = async () => {
          await fetch("/api/home", { method: "POST" });
        };

        const startLoader = async () => {
          await fetch("/api/start", { method: "POST" });
        };

        return (
          <div>
            <p>Status: {status}</p>
            <button onClick={startHoming} disabled={status === "homed"}>
              Homing
            </button>
            <button onClick={startLoader} disabled={status !== "homed"}>
              Start Automated Sequence
            </button>
          </div>
        );
      }

      const root = ReactDOM.createRoot(
        document.getElementById("loader-controls")
      );
      root.render(<LoaderControls />);
    </script>
  </body>
</html>