[add] Layout new work day

This commit is contained in:
Jose Pabl Domingo Aramburo Sanchez 2018-08-14 00:00:47 -06:00
parent 1ee650e020
commit 69e3a31d52
3 changed files with 171 additions and 1 deletions

View File

@ -17,6 +17,80 @@
</div>
</div>
</div>
<div id="registerWorkDaysEmployeeInfo" class="col-md-6">
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeeName">Name</label>
<div class="col-md-5">
<input id="workDaysEmployeeName" name="workDaysEmployeeName" type="text" class="form-control input-md">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeeRol">Performed rol</label>
<div class="col-md-5">
<select class="form-control input-md" name="workDaysEmployeeRol" id="workDaysEmployeeRol" disabled>
<option></option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeeContractType">Contract type</label>
<div class="col-md-5">
<select class="form-control input-md" name="workDaysEmployeeContractType" id="workDaysEmployeeContractType" disabled>
<option>Contract type</option>
<option value="INTERNO">interno</option>
<option value="EXTERNO">Externo</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeeWorkedDay">Date</label>
<div class="col-md-5">
<input id="workDaysEmployeeWorkedDay" name="workDaysEmployeeWorkedDay" type="text" class="form-control input-md datepicker">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeeDeliveries">Deliveries</label>
<div class="col-md-5">
<input id="workDaysEmployeeDeliveries" name="workDaysEmployeeDeliveries" type="number" value="0" class="form-control input-md">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="workDaysEmployeePerformedRol">Performed rol</label>
<div class="col-md-5">
<select class="form-control input-md" name="workDaysEmployeePerformedRol" id="workDaysEmployeePerformedRol" disabled>
<option>Employee type</option>
</select>
</div>
</div>
</div>
</div>
<div id="registerWorkDaysEmployeeSalary" class="col-md-6">
</div>
<div class="row" id="hidenEmployeeCodeForWorkDays">
<div class="form-group">
<label class="col-md-4 control-label" for="hidenEmployeeCodeForWorkDaysCode">Code</label>
<div class="col-md-5">
<input id="hidenEmployeeCodeForWorkDaysCode" name="hidenEmployeeCodeForWorkDaysCode" type="text" class="form-control input-md">
</div>
</div>
</div>
<div class="row col-md-offset-6">
<div class="form-group">
<a href="#" class="btn btn-lg btn-success " onclick="updateEmployee();">Update</a>

View File

@ -52,7 +52,7 @@ $(document).ready(function(){
});
/**
* Loads the the enmployee types into their select option
* Loads the the employee types into their select option
*/
function loadEmployeeTypes(){
let baseUrl = getbaseUrl();

View File

@ -0,0 +1,96 @@
/**
* Bootstrapping the starting actions for the module
*/
$(document).ready(function(){
let baseUrl = getbaseUrl();
loadEmployeeTypesForWorkDays();
$('.datepicker').datepicker({
format: "yyyy/mm/dd",
autoclose: true
});
// Not to be edited
$("#hidenEmployeeCodeForWorkDays").hide();
// Setting up bloodhound typeahead
let employeesList = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
'cache': false,
url: baseUrl + '/api/employee/find',
replace: function(url, uriEncodedQuery) {
return url + '/' + uriEncodedQuery
},
wildcard: '%QUERY',
filter: function (data) {
return data;
}
}
});
employeesList.initialize();
$("#workDaysSearchEmployee").typeahead({
hint: true,
highlight: true,
minLength: 3
},
{
name: "result",
displayKey: "fullName",
source: employeesList.ttAdapter()
}).bind("typeahead:selected", function(obj, datum, name) {
$(this).data("id", datum.code);
console.log(datum.code);
$('#hidenEmployeeCodeForWorkDaysCode').val(datum.code); // For future reference
});
});
/**
* Loads the the employee types into their select option
*/
function loadEmployeeTypesForWorkDays(){
let baseUrl = getbaseUrl();
$.ajax({
url: baseUrl + '/api/employee/types',
type: 'GET',
dataType: 'json',
success:function(data){
$(data).each(function(i,v){
$('#workDaysEmployeeRol').append(
'<option value="' + v.id + '">'+ v.name + '</option>'
);
$('#workDaysEmployeePerformedRol').append(
'<option value="' + v.id + '">'+ v.name + '</option>'
);
});
},
error:function(x,e) {
let responseText = $.parseJSON(x["responseText"]);
if (x.status==0) {
$('#modalErrorInternetConnection').modal('show');
} else if(x.status==404) {
$('#modalError404').modal('show');
} else if(x.status==500) {
$('#modalServerResponseError').modal('show');
document.getElementById('modalResponseError').innerHTML = responseText['message'];
} else if(e=='parsererror') {
$('#modalErrorParsererror').modal('show');
} else if(e=='timeout'){
$('#modalErrorTimeout').modal('show');
} else {
$('#modalErrorOther').modal('show');
}
},
});
}