gautier
133 lines
6.9 KiB
HTML
133 lines
6.9 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"></i>API : localhost:3000</div>
|
|
</header>
|
|
|
|
<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>
|
|
<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" class="uppercase-input" placeholder="PROJ" 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 mt-24">
|
|
<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 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" 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 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-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="tab-panel" id="panel-roadmap">
|
|
<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 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>
|
|
<script src="/js/script.js"></script>
|
|
|
|
</body>
|
|
</html> |