-
In this edit_shift.html form I have 2 select fields, ‘site’ and ‘user’, with both >300 choices. This slows down the loading time of the form to +/- 12 sec. Is there an easy way to improve this? In de Django admin the admin form is lightning fast. Note: this is on my local development server.
-
Would there be better ways to select from a large nummer of choices other the a select field? EG a pop-up list?
{% extends 'base.html' %}
{% load custom_filters %}
{% block content %}
{% load static %}
{% block additional_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
{% endblock %}
<form class="form bg" method="post">
<button type="submit" class="btn btn-primary custom-button align-right">Save</button>
{% csrf_token %}
<div class="form-group">
<label for="status">Status</label>
<select class="form-select small-size select-value form-select-sm" id="status" name="status">
{% for choice in form.status.field.choices %}
<option value="{{ choice.0 }}"
{% if choice.0 == shift.status.id %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="shift_title">Title</label>
<input type="text" class="form-control form-control-sm shift-title" id="shift_title" name="shift_title"
value="{{ shift.shift_title }}">
</div>
<div class="form-group">
<label for="job">Job</label>
<select class="form-select form-select-sm small-size select-value" id="job" name="job">
{% for choice in form.job.field.choices %}
<option value="{{ choice.0 }}"
{% if choice.0 == shift.job.id %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="start_date">Start Date / {{ shift.start_date|date:'l' }}</label>
<input type="date" class="form-control form-control-sm small-size" id="start_date" name="start_date"
value="{{ shift.start_date|date:'Y-m-d' }}">
</div>
<div class="form-group">
<label for="start_time">Start Time</label>
<input type="time" class="form-control form-control-sm small-size" id="start_time" name="start_time"
value="{{ shift.start_time }}">
</div>
<div class="form-group">
<label for="end_time">End Time</label>
<input type="time" class="form-control form-control-sm small-size" id="end_time" name="end_time"
value="{{ shift.end_time }}">
</div>
<div class="form-group">
<label for="site">Site</label>
<select class="form-select form-select-sm select-value" id="site" name="site">
{% for site_instance in sites %}
<option value="{{ site_instance.id }}" data-phone="{{ site_instance.phone }}"
{% if site_instance.id == shift.site.id %}selected{% endif %}>
{{ site_instance.site_name }} <!-- Assuming the site model has a name field -->
</option>
{% endfor %}
</select>
</div>
<div class="contactdetails">
<b>Tel:</b> <span id="sitePhone">{{ shift.site.phone }}</span>
</div>
<div class="form-group">
<label for="user">User</label>
<select class="form-select form-select-sm select-value" id="user" name="user">
<option value="" {% if not shift.user %}selected{% endif %}>OPEN</option>
{% for user_instance in users %}
<option value="{{ user_instance.id }}"
data-email="{{ user_instance.email }}"
data-phone="{{ user_instance.user_profile.phone }}"
{% if user_instance.id == shift.user.id %}selected{% endif %}>
{{ user_instance|user_info_with_current_job|safe }}
</option>
{% endfor %}
</select>
</div>
<div class="contactdetails">
<b>Email:</b> <a href="mailto:{{ shift.user.email }}" id="userEmail">{{ shift.user.email }}</a> /
<b>Tel:</b> <span id="userPhone">{{ shift.user.user_profile.phone }}</span>
</div>
<div class="form-group">
<label for="user_notes">User Notes</label>
<textarea class="form-control form-control-sm" id="user_notes"
name="user_notes">{{ shift.user_notes }}</textarea>
</div>
<div class="form-group">
<label for="customer_notes">Customer Notes</label>
<textarea class="form-control form-control-sm" id="customer_notes"
name="customer_notes">{{ shift.customer_notes }}</textarea>
</div>
<div class="form-group">
<label for="admin_notes">Admin Notes</label>
<textarea class="form-control form-control-sm" id="admin_notes"
name="admin_notes">{{ shift.admin_notes }}</textarea>
</div>
<!--SUBMIT BUTTON IS AT THE TOP-->
</form>
{% endblock %}