Initial commit
This commit is contained in:
commit
b22231c8b6
40 changed files with 2443 additions and 0 deletions
119
frontend/templates/index.html
Normal file
119
frontend/templates/index.html
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<!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>PointCloud Viewer</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>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></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="/upload"
|
||||
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="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Colonne gauche : upload -->
|
||||
<div class="lg:col-span-1 flex flex-col gap-4">
|
||||
<!-- Configuration Backend -->
|
||||
<div id="backend-config-panel" hx-get="/admin/backend-config" hx-target="#backend-config-panel" hx-swap="innerHTML">
|
||||
{% include "partials/backend_config.html" %}
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-base mb-2">📤 Upload</h2>
|
||||
<p class="text-sm text-base-content/60 mb-3">
|
||||
Formats acceptés : LAS, LAZ, PLY, XYZ, PTS
|
||||
</p>
|
||||
<form
|
||||
hx-post="/upload"
|
||||
hx-target="#upload-result"
|
||||
hx-swap="innerHTML"
|
||||
hx-encoding="multipart/form-data"
|
||||
hx-indicator="#upload-spinner"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".las,.laz,.ply,.xyz,.pts"
|
||||
class="file-input file-input-bordered w-full mb-4"
|
||||
required
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn"
|
||||
hx_indicator="#upload-spinner"
|
||||
>
|
||||
📤 Uploader & convertir
|
||||
</button>
|
||||
<div id="upload-spinner" class="loading loading-spinner loading-sm"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="upload-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Colonne droite : viewer -->
|
||||
<div class="lg:col-span-2">
|
||||
<div
|
||||
id="viewer-container"
|
||||
class="card bg-base-100 shadow min-h-[600px] flex items-center justify-center"
|
||||
>
|
||||
<p class="text-base-content/40 text-sm">
|
||||
Uploadez un fichier pour lancer la visualisation
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
id="viewer-panel"
|
||||
class="card bg-base-100 shadow mt-4"
|
||||
hx-get="/viewer/list"
|
||||
hx-target="#viewer-panel"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="load"
|
||||
>
|
||||
{% include "partials/cloud_list.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
71
frontend/templates/partials/backend_config.html
Normal file
71
frontend/templates/partials/backend_config.html
Normal file
|
|
@ -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>
|
||||
60
frontend/templates/partials/cloud_list.html
Normal file
60
frontend/templates/partials/cloud_list.html
Normal file
|
|
@ -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>
|
||||
135
frontend/templates/partials/crop.html
Normal file
135
frontend/templates/partials/crop.html
Normal file
|
|
@ -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>
|
||||
71
frontend/templates/partials/debug_panel.html
Normal file
71
frontend/templates/partials/debug_panel.html
Normal file
|
|
@ -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>
|
||||
14
frontend/templates/partials/health_status.html
Normal file
14
frontend/templates/partials/health_status.html
Normal file
|
|
@ -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 %}
|
||||
27
frontend/templates/partials/upload_result.html
Normal file
27
frontend/templates/partials/upload_result.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{% if error %}
|
||||
<div class="alert alert-error">
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card bg-base-100 shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="badge badge-success">✓ Conversion EPT terminée</span>
|
||||
</div>
|
||||
<div class="text-sm space-y-1 mb-4">
|
||||
<div><span class="text-base-content/50">ID</span><code class="ml-2">{{ result.id }}</code></div>
|
||||
<div><span class="text-base-content/50">Fichier</span><span class="ml-2">{{ result.filename }}</span></div>
|
||||
<div><span class="text-base-content/50">Taille</span><span class="ml-2">{{ result.size_mb }} MB</span></div>
|
||||
<div><span class="text-base-content/50">Conversion</span><span class="ml-2">{{ result.conversion_time_seconds }}s</span></div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/viewer/{{ result.id }}" class="btn btn-primary" hx-get="/viewer/{{ result.id }}" hx-target="#viewer-container">
|
||||
👁️ Visualiser
|
||||
</a>
|
||||
<a href="/viewer/{{ result.id }}" target="_blank" class="btn btn-ghost btn-sm">
|
||||
↗ Nouvel onglet
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
14
frontend/templates/partials/viewer.html
Normal file
14
frontend/templates/partials/viewer.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<div class="w-full flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="text-sm text-base-content/50">
|
||||
Nuage actif : <code>{{ pc_id }}</code>
|
||||
</span>
|
||||
<a href="{{ embed_url }}" target="_blank" class="btn btn-ghost btn-xs">↗ Plein écran</a>
|
||||
</div>
|
||||
<iframe
|
||||
src="{{ embed_url }}"
|
||||
class="w-full rounded-lg border border-base-300"
|
||||
style="height: 680px;"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue