110 lines
4.4 KiB
HTML
110 lines
4.4 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>Painel do Operador</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="list-view">
|
|
<div class="main-container">
|
|
<!-- Sidebar/Lista de Espera -->
|
|
<div class="queue-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Fila de Espera</h2>
|
|
<span id="queue-count" class="badge">0</span>
|
|
</div>
|
|
<div class="queue-list-container">
|
|
<table class="queue-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Senha</th>
|
|
<th>Cliente</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="queue-table-body">
|
|
<!-- Filas serão inseridas aqui -->
|
|
</tbody>
|
|
</table>
|
|
<div id="queue-empty" class="empty-state">
|
|
Ninguém na fila
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Área Principal / Chamada -->
|
|
<div class="call-area">
|
|
<div id="no-current" class="no-current-card">
|
|
<div class="pulse-icon">🔔</div>
|
|
<h2>Aguardando Chamada</h2>
|
|
<p>Clique no botão abaixo para chamar o próximo cliente</p>
|
|
<button id="call-next-btn" class="btn-primary">CHAMAR PRÓXIMO</button>
|
|
</div>
|
|
|
|
<div id="current-card" class="current-card" style="display: none;">
|
|
<div class="card-header">
|
|
<span id="card-status-badge" class="status-badge">CHAMADO</span>
|
|
<h1 id="card-ticket">---</h1>
|
|
</div>
|
|
<div class="card-body">
|
|
<p id="card-client-name" class="card-client-name">---</p>
|
|
<p id="card-service" class="card-service">---</p>
|
|
<p id="card-type" class="card-type"></p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button id="recall-button" class="btn-recall" disabled>RECHAMAR</button>
|
|
<button id="forward-button" class="btn-forward" disabled>ENCAMINHAR</button>
|
|
<button id="next-button" class="btn-start" disabled>
|
|
<span id="counter-start"></span>
|
|
INICIAR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-bar">
|
|
<button id="logout-button" class="btn-logout">Trocar Colaborador</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TELA DE OBSERVAÇÕES (atendimento em andamento) -->
|
|
<div id="obs-view" style="display: none;">
|
|
<div class="obs-layout">
|
|
<div class="obs-header">
|
|
<h2>Atendimento em Andamento</h2>
|
|
<div class="obs-client-info">
|
|
<span id="selected-item-name" class="obs-client-name"></span>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="idAtend" id="idAtend">
|
|
<textarea id="observation-text" rows="10" placeholder="Digite suas observações sobre o atendimento..."></textarea>
|
|
<div class="obs-actions">
|
|
<button id="save-button" class="btn-finish">Finalizar atendimento</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL DE ENCAMINHAMENTO -->
|
|
<div id="forward-view" class="modal-view" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Encaminhar</h2>
|
|
<button id="close-forward" class="btn-close">×</button>
|
|
</div>
|
|
<p style="color: #aaa; font-size: 14px; margin-bottom: 10px;">Selecione para quem encaminhar <span id="forward-ticket" class="highlight"></span>:</p>
|
|
<div id="operators-list" class="operators-grid">
|
|
<!-- Operadores serão carregados aqui -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="res/js/socket.io.min.js"></script>
|
|
<script src="renderer.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |