117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
{% extends 'includes/base.html' %}
|
|
{% load static %}
|
|
{% load gravatar %}
|
|
{% block styles %}
|
|
|
|
{% endblock styles %}
|
|
{% block content %}
|
|
<!-- End Navbar -->
|
|
<div class="card shadow-lg mx-4 card-profile-bottom">
|
|
<div class="card-body p-3">
|
|
<div class="row gx-4">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-xl position-relative">
|
|
{% if employee.employee.email %}
|
|
<img class="img-profile rounded-circle m-1" src="{% gravatar_url employee.employee.email 50 %}" alt="" />
|
|
{% else %}
|
|
<img class="img-profile rounded-circle m-1" src="{% static 'img/profile.png' %}" alt="" />
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto my-auto">
|
|
<div class="h-100">
|
|
<h5 class="mb-1">
|
|
{{ employee.employee.first_name }} {{ employee.employee.last_name }}
|
|
</h5>
|
|
<p class="mb-0 font-weight-bold text-sm">
|
|
{{ employee.job_title }}
|
|
</p>
|
|
<p class="mb-0 font-weight-bold text-sm">
|
|
{{ employee.company.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<p class="mb-0">Holdiay Request</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="holiday_request z-index-5">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 for="example-text-input" class="form-control-label">Start Date</h6>
|
|
<div class="input-group">
|
|
<input class="form-control" placeholder="Please select date" id="input_from" name="holiday_start_date" type="text" value="{{absence.start_date}}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 for="example-text-input" class="form-control-label">End Date</h6>
|
|
<div class="input-group">
|
|
<input class="form-control" placeholder="Please select date" type="text" id="input_to" name="holiday_end_date" value="{{absence.end_date}}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button class="btn btn-success mt-2 mb-2" type="button" onclick="requestHoliday()">
|
|
<span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
|
|
<span id="submitText">Request</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="mt-4 z-index-2" >
|
|
<p>Existing bookings for your department are shown below</p>
|
|
<div id='calendar-container'>
|
|
<div id='calendar'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
{% block scripts %}
|
|
<script src="{% static 'js/plugins/calendar/rome.js' %}"></script>
|
|
<script src="{% static 'js/plugins/calendar/main.js' %}"></script>
|
|
<script src="{% static 'fullcalendar/dist/index.global.js' %}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
themeSystem: 'bootstrap5',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridYear,dayGridMonth'
|
|
},
|
|
initialView: 'dayGridYear',
|
|
initialDate: "{{today}}",
|
|
navLinks: false,
|
|
editable: false,
|
|
eventLimit: true,
|
|
events: "{% url 'api:get_existing_holidays' %}?employee_id={{employee.id}}",
|
|
});
|
|
calendar.render();
|
|
});
|
|
|
|
|
|
|
|
function requestHoliday(){
|
|
document.getElementById('submitSpinner').removeAttribute('hidden')
|
|
document.getElementById('submitText').setAttribute('hidden', true)
|
|
var from = document.getElementById('input_from').value;
|
|
var to = document.getElementById('input_to').value;
|
|
postData = {'data': JSON.stringify({'employee_id': {{employee.id}}, 'from': from, 'to': to})};
|
|
console.log(postData);
|
|
}
|
|
</script>
|
|
|
|
{% endblock scripts %} |