307 lines
10 KiB
HTML
307 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Meeting Details" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* UI Variables for the KAAT-S Theme (Consistent with list_meetings.html) */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
--kaauh-gray-light: #f8f9fa;
|
|
}
|
|
|
|
/* Main Container and Card Styling */
|
|
.container {
|
|
padding: 2rem 1rem;
|
|
}
|
|
.card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
background-color: white;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.card:not(.no-hover):hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.card.no-hover:hover {
|
|
transform: none;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
|
|
/* Header Card Styling */
|
|
.card-header {
|
|
background-color: var(--kaauh-gray-light);
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
padding: 1.5rem;
|
|
border-radius: 0.75rem 0.75rem 0 0; /* Match top border radius of card */
|
|
}
|
|
.card-header h1 {
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 700;
|
|
margin: 0 0 0.5rem 0; /* Space below title */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.card-header .heroicon {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
color: var(--kaauh-teal);
|
|
}
|
|
.card-header .btn-secondary {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.card-header .btn-secondary:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
}
|
|
|
|
/* Status Badge Styling (from list_meetings.html) */
|
|
.status-badge {
|
|
font-size: 0.8rem;
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 0.4rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.7px;
|
|
}
|
|
.bg-waiting { background-color: #ffc107 !important; color: var(--kaauh-primary-text) !important;}
|
|
.bg-started { background-color: var(--kaauh-teal) !important; color: white !important;}
|
|
.bg-ended { background-color: #dc3545 !important; color: white !important;}
|
|
|
|
|
|
/* Detail Row Styling */
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1.5rem;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.detail-label {
|
|
font-weight: 600;
|
|
color: var(--kaauh-teal-dark);
|
|
min-width: 40%; /* Ensure labels align */
|
|
}
|
|
.detail-value {
|
|
text-align: right;
|
|
color: var(--kaauh-primary-text);
|
|
word-wrap: break-word; /* Long URLs or text wrap */
|
|
max-width: 60%; /* Ensure values align */
|
|
}
|
|
|
|
/* Card Title Styling within content cards */
|
|
.card h2 {
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 600;
|
|
padding: 1.5rem 1.5rem 0.75rem;
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
/* Join URL Styling */
|
|
.join-url-display {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
margin-top: 0.75rem;
|
|
word-break: break-all; /* Force long URLs to break */
|
|
}
|
|
|
|
/* Actions Styling */
|
|
.actions {
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem; /* Space between buttons */
|
|
justify-content: flex-start; /* Align buttons to the left */
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
}
|
|
.btn-danger {
|
|
background-color: #dc3545;
|
|
border-color: #dc3545;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
border-color: #bd2130;
|
|
color: white;
|
|
}
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
border-color: #6c757d;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: #5a6268;
|
|
border-color: #545b62;
|
|
color: white;
|
|
}
|
|
|
|
/* API Response Styling */
|
|
#gateway-response {
|
|
margin-top: 2rem;
|
|
}
|
|
#gateway-response .card {
|
|
border-left: 4px solid var(--kaauh-teal); /* Indicate it's different content */
|
|
}
|
|
#gateway-response pre {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-top: 0.75rem;
|
|
overflow-x: auto; /* For long JSON lines */
|
|
font-size: 0.9rem;
|
|
color: var(--kaauh-primary-text);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-4">
|
|
<div class="card no-hover">
|
|
<div class="card-header">
|
|
<h1>
|
|
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0 8.268-2.943-9.542-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
{{ meeting.topic }}
|
|
</h1>
|
|
<span class="status-badge bg-{{ meeting.status }}">
|
|
{{ meeting.status|title }}
|
|
</span>
|
|
<a href="{% url 'list_meetings' %}" class="btn btn-secondary mt-3">{% trans "Back to Meetings" %}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card no-hover">
|
|
<h2>{% trans "Meeting Information" %}</h2>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Meeting ID" %}:</div>
|
|
<div class="detail-value">{{ meeting.meeting_id }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Topic" %}:</div>
|
|
<div class="detail-value">{{ meeting.topic }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Start Time" %}:</div>
|
|
<div class="detail-value">{{ meeting.start_time|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Duration" %}:</div>
|
|
<div class="detail-value">{{ meeting.duration }} {% trans "minutes" %}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Timezone" %}:</div>
|
|
<div class="detail-value">{{ meeting.timezone|default:"UTC" }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Host Email" %}:</div>
|
|
<div class="detail-value">{{ meeting.host_email|default:"N/A" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if meeting.join_url %}
|
|
<div class="card no-hover">
|
|
<h2>{% trans "Join Information" %}</h2>
|
|
<a href="{{ meeting.join_url }}" class="btn btn-primary" target="_blank">{% trans "Join Meeting" %}</a>
|
|
{% comment %} <div class="join-url-display">
|
|
<strong>{% trans "Join URL:" %}</strong> {{ meeting.join_url }}
|
|
</div> {% endcomment %}
|
|
{% if meeting.password %}
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Password" %}: {{ meeting.password }}</div>
|
|
<div class="detail-value"></div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card no-hover">
|
|
<h2>{% trans "Settings" %}</h2>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Participant Video" %}:</div>
|
|
<div class="detail-value">{{ meeting.participant_video|yesno:"Yes,No" }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Join Before Host" %}:</div>
|
|
<div class="detail-value">{{ meeting.join_before_host|yesno:"Yes,No" }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Mute Upon Entry" %}:</div>
|
|
<div class="detail-value">{{ meeting.mute_upon_entry|yesno:"Yes,No" }}</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">{% trans "Waiting Room" %}:</div>
|
|
<div class="detail-value">{{ meeting.waiting_room|yesno:"Yes,No" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card no-hover">
|
|
<div class="actions">
|
|
{% if meeting.zoom_gateway_response %}
|
|
<a href="#" class="btn btn-secondary" onclick="toggleGateway()">{% trans "View API Response" %}</a>
|
|
{% endif %}
|
|
<a href="{% url 'update_meeting' meeting.slug %}" class="btn btn-primary">{% trans "Update Meeting" %}</a>
|
|
<form method="post" action="{% url 'delete_meeting' meeting.pk %}" style="display: inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-danger" onclick="return confirm('{% trans "Are you sure?" %}')">{% trans "Delete Meeting" %}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if meeting.zoom_gateway_response %}
|
|
{% comment %} <div id="gateway-response">
|
|
<div class="card">
|
|
<h3>{% trans "Zoom API Response" %}</h3>
|
|
<pre>{{ meeting.zoom_gateway_response|safe }}</pre>
|
|
</div>
|
|
</div> {% endcomment %}
|
|
<script>
|
|
function toggleGateway() {
|
|
const element = document.getElementById('gateway-response');
|
|
if (element.style.display === 'none' || !element.style.display) {
|
|
element.style.display = 'block';
|
|
} else {
|
|
element.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|