From 0bce1a25c7d02a54f318294f4ac28b2ee8312059 Mon Sep 17 00:00:00 2001
From: Thierry <thierry@noreply.git.aerobot.me>
Date: Wed, 1 Apr 2026 21:33:59 +0200
Subject: [PATCH] Upload files to "frontend/templates/partials"

---
 .../templates/partials/backend_config.html    |  71 +++++++++
 frontend/templates/partials/cloud_list.html   |  60 ++++++++
 frontend/templates/partials/crop.html         | 135 ++++++++++++++++++
 frontend/templates/partials/debug_panel.html  |  71 +++++++++
 .../templates/partials/health_status.html     |  14 ++
 5 files changed, 351 insertions(+)
 create mode 100644 frontend/templates/partials/backend_config.html
 create mode 100644 frontend/templates/partials/cloud_list.html
 create mode 100644 frontend/templates/partials/crop.html
 create mode 100644 frontend/templates/partials/debug_panel.html
 create mode 100644 frontend/templates/partials/health_status.html

diff --git a/frontend/templates/partials/backend_config.html b/frontend/templates/partials/backend_config.html
new file mode 100644
index 0000000..af3336f
--- /dev/null
+++ b/frontend/templates/partials/backend_config.html
@@ -0,0 +1,71 @@
+<div class="card bg-base-200 shadow">
+  <div class="card-body">
+    <h3 class="card-title">
+      <span class="badge badge-ghost">⚙️</span>
+      Configuration Backend
+    </h3>
+    
+    {% if success %}
+    <div class="alert alert-success mb-4">
+      <span>✓ Configuration sauvegardée !</span>
+    </div>
+    {% endif %}
+    
+    {% if error %}
+    <div class="alert alert-error mb-4">
+      <span>{{ error }}</span>
+    </div>
+    {% endif %}
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Configuration Backend URL -->
+      <div class="form-control w-full">
+        <label class="label">
+          <span class="label-text">URL du Backend</span>
+          <span class="label-text-alt text-xs">
+            Pour les appels API
+          </span>
+        </label>
+        <input
+          type="text"
+          name="backend_url"
+          value="{{ current_backend_url or 'http://localhost:8091' }}"
+          class="input input-bordered"
+          placeholder="http://localhost:8091"
+        >
+        <span class="label-text-alt text-xs">
+          Ex: http://localhost:8091 ou http://backend_entwine:8000
+        </span>
+      </div>
+      
+      <!-- Configuration Potree URL -->
+      <div class="form-control w-full">
+        <label class="label">
+          <span class="label-text">URL Potree</span>
+          <span class="label-text-alt text-xs">
+            Pour charger le viewer 3D
+          </span>
+        </label>
+        <input
+          type="text"
+          name="potree_url"
+          value="{{ current_potree_url or 'http://localhost:8090' }}"
+          class="input input-bordered"
+          placeholder="http://localhost:8090"
+        >
+        <span class="label-text-alt text-xs">
+          Ex: http://localhost:8090 ou http://potree_server:8090
+        </span>
+      </div>
+    </div>
+    
+    <div class="card-actions justify-end mt-4">
+      <button
+        type="submit"
+        class="btn btn-primary btn-sm"
+      >
+        💾 Enregistrer
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/frontend/templates/partials/cloud_list.html b/frontend/templates/partials/cloud_list.html
new file mode 100644
index 0000000..facbc7c
--- /dev/null
+++ b/frontend/templates/partials/cloud_list.html
@@ -0,0 +1,60 @@
+<div class="card bg-base-100 shadow">
+  <div class="card-body">
+    <h2 class="card-title text-base mb-2">🗂️ Nuages de points</h2>
+    <div class="flex justify-between items-center mb-4">
+      <button
+        type="button"
+        class="btn btn-ghost"
+        hx-get="/viewer/list"
+        hx-target="#viewer-panel"
+        hx-trigger="click"
+      >
+        🔄 Actualiser
+      </button>
+    </div>
+
+    {% if error %}
+      <div class="alert alert-error">
+        <span>{{ error }}</span>
+      </div>
+    {% elif not pointclouds %}
+      <p class="text-base-content/40 text-sm text-center py-8">
+        Aucun nuage disponible sur le serveur.
+      </p>
+    {% else %}
+      <p class="text-xs text-base-content/40 mb-3">{{ pointclouds|length }} nuage(s)</p>
+      <div class="overflow-x-auto">
+        <table class="table table-sm">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Taille</th>
+              <th>Fichiers</th>
+              <th>Créé le</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody id="cloud-table-body">
+            {% for pc in pointclouds %}
+              <tr>
+                <td>{{ pc.id }}</td>
+                <td>{{ pc.size_mb }} MB</td>
+                <td>{{ pc.file_count }}</td>
+                <td>{{ pc.created|datetimeformat }}</td>
+                <td>
+                  <a href="/admin/debug/{{ pc.id }}" class="btn btn-sm btn-ghost">🔍</a>
+                  <a href="/viewer/{{ pc.id }}" class="btn btn-sm" target="_blank">👁️</a>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-error"
+                    onclick="if(confirm('Supprimer ce nuage ?')) window.location.href='/admin/delete/{{ pc.id }}'"
+                  >🗑️</button>
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    {% endif %}
+  </div>
+</div>
diff --git a/frontend/templates/partials/crop.html b/frontend/templates/partials/crop.html
new file mode 100644
index 0000000..2433660
--- /dev/null
+++ b/frontend/templates/partials/crop.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Crop — {{ pc_id }}</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+</head>
+<body class="bg-base-200 min-h-screen">
+  <!-- Navbar -->
+  <div class="navbar bg-base-100 shadow-md px-6 mb-2">
+    <div class="flex-1">
+      <span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
+    </div>
+    <div class="flex-none gap-4 items-center">
+      <div
+        id="health-indicator"
+        hx-get="/health-check"
+        hx-trigger="load"
+        hx-swap="innerHTML"
+        class="text-sm text-base-content/50"
+      >vérification…</div>
+    </div>
+  </div>
+
+  <div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'upload' %}tab-active{% endif %}"
+      hx-get="/"
+      hx-target="#main-content"
+      hx-push-url="/"
+    >📤 Upload</a>
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'admin' %}tab-active{% endif %}"
+      hx-get="/viewer/list"
+      hx-target="#main-content"
+      hx-push-url="/viewer"
+    >🗂️ Admin</a>
+  </div>
+
+  <div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
+    <div class="w-full max-w-4xl mx-auto space-y-4">
+      <div class="flex items-center justify-between">
+        <h2 class="text-2xl font-bold">📐 Crop du Nuage de Points</h2>
+        <a href="/viewer/list" class="btn btn-ghost btn-sm">← Retour</a>
+      </div>
+
+      <div class="card bg-base-100 shadow">
+        <div class="card-body">
+          <div class="space-y-4">
+            <div class="flex items-center gap-2">
+              <span class="badge badge-info">Nuage : {{ pc_id }}</span>
+              <span class="text-sm text-base-content/60">
+                Sélectionnez une zone dans le viewer pour cropper le nuage
+              </span>
+            </div>
+
+            <div class="flex gap-2">
+              <a href="/viewer/{{ pc_id }}" class="btn btn-primary" hx-get="/viewer/{{ pc_id }}" hx-target="#viewer-container">
+                👁️ Ouvrir Viewer
+              </a>
+              <a href="{{ embed_url }}" target="_blank" class="btn btn-ghost btn-sm">
+                ↗ Plein écran
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="viewer-container" class="w-full rounded-lg border border-base-300">
+        <iframe
+          src="{{ embed_url }}"
+          class="w-full"
+          style="height: 680px;"
+          allowfullscreen
+        ></iframe>
+      </div>
+
+      <div class="card bg-base-100 shadow">
+        <div class="card-body">
+          <h3 class="font-semibold">📦 Coordonnées de la Box 3D</h3>
+          <div class="grid grid-cols-3 gap-2 text-sm">
+            <div>
+              <label class="text-base-content/60">Min X</label>
+              <input type="number" step="0.001" id="minX" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="text-base-content/60">Min Y</label>
+              <input type="number" step="0.001" id="minY" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="text-base-content/60">Min Z</label>
+              <input type="number" step="0.001" id="minZ" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="text-base-content/60">Max X</label>
+              <input type="number" step="0.001" id="maxX" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="text-base-content/60">Max Y</label>
+              <input type="number" step="0.001" id="maxY" class="input input-bordered input-sm w-full" />
+            </div>
+            <div>
+              <label class="text-base-content/60">Max Z</label>
+              <input type="number" step="0.001" id="maxZ" class="input input-bordered input-sm w-full" />
+            </div>
+          </div>
+
+          <div class="flex gap-2 mt-4">
+            <button
+              type="button"
+              class="btn btn-primary"
+              hx-post="/crop/{{ pc_id }}"
+              hx-target="#crop-result"
+              hx-swap="innerHTML"
+            >
+              ✂️ Cropper
+            </button>
+            <span class="text-sm text-base-content/60">
+              Le traitement peut prendre plusieurs minutes selon la taille du nuage
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div id="crop-result" class="w-full"></div>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/frontend/templates/partials/debug_panel.html b/frontend/templates/partials/debug_panel.html
new file mode 100644
index 0000000..c55b929
--- /dev/null
+++ b/frontend/templates/partials/debug_panel.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Debug — {{ pc_id }}</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+</head>
+<body class="bg-base-200 min-h-screen">
+  <!-- Navbar -->
+  <div class="navbar bg-base-100 shadow-md px-6 mb-2">
+    <div class="flex-1">
+      <span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
+    </div>
+    <div class="flex-none gap-4 items-center">
+      <div
+        id="health-indicator"
+        hx-get="/health-check"
+        hx-trigger="load"
+        hx-swap="innerHTML"
+        class="text-sm text-base-content/50"
+      >vérification…</div>
+    </div>
+  </div>
+
+  <div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'upload' %}tab-active{% endif %}"
+      hx-get="/"
+      hx-target="#main-content"
+      hx-push-url="/"
+    >📤 Upload</a>
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'admin' %}tab-active{% endif %}"
+      hx-get="/viewer/list"
+      hx-target="#main-content"
+      hx-push-url="/viewer"
+    >🗂️ Admin</a>
+  </div>
+
+  <div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
+    <div class="card bg-base-100 shadow mt-4">
+      <div class="card-body">
+        <div class="flex items-center justify-between mb-3">
+          <h3 class="font-semibold text-sm">Debug : <code>{{ pc_id }}</code></h3>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm"
+            hx-get="/viewer/list"
+            hx-target="#main-content"
+          >
+            ✕ Fermer
+          </button>
+        </div>
+        {% if error %}
+          <div class="alert alert-error">
+            <span>{{ error }}</span>
+          </div>
+        {% else %}
+          <pre class="bg-base-200 rounded p-3 text-xs overflow-auto max-h-80">{{ data | tojson(indent=2) }}</pre>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/frontend/templates/partials/health_status.html b/frontend/templates/partials/health_status.html
new file mode 100644
index 0000000..8eda014
--- /dev/null
+++ b/frontend/templates/partials/health_status.html
@@ -0,0 +1,14 @@
+{% if ok %}
+  <div class="flex items-center gap-2">
+    {% if entwine_available %}
+      <span class="badge badge-success">backend ✓</span>
+      <span class="badge badge-success">entwine ✓</span>
+    {% else %}
+      <span class="badge badge-success">backend ✓</span>
+      <span class="badge badge-warning">entwine absent</span>
+    {% endif %}
+    <span class="text-xs text-base-content/40">{{ disk_free_gb }} GB libres</span>
+  </div>
+{% else %}
+  <span class="badge badge-error">backend inaccessible</span>
+{% endif %}