Yadciel
f5dd50a9f7
Introduced a new "Einstellungen" (Settings) interface with an HTML page and integrated it into the application workflow. Enhanced Lua execution handling with optional console output and improved UI updates. Adjusted installer UI to better align buttons and icons with user experience.
304 lines
9.4 KiB
HTML
304 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Toolbox</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: linear-gradient(to bottom, #1e1e2e, #28293d);
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
.header {
|
|
background: #1b1b2b;
|
|
padding: 15px 20px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
position: relative; /* Für absolute Positionierung des Buttons */
|
|
}
|
|
|
|
.options-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20px;
|
|
transform: translateY(-50%);
|
|
background: #2b2c3b;
|
|
border: none;
|
|
color: #ff79c6;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.options-button:hover {
|
|
background: #32334a;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #ff79c6;
|
|
}
|
|
.main {
|
|
flex: 1;
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: #ff79c6 #2b2c3b;
|
|
}
|
|
.main::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.main::-webkit-scrollbar-track {
|
|
background: #2b2c3b;
|
|
border-radius: 4px;
|
|
}
|
|
.main::-webkit-scrollbar-thumb {
|
|
background-color: #ff79c6;
|
|
border-radius: 4px;
|
|
border: 2px solid #2b2c3b;
|
|
}
|
|
.tool-card {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #2b2c3b;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.2s;
|
|
color: inherit; /* Vererbt die Textfarbe */
|
|
text-decoration: none; /* Entfernt die Unterstreichung */
|
|
}
|
|
|
|
.tool-card:hover {
|
|
transform: scale(1.02);
|
|
background-color: #32334a;
|
|
}
|
|
|
|
.tool-card img {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tool-info {
|
|
flex-grow: 1;
|
|
color: #ff79c6;
|
|
text-align: left;
|
|
}
|
|
|
|
.tool-info h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tool-info p {
|
|
margin: 5px 0 0;
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
}
|
|
|
|
.tool-action {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tool-action button {
|
|
background: #ff79c6;
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.tool-action button:hover {
|
|
background: #ff47b4;
|
|
}
|
|
|
|
.tool-action button.disabled {
|
|
background: #777;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tool-action button.running {
|
|
background: #ffcc00;
|
|
cursor: progress;
|
|
}
|
|
|
|
.footer {
|
|
background: #1b1b2b;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Toolbox</h1>
|
|
<button onclick="openFileSystem()" id="options-button" class="options-button">Ordner</button>
|
|
</div>
|
|
<div class="main" id="toolbox">
|
|
<!-- Tool Cards werden hier dynamisch geladen -->
|
|
</div>
|
|
<div class="footer">
|
|
<!--Schmidti.Digital © 2024-->
|
|
</div><script>
|
|
function runLuaWithId(event) {
|
|
if (event.target.tagName === 'BUTTON') {
|
|
// Falls der Button gedrückt wurde, brich die Funktion ab
|
|
return false;
|
|
}
|
|
const button = event.target;
|
|
|
|
const toolCard = button.closest('.tool-card');
|
|
if (toolCard) {
|
|
const toolId = toolCard.getAttribute('data-tool-id');
|
|
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) !== 'true') {
|
|
console.log(`Disabling button for tool ID: ${toolId}`);
|
|
saucer.exposed.run_lua(parseInt(toolId, 10));
|
|
|
|
// Button deaktivieren
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
|
|
// Speichern des Zustands im sessionStorage
|
|
sessionStorage.setItem(`toolButtonDisabled_${toolId}`, 'true');
|
|
} else {
|
|
console.log(`Button is already disabled for tool ID: ${toolId}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function test(){
|
|
saucer.exposed.debug_print();
|
|
}
|
|
|
|
function openFileSystem() {
|
|
saucer.exposed.open_file_system();
|
|
}
|
|
|
|
function reloadContent() {
|
|
const toolbox = document.getElementById('toolbox');
|
|
|
|
// Toolbox leeren
|
|
toolbox.innerHTML = '';
|
|
|
|
// Toolbox-Daten neu abrufen
|
|
saucer.exposed.getToolboxItems().then(jsonString => {
|
|
const m_toolboxItems = JSON.parse(jsonString);
|
|
|
|
m_toolboxItems.forEach(item => {
|
|
const iconSrc = item.icon.startsWith('data:image/png;base64,')
|
|
? item.icon
|
|
: `data:image/png;base64,${item.icon}`;
|
|
|
|
const toolCardHTML = `
|
|
<a href="${item.url}" class="tool-card"
|
|
data-tool-id="${item.id}"
|
|
onclick="runLuaWithId(event)">
|
|
<img src="${iconSrc}" alt="${item.name}">
|
|
<div class="tool-info">
|
|
<h3>${item.name}</h3>
|
|
<p>${item.description}</p>
|
|
</div>
|
|
<div class="tool-action">
|
|
<button>Einst</button>
|
|
</div>
|
|
</a>
|
|
`;
|
|
|
|
toolbox.innerHTML += toolCardHTML;
|
|
});
|
|
|
|
// Überprüfen und Wiederherstellen des Zustands der Buttons
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
const toolId = card.getAttribute('data-tool-id');
|
|
const button = card.querySelector('button');
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) === 'true') {
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
}
|
|
});
|
|
}).catch(error => console.error('Fehler beim Abrufen der Toolbox-Elemente:', error));
|
|
}
|
|
|
|
function enableButtonByToolId(toolId) {
|
|
saucer.exposed.debug_print();
|
|
// Finden Sie den Button mit dem entsprechenden data-tool-id
|
|
const button = document.querySelector(`.tool-card[data-tool-id='${toolId}']`);
|
|
if (button) {
|
|
button.disabled = false;
|
|
button.classList.remove('running');
|
|
button.textContent = 'Einst';
|
|
// Speichern des Zustands im sessionStorage
|
|
sessionStorage.setItem(`toolButtonDisabled_${toolId}`, 'false');
|
|
} else {
|
|
console.error('Button mit Tool-ID ' + toolId + ' nicht gefunden.');
|
|
}
|
|
}
|
|
|
|
function openEinst(){
|
|
event.stopPropagation();
|
|
console.log('Einst Button geklickt!');
|
|
saucer.exposed.openEinst();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const toolbox = document.getElementById('toolbox');
|
|
|
|
saucer.exposed.getToolboxItems().then(jsonString => {
|
|
const m_toolboxItems = JSON.parse(jsonString);
|
|
|
|
m_toolboxItems.forEach(item => {
|
|
const iconSrc = item.icon.startsWith('data:image/png;base64,')
|
|
? item.icon
|
|
: `data:image/png;base64,${item.icon}`;
|
|
|
|
const toolCardHTML = `
|
|
<a href="${item.url}" class="tool-card"
|
|
data-tool-id="${item.id}"
|
|
onclick="runLuaWithId(event)">
|
|
<img src="${iconSrc}" alt="${item.name}">
|
|
<div class="tool-info">
|
|
<h3>${item.name}</h3>
|
|
<p>${item.description}</p>
|
|
</div>
|
|
<div class="tool-action">
|
|
<button onclick="openEinst(event)">Einst</button>
|
|
</div>
|
|
</a>
|
|
`;
|
|
|
|
toolbox.innerHTML += toolCardHTML;
|
|
});
|
|
|
|
// Überprüfen und Wiederherstellen des Zustands beim Laden der Seite
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
const toolId = card.getAttribute('data-tool-id');
|
|
const button = card.querySelector('button');
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) === 'true') {
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
}
|
|
});
|
|
}).catch(error => console.error('Error fetching toolbox items:', error));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |