%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../../partials/sidebar %>
<!-- <link rel="stylesheet" type="text/css" href="/app-assets/ekko-lightbox/dist/ekko-lightbox.css"> -->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/custom.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/checkboxes-radios.css">
<style>
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem; }
.modal-header {
background-color:#2196F3;
}
/* .dataTables_filter, .dataTables_info { display: none; } */
</style>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title">Work Shift</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<li class="breadcrumb-item"><a href="/hr">Human Resources</a>
</li>
<li class="breadcrumb-item active">Work Shift
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<!-- <div class="text-center">
<a class="quick-btn text-red" href="/accounts/payments/create" >
<i class="la la-plus fa-2x"></i>
<span>New Payment</span>
</a>
</div> -->
<%- format_messages(messages) %>
<section class="row">
<div class="col-lg-12 col-md-6 col-sm-12">
<div class="card " >
<div class="card-header" >
<h4 class="card-title">Work Shift</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addShift"><i class="ft-plus white"></i> Add Work Shift</button></li>
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard ">
<div class="table-responsive">
<table class="table" >
<thead>
<th>Shift</th>
<th>Description</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hours</th>
<th></th>
</thead>
<tbody id="shifts">
<% workShifts.forEach(shift => { %>
<tr id="shift<%= shift.id %>">
<td><%= shift.title %></td>
<td><%= shift.description %> </td>
<td><%= shift.from %> </td>
<td><%= shift.to %> </td>
<td><%= moment(shift.from).diff(moment( shift.to)) %> </td>
<td>
<a class="btn dropdown-item" href="/hr/jobs/add-employment-shift" data-toggle="modal" onclick="editShift('<%= JSON.stringify(shift) %>')" data-target="#addShift"><i class="la la-pencil" ></i> </a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<input type="hidden" id="_csrf" name="_csrf" value="<%= _csrfToken %>">
<!-- /////////// -->
<div class="modal fade text-left" id="addShift" tabindex="-1" role="dialog" aria-labelledby="addShift"
aria-hidden="true">
<form action="/hr/jobs/add-shift" method="POST" id="addShiftForm">
<input type="hidden" id="shift_id" name="id">
<input type="hidden" name="_csrf" value="<%= _csrfToken %>">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header bg-blue">
<h3 class="modal-title" ><span id="_shiftModalLabel">Add Work Shift</span> </h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="fromContact" id="">Shift :</label>
<input type="text" class="form-control" id="shiftTitle" name="title" >
</div>
<div class="form-group">
<label for="fromContact" id="">Description :</label>
<textarea type="text" class="form-control" id="shiftDescription" name="description" ></textarea>
</div>
<div class="form-group">
<label for="fromContact" id="">Start Time :</label>
<input type="time" class="form-control" id="from" name="from" required value="">
</div>
<div class="form-group">
<label for="fromContact" id="">End Time :</label>
<input type="time" class="form-control" id="to" name="to" required value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
<button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
</div>
</div>
</div>
</form>
</div>
<% include ../../partials/footer %>
<!-- <script src="/app-assets/ekko-lightbox/dist/ekko-lightbox.js"></script> -->
<script>
$("#addShiftForm").on('submit',(event)=>{
$('#spinnerContainer').addClass('show');
event.preventDefault();
var data = getFormData($('#addShiftForm'))
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/add-work-shift", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: data, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response)
if(response.status == "success"){
workShift = response.workShift;
// console.log(response.workShift)
var tr =
`<td>${workShift.title}</td>
<td> ${workShift.description} </td>
<td> ${workShift.from} </td>
<td> ${workShift.to} </td>
<td> ${workShift.to} </td>
<td><a class="btn dropdown-item" href="/hr/jobs/add-shift" data-toggle="modal" onclick="editShift('${JSON.stringify(JSON.stringify(workShift))}')" value="" data-target="#addShift"><i class="la la-pencil" ></i> </a></td>`
if(data.id){
$(`#shift${data.id}`).html(tr);
}
else{
$('#shifts').append("<tr>"+tr+"</tr>");
}
toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
$('#shift_id').val('')
$('#shiftTitle').val('')
$('#shiftDescription').val('')
$('#from').val('')
$('#to').val('')
$('#_shiftModalLabel').html("Add Work Shift")
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
$(".d").trigger('click');
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
function editShift(workShift){
workShift = JSON.parse(workShift);
$('#_shiftModalLabel').html("Edit Work Shift")
$('#shift_id').val(workShift.id)
$('#shiftTitle').val(workShift.title)
$('#shiftDescription').val(workShift.description)
$('#shiftDescription').val(workShift.description)
document.getElementById('from').valueAsDate = new Date(workShift.from);
document.getElementById('to').valueAsDate = new Date(workShift.to);
}
function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};
$.map(rawJson, function (n, i) {
model[n['name']] = n['value'];
});
return model;
}
</script>
Zerion Mini Shell 1.0