<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tritão</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|
<link rel="stylesheet/less" href="/styles/root.less"/>
|
|
<script src="scripts/less.min.js" type="text/javascript"></script>
|
|
<script src="scripts/main.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo">
|
|
<a href="index.html">
|
|
<img src="/images/logo.png" width="150" />
|
|
</a>
|
|
</div>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="projects.html">Projetos</a></li>
|
|
<li><a href="contact.html">Contato</a></li>
|
|
<li class="active"><a href="produtos.html">Produtos</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<div>
|
|
<h1>Produtos</h1>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<table class="tabela-produtos">
|
|
<thead>
|
|
<tr>
|
|
<th>Produto</th>
|
|
<th>Categoria</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tabela-produtos-body">
|
|
|
|
</tbody>
|
|
</table>
|
|
<script>
|
|
window.setTimeout(() => carregaTabelaProdutos(), 100);
|
|
const carregaTabelaProdutos = () => {
|
|
processaBackend(
|
|
'http://eduveks.bootcamp.dev.netuno.org:20190/services/produtos',
|
|
(dados) => {
|
|
let html = '';
|
|
for (const {produto, categoria} of dados) {
|
|
console.log(produto + ' === ' + categoria);
|
|
html += `
|
|
<tr>
|
|
<td>${produto}</td>
|
|
<td>${categoria}</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
document.getElementById('tabela-produtos-body').innerHTML = html;
|
|
}
|
|
);
|
|
};
|
|
</script>
|
|
<p></p>
|
|
</section>
|
|
<section>
|
|
<div>
|
|
<form target="produto-salvado" action="http://eduveks.bootcamp.dev.netuno.org:20190/services/produto-salvar">
|
|
<div>
|
|
<label>Nome</label>
|
|
<input name="nome" type="text" />
|
|
</div>
|
|
<div>
|
|
<button type="submit">Cria Produto</button>
|
|
<!-- <button type="button" onClick="criarProduto()">Envia com Evento de Click</button> -->
|
|
</div>
|
|
</form>
|
|
<iframe name="produto-salvado" onload="carregaTabelaProdutos()" height="200" width="500" frameBorder="no"></iframe>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
© 2023 Tritão
|
|
</footer>
|
|
</body>
|
|
</html>
|