pi hole update
This commit is contained in:
@@ -157,6 +157,68 @@
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pihole-instance-card {
|
||||||
|
padding: 16px;
|
||||||
|
background: var(--panel-2);
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pihole-card-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--panel);
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(10, 14, 24, 0.55);
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
.modal.is-open { display: flex; }
|
||||||
|
.modal-card {
|
||||||
|
width: min(880px, 96vw);
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow: auto;
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 680px) {
|
@media (max-width: 680px) {
|
||||||
.pihole-actions {
|
.pihole-actions {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
67
modules/pihole/assets/pihole_instances.js
Normal file
67
modules/pihole/assets/pihole_instances.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
(() => {
|
||||||
|
const modal = document.querySelector('[data-instance-modal]');
|
||||||
|
const form = document.querySelector('[data-instance-form]');
|
||||||
|
if (!modal || !form) return;
|
||||||
|
|
||||||
|
const title = document.querySelector('[data-instance-modal-title]');
|
||||||
|
const closeBtn = document.querySelector('[data-instance-close]');
|
||||||
|
const newBtn = document.querySelector('[data-instance-new]');
|
||||||
|
const cancelBtn = document.querySelector('[data-instance-cancel]');
|
||||||
|
|
||||||
|
const currentIdInput = form.querySelector('input[name="current_id"]');
|
||||||
|
const idInput = form.querySelector('input[name="instance_id"]');
|
||||||
|
const nameInput = form.querySelector('input[name="name"]');
|
||||||
|
const urlInput = form.querySelector('input[name="url"]');
|
||||||
|
const tokenInput = form.querySelector('input[name="token"]');
|
||||||
|
const primaryInput = form.querySelector('input[name="is_primary"]');
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
if (currentIdInput) currentIdInput.value = '';
|
||||||
|
if (idInput) idInput.value = '';
|
||||||
|
if (nameInput) nameInput.value = '';
|
||||||
|
if (urlInput) urlInput.value = '';
|
||||||
|
if (tokenInput) tokenInput.value = '';
|
||||||
|
if (primaryInput) primaryInput.checked = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const openModal = () => {
|
||||||
|
modal.classList.add('is-open');
|
||||||
|
modal.setAttribute('aria-hidden', 'false');
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
modal.classList.remove('is-open');
|
||||||
|
modal.setAttribute('aria-hidden', 'true');
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-instance-edit]').forEach((btn) => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const card = btn.closest('[data-instance-id]');
|
||||||
|
if (!card) return;
|
||||||
|
if (currentIdInput) currentIdInput.value = card.dataset.instanceId || '';
|
||||||
|
if (idInput) idInput.value = card.dataset.instanceId || '';
|
||||||
|
if (nameInput) nameInput.value = card.dataset.name || '';
|
||||||
|
if (urlInput) urlInput.value = card.dataset.url || '';
|
||||||
|
if (tokenInput) tokenInput.value = '';
|
||||||
|
if (primaryInput) primaryInput.checked = card.dataset.primary === '1';
|
||||||
|
if (title) title.textContent = 'Instanz bearbeiten';
|
||||||
|
openModal();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (newBtn) {
|
||||||
|
newBtn.addEventListener('click', () => {
|
||||||
|
resetForm();
|
||||||
|
if (title) title.textContent = 'Neue Instanz';
|
||||||
|
openModal();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (closeBtn) {
|
||||||
|
closeBtn.addEventListener('click', () => closeModal());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cancelBtn) {
|
||||||
|
cancelBtn.addEventListener('click', () => resetForm());
|
||||||
|
}
|
||||||
|
})();
|
||||||
@@ -4,6 +4,7 @@
|
|||||||
"description": "Pi-hole Monitoring, Listen und Steuerung fuer zwei Instanzen.",
|
"description": "Pi-hole Monitoring, Listen und Steuerung fuer zwei Instanzen.",
|
||||||
"menu": [
|
"menu": [
|
||||||
{ "label": "Dashboard", "href": "/module/pihole" },
|
{ "label": "Dashboard", "href": "/module/pihole" },
|
||||||
|
{ "label": "Instanzen", "href": "/module/pihole/instances" },
|
||||||
{ "label": "Listen", "href": "/module/pihole/lists" },
|
{ "label": "Listen", "href": "/module/pihole/lists" },
|
||||||
{ "label": "Zugriffe", "href": "/module/pihole/queries" },
|
{ "label": "Zugriffe", "href": "/module/pihole/queries" },
|
||||||
{ "label": "Setup", "href": "/modules/setup/pihole" }
|
{ "label": "Setup", "href": "/modules/setup/pihole" }
|
||||||
@@ -14,6 +15,7 @@
|
|||||||
"default": "collapsed",
|
"default": "collapsed",
|
||||||
"items": [
|
"items": [
|
||||||
{ "label": "Dashboard", "href": "/module/pihole" },
|
{ "label": "Dashboard", "href": "/module/pihole" },
|
||||||
|
{ "label": "Instanzen", "href": "/module/pihole/instances" },
|
||||||
{ "label": "Listen", "href": "/module/pihole/lists" },
|
{ "label": "Listen", "href": "/module/pihole/lists" },
|
||||||
{ "label": "Zugriffe", "href": "/module/pihole/queries" },
|
{ "label": "Zugriffe", "href": "/module/pihole/queries" },
|
||||||
{ "label": "Setup", "href": "/modules/setup/pihole" }
|
{ "label": "Setup", "href": "/modules/setup/pihole" }
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ $base = realpath(__DIR__ . '/../assets');
|
|||||||
$map = [
|
$map = [
|
||||||
'pihole.css' => $base . '/pihole.css',
|
'pihole.css' => $base . '/pihole.css',
|
||||||
'pihole.js' => $base . '/pihole.js',
|
'pihole.js' => $base . '/pihole.js',
|
||||||
|
'pihole_instances.js' => $base . '/pihole_instances.js',
|
||||||
];
|
];
|
||||||
|
|
||||||
if (!isset($map[$file])) {
|
if (!isset($map[$file])) {
|
||||||
|
|||||||
222
modules/pihole/pages/instances.php
Normal file
222
modules/pihole/pages/instances.php
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
<?php
|
||||||
|
$moduleName = 'pihole';
|
||||||
|
$assets = app()->assets();
|
||||||
|
$assets->addStyle('/module/pihole/asset?file=pihole.css');
|
||||||
|
$assets->addScript('/module/pihole/asset?file=pihole_instances.js', 'footer', true);
|
||||||
|
|
||||||
|
require_admin();
|
||||||
|
|
||||||
|
$settings = modules()->settings($moduleName);
|
||||||
|
$notice = null;
|
||||||
|
$error = null;
|
||||||
|
|
||||||
|
$loadInstances = function (array $settings): array {
|
||||||
|
$instances = [];
|
||||||
|
$rawJson = trim((string)($settings['instances_json'] ?? ''));
|
||||||
|
if ($rawJson !== '') {
|
||||||
|
$decoded = json_decode($rawJson, true);
|
||||||
|
if (is_array($decoded)) {
|
||||||
|
foreach ($decoded as $row) {
|
||||||
|
if (!is_array($row)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$id = trim((string)($row['id'] ?? ''));
|
||||||
|
$url = trim((string)($row['url'] ?? ''));
|
||||||
|
if ($id === '' || $url === '') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$instances[$id] = [
|
||||||
|
'id' => $id,
|
||||||
|
'name' => trim((string)($row['name'] ?? '')) ?: $id,
|
||||||
|
'url' => $url,
|
||||||
|
'token' => trim((string)($row['token'] ?? '')),
|
||||||
|
'is_primary' => !empty($row['is_primary']),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$instances) {
|
||||||
|
foreach (['primary', 'secondary'] as $key) {
|
||||||
|
$url = trim((string)($settings[$key . '_url'] ?? ''));
|
||||||
|
if ($url === '') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$instances[$key] = [
|
||||||
|
'id' => $key,
|
||||||
|
'name' => trim((string)($settings[$key . '_name'] ?? '')) ?: ($key === 'primary' ? 'Primaer' : 'Sekundaer'),
|
||||||
|
'url' => $url,
|
||||||
|
'token' => trim((string)($settings[$key . '_token'] ?? '')),
|
||||||
|
'is_primary' => $key === 'primary',
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $instances;
|
||||||
|
};
|
||||||
|
|
||||||
|
$instances = $loadInstances($settings);
|
||||||
|
|
||||||
|
$sanitizeId = function (string $id): string {
|
||||||
|
$id = preg_replace('/[^a-zA-Z0-9_-]/', '', $id);
|
||||||
|
return trim((string)$id);
|
||||||
|
};
|
||||||
|
|
||||||
|
$saveInstances = function (array $settings, array $instances): void {
|
||||||
|
$payload = $settings;
|
||||||
|
$payload['instances_json'] = json_encode(array_values($instances), JSON_UNESCAPED_UNICODE);
|
||||||
|
modules()->saveSettings('pihole', $payload);
|
||||||
|
};
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$deleteId = trim((string)($_POST['delete_id'] ?? ''));
|
||||||
|
$currentId = trim((string)($_POST['current_id'] ?? ''));
|
||||||
|
$instanceId = trim((string)($_POST['instance_id'] ?? ''));
|
||||||
|
$name = trim((string)($_POST['name'] ?? ''));
|
||||||
|
$url = trim((string)($_POST['url'] ?? ''));
|
||||||
|
$token = trim((string)($_POST['token'] ?? ''));
|
||||||
|
$isPrimary = isset($_POST['is_primary']);
|
||||||
|
|
||||||
|
if ($deleteId !== '') {
|
||||||
|
if (isset($instances[$deleteId])) {
|
||||||
|
unset($instances[$deleteId]);
|
||||||
|
$notice = 'Instanz geloescht.';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$instanceId = $sanitizeId($instanceId);
|
||||||
|
if ($instanceId === '' || $url === '') {
|
||||||
|
$error = 'Bitte ID und URL angeben.';
|
||||||
|
} else {
|
||||||
|
$existingToken = '';
|
||||||
|
if ($currentId !== '' && isset($instances[$currentId])) {
|
||||||
|
$existingToken = (string)($instances[$currentId]['token'] ?? '');
|
||||||
|
}
|
||||||
|
$tokenToStore = $token !== '' ? $token : $existingToken;
|
||||||
|
if ($currentId !== '' && $currentId !== $instanceId) {
|
||||||
|
unset($instances[$currentId]);
|
||||||
|
}
|
||||||
|
$instances[$instanceId] = [
|
||||||
|
'id' => $instanceId,
|
||||||
|
'name' => $name !== '' ? $name : $instanceId,
|
||||||
|
'url' => $url,
|
||||||
|
'token' => $tokenToStore,
|
||||||
|
'is_primary' => $isPrimary,
|
||||||
|
];
|
||||||
|
|
||||||
|
if ($isPrimary) {
|
||||||
|
foreach ($instances as $id => &$row) {
|
||||||
|
$row['is_primary'] = ($id === $instanceId);
|
||||||
|
}
|
||||||
|
unset($row);
|
||||||
|
$settings['primary_id'] = $instanceId;
|
||||||
|
}
|
||||||
|
|
||||||
|
$notice = $currentId !== '' ? 'Instanz aktualisiert.' : 'Instanz gespeichert.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$error) {
|
||||||
|
$saveInstances($settings, $instances);
|
||||||
|
$settings = modules()->settings($moduleName);
|
||||||
|
$instances = $loadInstances($settings);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$primaryId = trim((string)($settings['primary_id'] ?? ''));
|
||||||
|
if ($primaryId === '') {
|
||||||
|
foreach ($instances as $id => $row) {
|
||||||
|
if (!empty($row['is_primary'])) {
|
||||||
|
$primaryId = $id;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pill">Pi-hole</div>
|
||||||
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
|
||||||
|
<h1 style="margin:0;">Instanzen</h1>
|
||||||
|
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
||||||
|
<button class="cta-button" type="button" data-instance-new>+ Neue Instanz</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="muted">Pi-hole Instanzen hinzufuegen, bearbeiten und loeschen.</p>
|
||||||
|
|
||||||
|
<?php if ($error): ?>
|
||||||
|
<div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
|
||||||
|
<?= e($error) ?>
|
||||||
|
</div>
|
||||||
|
<?php elseif ($notice): ?>
|
||||||
|
<div class="card notice-card" style="margin-top:1rem; border-color:var(--accent-2);">
|
||||||
|
<?= e($notice) ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="pihole-instance-grid" style="margin-top:1rem;">
|
||||||
|
<?php if (!$instances): ?>
|
||||||
|
<div class="card" style="padding:16px;">Keine Instanzen vorhanden.</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<?php foreach ($instances as $instance): ?>
|
||||||
|
<div class="card pihole-instance-card"
|
||||||
|
data-instance-id="<?= e((string)$instance['id']) ?>"
|
||||||
|
data-name="<?= e((string)($instance['name'] ?? '')) ?>"
|
||||||
|
data-url="<?= e((string)($instance['url'] ?? '')) ?>"
|
||||||
|
data-primary="<?= !empty($instance['is_primary']) ? '1' : '0' ?>">
|
||||||
|
<div class="pihole-instance-header">
|
||||||
|
<div>
|
||||||
|
<strong><?= e((string)($instance['name'] ?? '')) ?></strong>
|
||||||
|
<div class="muted">ID: <?= e((string)($instance['id'] ?? '')) ?></div>
|
||||||
|
<div class="muted">URL: <?= e((string)($instance['url'] ?? '')) ?></div>
|
||||||
|
</div>
|
||||||
|
<?php if (!empty($instance['is_primary']) || $instance['id'] === $primaryId): ?>
|
||||||
|
<span class="pihole-status">Primaer</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="pihole-card-actions">
|
||||||
|
<button class="nav-link" type="button" data-instance-edit>Bearbeiten</button>
|
||||||
|
<form method="post" onsubmit="return confirm('Instanz wirklich loeschen?')">
|
||||||
|
<input type="hidden" name="delete_id" value="<?= e((string)($instance['id'] ?? '')) ?>">
|
||||||
|
<button class="nav-link" type="submit">Loeschen</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" data-instance-modal aria-hidden="true">
|
||||||
|
<div class="modal-card">
|
||||||
|
<div class="modal-header">
|
||||||
|
<strong data-instance-modal-title>Neue Instanz</strong>
|
||||||
|
<button class="icon-button" type="button" data-instance-close>×</button>
|
||||||
|
</div>
|
||||||
|
<form method="post" class="form-grid" style="margin-top:.75rem;" data-instance-form>
|
||||||
|
<input type="hidden" name="current_id" value="">
|
||||||
|
<label class="form-field">
|
||||||
|
<span class="muted">ID</span>
|
||||||
|
<input type="text" name="instance_id" placeholder="z.B. pihole-main" required>
|
||||||
|
</label>
|
||||||
|
<label class="form-field">
|
||||||
|
<span class="muted">Name</span>
|
||||||
|
<input type="text" name="name" placeholder="z.B. Pi-hole Main" required>
|
||||||
|
</label>
|
||||||
|
<label class="form-field">
|
||||||
|
<span class="muted">URL</span>
|
||||||
|
<input type="text" name="url" placeholder="http://pi-hole.local" required>
|
||||||
|
</label>
|
||||||
|
<label class="form-field">
|
||||||
|
<span class="muted">API Token (leer lassen = unveraendert)</span>
|
||||||
|
<input type="password" name="token" placeholder="Token" autocomplete="new-password">
|
||||||
|
</label>
|
||||||
|
<label class="form-field" style="align-items:center;">
|
||||||
|
<span class="muted">Als Primaer verwenden</span>
|
||||||
|
<input type="checkbox" name="is_primary" value="1">
|
||||||
|
</label>
|
||||||
|
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
||||||
|
<button class="cta-button" type="submit" data-instance-submit>Speichern</button>
|
||||||
|
<button class="nav-link" type="button" data-instance-cancel>Zuruecksetzen</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user