163 lines
6.3 KiB
HTML
163 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
<title>Copernicus Marine</title>
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
|
|
|
|
<link rel="stylesheet" href="../static/style.css">
|
|
<script src="../static/script.js"></script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="marine-body">
|
|
|
|
<div class="page-actions">
|
|
<a href="/datasets">Dataset salvati →</a>
|
|
</div>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="step" id="step-1">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h2 class="step-title">Cerca un dataset</h2>
|
|
<span class="step-done-badge">✓ Selezionato</span>
|
|
</div>
|
|
<div class="search-bar">
|
|
<input type="text" id="catalogSearch" placeholder="Es. Mediterranean Sea, Physical Oceanography ...">
|
|
<button class="btn secondary" id="searchBtn" onclick="searchCatalog()">Cerca</button>
|
|
</div>
|
|
<div id="catalogResults">
|
|
<div class="catalog-empty"></div>
|
|
</div>
|
|
<div class="selected-ds-badge" id="selectedDsBadge"></div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="step" id="step-2">
|
|
<div class="step-header">
|
|
<span class="step-num">2</span>
|
|
<h2 class="step-title">Variabili</h2>
|
|
<span class="step-done-badge">✓ Selezionate</span>
|
|
</div>
|
|
<div class="var-toolbar">
|
|
<span id="varCount">Nessuna selezionata</span>
|
|
<!-- <button onclick="selectAllVars()">Seleziona tutte</button>
|
|
<button onclick="deselectAllVars()">Deseleziona tutte</button> -->
|
|
</div>
|
|
<div id="variablesContainer">
|
|
<span style="color:var(--text-secondary);font-size:0.85rem;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="step" id="step-3">
|
|
<div class="step-header">
|
|
<span class="step-num">3</span>
|
|
<h2 class="step-title">Area</h2>
|
|
<span class="step-done-badge">✓ Impostata</span>
|
|
</div>
|
|
<div id="mapContainer"></div>
|
|
<div class="map-toolbar">
|
|
<button type="button" class="btn secondary small" id="drawBtn" onclick="startDraw()">Disegna
|
|
area</button>
|
|
<button type="button" class="btn secondary small" onclick="clearBbox()">Cancella</button>
|
|
<span id="bboxReadout" class="bbox-readout"></span>
|
|
</div>
|
|
<input type="hidden" id="minLon">
|
|
<input type="hidden" id="maxLon">
|
|
<input type="hidden" id="minLat">
|
|
<input type="hidden" id="maxLat">
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="step" id="step-4">
|
|
<div class="step-header">
|
|
<span class="step-num">4</span>
|
|
<h2 class="step-title">Finestra temporale</h2>
|
|
<span class="step-done-badge"></span>
|
|
</div>
|
|
<div class="form-row form-group">
|
|
<input type="date" id="startDate">
|
|
<input type="date" id="endDate">
|
|
</div>
|
|
<div class="field-hint" id="dateRangeHint"></div>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div class="step" id="step-5">
|
|
<div class="step-header">
|
|
<span class="step-num">5</span>
|
|
<h2 class="step-title">Dettagli</h2>
|
|
<span class="step-done-badge">Completo</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<select id="outputFormat">
|
|
<option value="json">JSON</option>
|
|
<option value="csv">CSV</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="datasetName" placeholder="Nome">
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="tags-input-wrap" id="tagsWrap" onclick="document.getElementById('tagInput').focus()">
|
|
<input type="text" id="tagInput" placeholder="Tag (Invio per aggiungere)">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea id="datasetNotes" rows="2" placeholder="Aggiungi ulteriori dettagli (opzionale)"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 6 -->
|
|
<div class="step" id="step-6">
|
|
<div class="step-header">
|
|
<span class="step-num">6</span>
|
|
<h2 class="step-title">Scarica</h2>
|
|
</div>
|
|
<div id="summaryContent"></div>
|
|
<div style="display:flex;gap:0.75rem;align-items:center;">
|
|
<button class="btn primary" id="downloadBtn" onclick="startDownload()">Avvia download</button>
|
|
<button class="btn secondary" onclick="resetAll()">Reset</button>
|
|
</div>
|
|
<div id="downloadProgress">
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill" id="progressFill"></div>
|
|
</div>
|
|
<div class="progress-msg" id="progressMsg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Toolbar fissa -->
|
|
<div class="step-toolbar">
|
|
<div class="progress-dots" id="progressDots"></div>
|
|
<div class="step-actions">
|
|
<button class="btn secondary" id="prevBtn" onclick="prevStep()">Indietro</button>
|
|
<button class="btn primary" id="nextBtn" onclick="nextStep()">Prossimo</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast"></div>
|
|
|
|
<!-- Rename variable modal -->
|
|
<div id="renameModal">
|
|
<div id="renameBackdrop" onclick="closeRenameModal()"></div>
|
|
<div id="renameDialog">
|
|
<h4>Rinomina variabile</h4>
|
|
<div id="renameVarLabel"></div>
|
|
<input type="text" id="renameInput" placeholder="Nome personalizzato">
|
|
<div class="rename-actions">
|
|
<button class="btn primary" style="flex:1;" onclick="saveRename()">Salva</button>
|
|
<button class="btn secondary" id="renameDeleteBtn" onclick="deleteRename()">Elimina</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |