-
Notifications
You must be signed in to change notification settings - Fork 1
/
consultas.html
121 lines (114 loc) · 4.93 KB
/
consultas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Portal Med - Consultas</title>
<!-- Estilos -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="menu-lateral.css">
</head>
<body>
<!-- Início Navbar -->
<nav id="menu-lateral">
<span class="btn-accordion" onclick="toggleSidebar()">
<img id="arrow-accordion" class="invert" src="https://cdn-icons-png.flaticon.com/512/32/32213.png" alt="Mostrar/Recolher">
</span>
<div class="titulo">
<span class="dash"></span>
<h2>PORTAL MED</h2>
</div>
<div class="info-atendente">
<img src="./assets/imagem_atendente.png" alt="Imagem do Atendente" class="imagem-atendente">
<span><h3>Mariana Bittencourt</h3></span>
<span class="cargo-atendente">Atendente</span>
</div>
<hr>
<div class="opcoes">
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="consultas.html">Consultas</a></li>
<li><a href="cadastro_paciente.html">Cadastrar Pacientes</a></li>
<li><a href="cadastro_medico.html">Cadastrar Médicos</a></li>
</ul>
<a href="login.html">Sair</a>
</div>
</nav>
<!-- Fim Navbar -->
<main id="app">
<section class="main-container">
<!-- Inicio -->
<header class="cabecalho-pagina">
<img src="assets/imagem_consultas.png" alt="Consultas">
<h1>Consultas</h1>
</header>
<section class="section-card">
<div class="texto-guia">Listagem de Consultas</div>
<table>
<tr class="th">
<td>ID</td>
<td>Médico(a)</td>
<td>Status</td>
<td>Data da Consulta</td>
<td>Hora da Consulta</td>
<td></td>
</tr>
<tr v-for="consulta in consultas" :key="consulta.id">
<td>{{ consulta.id }}</td>
<td>{{ consulta.medico }}</td>
<td>{{ consulta.status }}</td>
<td>{{ consulta.data }}</td>
<td>{{ consulta.hora }}</td>
<td class="opcoes">
<button><img src="assets/img_edit.png" alt="Editar"></button>
<button><img src="assets/img_printer.png" alt="Imprimir"></button>
<button><img src="assets/img_trash.png" alt="Apagar"></button>
</td>
</tr>
</table>
</section>
<section class="section-card">
<div class="texto-guia">Escolha a <b>especialidade</b> e siga sua prioridade. Os profissionais serão listados por <b>ordem de disponibilidade</b>.</div>
<div class="filtros">
<div class="filtro">
<label for="especialidade">Especialidade</label>
<select name="especialidade" id="especialidade"></select>
</div>
<div class="filtro">
<label for="medico">Medico</label>
<select name="medico" id="medico"></select>
</div>
<div class="filtro">
<label for="datas-disponiveis">Datas Disponíveis</label>
<select name="datasDisponiveis" id="datas-disponiveis"></select>
</div>
</div>
<div class="botoes-filtro">
<button class="btn btn-secondary">Limpar Filtro</button>
<button class="btn btn-primary">Buscar</button>
</div>
</section>
<section class="section-card">
<div class="texto-guia">Horários disponíveis para consulta.</div>
<div class="horarios">
<span class="horario" v-for="horario in horarios" :key="horario">{{horario}}</span>
</div>
</section>
<div class="container-marcar-consultas">
<button class="btn btn-success">Marcar Consultas</button>
</div>
<!-- Fim -->
</section>
<footer>
<img src="assets/imagem_logo.png" alt="Logo do Aplicativo" class="logo-footer">
</footer>
</main>
<!-- Navbar scripts -->
<script src="script-navbar.js"></script>
<!-- Vue scripts -->
<script src="script-vue.js"></script>
</body>
</html>