catask/templates/inbox.html

{% extends 'base.html' %}
{% block title %}Inbox ({{ len(questions) }}){% endblock %}
{% set inboxLink = 'active' %}
{% block content %}
{% if questions != [] %}
{% for question in questions %}
<div class="card mb-2 mt-2 alert-placeholder" id="question-{{ question.id }}">
	<div class="card-body">
		<div class="d-flex justify-content-between align-items-center">
			<h5 class="card-title mt-0">{% if question.from_who %}{{ question.from_who }}{% else %}Anonymous{% endif %}</h5>
			<h6 class="card-subtitle fw-light text-body-secondary">{{ formatRelativeTime(str(question.creation_date)) }}</h6>
		</div>
		<p>{{ question.content }}</p>
		<form hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">
			<div class="form-group d-grid gap-2">
				<textarea class="form-control" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea>
				<button type="submit" class="btn btn-primary">Answer</button>
				<button type="button" class="btn btn-outline-danger" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Delete</button>
			</div>
		</form>
	</div>
</div>
{% endfor %}
{% else %}
<h2 class="text-center mt-5">Inbox is currently empty.</h2>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
	const appendAlert = (elementId, message, type) => {
		const alertPlaceholder = document.getElementById(elementId);
		const alertHtml = `
		<div class="alert alert-${type} alert-dismissible" role="alert">
		<div>${message}</div>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		`;

		alertPlaceholder.outerHTML = alertHtml;
	}

	document.addEventListener('htmx:afterRequest', function(event) {
		const jsonResponse = event.detail.xhr.response;
		if (jsonResponse) {
			const parsed = JSON.parse(jsonResponse);
			const msgType = event.detail.successful ? 'success' : 'error';
			const targetElementId = event.detail.target.id;
			appendAlert(targetElementId, parsed.message, msgType);
		}
	})
</script>
{% endblock %}