92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
<!-- html/index.html -->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.menu {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0,0,0,0.8);
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
display: none;
|
|
}
|
|
.button {
|
|
margin: 5px;
|
|
padding: 10px;
|
|
background: #3498db;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
width: 200px;
|
|
display: block;
|
|
}
|
|
.button:hover {
|
|
background: #2980b9;
|
|
}
|
|
#items {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.input-field {
|
|
margin: 10px 0;
|
|
padding: 5px;
|
|
width: 190px;
|
|
background: rgba(255,255,255,0.9);
|
|
border: none;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu" class="menu">
|
|
<h2>Verkehrssteuerung</h2>
|
|
<input type="number" id="radius" class="input-field" placeholder="Radius (Standard: 30)">
|
|
<div id="items"></div>
|
|
<button class="button" onclick="closeMenu()">Schließen</button>
|
|
</div>
|
|
<script>
|
|
window.addEventListener('message', function(event) {
|
|
const menu = document.getElementById('menu');
|
|
const itemsDiv = document.getElementById('items');
|
|
|
|
if (event.data.action === 'open') {
|
|
itemsDiv.innerHTML = '';
|
|
event.data.items.forEach(item => {
|
|
const button = document.createElement('button');
|
|
button.className = 'button';
|
|
button.textContent = item.label;
|
|
button.onclick = () => setPoint(item.model);
|
|
itemsDiv.appendChild(button);
|
|
});
|
|
menu.style.display = 'block';
|
|
} else if (event.data.action === 'close') {
|
|
menu.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
function setPoint(item) {
|
|
const radius = document.getElementById('radius').value || 30;
|
|
fetch(`https://${GetParentResourceName()}/setPoint`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
radius: radius,
|
|
item: item
|
|
})
|
|
});
|
|
closeMenu();
|
|
}
|
|
|
|
function closeMenu() {
|
|
document.getElementById('menu').style.display = 'none';
|
|
fetch(`https://${GetParentResourceName()}/closeMenu`, {
|
|
method: 'POST'
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|