103 lines
No EOL
3.3 KiB
Twig
103 lines
No EOL
3.3 KiB
Twig
{% extends "template.twig" %}
|
||
|
||
{% block title %}Редактирование меню{% endblock %}
|
||
{% block head %}
|
||
{{ parent() }}
|
||
<style type="text/css">
|
||
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<b>{{user.login}}</b>, вы редактируете меню. <a href="/">На главную</a>
|
||
<hr>
|
||
<b>Меню:</b>
|
||
<div id="menuHolder">
|
||
{% if menu %}
|
||
{% for item in menu %}
|
||
<div>
|
||
<input type="text" name="url" value="{{item.url}}">
|
||
<input type="text" name="name" value="{{item.name}}">
|
||
<button class="removeItemBtn">X</button>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<hr>
|
||
<div>
|
||
<input class="inputData" type="text" name="url" placeholder="Ссылка">
|
||
<input class="inputData" type="text" name="name" placeholder="Название">
|
||
<button id="addItemBtn">+</button>
|
||
</div>
|
||
<button id="saveBtn">Сохранить</button>
|
||
|
||
<script>
|
||
let menu = [];
|
||
|
||
function updateDeleteBtns() {
|
||
document.querySelectorAll('.removeItemBtn').forEach(e => e.onclick = function() {
|
||
let item = this.parentNode;
|
||
let index = menu.indexOf(item);
|
||
menu.splice(index, 1);
|
||
item.remove();
|
||
});
|
||
}
|
||
|
||
function init() {
|
||
let addItemBtn = document.getElementById('addItemBtn');
|
||
let saveBtn = document.getElementById('saveBtn');
|
||
let menuHolder = document.getElementById('menuHolder');
|
||
|
||
let children = menuHolder.children;
|
||
for (let i = 0; i < children.length; i++) {
|
||
let child = children[i];
|
||
let url = child.children[0].value;
|
||
let name = child.children[1].value;
|
||
menu.push({url, name});
|
||
}
|
||
|
||
addItemBtn.addEventListener('click', function() {
|
||
let url = document.querySelector('input.inputData[name="url"]').value;
|
||
let name = document.querySelector('input.inputData[name="name"]').value;
|
||
let item = {
|
||
url: url,
|
||
name: name
|
||
};
|
||
menu.push(item);
|
||
let newItem = document.createElement('div');
|
||
newItem.innerHTML = '<input type="text" name="url" value="' + url + '"><input type="text" name="name" value="' + name + '"><button class="removeItemBtn">X</button>';
|
||
menuHolder.appendChild(newItem);
|
||
document.querySelector('input.inputData[name="url"]').value = '';
|
||
document.querySelector('input.inputData[name="name"]').value = '';
|
||
|
||
updateDeleteBtns();
|
||
});
|
||
|
||
saveBtn.addEventListener('click', async function() {
|
||
let data = {
|
||
menu: menu
|
||
};
|
||
let response = await fetch('/editMenu', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(data)
|
||
});
|
||
let result = await response.json();
|
||
if (result.code == 200) {
|
||
alert('Меню сохранено');
|
||
location.reload();
|
||
} else {
|
||
alert(`Ошибка ${result.code}: ${result.error}`);
|
||
}
|
||
console.log(result);
|
||
});
|
||
|
||
updateDeleteBtns();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
</script>
|
||
{% endblock %} |