193 lines
7.6 KiB
HTML
193 lines
7.6 KiB
HTML
|
{% extends "base.html" %} {% block title %}Import / Export Actions - Bolsa{%
|
||
|
|
endblock %} {% block header_title %}Gestion CSV{% endblock %} {% block content
|
||
|
|
%}
|
||
|
|
<div class="flex flex-col items-center justify-center py-6 relative">
|
||
|
|
<!-- Système de Toasts (pour les messages flash de succès/erreur) -->
|
||
|
|
<div
|
||
|
|
id="toast-container"
|
||
|
|
class="fixed top-6 left-1/2 transform -translate-x-1/2 z-50 space-y-3 w-full max-w-md px-4 pointer-events-none"
|
||
|
|
>
|
||
|
|
{% set messages = get_flashed_messages(with_categories=true) %} {% if
|
||
|
|
messages %} {% for category, message in messages %}
|
||
|
|
<div
|
||
|
|
class="toast-message flex items-center px-4 py-3 rounded-xl shadow-2xl text-white text-sm font-medium transition-all duration-300 transform translate-y-0 opacity-100 {% if category == 'success' %} bg-emerald-600 border border-emerald-500 {% elif category == 'warning' %} bg-amber-600 border border-amber-500 {% else %} bg-rose-600 border border-rose-500 {% endif %}"
|
||
|
|
>
|
||
|
|
<span>{{ message }}</span>
|
||
|
|
</div>
|
||
|
|
{% endfor %} {% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Box centrée principale -->
|
||
|
|
<div
|
||
|
|
class="bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl w-full max-w-3xl overflow-hidden"
|
||
|
|
>
|
||
|
|
<!-- 1. En-tête de la boîte (Titre) -->
|
||
|
|
<div
|
||
|
|
class="flex justify-between items-center px-8 py-6 border-b border-gray-800 bg-gray-950/50"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<h2 class="text-xl font-extrabold text-white">
|
||
|
|
Import & Export - Table Actions
|
||
|
|
</h2>
|
||
|
|
<p class="text-gray-400 text-sm mt-0.5">
|
||
|
|
Gestion des transferts de données au format CSV.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<a
|
||
|
|
href="{{ url_for('main.menu') }}"
|
||
|
|
class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-medium rounded-lg transition duration-200"
|
||
|
|
>
|
||
|
|
Retour au menu
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2. Corps de la boîte (Procédure et Boutons) -->
|
||
|
|
<div class="p-8 space-y-6">
|
||
|
|
<div class="bg-gray-950 border border-gray-800 rounded-xl p-6 space-y-4">
|
||
|
|
<h3
|
||
|
|
class="text-sm font-semibold text-gray-200 uppercase tracking-wider"
|
||
|
|
>
|
||
|
|
Procédure d'utilisation
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="text-sm text-gray-300 space-y-3 leading-relaxed">
|
||
|
|
<div>
|
||
|
|
<strong class="text-white">1. Exportation des données :</strong>
|
||
|
|
<p class="text-gray-400 mt-0.5">
|
||
|
|
Cliquez sur le bouton <strong>Exporter en CSV</strong> pour
|
||
|
|
télécharger une copie de sauvegarde de la table
|
||
|
|
<code
|
||
|
|
class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
|
||
|
|
>actions</code
|
||
|
|
>
|
||
|
|
sur votre poste. Le fichier contiendra l'ensemble des colonnes
|
||
|
|
actuelles (<code class="text-gray-300 font-mono"
|
||
|
|
>isin, ticker, company_name, exchange, pays, currency</code
|
||
|
|
>).
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<strong class="text-white">2. Importation des données :</strong>
|
||
|
|
<p class="text-gray-400 mt-0.5">
|
||
|
|
Préparez votre fichier au format CSV en respectant scrupuleusement
|
||
|
|
l'ordre et le nom des en-têtes de colonnes (les champs
|
||
|
|
<code
|
||
|
|
class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
|
||
|
|
>id</code
|
||
|
|
>
|
||
|
|
et
|
||
|
|
<code
|
||
|
|
class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
|
||
|
|
>updated_at</code
|
||
|
|
>
|
||
|
|
sont facultatifs et gérés automatiquement) :
|
||
|
|
<code
|
||
|
|
class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
|
||
|
|
>isin;ticker;company_name;exchange;pays;currency</code
|
||
|
|
>. Les données d'une même ligne doivent être séparées par un
|
||
|
|
point-virgule (<strong>;</strong>) et chaque enregistrement doit
|
||
|
|
simplement se trouver sur une nouvelle ligne. Cliquez sur
|
||
|
|
<strong>Importer un CSV</strong> pour sélectionner et téléverser
|
||
|
|
votre fichier vers la base de données.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 text-amber-300 text-xs flex items-start space-x-2"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="w-4 h-4 text-amber-400 shrink-0 mt-0.5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
<span
|
||
|
|
><strong>Attention :</strong> Assurez-vous de l'intégrité de vos
|
||
|
|
données avant de procéder à un import massif pour éviter toute
|
||
|
|
incohérence dans le référentiel boursier.</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Boutons d'action dans le corps -->
|
||
|
|
<div
|
||
|
|
class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2"
|
||
|
|
>
|
||
|
|
<!-- Formulaire ou lien pour l'Export (réduit) -->
|
||
|
|
<a
|
||
|
|
href="{{ url_for('main.export_actions_csv') }}"
|
||
|
|
class="w-full sm:w-1/4 flex items-center justify-center px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl shadow-lg transition duration-200"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="w-4 h-4 mr-2 shrink-0"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
Exporter
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Formulaire pour l'Import (prend toute la place restante) -->
|
||
|
|
<form
|
||
|
|
action="{{ url_for('main.import_actions_csv') }}"
|
||
|
|
method="POST"
|
||
|
|
enctype="multipart/form-data"
|
||
|
|
class="w-full sm:w-3/4 flex items-center gap-2"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
name="file"
|
||
|
|
accept=".csv"
|
||
|
|
required
|
||
|
|
class="block w-full text-xs text-gray-400 file:mr-4 file:py-3 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-emerald-600 file:text-white hover:file:bg-emerald-500 file:cursor-pointer cursor-pointer bg-gray-950 border border-gray-800 rounded-xl"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="px-5 py-3 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold rounded-xl shadow-lg transition duration-200 whitespace-nowrap"
|
||
|
|
>
|
||
|
|
Envoyer
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3. Pied de boîte -->
|
||
|
|
<div
|
||
|
|
class="px-8 py-4 bg-gray-950 border-t border-gray-800 text-xs text-gray-400 italic text-center"
|
||
|
|
>
|
||
|
|
Module de maintenance sécurisé — Giraud Finance - 2026
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
|
// Gestion de la disparition automatique des messages flash (Toasts)
|
||
|
|
const toasts = document.querySelectorAll(".toast-message");
|
||
|
|
toasts.forEach((toast) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.style.opacity = "0";
|
||
|
|
toast.style.transform = "translateY(10px)";
|
||
|
|
setTimeout(() => toast.remove(), 300);
|
||
|
|
}, 4000);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|