106 lines
No EOL
3 KiB
Twig
106 lines
No EOL
3 KiB
Twig
{% extends "template.twig" %}
|
|
|
|
{% block title %}Главная страница{% endblock %}
|
|
{% block head %}
|
|
{{ parent() }}
|
|
<style>
|
|
#imageDrop {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
height: 5rem;
|
|
border: 0.2rem dashed gray;
|
|
border-radius: 1rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
Привет, {{user.login}}! <a href="/logout">Выйти</a>
|
|
<hr>
|
|
<b>Меню:</b>
|
|
{% if menu %}
|
|
<ul>
|
|
{% for item in menu %}
|
|
<li><a href="{{item.url}}">{{item.name}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p>Пусто</p>
|
|
{% endif %}
|
|
<hr>
|
|
<div id="imageDrop">
|
|
Загрузить изображение
|
|
</div>
|
|
<hr>
|
|
<b>Действия:</b>
|
|
<ul>
|
|
<li><a href="/editMenu">Изменить меню</a></li>
|
|
<li><a href="/lookupTables">Просмотреть данные таблиц</a></li>
|
|
<li><a href="/gallery">Галерея</a></li>
|
|
<li><a href="/search">Поиск</a></li>
|
|
<hr>
|
|
<li><a href="/import">Импортировать данные</a></li>
|
|
<li><a href="/export" download>Экспортировать данные</a></li>
|
|
</ul>
|
|
<hr>
|
|
<b>Общая галерея:</b>
|
|
<div class="gallery">
|
|
{% for image in gallery %}
|
|
<a href="image/{{image.id}}">
|
|
<img src="/images?filename={{image.filename}}" alt="{{image.filename}}">
|
|
</a>
|
|
{% else %}
|
|
<p>Пусто</p>
|
|
{% endfor %}
|
|
</div>
|
|
</body>
|
|
<script>
|
|
// dom loaded listener
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// create a drop zone
|
|
let dropZone = document.getElementById("imageDrop");
|
|
// add event listeners
|
|
dropZone.addEventListener("dragover", function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
}, false);
|
|
dropZone.addEventListener("dragleave", function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
}, false);
|
|
dropZone.addEventListener("drop", async function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
// get the file
|
|
let file = e.dataTransfer.files[0];
|
|
// create a form data
|
|
let formData = new FormData();
|
|
// append the file
|
|
formData.append("file", file);
|
|
try {
|
|
// upload image with fetch
|
|
const response = await fetch("/uploadImage", {
|
|
method: "POST",
|
|
body: formData
|
|
});
|
|
// get the response
|
|
const data = await response.json();
|
|
if (data.code == 200) {
|
|
location.href = "/gallery";
|
|
} else {
|
|
alert(data.error);
|
|
}
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
}, false);
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |