Upload files to "frontend/templates"
This commit is contained in:
parent
ff2413df86
commit
731b67e07a
1 changed files with 120 additions and 93 deletions
|
|
@ -10,110 +10,137 @@
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-base-200 min-h-screen">
|
<body class="bg-base-200 min-h-screen">
|
||||||
<!-- Navbar -->
|
|
||||||
<div class="navbar bg-base-100 shadow-md px-6 mb-2">
|
<!-- Navbar -->
|
||||||
<div class="flex-1">
|
<div class="navbar bg-base-100 shadow-md px-6 mb-2">
|
||||||
<span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
|
<div class="flex-1">
|
||||||
</div>
|
<span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
|
||||||
<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>
|
||||||
|
<div class="flex-none gap-4 items-center">
|
||||||
<div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
|
<div
|
||||||
<a
|
id="health-indicator"
|
||||||
role="tab"
|
hx-get="/health-check"
|
||||||
class="tab {% if active_tab == 'upload' %}tab-active{% endif %}"
|
hx-trigger="load"
|
||||||
hx-get="/upload"
|
hx-swap="innerHTML"
|
||||||
hx-target="#main-content"
|
class="text-sm text-base-content/50"
|
||||||
hx-push-url="/"
|
>vérification…</div>
|
||||||
>📤 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
|
<div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<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>
|
||||||
|
|
||||||
<!-- Colonne gauche : upload -->
|
<div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
|
||||||
<div class="lg:col-span-1 flex flex-col gap-4">
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<!-- 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">
|
<!-- Colonne gauche : upload -->
|
||||||
<div class="card-body">
|
<div class="lg:col-span-1 flex flex-col gap-4">
|
||||||
<h2 class="card-title text-base mb-2">📤 Upload</h2>
|
<!-- ✅ FIX 404 : la route est /backend-config (pas /admin/backend-config) -->
|
||||||
<p class="text-sm text-base-content/60 mb-3">
|
<div id="backend-config-panel"
|
||||||
Formats acceptés : LAS, LAZ, PLY, XYZ, PTS
|
hx-get="/backend-config"
|
||||||
</p>
|
hx-target="#backend-config-panel"
|
||||||
<form
|
hx-swap="innerHTML"
|
||||||
hx-post="/upload"
|
hx-trigger="load">
|
||||||
hx-target="#upload-result"
|
{% include "partials/backend_config.html" %}
|
||||||
hx-swap="innerHTML"
|
</div>
|
||||||
hx-encoding="multipart/form-data"
|
|
||||||
hx-indicator="#upload-spinner"
|
<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
|
||||||
>
|
>
|
||||||
<input
|
<div class="flex items-center gap-3">
|
||||||
type="file"
|
<button type="submit" class="btn">
|
||||||
name="file"
|
📤 Uploader & convertir
|
||||||
accept=".las,.laz,.ply,.xyz,.pts"
|
</button>
|
||||||
class="file-input file-input-bordered w-full mb-4"
|
<div id="upload-spinner" class="loading loading-spinner loading-sm htmx-indicator"></div>
|
||||||
required
|
</div>
|
||||||
>
|
</form>
|
||||||
<div class="flex items-center gap-3">
|
</div>
|
||||||
<button
|
</div>
|
||||||
type="submit"
|
|
||||||
class="btn"
|
<div id="upload-result"></div>
|
||||||
hx_indicator="#upload-spinner"
|
</div>
|
||||||
>
|
|
||||||
📤 Uploader & convertir
|
<!-- Colonne droite : viewer + liste + crop -->
|
||||||
</button>
|
<div class="lg:col-span-2 flex flex-col gap-4">
|
||||||
<div id="upload-spinner" class="loading loading-spinner loading-sm"></div>
|
|
||||||
</div>
|
<div
|
||||||
</form>
|
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>
|
||||||
|
|
||||||
|
<!-- ✅ FIX DUPLICATION : viewer-panel charge au démarrage dans #cloud-list-body,
|
||||||
|
pas dans #viewer-panel lui-même (évite de réécrire la card entière) -->
|
||||||
|
<div id="viewer-panel" 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 btn-sm"
|
||||||
|
hx-get="/viewer/list"
|
||||||
|
hx-target="#cloud-list-body"
|
||||||
|
hx-swap="innerHTML"
|
||||||
|
hx-indicator="#cloud-list-spinner"
|
||||||
|
>
|
||||||
|
🔄 Actualiser
|
||||||
|
</button>
|
||||||
|
<span id="cloud-list-spinner" class="loading loading-spinner loading-sm htmx-indicator"></span>
|
||||||
|
</div>
|
||||||
|
<!-- ✅ Seul ce div est rechargé par HTMX -->
|
||||||
|
<div
|
||||||
|
id="cloud-list-body"
|
||||||
|
hx-get="/viewer/list"
|
||||||
|
hx-target="#cloud-list-body"
|
||||||
|
hx-swap="innerHTML"
|
||||||
|
hx-trigger="load"
|
||||||
|
>
|
||||||
|
{% include "partials/cloud_list_body.html" %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="upload-result"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Colonne droite : viewer -->
|
<!-- ✅ CROP PANEL : en dehors de viewer-panel, jamais écrasé par l'actualisation -->
|
||||||
<div class="lg:col-span-2">
|
<div id="crop-panel"></div>
|
||||||
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue