Files
PlanarianScanner/test_tube_scanner/planarian/templates/planarian/export_csv.html
T
2026-05-13 13:21:49 +02:00

178 lines
7.9 KiB
HTML

{% extends "planarian/base.html" %}
{% load i18n %}
{% block content %}
<div class="w3-container w3-padding" style="max-width:760px; margin:auto;">
{% if current_session and current_experiment %}
{% include "inc/alert.html" %}
<!-- Explication -->
<div class="w3-panel w3-pale-blue w3-round w3-margin-bottom">
<p>
{% trans "Sélectionnez l'expérience, le puits et le type d'enregistrement à exporter." %}
{% trans "Le fichier CSV sera généré depuis ReductStore et téléchargé directement." %}
</p>
<p class="w3-small w3-text-grey" style="margin:0;">
{% trans "Colonnes exportées compatibles EthoVision XT : distance, vitesse, états de mobilité, thigmotactisme." %}
</p>
</div>
<!-- Formulaire -->
<form method="post" novalidate>
{% csrf_token %}
<input type="hidden" id="_sid" name="_sid" value="{{ current_session.id }}">
<input type="hidden" id="_expid" name="_expid" value="{{ current_experiment.id }}">
<div class="w3-card-4 w3-border w3-round w3-round-large">
<header class="w3-container w3-blue w3-round w3-round-top-large">
<h3 class="w3-text-white">{% trans "Paramètres d'export" %}</h3>
</header>
<div class="w3-container w3-padding-24">
<!-- Ligne 1 : expérience + puits -->
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-col m7 s12 w3-margin-bottom">
<label class="w3-text-blue"><b>{% trans "Expérience" %}</b></label>
<input type="text" name="experiment" value="{{ current_experiment.identifier }}" readonly/>
</div>
<div class="w3-col m5 s12 w3-margin-bottom">
<label class="w3-text-blue"><b>{% trans "Puits" %}</b></label>
<select name="well">
{% for well in well_choices %}
<option value="{{ well.name }}">{{ well.name }}</option>
{% endfor %}
</select>
</div>
</div>
<!-- Ligne 2 : planaire + type d'enregistrement -->
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-col m4 s12 w3-margin-bottom">
<label class="w3-text-blue"><b>{% trans "Index planaire" %}</b></label>
<p class="w3-small w3-text-light-grey" style="margin:0 0 4px;">
{% trans "Index du planaire dans le puits (commence à 0)" %}
</p>
<input type="number" name="planarian" step="1" min="0" max="20" value="{{ planarian }}" />
</div>
<div class="w3-col m8 s12 w3-margin-bottom">
<label class="w3-text-blue"><b>{% trans "Type d'enregistrement" %}</b></label>
<p class="w3-small w3-text-light-grey" style="margin:0 0 4px;">
{% trans "Frame par frame : une ligne par image. Résumé : métriques agrégées de la session." %}
</p>
<select name="record_type">
<option value="frame">{% trans "Frame par frame" %}</option>
<option value="summary">{% trans "Résumé" %}</option>
</select>
</div>
</div>
<!-- Ligne 3 : plage temporelle (optionnel) -->
<div class="w3-border-top w3-padding-top w3-margin-top">
<p class="w3-text-blue-grey">
<b>{% trans "Plage temporelle" %}</b>
<span class="w3-small w3-text-grey w3-margin-left">
{% trans "(optionnel — laisser vide pour exporter toute la session)" %}
</span>
</p>
<div class="w3-row-padding">
<div class="w3-col m6 s12 w3-margin-bottom">
<label class="w3-text-blue-grey">{% trans "Début (UTC)" %}</label>
<input type="datetime-local" class="datetime" name="start_dt">
</div>
<div class="w3-col m6 s12 w3-margin-bottom">
<label class="w3-text-blue-grey">{% trans "Fin (UTC)" %}</label>
<input type="datetime-local" class="datetime" name="stop_dt">
</div>
</div>
</div>
</div><!-- fin padding -->
</div><!-- fin card -->
<!-- Boutons -->
<div class="w3-row-padding w3-margin-top">
<div class="w3-col s12">
<button type="submit" name="valid" class="w3-button w3-blue w3-large w3-padding-large" value="ok">
📥 {% trans "Générer et télécharger le CSV" %}
</button>
<a href="/"
class="w3-button w3-light-grey w3-round w3-large w3-padding-large w3-margin-left">
✖ {% trans "Annuler" %}
</a>
</div>
</div>
</form>
<!-- Rappel des colonnes exportées -->
<div class="w3-card w3-round-large w3-margin-top w3-border w3-round w3-round-large w3-margin-bottom">
<header class="w3-container w3-blue-grey w3-round w3-round-top-large">
<h4 class="w3-text-white" style="margin:8px 0;">
{% trans "Colonnes du fichier CSV exporté" %}
</h4>
</header>
<div class="w3-container w3-padding-16">
<div class="w3-row-padding">
<div class="w3-col m6 s12">
<p class="w3-text-blue-grey w3-small"><b>{% trans "Identification / position" %}</b></p>
<ul class="w3-ul w3-small w3-border w3-round">
<li><code>timestamp</code></li>
<li><code>x_mm</code> / <code>y_mm</code></li>
<li><code>cx_px</code> / <code>cy_px</code></li>
<li><code>area_px</code></li>
<li><code>axial_pos</code> / <code>axial_speed</code></li>
</ul>
</div>
<div class="w3-col m6 s12">
<p class="w3-text-blue-grey w3-small"><b>{% trans "Métriques EthoVision XT" %}</b></p>
<ul class="w3-ul w3-small w3-border w3-round">
<li><code>velocity_mm_s</code> — {% trans "vitesse instantanée" %}</li>
<li><code>total_distance_mm</code> — {% trans "distance cumulée" %}</li>
<li><code>moving</code> / <code>duration_moving_s</code></li>
<li><code>mobility_state</code> — {% trans "Immobile / Mobile / Highly mobile" %}</li>
<li><code>dist_to_wall_mm</code> / <code>near_wall</code></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- fin container -->
<style>
input[type="text"],
input[type="number"],
input[type="datetime-local"],
select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
box-sizing: border-box;
background-color: #fafafa;
transition: border-color 0.2s;
}
input:focus, select:focus {
border-color: #2196F3;
outline: none;
background-color: #fff;
}
</style>
{% else %}
<div class="w3-container w3-padding-64 w3-margin" style="max-width:760px; margin:auto;">
<h3 class="w3-panel w3-blue w3-round-xlarge w3-padding-64 w3-center"> {% trans "Choisir une session" %}</h3>
</div>
{% endif %}
{% endblock %}