100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ARCO — Importação Excel → Adaptive Work</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="header">
|
|
<p class="eyebrow">Planview Adaptive Work</p>
|
|
<h1>Importação Excel → WorkItem</h1>
|
|
<p class="subtitle">
|
|
Envie um arquivo <code>.xlsx</code> para criar ou atualizar WorkItems no Clarizen.
|
|
Os cabeçalhos podem usar o <strong>nome do campo</strong> ou o <strong>rótulo (label)</strong> do Adaptive Work.
|
|
</p>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<section class="card" id="health-banner" hidden>
|
|
<p class="banner-text" id="health-message"></p>
|
|
</section>
|
|
|
|
<section class="card upload-card">
|
|
<label class="upload-zone" id="drop-zone" for="file-input">
|
|
<input
|
|
type="file"
|
|
id="file-input"
|
|
name="file"
|
|
accept=".xlsx,.xls"
|
|
hidden
|
|
/>
|
|
<span class="upload-icon" aria-hidden="true">📄</span>
|
|
<span class="upload-title">Arraste o Excel aqui ou clique para escolher</span>
|
|
<span class="upload-hint">Apenas .xlsx — linha 1 = nome ou label do campo</span>
|
|
<span class="file-name" id="file-name">Nenhum arquivo selecionado</span>
|
|
</label>
|
|
|
|
<div class="actions">
|
|
<button type="button" class="btn btn-primary" id="import-btn" disabled>
|
|
Importar
|
|
</button>
|
|
</div>
|
|
|
|
<div class="progress" id="progress" hidden>
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" id="alert-section" hidden>
|
|
<p id="alert-message" class="alert"></p>
|
|
</section>
|
|
|
|
<section class="card" id="summary-section" hidden>
|
|
<h2>Resumo</h2>
|
|
<ul class="summary-grid" id="summary-grid"></ul>
|
|
</section>
|
|
|
|
<section class="card" id="mapping-section" hidden>
|
|
<h2>Colunas reconhecidas</h2>
|
|
<ul class="mapping-list" id="mapping-list"></ul>
|
|
</section>
|
|
|
|
<section class="card" id="preview-section" hidden>
|
|
<h2>Prévia dos dados</h2>
|
|
<div class="table-wrap">
|
|
<table id="preview-table">
|
|
<thead></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" id="results-section" hidden>
|
|
<h2>Resultado por linha</h2>
|
|
<div class="table-wrap">
|
|
<table id="results-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Linha</th>
|
|
<th>Status</th>
|
|
<th>ID / ExternalID</th>
|
|
<th>Mensagem</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<span>MVP — entidade fixa: WorkItem</span>
|
|
</footer>
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|