296 lines
13 KiB
HTML
296 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% if object %}Edit Broadcast{% else %}Create Broadcast{% endif %} - Communications{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'communications:dashboard' %}">Communications</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'communications:broadcast_list' %}">Broadcasts</a></li>
|
|
<li class="breadcrumb-item active">{% if object %}Edit{% else %}Create{% endif %}</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
{% if object %}Edit Broadcast{% else %}Create New Broadcast{% endif %}
|
|
<small>{% if object %}{{ object.title }}{% else %}Mass Communication{% endif %}</small>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<form method="post" id="broadcast-form">
|
|
{% csrf_token %}
|
|
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Broadcast Information</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Title <span class="text-danger">*</span></label>
|
|
{{ form.title }}
|
|
{% if form.title.errors %}
|
|
<div class="text-danger">{{ form.title.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Type <span class="text-danger">*</span></label>
|
|
{{ form.type }}
|
|
{% if form.type.errors %}
|
|
<div class="text-danger">{{ form.type.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Priority <span class="text-danger">*</span></label>
|
|
{{ form.priority }}
|
|
{% if form.priority.errors %}
|
|
<div class="text-danger">{{ form.priority.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Status</label>
|
|
{{ form.status }}
|
|
{% if form.status.errors %}
|
|
<div class="text-danger">{{ form.status.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Message <span class="text-danger">*</span></label>
|
|
{{ form.message }}
|
|
{% if form.message.errors %}
|
|
<div class="text-danger">{{ form.message.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Enter the broadcast message content</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Target Audience</label>
|
|
{{ form.target_audience }}
|
|
{% if form.target_audience.errors %}
|
|
<div class="text-danger">{{ form.target_audience.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Describe who should receive this broadcast</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Scheduled At</label>
|
|
{{ form.scheduled_at }}
|
|
{% if form.scheduled_at.errors %}
|
|
<div class="text-danger">{{ form.scheduled_at.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Leave empty to send immediately</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Expires At</label>
|
|
{{ form.expires_at }}
|
|
{% if form.expires_at.errors %}
|
|
<div class="text-danger">{{ form.expires_at.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">When this broadcast should expire</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Delivery Options</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Delivery Channels</label>
|
|
{{ form.channels }}
|
|
{% if form.channels.errors %}
|
|
<div class="text-danger">{{ form.channels.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Select which channels to use for delivery</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Recipient Groups</label>
|
|
{{ form.recipient_groups }}
|
|
{% if form.recipient_groups.errors %}
|
|
<div class="text-danger">{{ form.recipient_groups.errors.0 }}</div>
|
|
{% endif %}
|
|
<div class="form-text">Select user groups to receive this broadcast</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.require_acknowledgment }}
|
|
<label class="form-check-label" for="{{ form.require_acknowledgment.id_for_label }}">
|
|
Require acknowledgment
|
|
</label>
|
|
<div class="form-text">Recipients must acknowledge receipt</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-3">
|
|
{{ form.send_to_all_users }}
|
|
<label class="form-check-label" for="{{ form.send_to_all_users.id_for_label }}">
|
|
Send to all users
|
|
</label>
|
|
<div class="form-text">Override group selection</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Form Actions</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fa fa-save me-2"></i>
|
|
{% if object %}Update Broadcast{% else %}Save Broadcast{% endif %}
|
|
</button>
|
|
|
|
<button type="submit" name="save_and_send" class="btn btn-success">
|
|
<i class="fa fa-paper-plane me-2"></i>Save & Send Now
|
|
</button>
|
|
|
|
<button type="submit" name="save_as_draft" class="btn btn-warning">
|
|
<i class="fa fa-file me-2"></i>Save as Draft
|
|
</button>
|
|
|
|
<a href="{% if object %}{% url 'communications:broadcast_detail' object.pk %}{% else %}{% url 'communications:broadcast_list' %}{% endif %}" class="btn btn-secondary">
|
|
<i class="fa fa-times me-2"></i>Cancel
|
|
</a>
|
|
|
|
{% if object %}
|
|
<hr>
|
|
<a href="{% url 'communications:broadcast_delete' object.pk %}" class="btn btn-danger">
|
|
<i class="fa fa-trash me-2"></i>Delete Broadcast
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Preview</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="message-preview" class="bg-light p-3 rounded">
|
|
<div class="text-muted">Message preview will appear here...</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
<strong>Character count:</strong> <span id="char-count">0</span>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
{% if object %}
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Broadcast Status</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Status:</td>
|
|
<td>
|
|
<span class="badge bg-{% if object.status == 'SENT' %}success{% elif object.status == 'SCHEDULED' %}warning{% elif object.status == 'DRAFT' %}secondary{% else %}danger{% endif %}">
|
|
{{ object.get_status_display }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Created:</td>
|
|
<td>{{ object.created_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
{% if object.sent_at %}
|
|
<tr>
|
|
<td class="fw-bold">Sent:</td>
|
|
<td>{{ object.sent_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<td class="fw-bold">Recipients:</td>
|
|
<td>{{ object.total_recipients|default:"0" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Update preview when message changes
|
|
$('#id_message').on('input', function() {
|
|
var message = $(this).val();
|
|
$('#message-preview').html(message ? message.replace(/\n/g, '<br>') : '<div class="text-muted">Message preview will appear here...</div>');
|
|
$('#char-count').text(message.length);
|
|
});
|
|
|
|
// Initialize preview
|
|
$('#id_message').trigger('input');
|
|
|
|
// Form validation
|
|
$('#broadcast-form').on('submit', function(e) {
|
|
var isValid = true;
|
|
var errors = [];
|
|
|
|
if (!$('#id_title').val().trim()) {
|
|
errors.push('Title is required');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!$('#id_message').val().trim()) {
|
|
errors.push('Message is required');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
toastr.error('Please correct the following errors:<br>' + errors.join('<br>'));
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|