99 lines
No EOL
3.4 KiB
Twig
99 lines
No EOL
3.4 KiB
Twig
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
<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>
|
||
</body>
|
||
<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);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
</script>
|
||
</html> |