97 lines
3.8 KiB
HTML
97 lines
3.8 KiB
HTML
|
|
{% extends 'base.html' %}
|
|
{% from 'macros.html' import render_selectable_table, render_pagination, render_filter_field, render_date_filter_field, render_collapsible_section, render_selectable_sortable_table_with_dict_headers %}
|
|
|
|
{% block title %}Assets{% endblock %}
|
|
|
|
{% block content_title %}Assets{% endblock %}
|
|
{% block content_description %}View Assets{% endblock %}
|
|
{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Filter Form -->
|
|
{% set filter_form %}
|
|
<form method="GET" action="{{ url_for('interaction_bp.assets') }}">
|
|
{{ render_filter_field('type', 'Type', filter_options['type'], filters.get('type', [])) }}
|
|
{{ render_filter_field('file_type', 'Bestandstype', filter_options['file_type'], filters.get('file_type', [])) }}
|
|
|
|
<button type="submit" class="btn btn-primary">Apply Filters</button>
|
|
</form>
|
|
{% endset %}
|
|
|
|
{{ render_collapsible_section('Filter', 'Filter Options', filter_form) }}
|
|
|
|
<div class="form-group mt-3">
|
|
<form method="POST" action="{{ url_for('interaction_bp.handle_asset_selection') }}" id="assetsForm">
|
|
<!-- Assets Table -->
|
|
{{ render_selectable_sortable_table_with_dict_headers(
|
|
headers=[
|
|
{"text": "ID", "sort": "id"},
|
|
{"text": "Naam", "sort": "name"},
|
|
{"text": "Type", "sort": "type"},
|
|
{"text": "Type Versie", "sort": "type_version"},
|
|
{"text": "Bestandstype", "sort": "file_type"},
|
|
{"text": "Laatst Gebruikt", "sort": "last_used_at"}
|
|
],
|
|
rows=rows,
|
|
selectable=True,
|
|
id="assetsTable",
|
|
sort_by=sort_by,
|
|
sort_order=sort_order
|
|
) }}
|
|
<div class="form-group mt-3 d-flex justify-content-between">
|
|
<div>
|
|
<button type="submit" name="action" value="edit_asset" class="btn btn-primary" onclick="return validateTableSelection('assetsForm')">Edit Asset</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content_footer %}
|
|
{{ render_pagination(pagination, 'interaction_bp.assets') }}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const table = document.getElementById('assetsTable');
|
|
const headers = table.querySelectorAll('th.sortable');
|
|
|
|
headers.forEach(header => {
|
|
header.addEventListener('click', function() {
|
|
const sortBy = this.dataset.sort;
|
|
let sortOrder = 'asc';
|
|
|
|
if (this.querySelector('.fa-sort-up')) {
|
|
sortOrder = 'desc';
|
|
} else if (this.querySelector('.fa-sort-down')) {
|
|
sortOrder = 'none';
|
|
}
|
|
|
|
window.location.href = updateQueryStringParameter(window.location.href, 'sort_by', sortBy);
|
|
window.location.href = updateQueryStringParameter(window.location.href, 'sort_order', sortOrder);
|
|
});
|
|
});
|
|
|
|
function updateQueryStringParameter(uri, key, value) {
|
|
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
|
|
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
|
|
if (uri.match(re)) {
|
|
return uri.replace(re, '$1' + key + "=" + value + '$2');
|
|
}
|
|
else {
|
|
return uri + separator + key + "=" + value;
|
|
}
|
|
}
|
|
|
|
table.addEventListener('change', function(event) {
|
|
if (event.target.type === 'radio') {
|
|
var selectedRow = event.target.closest('tr');
|
|
var assetId = selectedRow.cells[1].textContent;
|
|
console.log('Selected Asset ID:', assetId);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |