152 lines
5.4 KiB
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 %}
|