ADd menu edition
This commit is contained in:
@@ -1 +1,226 @@
|
||||
<form class="sortable" action="/editmenu" method="POST" hx-post="/editmenu" hx-swap="none">
|
||||
<div id="Menu" class="list">
|
||||
|
||||
{% for item in menu.keys() %}
|
||||
{% if menu[item] is mapping %}
|
||||
|
||||
<div class="entry submenu n1" id="{{item}}" style="padding-bottom: 30px;">
|
||||
<button class="btn btn-outline-dark"> {{ item }} </button>
|
||||
<div class="list" id="{{item}}" name="{{ item }}">
|
||||
|
||||
{% for subitem in menu[item].keys() %}
|
||||
<div class="entry n1" id="{{item}}§§{{subitem}}" name="{{subitem}}">
|
||||
<button class="btn"> {{subitem}}</button>
|
||||
<input class="input-menu" id="{{item}}§§{{subitem}}" name="{{item}}§§{{subitem}}" value="{{menu[item][subitem]}}">
|
||||
<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="entry" id="{{ item }}">
|
||||
<button class="btn"> {{ item }}</button>
|
||||
<input class="input-menu" id="{{item }}" name="{{item}}" value="{{menu[item]}}">
|
||||
<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<button class="btn btn-outline-success" onclick="openForm()">+</button>
|
||||
<hr>
|
||||
<button class="btn btn-success" type="submit"> Enregistrer </button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="form-popup" id="myForm" style="display: none;">
|
||||
<form action="/action_page.php" class="form-container">
|
||||
<h3>Nouvelle entrée</h3><br>
|
||||
|
||||
<label for="nom"><b>Nom</b></label>
|
||||
<input type="text" placeholder="Nom" id="newEntry_name" required="">
|
||||
|
||||
<label for="link"><b>Lien</b></label>
|
||||
<input type="text" placeholder="un lien ou nom d'un bloc" id="newEntry_link">
|
||||
<button type="button" onclick="addEntry()" class="btn">Ajouter</button>
|
||||
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/static/vendors/Sortable/Sortable.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var elements = document.getElementsByClassName('list');
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
|
||||
new Sortable(elements[i], {
|
||||
group: 'shared',
|
||||
animation: 150,
|
||||
invertSwap: true,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65,
|
||||
onAdd: function (evt) {
|
||||
var itemEl = evt.item;
|
||||
console.log(itemEl.parentElement.id);
|
||||
parentid = itemEl.parentElement.id;
|
||||
if ( parentid === "Menu" ){
|
||||
itemEl.setAttribute("id", itemEl.getAttribute("name"));
|
||||
for (child of itemEl.children){
|
||||
nodeName= child.nodeName;
|
||||
if ( nodeName === "INPUT"){
|
||||
child.setAttribute("name", itemEl.getAttribute("name"));
|
||||
child.setAttribute("id", itemEl.getAttribute("name"));
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
|
||||
for (child of itemEl.children){
|
||||
nodeName= child.nodeName;
|
||||
if ( nodeName === "INPUT"){
|
||||
console.log(child.nodeName);
|
||||
child.setAttribute("name", itemEl.id);
|
||||
child.setAttribute("id", itemEl.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
document.ondrop = function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var menu_entry = document.getElementsByClassName('input-menu');
|
||||
|
||||
for (var i = 0; i < menu_entry.length; i++) {
|
||||
parentElement = menu_entry[i].parentElement;
|
||||
menu_entry[i].setAttribute("name", parentElement.id);
|
||||
menu_entry[i].setAttribute("id", parentElement.id);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteItem(e){
|
||||
e.parentElement.remove()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.entry {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* The popup form - hidden by default */
|
||||
.form-popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 20%;
|
||||
right: 50%;
|
||||
opacity: 1;
|
||||
background-color: white;
|
||||
border: 3px solid #f1f1f1;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Add styles to the form container */
|
||||
.form-container {
|
||||
max-width: 300px;
|
||||
padding:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* Full-width input fields */
|
||||
.form-container input[type=text], .form-container{
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin: 5px 0 22px 0;
|
||||
border: none;
|
||||
background: #fff;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* When the inputs get focus, do something */
|
||||
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
|
||||
background-color: #ddd;
|
||||
outline: 1px;
|
||||
}
|
||||
|
||||
/* Set a style for the submit/login button */
|
||||
.form-container .btn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 20px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align :center;
|
||||
width: 40%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Add a red background color to the cancel button */
|
||||
.form-container .cancel {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* Add some hover effects to buttons */
|
||||
.form-container .btn:hover, .open-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function openForm() {
|
||||
document.getElementById("myForm").style.display = "block";
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
document.getElementById("myForm").style.display = "none";
|
||||
}
|
||||
|
||||
function addEntry()
|
||||
{
|
||||
var menu = document.getElementById("Menu");
|
||||
var entry_name = document.getElementById("newEntry_name").value;
|
||||
var entry_link = document.getElementById("newEntry_link").value;
|
||||
console.log(entry_name);
|
||||
console.log(entry_link);
|
||||
|
||||
// Create menu button
|
||||
new_entry_btn = document.createElement("button");
|
||||
new_entry_btn.setAttribute("class", "btn");
|
||||
text_button = document.createTextNode(entry_name);
|
||||
new_entry_btn.appendChild(text_button);
|
||||
|
||||
// Create input
|
||||
new_entry_input = document.createElement("input");
|
||||
text_link = document.createTextNode(entry_link);
|
||||
new_entry_input.setAttribute("id", entry_name);
|
||||
new_entry_input.setAttribute("name", entry_name);
|
||||
new_entry_input.setAttribute("class", "input-menu");
|
||||
new_entry_input.setAttribute("value", text_link.textContent);
|
||||
|
||||
// Create menu entry
|
||||
new_menu_entry = document.createElement("div");
|
||||
new_menu_entry.setAttribute("class", "entry");
|
||||
new_menu_entry.setAttribute("id", entry_name);
|
||||
new_menu_entry.appendChild(new_entry_btn);
|
||||
new_menu_entry.appendChild(new_entry_input);
|
||||
|
||||
|
||||
menu.appendChild(new_menu_entry);
|
||||
|
||||
|
||||
document.getElementById("myForm").style.display = "none";
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user