206 lines
9.6 KiB
HTML
206 lines
9.6 KiB
HTML
{% extends BASE_TEMPLATE %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load custom_filters %}
|
|
{% block customCSS %}<!-- additional CSS -->{% endblock %}
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h3>{% trans "Manage Working Hours" %}</h3>
|
|
<form class="form"
|
|
method="post"
|
|
action=""
|
|
id="workingHoursForm"
|
|
data-action="{% if working_hours_instance %}
|
|
update
|
|
{% else %}
|
|
create
|
|
{% endif %}"
|
|
data-working-hours-id="
|
|
{% if working_hours_instance %}
|
|
{{ working_hours_instance.id }}
|
|
{% else %}
|
|
0
|
|
{% endif %}"
|
|
data-staff-user-id="{% if staff_user_id %}
|
|
{{ staff_user_id }}
|
|
{% else %}
|
|
0
|
|
{% endif %}">
|
|
{% csrf_token %}
|
|
{% if working_hours_form.staff_member %}
|
|
<div class="form-group mb-3">
|
|
<label class="form-label"
|
|
for="{{ working_hours_form.staff_member.id_for_label }}">
|
|
{% trans 'Staff Member' %}:
|
|
</label>
|
|
{{ working_hours_form.staff_member }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="form-group mb-3">
|
|
<label class="form-label"
|
|
for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
|
|
{{ working_hours_form.day_of_week|add_class:"form-select form-select-sm" }}
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label class="form-label"
|
|
for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
|
|
<div class="input-group time24hr"
|
|
id="start-timepicker"
|
|
data-target-input="nearest">
|
|
<input type="text"
|
|
class="form-control form-control-sm datetimepicker-input"
|
|
data-toggle="datetimepicker"
|
|
data-target="#start-timepicker"
|
|
name="{{ working_hours_form.start_time.name }}"
|
|
value="{{ working_hours_form.start_time.value|default:'09:00 AM' }}"
|
|
id="{{ working_hours_form.start_time.id_for_label }}">
|
|
<div class="input-group-text"
|
|
data-toggle="datetimepicker"
|
|
data-target="#start-timepicker">
|
|
<i class="far fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label class="form-label"
|
|
for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
|
|
<div class="input-group date"
|
|
id="end-timepicker"
|
|
data-target-input="nearest">
|
|
<input type="text"
|
|
class="form-control form-control-sm datetimepicker-input"
|
|
data-toggle="datetimepicker"
|
|
data-target="#end-timepicker"
|
|
name="{{ working_hours_form.end_time.name }}"
|
|
value="{{ working_hours_form.end_time.value|default:'05:00 PM' }}"
|
|
id="{{ working_hours_form.end_time.id_for_label }}">
|
|
<div class="input-group-text"
|
|
data-toggle="datetimepicker"
|
|
data-target="#end-timepicker">
|
|
<i class="far fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-sm btn-phoenix-primary">{{ button_text }}</button>
|
|
<input type="hidden"
|
|
id="addWorkingHoursUrl"
|
|
value="{% url 'appointment:add_working_hours_id' staff_user_id|default:user.id %}">
|
|
<input type="hidden"
|
|
id="updateWorkingHoursUrl"
|
|
value="{% url 'appointment:update_working_hours_id' working_hours_id|default:0 staff_user_id|default:user.id %}">
|
|
</form>
|
|
{% include 'modal/error_modal.html' %}
|
|
<div class="messages" style="margin: 20px 0">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-dismissible
|
|
{% if message.tags %}
|
|
alert-
|
|
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
|
|
danger
|
|
{% else %}
|
|
{{ message.tags }}
|
|
{% endif %}
|
|
{% endif %}"
|
|
role="alert">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block customJS %}
|
|
<!-- JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
|
|
integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
|
|
integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
|
|
integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
|
|
integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
<script type="text/javascript">
|
|
const addWorkingHoursUrl = $('#addWorkingHoursUrl').val();
|
|
const updateWorkingHoursUrl = $('#updateWorkingHoursUrl').val();
|
|
|
|
$(function () {
|
|
const startTimeInput = $('#start-timepicker input');
|
|
const endTimeInput = $('#end-timepicker input');
|
|
const startTimePicker = $('#start-timepicker');
|
|
const endTimePicker = $('#end-timepicker');
|
|
|
|
const defaultStartTime = startTimeInput.val() ? moment(startTimeInput.val(), 'hh:mm A') : moment().hour(12).minute(0);
|
|
const defaultEndTime = endTimeInput.val() ? moment(endTimeInput.val(), 'hh:mm A') : moment().hour(13).minute(0);
|
|
|
|
startTimePicker.datetimepicker({
|
|
format: 'hh:mm A',
|
|
icons: {
|
|
time: 'far fa-clock'
|
|
},
|
|
pick12HourFormat: false,
|
|
pickSeconds: false,
|
|
defaultDate: defaultStartTime
|
|
});
|
|
|
|
endTimePicker.datetimepicker({
|
|
format: 'hh:mm A',
|
|
icons: {
|
|
time: 'far fa-clock'
|
|
},
|
|
pick12HourFormat: false,
|
|
pickSeconds: false,
|
|
defaultDate: defaultEndTime
|
|
});
|
|
|
|
startTimePicker.on('change.datetimepicker', function (e) {
|
|
startTimeInput.val(e.date.format('hh:mm A'));
|
|
});
|
|
|
|
endTimePicker.on('change.datetimepicker', function (e) {
|
|
endTimeInput.val(e.date.format('hh:mm A'));
|
|
});
|
|
});
|
|
|
|
$(document).on('submit', '#workingHoursForm', function (e) {
|
|
e.preventDefault();
|
|
|
|
const form = $(this);
|
|
const action = form.data('action');
|
|
let postUrl = '';
|
|
|
|
if (action === 'create') {
|
|
postUrl = addWorkingHoursUrl;
|
|
} else if (action === 'update') {
|
|
postUrl = updateWorkingHoursUrl;
|
|
}
|
|
|
|
$.ajax({
|
|
url: postUrl,
|
|
type: 'POST',
|
|
data: form.serialize(),
|
|
success: function (response) {
|
|
if (response.success) {
|
|
window.location.href = response.redirect_url;
|
|
} else {
|
|
showErrorModal(response.message)
|
|
}
|
|
},
|
|
error: function (error) {
|
|
showErrorModal(error.responseJSON.message)
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script src="{% static 'js/modal/error_modal.js' %}"></script>
|
|
<script src="{% static 'js/js-utils.js' %}"></script>
|
|
{% endblock %}
|