catask/templates/inbox.html

{% extends 'base.html' %}
{% block title %}Inbox {% if len(questions) > 0 %}({{ len(questions) }}){% endif %}{% endblock %}
{% set inboxLink = 'active' %}
{% block additionalHeadItems %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
{% endblock %}
{% block content %}
{% if questions != [] %}
<h3 class="fs-4"><span id="question-count-inbox">{{ len(questions) }}</span> <span class="fw-light">question(s)</span></h3>
<div class="row">
	{% for question in questions %}
	<div class="col-sm-8 m-auto">
		<div class="card mb-3 mt-3 alert-placeholder question" id="question-{{ question.id }}">
			<div class="card-header">
				<div class="d-flex justify-content-between align-items-center">
					<h5 class="card-title mt-1 mb-1">
						{% if question.from_who %}
						{{ question.from_who }}
						{% else %}
						<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
						{% endif %}
					</h5>
					<h6 class="card-subtitle fw-light text-body-secondary">
						{#
							reserved for version 1.6.0 or later

							{% if question.private %}
							<span class="me-2"><i class="bi bi-lock"></i> <span class="fw-medium" data-bs-toggle="tooltip" data-bs-title="This question was asked privately">Private</span></span>
							{% endif %}
						#}
						<span data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}">{{ formatRelativeTime(str(question.creation_date)) }}</span>
					</h6>
				</div>
				<div class="card-text markdown-content">{{ question.content | render_markdown }}</div>
			</div>
			<div class="card-body">
				<form hx-trigger="click from:#answer-btn-{{ question.id }}, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">
					<div class="form-group d-sm-grid d-md-block gap-2">
						<label for="answer-{{ question.id }}" class="visually-hidden-focusable">Write your answer...</label>
						<textarea class="form-control mb-2" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea>
						<div class="d-flex flex-column flex-md-row-reverse gap-2">
							<button type="submit" class="btn btn-primary" id="answer-btn-{{ question.id }}">
								<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
								<span class="visually-hidden" role="status">Loading...</span>
								Answer
							</button>
							{% if not cfg.noDeleteConfirm %}
							<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#question-{{ question.id }}-modal">Delete</button>
							{% else %}
							<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>
							{% endif %}
						</div>
					</div>
				</form>
			</div>
		</div>
		{% if not cfg.noDeleteConfirm %}
		<div class="modal fade" id="question-{{ question.id }}-modal" tabindex="-1" aria-labelledby="q-{{ question.id }}-modal-label" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h1 class="modal-title fs-5" id="q-{{ question.id }}-modal-label">Confirmation</h1>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<p class="mb-0">Are you sure you want to delete this question?</p>
					</div>
					<div class="modal-footer flex-column flex-lg-row align-items-stretch w-100">
						<button type="button" class="btn btn-outline-secondary flex-fill" data-bs-dismiss="modal">Cancel</button>
						<button type="button" class="btn btn-danger flex-fill" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button>
					</div>
				</div>
			</div>
		</div>
		{% endif %}
	</div>
	{% endfor %}
</div>
{% else %}
<h2 class="text-center mt-5">Inbox is currently empty.</h2>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
<script>
	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

	document.addEventListener('htmx:afterRequest', function(event) {
		const jsonResponse = event.detail.xhr.response;
		if (jsonResponse) {
			const parsed = JSON.parse(jsonResponse);
			const alertType = event.detail.successful ? 'success' : 'danger';
			msgType = event.detail.successful ? parsed.message : parsed.error;
			const targetElementId = event.detail.target.id;
			if (targetElementId != "question-count") {
				document.getElementById(targetElementId).outerHTML = '';
				Toastify({
					text: msgType,
					duration: 3000,
					gravity: "top",
					position: "right",
					stopOnFocus: true,
					className: `alert alert-${alertType} shadow alert-dismissible`,
					close: true
				}).showToast();
				const questions = document.querySelectorAll('.question');
				const count = questions.length;
				document.getElementById('question-count-inbox').textContent = count;
				document.title = `Inbox (${count}) | {{ const.appName }}`;
			}
		}
	});
</script>
{% endblock %}