Add worklog form fields and enhance templates for better data handling
- Introduced worklog form fields for start and end timestamps, contact, work item, completion status, follow-up, analysis, and notes. - Updated worklog.html to include a save button and improved layout. - Enhanced datalist.js for dynamic data binding between input fields and datalists. - Refactored inventory.html and user.html for consistency and readability. - Added form.html template for future use.
This commit is contained in:
Yaro Kasear
parent
189f73b7c2
commit
795b23fbae
8 changed files with 265 additions and 172 deletions
|
|
@ -6,125 +6,115 @@
|
|||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('index') }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
|
||||
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('index') }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
|
||||
</svg>
|
||||
</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('main.list_users') }}">Users</a></li>
|
||||
<li class="breadcrumb-item active">{{ user.full_name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('main.list_users') }}">Users</a></li>
|
||||
<li class="breadcrumb-item active">{{ user.full_name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<form action="POST">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label for="lastName" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}">
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="firstName" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label for="supervisor" class="form-label">Supervisor</label>
|
||||
<input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
|
||||
value="{{ user.supervisor.full_name }}">
|
||||
<input type="hidden" id="supervisorId">
|
||||
<datalist id="supervisorList">
|
||||
{% for supervisor in users %}
|
||||
<option data-id="{{ supervisor.id }}" value="{{ supervisor.full_name }}"></option>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="location" class="form-label">Location</label>
|
||||
<input list="locationList" id="location" name="locationName" class="form-control"
|
||||
value="{{ user.location.full_name }}">
|
||||
<input type="hidden" id="locationId">
|
||||
<datalist id="locationList">
|
||||
{% for location in rooms %}
|
||||
<option data-id="{{ location.id }}" value="{{ location.full_name }}"></option>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-6">
|
||||
<input type="checkbox" class="form-check-input" id="activeCheck" {% if user.active %}checked{% endif %}>
|
||||
<label for="activeCheck" class="form-check-label">Active</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="checkbox" class="form-check-input" id="staffCheck" {% if user.staff %}checked{% endif %}>
|
||||
<label for="staffCheck" class="form-check-label">Staff</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row mt-3">
|
||||
{% if inventory_rows %}
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
{{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if worklog_rows %}
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
{{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="container">
|
||||
<form action="POST">
|
||||
<div class="row">
|
||||
{% if inventory_pagination['total_pages'] > 1 %}
|
||||
<div class="col-6">
|
||||
{{ tables.render_pagination(
|
||||
page=inventory_pagination['page'],
|
||||
has_prev=inventory_pagination['has_prev'],
|
||||
has_next=inventory_pagination['has_next'],
|
||||
total_pages=inventory_pagination['total_pages'],
|
||||
endpoint='main.user',
|
||||
page_variable='asset_page',
|
||||
extra_args={'id': user.id, 'worklog_page': worklog_page}
|
||||
) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if worklog_pagination['total_pages'] > 1 %}
|
||||
<div class="col-6">
|
||||
{{ tables.render_pagination(
|
||||
page=worklog_pagination['page'],
|
||||
has_prev=worklog_pagination['has_prev'],
|
||||
has_next=worklog_pagination['has_next'],
|
||||
total_pages=worklog_pagination['total_pages'],
|
||||
endpoint='main.user',
|
||||
page_variable='worklog_page',
|
||||
extra_args={'id': user.id, 'worklog_page': worklog_page}
|
||||
) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
<div class="col-6">
|
||||
<label for="lastName" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}">
|
||||
</div>
|
||||
|
||||
{% block script %}
|
||||
document.getElementById('supervisor').addEventListener('input', function() {
|
||||
const input = this.value;
|
||||
const options = document.querySelectorAll('#supervisorList option');
|
||||
let foundId = '';
|
||||
options.forEach(option => {
|
||||
if (option.value === input) {
|
||||
foundId = option.dataset.id;
|
||||
}
|
||||
})
|
||||
document.getElementById('supervisorId').value = foundId;
|
||||
});
|
||||
<div class="col-6">
|
||||
<label for="firstName" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label for="supervisor" class="form-label">Supervisor</label>
|
||||
<input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
|
||||
value="{{ user.supervisor.full_name }}" data-datalist-bind="#supervisorList"
|
||||
data-hidden-target="#supervisorId">
|
||||
<input type="hidden" id="supervisorId">
|
||||
<datalist id="supervisorList">
|
||||
{% for supervisor in users %}
|
||||
<option data-id="{{ supervisor.id }}" value="{{ supervisor.full_name }}"></option>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="location" class="form-label">Location</label>
|
||||
<input list="locationList" id="location" name="locationName" class="form-control"
|
||||
value="{{ user.location.full_name }}" data-datalist-bind="#locationList"
|
||||
data-hidden-target="#locationId">
|
||||
<input type="hidden" id="locationId">
|
||||
<datalist id="locationList">
|
||||
{% for location in rooms %}
|
||||
<option data-id="{{ location.id }}" value="{{ location.full_name }}"></option>
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-6">
|
||||
<input type="checkbox" class="form-check-input" id="activeCheck" {% if user.active %}checked{% endif %}>
|
||||
<label for="activeCheck" class="form-check-label">Active</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="checkbox" class="form-check-input" id="staffCheck" {% if user.staff %}checked{% endif %}>
|
||||
<label for="staffCheck" class="form-check-label">Staff</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row mt-3">
|
||||
{% if inventory_rows %}
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
{{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if worklog_rows %}
|
||||
<div class="col-6">
|
||||
<div class="row">
|
||||
{{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
{% if inventory_pagination['total_pages'] > 1 %}
|
||||
<div class="col-6">
|
||||
{{ tables.render_pagination(
|
||||
page=inventory_pagination['page'],
|
||||
has_prev=inventory_pagination['has_prev'],
|
||||
has_next=inventory_pagination['has_next'],
|
||||
total_pages=inventory_pagination['total_pages'],
|
||||
endpoint='main.user',
|
||||
page_variable='asset_page',
|
||||
extra_args={'id': user.id, 'worklog_page': worklog_page}
|
||||
) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if worklog_pagination['total_pages'] > 1 %}
|
||||
<div class="col-6">
|
||||
{{ tables.render_pagination(
|
||||
page=worklog_pagination['page'],
|
||||
has_prev=worklog_pagination['has_prev'],
|
||||
has_next=worklog_pagination['has_next'],
|
||||
total_pages=worklog_pagination['total_pages'],
|
||||
endpoint='main.user',
|
||||
page_variable='worklog_page',
|
||||
extra_args={'id': user.id, 'worklog_page': worklog_page}
|
||||
) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue