Change mapping status and task colors in UX

This commit is contained in:
2026-09-24 09:47:52 +02:00
parent 4329055da6
commit dece7b5ab8
3 changed files with 490 additions and 191 deletions
+31 -31
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -24,53 +24,53 @@
<div class="header-icon"><i class="fa-solid fa-bolt"></i></div>
<div class="header-text">
<h1>Jira Ticket Extractor</h1>
<p>Extraction via API locale — Proxy transparent</p>
<p>Extraction via local API — Transparent proxy</p>
</div>
<div class="header-actions">
<div class="badge-api"><i class="fa-solid fa-server"></i>API : localhost:3000</div>
<button class="theme-toggle-btn" id="themeToggleBtn" onclick="toggleTheme()" aria-label="Changer de thème" title="Basculer vers le mode clair / sombre">
<button class="theme-toggle-btn" id="themeToggleBtn" onclick="toggleTheme()" aria-label="Toggle theme" title="Switch between light and dark mode">
<i class="fa-solid fa-sun" id="themeIcon"></i>
<span id="themeLabel">Mode clair</span>
<span id="themeLabel">Light mode</span>
</button>
</div>
</header>
<section class="card-form">
<div class="card-title"><i class="fa-solid fa-filter"></i> Paramètres d'extraction</div>
<div class="card-title"><i class="fa-solid fa-filter"></i> Extraction Settings</div>
<div class="alert alert-info">
<i class="fa-solid fa-circle-info"></i>
<div>Le proxy d'entreprise et l'URL Jira sont gérés par le backend (<code>config.ini</code>). Ici, fournissez uniquement vos identifiants Jira et les filtres du projet.</div>
<div>Corporate proxy and Jira URL are handled by the backend (<code>config.ini</code>). Provide only your Jira credentials and project filters below.</div>
</div>
<div class="form-grid">
<div class="form-group">
<label for="username">Nom d'utilisateur / Email</label>
<input type="text" id="username" placeholder="user@mondomaine.be">
<label for="username">Username / Email</label>
<input type="text" id="username" placeholder="user@mydomain.com">
</div>
<div class="form-group">
<label for="apiToken">Token API / Mot de passe</label>
<input type="password" id="apiToken" placeholder="votre-token-api-jira">
<span class="hint">Jira Cloud : Personal Access Token. Jira Server : mot de passe.</span>
<label for="apiToken">API Token / Password</label>
<input type="password" id="apiToken" placeholder="your-jira-api-token">
<span class="hint">Jira Cloud : Personal Access Token. Jira Server : password.</span>
</div>
<div class="form-group">
<label for="projectKey">Clé du projet</label>
<label for="projectKey">Project Key</label>
<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>
<label for="customFields">Custom Fields (optional)</label>
<input type="text" id="customFields" placeholder="customfield_10001:Production Date">
<span class="hint">Format : customfield_ID:NomAffiché, séparés par virgules</span>
<span class="hint">Format : customfield_ID:DisplayName, comma separated</span>
</div>
<div class="form-group full">
<label for="jqlQuery">Requête JQL (optionnel)</label>
<label for="jqlQuery">JQL Query (optional)</label>
<textarea id="jqlQuery" placeholder='project = "PROJ" AND status != Deleted ORDER BY created DESC' rows="2"></textarea>
</div>
</div>
<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
<i class="fa-solid fa-download"></i> Start Extraction
</button>
<button class="btn btn-secondary" onclick="pingApi()">
<i class="fa-solid fa-plug"></i> Tester l'API
<i class="fa-solid fa-plug"></i> Test API
</button>
</div>
</section>
@@ -81,21 +81,21 @@
<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"></i>Tableau</button>
<button class="tab-btn active" onclick="switchTab('table', this)"><i class="fa-solid fa-table"></i>Table</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>
<button class="tab-btn" onclick="switchTab('json', this)"><i class="fa-solid fa-code"></i>Raw JSON</button>
</div>
<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-danger" onclick="clearResults()"><i class="fa-solid fa-trash"></i> Effacer</button>
<button class="btn btn-secondary" onclick="copyJSON()"><i class="fa-solid fa-copy"></i> Copy</button>
<button class="btn btn-primary" onclick="downloadJSON()"><i class="fa-solid fa-file-arrow-down"></i> Download</button>
<button class="btn btn-danger" onclick="clearResults()"><i class="fa-solid fa-trash"></i> Clear</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()">
<input type="text" id="searchInput" placeholder="Search..." oninput="filterTable()">
</div>
<div class="tab-panel active" id="panel-table">
@@ -111,15 +111,15 @@
<div class="tab-panel" id="panel-roadmap">
<div class="toolbar-roadmap">
<div class="view-controls">
<span class="mr-8"><i class="fa-solid fa-magnifying-glass-plus"></i> Vue :</span>
<span class="mr-8"><i class="fa-solid fa-magnifying-glass-plus"></i> View :</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>
<button class="btn btn-secondary btn-sm" onclick="setGanttView('month')">Months</button>
<button class="btn btn-secondary btn-sm" onclick="setGanttView('quarter')">Quarters</button>
<button class="btn btn-secondary btn-sm" onclick="setGanttView('year')">Years</button>
</div>
<button class="btn btn-secondary btn-sm" id="ganttExpandBtn" onclick="toggleGanttExpand()" title="Agrandir ou réduire la hauteur du Gantt">
<button class="btn btn-secondary btn-sm" id="ganttExpandBtn" onclick="toggleGanttExpand()" title="Expand or collapse Gantt height">
<i class="fa-solid fa-up-right-and-down-left-from-center" id="ganttExpandIcon"></i>
<span id="ganttExpandLabel">Déplier</span>
<span id="ganttExpandLabel">Expand</span>
</button>
</div>
@@ -129,10 +129,10 @@
</span>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" onclick="exportDrawIOXML('download')">
<i class="fa-solid fa-file-download"></i> Télécharger
<i class="fa-solid fa-file-download"></i> Download
</button>
<button class="btn btn-secondary btn-sm" onclick="exportDrawIOXML('copy')">
<i class="fa-solid fa-copy"></i> Copier XML
<i class="fa-solid fa-copy"></i> Copy XML
</button>
</div>
</div>