\\ código html
<html><head><title></title>
<style>
</style>
</head><body>
<div id="container">
<div class="section" id="2">
<center><h2>SAIDA:</h2></center>
\\ formulário para selecionar bebida e informar a saída daquele item
<form onsubmit="bebidasController.criaListaSaida(event)">
<label>Data:</label><br>
<input type="date" id="dataSaida"><br>
<label>Bebida:</label><br>
<select id="bebidaSaida">
<option value="spriteZero">Sprite Zero</option>
<option value="aguaTonica">Agua Tonica</option>
</select><br>
<label>Quantidade:</label><br>
<input type="number" id="qtdS"><br>
<br><center><input type="submit"></center>
</form>
</div>
<script src="lista.js"></script>
<script src="controller/Ficheiro.js"></script>
<script src="view/View.js"></script>
<script src="controller/BebidasController.js"></script>
<script src="view/TabelaSaidaView.js"></script>
<script>
let bebidasController = new BebidasController();
</script>
</body></html>
\\classe contendo as quantidades
class Lista{
constructor(sprtZ,
aguaT,
){
this._nome = new Date();
this._spriteZero = sprtZ;
this._aguaTonica = aguaT;
}
get spriteZero(){
return this._spriteZero;
}
get aguaTonica(){
return this._aguaTonica;
}
}
}
class BebidasController {
constructor() {
let $ = document.querySelector.bind(document);
this._tabelaSaidaView = new TabelaSaidaView($('#tabelaSaidaView'));
this._ficheiro = new Ficheiro();
this._tabelaSaidaView.update(this._ficheiro);
this._dataSaida = $('#dataSaida');
this._bebidaSaida = $('#bebidaSaida');
this._qtdS = $('#qtdS');
criaListaSaida(){
event.preventDefault(event);
let bebidaSaida = this._bebidaSaida.value;
let sprtZ= 0;
let aguaT= 0;
witch (bebidaSaida) {
case "spriteZero":
sprtZ= this._qtdS.value;
this._ficheiro.adicionaObjetoSaida(new Lista(
sprtZ,
aguaT,
))
break;
case "aguaTonica":
aguaT= this._qtdS.value;
this._ficheiro.adicionaObjetoSaida(new Lista(
sprtZ,
aguaT,
))
break;
default:
}
this._tabelaSaidaView.update(this._ficheiro);
}
}
}
class Ficheiro {
constructor(){
this._objetosSaida = [];
}
adicionaObjetoSaida(obj) {
this._objetosSaida.push(obj);
}
get objetosSaida() {
return [].concat(this._objetosSaida);
}
}
class TabelaSaidaView extends View {
constructor(elemento) {
super(elemento);
}
template(model) {
return `
<table><thead>
<tr><th>Data:</th>
${model.objetosSaida.map(n => `<th>${n.nome}</th>`)}
</tr>
<tr><th>Nome:</th><th>Quantidade:</th></tr>
</thead>
<tbody>
<tr><td>SPRITE ZERO</td>
${model.objetosSaida.map(n => `<td>${n.spriteZero}</td>`)}
</tr>
<tr><td>AGUA TONICA</td>
${model.objetosSaida.map(n => `<td>${n.aguaTonica}</td>`)}
</tr></tbody>
<tfoot>
<td colspan="2" align="center">rodape</td>
</tfoot>
</table>
`
}
}
Gostaria de saber se possível como eu faço para apresentar na mesma coluna da tabela "SAIDA" os valores dos objetos listas com mesma data. Não sei se seria possível me responder ou se fui claro, de toda forma agradeço a atenção.
