167 lines
8.3 KiB
HTML
167 lines
8.3 KiB
HTML
{% load static %}
|
|
|
|
<!-- Add Notice Modal -->
|
|
<div id="addNoticeModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeAddNoticeModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Add New Notice</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeAddNoticeModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<form id="addNoticeForm" method="POST" action="{% url 'hod_add_notice' %}" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="noticeTitle" class="form-label">Notice Title</label>
|
|
<input type="text" class="form-control" id="noticeTitle" name="title" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noticeMessage" class="form-label">Message</label>
|
|
<textarea class="form-control" id="noticeMessage" name="message" rows="5" required></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noticeFile" class="form-label">Attachment (Optional)</label>
|
|
<input type="file" class="form-control" id="noticeFile" name="file">
|
|
<small class="form-text text-muted">Upload PDF, Word, or other relevant files (max 5MB)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noticeImage" class="form-label">Image (Optional)</label>
|
|
<input type="file" class="form-control" id="noticeImage" name="image" accept="image/*">
|
|
<small class="form-text text-muted">Upload an image if relevant to the notice</small>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn btn-secondary" onclick="closeAddNoticeModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Post Notice</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Notice Modal -->
|
|
<div id="viewNoticeModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeViewNoticeModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 id="viewNoticeTitle" style="margin: 0; font-size: 18px;">Notice Title</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeViewNoticeModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<div id="viewNoticeImageContainer" style="text-align: center; margin-bottom: 15px; display: none;">
|
|
<img id="viewNoticeImage" src="" alt="Notice Image" style="max-width: 100%; max-height: 300px; border-radius: 4px;">
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="mb-2">Details</h6>
|
|
<p id="viewNoticeMessage" style="white-space: pre-wrap;"></p>
|
|
</div>
|
|
|
|
<div id="viewNoticeFileContainer" style="margin-top: 15px; display: none;">
|
|
<h6 class="mb-2">Attachment</h6>
|
|
<a id="viewNoticeFile" href="" target="_blank" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-download me-1"></i> Download Attachment
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-3 text-muted">
|
|
<small>Posted: <span id="viewNoticeDate"></span></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Notice Confirmation Modal -->
|
|
<div id="deleteNoticeModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeDeleteNoticeModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Delete Notice</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeDeleteNoticeModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<p style="margin-bottom: 15px;">Are you sure you want to delete this notice? This action cannot be undone.</p>
|
|
<form id="deleteNoticeForm" method="POST">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="deleteNoticeId" name="notice_id">
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn btn-secondary" onclick="closeDeleteNoticeModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add Notice Modal Functions
|
|
function openAddNoticeModal() {
|
|
document.getElementById('addNoticeModal').style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeAddNoticeModal() {
|
|
document.getElementById('addNoticeModal').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
document.getElementById('addNoticeForm').reset();
|
|
}
|
|
|
|
// View Notice Modal Functions
|
|
function viewNotice(noticeId) {
|
|
// Fetch notice details from the server
|
|
fetch(`/app/notice/${noticeId}/`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const notice = data.notice;
|
|
|
|
// Set notice details in the modal
|
|
document.getElementById('viewNoticeTitle').textContent = notice.title;
|
|
document.getElementById('viewNoticeMessage').textContent = notice.message;
|
|
document.getElementById('viewNoticeDate').textContent = notice.created_at;
|
|
|
|
// Handle image if available
|
|
const imageContainer = document.getElementById('viewNoticeImageContainer');
|
|
const image = document.getElementById('viewNoticeImage');
|
|
if (notice.image) {
|
|
image.src = notice.image;
|
|
imageContainer.style.display = 'block';
|
|
} else {
|
|
imageContainer.style.display = 'none';
|
|
}
|
|
|
|
// Handle file attachment if available
|
|
const fileContainer = document.getElementById('viewNoticeFileContainer');
|
|
const fileLink = document.getElementById('viewNoticeFile');
|
|
if (notice.file) {
|
|
fileLink.href = notice.file;
|
|
fileContainer.style.display = 'block';
|
|
} else {
|
|
fileContainer.style.display = 'none';
|
|
}
|
|
|
|
// Show the modal
|
|
document.getElementById('viewNoticeModal').style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
showMessageModal('Error', data.message || 'Failed to load notice details.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showMessageModal('Error', 'An error occurred while loading notice details.');
|
|
});
|
|
}
|
|
|
|
function closeViewNoticeModal() {
|
|
document.getElementById('viewNoticeModal').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Delete Notice Modal Functions
|
|
function confirmDeleteNotice(noticeId) {
|
|
document.getElementById('deleteNoticeId').value = noticeId;
|
|
document.getElementById('deleteNoticeForm').action = `/app/delete-notice/${noticeId}/`;
|
|
document.getElementById('deleteNoticeModal').style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeDeleteNoticeModal() {
|
|
document.getElementById('deleteNoticeModal').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
</script> |