152 lines
7.8 KiB
HTML
152 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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">
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('jira_extractor_theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
</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 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="Toggle theme" title="Switch between light and dark mode">
|
|
<i class="fa-solid fa-sun" id="themeIcon"></i>
|
|
<span id="themeLabel">Light mode</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="card-form">
|
|
<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>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">Username / Email</label>
|
|
<input type="text" id="username" placeholder="user@mydomain.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<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">Project Key</label>
|
|
<input type="text" id="projectKey" class="uppercase-input" placeholder="PROJ" oninput="autoJql()">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="customFields">Custom Fields (optional)</label>
|
|
<input type="text" id="customFields" placeholder="customfield_10001:Production Date">
|
|
<span class="hint">Format : customfield_ID:DisplayName, comma separated</span>
|
|
</div>
|
|
<div class="form-group full">
|
|
<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> Start Extraction
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="pingApi()">
|
|
<i class="fa-solid fa-plug"></i> Test 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>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>Raw JSON</button>
|
|
</div>
|
|
<div class="btn-group no-margin">
|
|
<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="Search..." 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="toolbar-roadmap">
|
|
<div class="view-controls">
|
|
<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')">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="Expand or collapse Gantt height">
|
|
<i class="fa-solid fa-up-right-and-down-left-from-center" id="ganttExpandIcon"></i>
|
|
<span id="ganttExpandLabel">Expand</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="export-drawio-box">
|
|
<span class="mr-8 export-label">
|
|
<i class="fa-solid fa-diagram-project"></i> EXPORT DRAW.IO (XML)
|
|
</span>
|
|
<div class="btn-group">
|
|
<button class="btn btn-secondary btn-sm" onclick="exportDrawIOXML('download')">
|
|
<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> Copy XML
|
|
</button>
|
|
</div>
|
|
</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> |