Agenten-Plattform/web/templates/table.html

{#-
 Agenten Plattform
	(c) 2024 Magnus Bender
		Institute of Humanities-Centered Artificial Intelligence (CHAI)
		Universitaet Hamburg
		https://www.chai.uni-hamburg.de/~bender
	source code released under the terms of GNU Public License Version 3
	https://www.gnu.org/licenses/gpl-3.0.txt
-#}
{% extends "base.html" %}
{% set title = "Messages" %}
{% macro pagination() %}
	<nav>
		<ul class="pagination justify-content-center">
			<li class="page-item {% if db_args.offset-db_args.limit < 0 %}disabled{% endif %}">
				<a class="page-link" href="?{{ pagination_link(offset=db_args.offset-db_args.limit) }}">Previous</a>
			</li>
			<li class="page-item active" aria-current="page">
				<span class="page-link">Offset: {{db_args.offset}}</span>
			</li>
			<li class="page-item">
				<a class="page-link" href="?{{ pagination_link(offset=db_args.offset+db_args.limit) }}">Next</a>
			</li>
		</ul>
	</nav>
{% endmacro %}
{% block maincontent %}

	<div class="row">
		<div class="col">
			<div class="form-check form-switch">
				<input class="form-check-input" type="checkbox" role="switch" id="autoRefresh">
				<label class="form-check-label" for="autoRefresh">Refresh for new messages</label>
			</div>
		</div>
		<div class="col">
			{{pagination()}}
		</div>
		<div class="col">
			<a href="/app/new" class="btn btn-secondary">&rarr; Add a Riddle</a>
		</div>
	</div>

	<table class="table table-striped">
		<thead>
		{% for item in db.iterate(**db_args) %}
			{% set field_names = ['id'] + item.__fields__.keys()|list %}

			{% if loop.index == 1 %}
				<tr id="row_0">
					{% for field in field_names %}
						<th>
							{% if field == 'time' %}
								<input type="text" class="value_filter" name="filter_time_before" value="{{timestamp2date(db_args.time_before)}}" class="form-control" placeholder="Before"><br />
								<input type="text" class="value_filter" name="filter_time_after" value="{{timestamp2date(db_args.time_after)}}" class="form-control" placeholder="After"><br />
							{% elif field not in ('message', 'count') %}
								<input type="text" class="value_filter" name="filter_{{field}}" value="{{db_args[field]}}" class="form-control" placeholder="Filter"><br />
							{% endif %}
							{{ field.title() }}
						</th>
					{% endfor %}
				</tr>
				</thead><tbody>
			{% endif %}	

			<tr id="row_{{loop.index}}">
			{% set row_index = loop.index %}
			{% for field in field_names %}
				{% if field == "message" %}
					<td>
						<button type="button" class="btn btn-outline-secondary btn-outline" data-bs-toggle="modal" data-bs-target="#row_message_{{row_index}}">
							Show Message
						</button>
						<div class="modal fade" id="row_message_{{row_index}}" tabindex="-1" aria-hidden="true">
							<div class="modal-dialog modal-lg">
								<div class="modal-content">
									<div class="modal-header">
										<h1 class="modal-title fs-5">Content of Message</h1>
										<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
									</div>
									<div class="modal-body">
										<pre id="row_message_raw_{{row_index}}">{{ item[field].model_dump_json(indent=2)|string }}</pre>
										<button class="btn btn-warning send_message_again" idx="{{row_index}}">Send Again</button>
							   		</div>
								</div>
							</div>
						</div>
					</td>	
				{% elif field == "id" %}
					<td>{{ item.message.id }}</td>
				{% elif field == "time" %}
					<td ts="item[field]">{{ timestamp2date(item[field]) }}</td>	
				{% else %}
					<td>{{ item[field] }}</td>	
				{% endif %}
			{% endfor %}
			</tr>
		{% else %}
			<div class="alert alert-warning" role="alert">
				No items found, reset offset, limit, filter, ...!<br />
				<a class="btn btn-warning" href="/app/table">Reset</a>
			</div>
		{% endfor %}
		</tbody>
	</table>

	<div class="row">
		<div class="col">
			{{pagination()}}
		</div>
		<div class="col">
			<div class="input-group">
				<label class="input-group-text" for="total-items">Total items</label>
				<input class="form-control" id="total-items" disabled value="{{ db.len(**db_args) }}" />
			</div>
		</div>
		<div class="col">
			<div class="input-group">
				<label class="input-group-text" for="items-per-page">Items per page</label>
				<select class="form-select" id="items-per-page" onchange="window.location = this.value;">
					<option value="?{{ pagination_link(limit=5) }}" {% if db_args.limit == 5 %}selected{% endif %}>5</option>
					<option value="?{{ pagination_link(limit=10) }}" {% if db_args.limit == 10 %}selected{% endif %}>10</option>
					<option value="?{{ pagination_link(limit=25) }}" {% if db_args.limit == 25 %}selected{% endif %}>25</option>
					<option value="?{{ pagination_link(limit=100) }}" {% if db_args.limit == 100 %}selected{% endif %}>100</option>
					{% if db_args.limit not in (5, 10, 25, 100) %}
						<option value="?{{ pagination_link(limit=db_args.limit) }}" selected>{{db_args.limit}}</option>
					{% endif %}
				</select>
			</div>
		</div>
	</div>

	{% include "modal.html" %}

{% endblock %}
{% block morehead %}
	<script>
		const db_args = JSON.parse('{{ db_args|tojson }}');
		const db_total = {{ db.len(**db_args) }};
	</script>
{% endblock %}
{% block morefoot %}
	<script src="/static/table.js"></script>
{% endblock %}