mirror of
https://codeberg.org/catask-org/catask.git
synced 2025-04-19 13:23:41 -05:00
77 lines
3.5 KiB
HTML
77 lines
3.5 KiB
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-3 mt-3 alert-placeholder" 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 %}Anonymous{% endif %}</h5>
|
|
<h6 class="card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h6>
|
|
</div>
|
|
<div class="card-text markdown-content">{{ question.content | render_markdown }}</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<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">
|
|
<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
|
|
<span class="visually-hidden" role="status">Loading...</span>
|
|
Answer
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#question-{{ question.id }}-modal">Delete</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<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>Are you sure you want to delete this question?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" 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>
|
|
{% endfor %}
|
|
{% else %}
|
|
<h2 class="text-center mt-5">Inbox is currently empty.</h2>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
|
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
|
|
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 %}
|