cmsmanage/rentals/templates/rentals/lockers.dj.html

152 lines
5.4 KiB
HTML

{% extends "base.dj.html" %}
{% load static %}
{% load widget_tweaks %}
{% block title %}Lockers Index{% endblock %}
{% block admin_link %}
{% url 'admin:app_list' 'rentals' %}
{% endblock %}
{% block content %}
<style>
.locker-bank {
text-align: center;
}
.lockers {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
justify-content: center;
}
.locker {
display: grid;
background-color: #333333;
border-radius: 0.4rem;
padding: 0.7rem;
gap: 0.5rem;
}
.locker .door {
background-color: hsl(24, 100%, 25%);
border: 0.2rem solid black;
border-radius: 0.5rem;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: lightgray;
}
.locker .door[data-available="False"] {
background-color: hsl(24, 15%, 25%);
;
}
.form-floating .select2-container .select2-selection {
height: 3.5em;
padding: 1.625rem .25rem;
}
.form-floating .select2-container .select2-selection .select2-selection__rendered {
padding-right: 0.25rem;
}
</style>
{% for bank, units in locker_banks.items %}
<div class="locker-bank" data-bank="{{ bank.slug }}">
<h2>{{ bank.name }}</h2>
<div>{{ bank.location }}</div>
<div class="lockers">
{% for unit, lockers in units.items %}
<div class="locker"
style="grid-template-columns: repeat({{ unit.columns }}, minmax(7rem, 8.5rem))">
{% for locker_form in lockers %}
<div class="dropdown"
style="grid-row-start: {{ locker_form.instance.row|add:'1' }};
grid-column-start: {{ locker_form.instance.column|add:'1' }}">
<span class="door {{ perms.rentals.view_lockerinfo|yesno:"btn dropdown-toggle," }}"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-haspopup="true"
aria-expanded="false"
data-available="{{ locker_form.instance.available }}">
<h3 class="locker-address mb-0">{{ locker_form.instance.address }}</h3>
<div class="locker-status text-wrap">
{% if locker_form.instance.renter is not None %}
{% if perms.rentals.view_lockerinfo %}
{{ locker_form.instance.renter }}
{% else %}
Occupied
{% endif %}
{% elif locker_form.instance.reserved %}
Reserved
{% else %}
Empty
{% endif %}
</div>
</span>
{% if perms.rentals.view_lockerinfo %}
<div class="dropdown-menu">
<div class="dropdown-header">{{ locker_form.instance }}</div>
<form class="p-2"
action="{% url 'rentals:locker' locker_form.instance.id %}"
method="post">
{% csrf_token %}
<fieldset {{ perms.rentals.change_lockerinfo|yesno:",disabled" }}>
{% for field in locker_form.visible_fields %}
<div class="mb-3">
{% if field.widget_type == 'checkbox' %}
{% render_field field class+="btn-check" %}
{{ field|add_label_class:"btn btn-outline-primary" }}
{% else %}
<div class="form-floating">
{% render_field field class+="form-control" %}
{{ field.label_tag }}
</div>
{% endif %}
{{ field.errors }}
{% if field.help_text %}<p class="form-text">{{ field.help_text|safe }}</p>{% endif %}
</div>
{% endfor %}
</fieldset>
{% if perms.rentals.change_lockerinfo %}
{% for hidden in locker_form.hidden_fields %}{{ hidden }}{% endfor %}
<input class="btn btn-primary" type="submit" value="Submit">
{% endif %}
</form>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% endblock %}
{% block footer %}
<script type="text/javascript"
src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script>
// reset form when dropdown menu is closed
document.addEventListener('hide.bs.dropdown', (e) => {
e.target.parentElement.querySelector('.dropdown-menu form').reset();
});
// Set select2 parent element to the dropdown menu, to prevent bootstrap from
// hiding the menu when the select2 box is selected
document.addEventListener('show.bs.dropdown', (e) => {
let menu = $(e.target.parentElement).find('.dropdown-menu');
let select = menu.find('[data-autocomplete-light-function="select2"]');
let options = select.data('select2').options.options;
options.dropdownParent = menu;
select.select2(options);
});
</script>
{{ form_media }}
{% endblock %}