Ultradesu
110 lines
4.5 KiB
HTML
110 lines
4.5 KiB
HTML
{% extends "admin/layout.html" %}
|
|
{% let active_page = "media" %}
|
|
|
|
{% block title %}{{ t.media_upload_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-head">
|
|
<h1>{{ t.media_upload_title }}</h1>
|
|
</div>
|
|
|
|
<div class="form-card">
|
|
<div style="margin-bottom:1rem;font-size:0.9rem;color:#666;">
|
|
<div><strong>{{ t.schedule_client }}:</strong> {{ client_name }}</div>
|
|
<div><strong>{{ t.schedule_date }}:</strong> {{ visit_label }}</div>
|
|
</div>
|
|
|
|
<form id="uploadForm" action="/admin/media/{{ visit_id }}/upload/submit" enctype="multipart/form-data">
|
|
<div class="field">
|
|
<label class="label">{{ t.media_choose_files }}</label>
|
|
<div class="control">
|
|
<input class="input" type="file" id="uploadFiles" name="files" multiple accept="image/*,video/*" required>
|
|
</div>
|
|
<p id="fileCount" style="font-size:0.8rem;color:#888;margin-top:0.3rem;"></p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">{{ t.media_caption }}</label>
|
|
<div class="control">
|
|
<input class="input" type="text" name="caption" placeholder="{{ t.media_caption }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress -->
|
|
<div id="uploadProgress" style="display:none;margin-bottom:1rem;">
|
|
<div style="display:flex;justify-content:space-between;font-size:0.82rem;color:#555;margin-bottom:0.3rem;">
|
|
<span id="uploadStatusText">{{ t.media_upload }}...</span>
|
|
<span id="uploadPercent">0%</span>
|
|
</div>
|
|
<div style="background:#e8e8e8;border-radius:99px;height:8px;overflow:hidden;">
|
|
<div id="uploadBar" style="height:100%;width:0%;background:linear-gradient(90deg,#6c63ff,#b06cff);border-radius:99px;transition:width 0.2s;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" id="uploadSubmit" class="button is-primary is-fullwidth">{{ t.media_upload }}</button>
|
|
</form>
|
|
|
|
<script>
|
|
(function() {
|
|
var form = document.getElementById('uploadForm');
|
|
var filesInput = document.getElementById('uploadFiles');
|
|
var fileCount = document.getElementById('fileCount');
|
|
var progress = document.getElementById('uploadProgress');
|
|
var bar = document.getElementById('uploadBar');
|
|
var percent = document.getElementById('uploadPercent');
|
|
var statusText = document.getElementById('uploadStatusText');
|
|
var submitBtn = document.getElementById('uploadSubmit');
|
|
|
|
filesInput.addEventListener('change', function() {
|
|
var n = this.files.length;
|
|
fileCount.textContent = n > 0 ? ('Выбрано файлов: ' + n) : '';
|
|
});
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
if (!filesInput.files.length) return;
|
|
|
|
var data = new FormData(form);
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
progress.style.display = 'block';
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Загрузка...';
|
|
bar.style.width = '0%';
|
|
percent.textContent = '0%';
|
|
|
|
xhr.upload.addEventListener('progress', function(ev) {
|
|
if (!ev.lengthComputable) return;
|
|
var pct = Math.round(ev.loaded / ev.total * 100);
|
|
bar.style.width = pct + '%';
|
|
percent.textContent = pct + '%';
|
|
if (pct === 100) statusText.textContent = 'Обработка...';
|
|
});
|
|
|
|
xhr.addEventListener('load', function() {
|
|
if (xhr.status >= 200 && xhr.status < 400) {
|
|
bar.style.width = '100%';
|
|
percent.textContent = '100%';
|
|
statusText.textContent = 'Готово!';
|
|
setTimeout(function() { window.location.href = xhr.responseURL || '/admin/media'; }, 300);
|
|
} else {
|
|
statusText.textContent = 'Ошибка загрузки (' + xhr.status + ')';
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '{{ t.media_upload }}';
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('error', function() {
|
|
statusText.textContent = 'Ошибка соединения';
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '{{ t.media_upload }}';
|
|
});
|
|
|
|
xhr.open('POST', form.action);
|
|
xhr.send(data);
|
|
});
|
|
})();
|
|
</script>
|
|
</div>
|
|
{% endblock %}
|