%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/hr/job/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/hr/job/workShift.ejs

   <% 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">&times;</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