gautier
104 lines
6.5 KiB
HTML
104 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jira Ticket Extractor</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=DM+Sans:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid"></div>
|
|
<div class="bg-glow bg-glow--1"></div>
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<div class="app">
|
|
<header class="header">
|
|
<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>
|
|
</div>
|
|
<div class="badge-api"><i class="fa-solid fa-server" style="margin-right:6px;"></i>API : localhost:3000</div>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<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>
|
|
<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>
|
|
<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">
|
|
</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>
|
|
</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()">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="customFields">Champs personnalisés (optionnel)</label>
|
|
<input type="text" id="customFields" placeholder="customfield_10001:Production Date">
|
|
<span class="hint">Format : customfield_ID:NomAffiché, séparés par virgules</span>
|
|
</div>
|
|
<div class="form-group full">
|
|
<label for="jqlQuery">Requête JQL (optionnel)</label>
|
|
<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;">
|
|
<button class="btn btn-primary" id="extractBtn" onclick="startExtraction()">
|
|
<i class="fa-solid fa-download"></i> Lancer l'extraction
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="pingApi()">
|
|
<i class="fa-solid fa-plug"></i> Tester l'API
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<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="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>
|
|
</div>
|
|
<div class="btn-group" style="margin-top:0;">
|
|
<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-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="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
|
|
</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>
|
|
</div>
|
|
<div class="tab-panel" id="panel-json"><div class="json-viewer" id="jsonViewer"></div></div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/script.js"></script>
|
|
|
|
</body>
|
|
</html> |