2248237c79
- Add _() translation function to add_tablet.html, add_user.html, loan_tablet.html - Add _() translation function to add_non_loanable_device.html, edit_non_loanable_device.html - Add _() translation function to history.html, non_loanable_devices.html, project_management.html - Update app.py to use cookie-based language persistence with 1-year expiry - Add /set_language endpoint to handle language switching with cookie + session - Update language switcher in base.html to use new endpoint - Set Spanish (es) as default language for internal app - Import make_response and session from Flask
78 lines
3 KiB
HTML
78 lines
3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<h2>{{ _('Loan Tablet') }}</h2>
|
|
<form method="POST" action="/loan_tablet">
|
|
<!-- Tablet Selection with Search -->
|
|
<div class="form-group">
|
|
<label for="tablet_id">{{ _('Tablet') }}:</label>
|
|
<input type="text" id="tablet_search" class="search-input"
|
|
placeholder="{{ _('Search tablets (brand, model, or serial)...') }}"
|
|
onkeyup="filterDropdown('tablet_search', 'tablet_id')">
|
|
<select id="tablet_id" name="tablet_id" required size="5">
|
|
<option value="">{{ _('Select a tablet') }}</option>
|
|
{% for tablet in available_tablets %}
|
|
<option value="{{ tablet.id }}"
|
|
data-search="{{ tablet.brand|lower }} {{ tablet.model|lower }} {{ tablet.serial_number|lower }}">
|
|
{{ tablet.brand }} {{ tablet.model }} ({{ tablet.serial_number }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- User Selection with Search -->
|
|
<div class="form-group">
|
|
<label for="user_id">{{ _('User') }}:</label>
|
|
<input type="text" id="user_search" class="search-input"
|
|
placeholder="{{ _('Search users (name or ID)...') }}"
|
|
onkeyup="filterDropdown('user_search', 'user_id')">
|
|
<select id="user_id" name="user_id" required size="5">
|
|
<option value="">{{ _('Select a user') }}</option>
|
|
{% for user in users %}
|
|
<option value="{{ user.id }}"
|
|
data-search="{{ user.name|lower }} {{ user.identification|lower }}">
|
|
{{ user.name }} ({{ user.identification }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<button type="submit" class="btn">{{ _('Loan Tablet') }}</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
function filterDropdown(searchId, selectId) {
|
|
const search = document.getElementById(searchId).value.toLowerCase();
|
|
const select = document.getElementById(selectId);
|
|
const options = select.options;
|
|
|
|
for (let i = 1; i < options.length; i++) {
|
|
const searchText = options[i].getAttribute('data-search') || '';
|
|
options[i].style.display = searchText.includes(search) ? '' : 'none';
|
|
}
|
|
|
|
// Show first visible option if search is empty, otherwise keep selection
|
|
if (search === '') {
|
|
select.selectedIndex = 0;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 5px;
|
|
}
|
|
select[size] {
|
|
width: 100%;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
{% endblock %}
|