ske087/digiserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated upload functions

Browse Source
This commit is contained in:
Scheianu Ionut
2025-05-15 11:23:49 +03:00
parent de7e234da1
commit ebb9bf4583
11 changed files with 107 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
templates/upload_content.html
View File

@@ -15,22 +15,24 @@
.dark-mode label, .dark-mode th, .dark-mode td {
color: #ffffff;
}
.popup-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 10px;
display: none;
z-index: 1000;
}
.logo {
max-height: 100px;
margin-right: 20px;
}
/* Modal styling for dark mode */
.modal-content.dark-mode {
background-color: #1e1e1e;
color: #ffffff;
}
.modal-header.dark-mode {
border-bottom: 1px solid #444;
}
.modal-footer.dark-mode {
border-top: 1px solid #444;
}
.progress-bar {
background-color: #007bff;
}
</style>
</head>
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
@@ -41,7 +43,7 @@
{% endif %}
<h1 class="mb-0">Upload Content</h1>
</div>
<form id="upload-form" action="{{ url_for('upload_content') }}" method="post" enctype="multipart/form-data" onsubmit="showPopupMessage('Content uploaded successfully!')">
<form id="upload-form" action="{{ url_for('upload_content') }}" method="post" enctype="multipart/form-data" onsubmit="showStatusModal()">
<input type="hidden" name="return_url" value="{{ return_url }}">
<div class="mb-3">
<label for="target_type" class="form-label">Target Type:</label>
@@ -91,13 +93,31 @@
<label for="duration" class="form-label">Duration (seconds):</label>
<input type="number" name="duration" id="duration" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
<button type="submit" id="submit-button" class="btn btn-primary">Upload</button>
</form>
<a href="{{ return_url }}" class="btn btn-secondary mt-3">Back</a>
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
</div>
<div id="popup-message" class="popup-message"></div>
<!-- Modal for Status Updates -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content {{ 'dark-mode' if theme == 'dark' else '' }}">
<div class="modal-header {{ 'dark-mode' if theme == 'dark' else '' }}">
<h5 class="modal-title" id="statusModalLabel">Processing Files</h5>
</div>
<div class="modal-body">
<p id="status-message">Uploading and processing your files. Please wait...</p>
<div class="progress">
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="modal-footer {{ 'dark-mode' if theme == 'dark' else '' }}">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" disabled>Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script>
@@ -147,14 +167,22 @@
}
});
function showPopupMessage(message) {
const popup = document.getElementById('popup-message');
popup.textContent = message;
popup.style.display = 'block';
setTimeout(() => {
popup.style.display = 'none';
document.getElementById('upload-form').submit();
}, 5000); // Display time set to 5 seconds
function showStatusModal() {
const statusModal = new bootstrap.Modal(document.getElementById('statusModal'));
statusModal.show();
// Simulate progress updates
const progressBar = document.getElementById('progress-bar');
let progress = 0;
const interval = setInterval(() => {
progress += 10;
progressBar.style.width = `${progress}%`;
progressBar.setAttribute('aria-valuenow', progress);
if (progress >= 100) {
clearInterval(interval);
document.getElementById('status-message').textContent = 'Files uploaded and processed successfully!';
}
}, 500);
}
</script>
</body>