gant reviewed, added links, css improvements

This commit is contained in:
gautier
2026-05-08 18:35:50 +02:00
parent 694a02e0d3
commit ef90251b5c
3 changed files with 1267 additions and 452 deletions
+49 -20
View File
@@ -20,10 +20,10 @@
<h1>Jira Ticket Extractor</h1>
<p>Extraction via API locale — Proxy transparent</p>
</div>
<div class="badge-api"><i class="fa-solid fa-server" style="margin-right:6px;"></i>API : localhost:3000</div>
<div class="badge-api"><i class="fa-solid fa-server"></i>API : localhost:3000</div>
</header>
<section class="card">
<section class="card-form">
<div class="card-title"><i class="fa-solid fa-filter"></i> Paramètres d'extraction</div>
<div class="alert alert-info">
<i class="fa-solid fa-circle-info"></i>
@@ -41,7 +41,7 @@
</div>
<div class="form-group">
<label for="projectKey">Clé du projet</label>
<input type="text" id="projectKey" placeholder="PROJ" style="text-transform:uppercase;" oninput="autoJql()">
<input type="text" id="projectKey" class="uppercase-input" placeholder="PROJ" oninput="autoJql()">
</div>
<div class="form-group">
<label for="customFields">Champs personnalisés (optionnel)</label>
@@ -53,7 +53,7 @@
<textarea id="jqlQuery" placeholder='project = "PROJ" AND status != Deleted ORDER BY created DESC' rows="2"></textarea>
</div>
</div>
<div class="btn-group" style="margin-top: 24px;">
<div class="btn-group mt-24">
<button class="btn btn-primary" id="extractBtn" onclick="startExtraction()">
<i class="fa-solid fa-download"></i> Lancer l'extraction
</button>
@@ -65,36 +65,65 @@
<div id="results-section">
<div class="stats-row" id="statsRow"></div>
<div class="card" style="padding: 16px 20px;">
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
<div class="card card-actions">
<div class="actions-wrapper">
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('table', this)"><i class="fa-solid fa-table" style="margin-right:6px;"></i>Tableau</button>
<button class="tab-btn" onclick="switchTab('roadmap', this)"><i class="fa-solid fa-timeline" style="margin-right:6px;"></i>Roadmap</button>
<button class="tab-btn" onclick="switchTab('json', this)"><i class="fa-solid fa-code" style="margin-right:6px;"></i>JSON Brut</button>
<button class="tab-btn active" onclick="switchTab('table', this)"><i class="fa-solid fa-table"></i>Tableau</button>
<button class="tab-btn" onclick="switchTab('roadmap', this)"><i class="fa-solid fa-timeline"></i>Roadmap</button>
<button class="tab-btn" onclick="switchTab('json', this)"><i class="fa-solid fa-code"></i>JSON Brut</button>
</div>
<div class="btn-group" style="margin-top:0;">
<div class="btn-group no-margin">
<button class="btn btn-secondary" onclick="copyJSON()"><i class="fa-solid fa-copy"></i> Copier</button>
<button class="btn btn-primary" onclick="downloadJSON()"><i class="fa-solid fa-file-arrow-down"></i> Telecharger</button>
<button class="btn btn-primary" onclick="downloadRoadmap()" style="background:linear-gradient(135deg, #4dc8ff, #0d8bbf);"><i class="fa-solid fa-diagram-project"></i> Roadmap Draw.io</button>
<button class="btn btn-drawio" onclick="downloadRoadmap()"><i class="fa-solid fa-diagram-project"></i> Roadmap Draw.io</button>
<button class="btn btn-danger" onclick="clearResults()"><i class="fa-solid fa-trash"></i> Effacer</button>
</div>
</div>
</div>
<div class="search-bar"><i class="fa-solid fa-magnifying-glass"></i><input type="text" id="searchInput" placeholder="Rechercher..." oninput="filterTable()"></div>
<div class="tab-panel active" id="panel-table"><div class="table-wrap"><table><thead id="tableHead"></thead><tbody id="tableBody"></tbody></table></div></div>
<div class="search-bar">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="searchInput" placeholder="Rechercher..." oninput="filterTable()">
</div>
<div class="tab-panel active" id="panel-table">
<div class="table-wrap">
<table>
<thead id="tableHead"></thead>
<tbody id="tableBody"></tbody>
</table>
</div>
</div>
<div class="tab-panel" id="panel-roadmap">
<div class="card" style="margin-bottom:16px;">
<div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
<span><i class="fa-solid fa-circle-info" style="color:var(--info); margin-right:8px;"></i>Affichage par mois pour plus de lisibilité</span>
<button class="btn btn-primary" onclick="downloadRoadmap()" style="padding:8px 16px; font-size:12px;">
<i class="fa-solid fa-download" style="margin-right:6px;"></i>Télécharger le .drawio
<div class="card mb-16 p-small">
<div class="flex-center-between">
<div class="card mb-16 p-small">
<div class="flex-center-between">
<div class="view-controls">
<span class="mr-8"><i class="fa-solid fa-magnifying-glass-plus"></i> Vue :</span>
<div class="btn-group no-margin">
<button class="btn btn-secondary btn-sm" onclick="setGanttView('month')">Mois</button>
<button class="btn btn-secondary btn-sm" onclick="setGanttView('quarter')">Trimestres</button>
<button class="btn btn-secondary btn-sm" onclick="setGanttView('year')">Années</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-sm" onclick="downloadRoadmap()">
<i class="fa-solid fa-download"></i>Télécharger le .drawio
</button>
</div>
</div>
<div class="card" style="padding:20px;">
<div id="roadmapPreview" style="overflow-x:auto; overflow-y:auto; max-height:600px; background:var(--bg-input); border-radius:var(--radius); padding:20px; min-height:300px;"></div>
<div class="card p-20">
<div id="roadmapPreview"></div>
</div>
</div>
<div class="tab-panel" id="panel-json"><div class="json-viewer" id="jsonViewer"></div></div>
</div>
</div>