-1
Good night, you guys.
I’m having a hard time how to get the data from a dynamic table and record this information in the database.
The idea is this, it’s a system for controlling drivers' working hours. Staff will type in the hour tickets (direction, range, meal, etc) and click on the add.
Looking like the image above. The amount of input may vary, according to the times made by the driver. Then I need to take these hours and throw them in the database.
From what I imagine the best way is to get the data after the user has typed the data My question is... How do I get this data in the tables, since I don’t have the name of the fields? I don’t know if it makes a difference, but I’m using Java, Springboot, Thymeleaf in development
Registration screen Register journey.html Register journey
<body>
<section layout:fragment="conteudo">
<div class="page-header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<h1>Cadastrar jornada</h1>
<!-- <h1 th:if="${empresa.nova}">Cadastrar jornada</h1> -->
<!-- <h1 th:unless="${empresa.nova}" th:text="|Editar empresa - ${empresa.razaoSocial}|">Editar jornada</h1> -->
</div>
<div class="col-xs-2">
<div class="aw-page-header-controls">
<!-- <a class="btn btn-default" th:href="@{/empresas}"> -->
<a class="btn btn-default">
<i class="glyphicon glyphicon-plus-sign"></i>
<span class="hidden-xs hidden-sm">Pesquisar jornada</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- <form method="POST" th:object="${jornada}" class="form-vertical js-form-loading"
th:action="${empresa.nova} ? @{/empresas/nova} : @{/empresas/{codigo}(codigo=${empresa.codigo})}"> -->
<form class="form-vertical js-form-loading">
<!-- <cj:message/> -->
<!-- <input type="hidden" th:field="*{codigo}" /> -->
<div class="row">
<div class="col-sm-2 form-group field-required">
<label for="data" class="control-label">Data</label>
<input id="data" type="text" class="form-control js-date" />
</div>
<div class="col-sm-4 form-group field-required">
<label for="nomeMotorista" class="control-label">Motorista</label>
<div class="input-group">
<!-- <input id="codigoMotorista" type="hidden" th:field="*{motorista}" /> -->
<!-- <input id="nomeMotorista" type="text" readonly="readonly" class="form-control" th:field="*{motorista.nome}"
placeholder="Clique na lupa para pesquisar o motorista" /> -->
<input id="codigoMotorista" type="hidden" />
<input id="nomeMotorista" type="text" readonly="readonly" class="form-control"
placeholder="Clique na lupa para pesquisar o motorista" />
<span class="input-group-btn">
<button class="btn btn-default js-tooltip" type="button" title="Pesquisa avançada"
data-toggle="modal" data-target="#pesquisaRapidaMotoristas">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1 form-group">
<label class="control-label">Folga</label>
<div>
<input type="checkbox" class="js-status" data-size="small" data-off-color="danger"
data-on-text="Sim" data-off-text="Não" />
</div>
</div>
<button type="button" class="btn btn-primary js-ler-dados">Ler dados</button>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Tempo de direção</legend>
<div class="form-group row">
<!-- <label for="inicioDirecao" class="col-sm-1 col-form-label">Início</label> -->
<label for="inicioDirecao" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioDirecao" type="text" class="form-control js-hora">
<input type="hidden" value="DIRECAO"/>
</div>
<label for="fimDirecao" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimDirecao" type="text" class="form-control js-hora">
<input id="direcao" type="hidden" value="DIRECAO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-direcao">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table id="table-direcao" class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="direcaot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Intervalo de direção</legend>
<div class="form-group row">
<label for="inicioIntervalo" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioIntervalo" type="text" class="form-control js-hora">
<input type="hidden" value="INTERVALO"/>
</div>
<label for="fimIntervalo" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimIntervalo" type="text" class="form-control js-hora">
<input type="hidden" value="INTERVALO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-intervalo">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="intervalot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Refeição</legend>
<div class="form-group row">
<label for="inicioRefeicao" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioRefeicao" type="text" class="form-control js-hora">
<input type="hidden" value="REFEICAO"/>
</div>
<label for="fimRefeicao" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimRefeicao" type="text" class="form-control js-hora">
<input type="hidden" value="REFEICAO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-refeicao">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="refeicaot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Tempo de Espera</legend>
<div class="form-group row">
<label for="inicioEspera" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioEspera" type="text" class="form-control js-hora">
<input type="hidden" value="ESPERA"/>
</div>
<label for="fimEspera" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimEspera" type="text" class="form-control js-hora">
<input type="hidden" value="ESPERA"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-espera">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="esperat">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Descanso/Pernoite</legend>
<div class="form-group row">
<label for="inicioPernoite" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioPernoite" type="text" class="form-control js-hora">
<input type="hidden" value="PERNOITE"/>
</div>
<label for="fimPernoite" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimPernoite" type="text" class="form-control js-hora">
<input type="hidden" value="PERNOITE"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-pernoite">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="pernoitet">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Salvar</button>
</div>
</form>
</div>
<th:block th:replace="motorista/PesquisaRapidaMotoristas :: pesquisaRapidaMotoristas"></th:block>
</section>
<th:block layout:fragment="javascript-extra">
<script th:src="@{/javascripts/vendors/bootstrap-switch.min.js}"></script>
<script th:src="@{/javascripts/jornada.registrar-horas.js}"></script>
<script th:src="@{/javascripts/jornada.mascara-horas.js}"></script>
<script th:src="@{/javascripts/vendors/handlebars.min.js}"></script>
<script th:src="@{/javascripts/motorista.pesquisa-rapida.js}"></script>
<script th:src="@{/javascripts/jornada.ler-dados.js}"></script>
<script>
$('.js-status').bootstrapSwitch();
</script>
</th:block>
</body>
</html>
Add elements to tables journey.registrar-hours.js var Controlejornada = Controlejornada || {};
ControleJornada.RegistrarHorasJornada = (function() {
var counterDirecao = 0;
var counterIntervalo = 0;
var counterRefeicao = 0;
var counterEspera = 0;
var counterPernoite = 0;
function RegistrarHorasJornada() {
this.novaDirecaoBtn = $('.js-add-new-direcao');
this.novoIntervaloBtn = $('.js-add-new-intervalo');
this.novaRefeicaoBtn = $('.js-add-new-refeicao');
this.novaEsperaBtn = $('.js-add-new-espera');
this.novoPernoiteBtn = $('.js-add-new-pernoite');
this.excluirDirecaoBtn = $('#direcaot');
this.excluirIntervaloBtn = $('#intervalot');
this.excluirRefeicaoBtn = $('#refeicaot');
this.excluirEsperaBtn = $('#esperat');
this.excluirPernoiteBtn = $('#pernoitet');
}
RegistrarHorasJornada.prototype.iniciar = function() {
this.novaDirecaoBtn.on('click', onAdicionarHorasDirecao.bind());
this.novoIntervaloBtn.on('click', onAdicionarHorasIntervalo.bind());
this.novaRefeicaoBtn.on('click', onAdicionarHorasRefeicao.bind());
this.novaEsperaBtn.on('click', onAdicionarHorasEspera.bind());
this.novoPernoiteBtn.on('click', onAdicionarHorasPernoite.bind());
this.excluirDirecaoBtn.on('click', '.js-excluir-btn',
onExcluirHorasDirecao.bind());
this.excluirIntervaloBtn.on('click', '.js-excluir-btn',
onExcluirHorasIntervalo.bind());
this.excluirRefeicaoBtn.on('click', '.js-excluir-btn',
onExcluirHorasRefeicao.bind());
this.excluirEsperaBtn.on('click', '.js-excluir-btn',
onExcluirHorasEspera.bind());
this.excluirPernoiteBtn.on('click', '.js-excluir-btn',
onExcluirHorasPernoite.bind());
}
function onAdicionarHorasDirecao() {
/*var newRow = $("<tr id=\" " + + counterDirecao + " \">");*/
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioDirecao').val();
var inputFim = $('#fimDirecao').val();
var direcao = $('#direcao').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class=" btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#direcaot").append(newRow);
counterDirecao++;
$('#inicioDirecao').val('');
$('#fimDirecao').val('');
}
}
function onAdicionarHorasIntervalo() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioIntervalo').val();
var inputFim = $('#fimIntervalo').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#intervalot").append(newRow);
counterIntervalo++;
$('#inicioIntervalo').val('');
$('#fimIntervalo').val('');
}
}
function onAdicionarHorasRefeicao() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioRefeicao').val();
var inputFim = $('#fimRefeicao').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#refeicaot").append(newRow);
counterRefeicao++;
$('#inicioRefeicao').val('');
$('#fimRefeicao').val('');
}
}
function onAdicionarHorasEspera() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioEspera').val();
var inputFim = $('#fimEspera').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#esperat").append(newRow);
counterEspera++;
$('#inicioEspera').val('');
$('#fimEspera').val('');
}
}
function onAdicionarHorasPernoite() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioPernoite').val();
var inputFim = $('#fimPernoite').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#pernoitet").append(newRow);
counterPernoite++;
$('#inicioPernoite').val('');
$('#fimPernoite').val('');
}
}
function onExcluirHorasDirecao() {
var item = document.activeElement;
item.closest("tr").remove();
counterDirecao -= 1;
}
function onExcluirHorasIntervalo() {
var item = document.activeElement;
item.closest("tr").remove();
counterIntervalo -= 1;
}
function onExcluirHorasRefeicao() {
var item = document.activeElement;
item.closest("tr").remove();
counterRefeicao -= 1;
}
function onExcluirHorasEspera() {
var item = document.activeElement;
item.closest("tr").remove();
counterEspera -= 1;
}
function onExcluirHorasPernoite() {
var item = document.activeElement;
item.closest("tr").remove();
counterPernoite -= 1;
}
return RegistrarHorasJornada;
}());
$(function() {
var registrarHorasJornada = new ControleJornada.RegistrarHorasJornada();
registrarHorasJornada.iniciar();
});