albert
/
NSC_PCS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Poprawki sterowanie galerią

Browse Source
main
Albert Goral 3 weeks ago
parent 1b9c4a766f
commit ba6c1c78ef
1 changed files with 81 additions and 62 deletions
Show Stats Download Patch File Download Diff File

143
dashboard.html
Unescape Escape View File

@ -54,7 +54,7 @@
background-color: rgba(107, 114, 128, 0.8);
border-width: 2px;
}
/* Ochrona przed skakaniem interfejsu */
body { overflow-y: scroll; }
</style>
@ -65,13 +65,13 @@
<div class="px-4 py-2 flex flex-col gap-2">
<!-- Górny Rząd: Logo, Menu Główne, Sesja -->
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-6 overflow-hidden flex-1">
<!-- Logo -->
<div class="flex-shrink-0">
<img width="135" height="30" alt="UniView WebAdmin" src="https://placehold.co/135x30/2563eb/ffffff?text=UniView+Logo" class="rounded rounded-md shadow-sm">
</div>
<!-- Pełne Menu Główne (10 pozycji) -->
<ul class="flex items-center gap-1 overflow-x-auto no-scrollbar flex-1 pb-1">
<li><a href="#" class="px-3 py-1.5 text-sm font-semibold rounded-full bg-brand-500 text-white shadow-md shadow-brand-500/20 whitespace-nowrap">Dashboard</a></li>
@ -93,7 +93,7 @@
<span class="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded-md border border-slate-200 dark:border-slate-700">POLIN</span>
<a href="#" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors"><i class="fa fa-user mr-1"></i> pcs.agoral</a>
</div>
<!-- Dark Mode Toggle -->
<button id="darkModeToggle" class="w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="Przełącz motyw">
<i class="fa fa-moon dark:hidden"></i>
@ -168,17 +168,21 @@
const API_TERMINALS = "api.php?nav=api_terminal";
const API_COMMAND = "api.php?nav=api_run_remote_command";
const VISIBLE_GROUP_NAME = "Produkcja";
// GŁÓWNE KOMENDY (Zmiana: 2 nowe komendy Audio)
const COMMAND_WAKE = "WakeUp";
const COMMAND_SHUTDOWN = "ShutDown";
const COMMAND_RESTART = "Restart";
// Stan aplikacji
const state = {
terminals: [],
filter: "",
busy: false,
loading: false,
refreshSeconds: 5,
const COMMAND_AUDIO_ON = "AudioOn";
const COMMAND_AUDIO_OFF = "AudioOff";
// Stan aplikacji
const state = {
terminals: [],
filter: "",
busy: false,
loading: false,
refreshSeconds: 5,
refreshTimerId: null,
openPopoverId: null,
popoverScrollTop: 0
@ -187,7 +191,7 @@
function generateMockData() {
const data = [];
let idCounter = 1;
// Galeria 01 - Zgodnie z prośbą 15 urządzeń (10 PC, 5 Oświetlenie)
for(let i=1; i<=10; i++) {
data.push({ id: idCounter++, name: `PC-GAL01-${i.toString().padStart(2, '0')}`, ip: `192.168.1.${10+i}`, status: Math.random() > 0.2 ? 'Running' : 'Stopped', location_id: 'LOC-1', location_name: 'Galeria 01', group_name: 'Produkcja', player: 'PC' });
@ -200,7 +204,7 @@
for (let loc = 2; loc <= 10; loc++) {
const locName = `Galeria ${loc.toString().padStart(2, '0')}`;
const locId = `LOC-${loc}`;
for(let i=1; i<=2; i++) {
data.push({ id: idCounter++, name: `PC-GAL${loc}-${i}`, ip: `192.168.${loc}.${i}`, status: Math.random() > 0.3 ? 'Running' : 'Stopped', location_id: locId, location_name: locName, group_name: 'Produkcja', player: 'PC' });
}
@ -251,7 +255,7 @@
try {
// Wykrywanie Trybu "Preview" (gdzie nie ma backendu API)
const isPreview = window.location.protocol === 'about:' || window.location.protocol === 'blob:' || window.location.hostname === '';
let data;
if (isPreview) {
await new Promise(r => setTimeout(r, 400)); // Symulacja opóźnienia
@ -278,12 +282,11 @@
const modal = document.getElementById('customConfirmModal');
const box = document.getElementById('customConfirmBox');
const overlay = document.getElementById('customConfirmOverlay');
document.getElementById('customConfirmTitle').textContent = title;
document.getElementById('customConfirmMessage').innerHTML = message.replace(/\n/g, '<br>');
modal.classList.remove('hidden');
// Małe opóźnienie dla przeglądarki, żeby zastosowała display:block przed animacją
setTimeout(() => {
modal.classList.remove('opacity-0');
box.classList.remove('scale-95');
@ -295,7 +298,7 @@
box.classList.remove('scale-100');
box.classList.add('scale-95');
setTimeout(() => modal.classList.add('hidden'), 300);
document.getElementById('customConfirmCancel').onclick = null;
document.getElementById('customConfirmOk').onclick = null;
};
@ -318,7 +321,7 @@
<h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">Sterowanie Wystawą</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Grupowe oraz punktowe zarządzanie zasilaniem urządzeń. Grupa: <strong>${VISIBLE_GROUP_NAME}</strong></p>
</div>
<!-- Pasek Narzędzi -->
<div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
<div class="relative flex-1 xl:w-64 min-w-[200px]">
@ -366,7 +369,7 @@
pop.classList.add('opacity-100', 'visible', 'scale-100');
}
}
function closePopover(locId) {
if(state.openPopoverId === locId) state.openPopoverId = null;
const pop = document.getElementById(`popover-${locId}`);
@ -390,15 +393,15 @@
if (!locationsMap.has(locId)) locationsMap.set(locId, { id: locId, label: t.location_name || locId, terminals: [] });
locationsMap.get(locId).terminals.push(t);
});
let locations = Array.from(locationsMap.values()).sort((a,b) => String(a.label).localeCompare(String(b.label), 'pl', {numeric: true}));
// Filtrowanie
if(state.filter) {
locations = locations.filter(loc => {
const matchLoc = loc.label.toLowerCase().includes(state.filter);
const matchTerminals = loc.terminals.some(t =>
(t.name || "").toLowerCase().includes(state.filter) ||
const matchTerminals = loc.terminals.some(t =>
(t.name || "").toLowerCase().includes(state.filter) ||
(t.ip || "").includes(state.filter)
);
return matchLoc || matchTerminals;
@ -406,7 +409,7 @@
}
renderGlobalExhibition(locations);
const grid = document.getElementById("nscLocationGrid");
grid.innerHTML = locations.map(renderLocationCard).join("");
@ -417,7 +420,7 @@
// Usuwamy klasy animacji tymczasowo, by nie "wjeżdżał" co 5 sekund
pop.classList.remove('transition-all', 'duration-300', 'opacity-0', 'invisible', 'scale-95', 'pointer-events-none');
pop.classList.add('opacity-100', 'visible', 'scale-100');
const scrollArea = pop.querySelector('.custom-scrollbar');
if (scrollArea) scrollArea.scrollTop = currentScroll; // Przywracamy przewijanie!
@ -438,7 +441,7 @@
const onT = allT.filter(t => t.status?.toLowerCase() === 'running').length;
const total = allT.length;
const pct = total ? Math.round((onT/total)*100) : 0;
let colorCls = "bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700";
let fillCls = "bg-slate-400";
if(total > 0 && onT === total) { colorCls = "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-800/50"; fillCls = "bg-emerald-500"; }
@ -455,7 +458,7 @@
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Zarządzanie całą wystawą (Galerie: ${locations.length})</p>
</div>
</div>
<div class="flex-1 max-w-md w-full">
<div class="flex justify-between text-xs font-bold mb-2">
<span class="text-slate-500 dark:text-slate-400 uppercase tracking-wider">Uruchomione</span>
@ -478,10 +481,10 @@
const total = loc.terminals.length;
const on = loc.terminals.filter(t => t.status?.toLowerCase() === 'running').length;
const pct = total ? Math.round((on/total)*100) : 0;
const pcs = loc.terminals.filter(t => t.player === 'PC');
const onPcs = pcs.filter(t => t.status?.toLowerCase() === 'running').length;
const lights = loc.terminals.filter(t => t.player === 'CTRL');
const onLights = lights.filter(t => t.status?.toLowerCase() === 'running').length;
@ -491,17 +494,17 @@
return `
<div class="relative bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-soft border border-slate-200 dark:border-slate-700 flex flex-col gap-4">
<!-- Nagłówek Karty (Elastyczny pasek) -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
<!-- Lewa strona: Nazwa galerii -->
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white cursor-pointer hover:text-brand-600 dark:hover:text-brand-400 transition-colors" onclick="openPopover('${loc.id}')">${escapeHtml(loc.label)}</h3>
<div class="text-xs text-slate-500 dark:text-slate-400 mt-1 font-mono">${loc.id}</div>
<!-- Nagłówek Karty z wbudowanym panelem przycisków -->
<div class="flex flex-col sm:flex-row justify-between items-start gap-3 w-full">
<!-- Lewa strona: Nazwa galerii (Brak ID!) -->
<div class="flex-shrink-0">
<h3 class="text-xl font-bold text-slate-900 dark:text-white cursor-pointer hover:text-brand-600 dark:hover:text-brand-400 transition-colors whitespace-nowrap" onclick="openPopover('${loc.id}')">${escapeHtml(loc.label)}</h3>
</div>
<!-- Prawa strona: Kontrolki Galerii + Przycisk SZCZEGÓŁY -->
<div class="flex items-center gap-3 self-stretch sm:self-auto flex-wrap">
<!-- Przyciski całej galerii (Włącz/Wyłącz/Wycisz) -->
<!-- Prawa strona: 4 Kontrolki + Przycisk SZCZEGÓŁY -->
<div class="flex items-center justify-end gap-2 sm:gap-3 flex-1 flex-wrap">
<!-- Przyciski całej galerii (Włącz/Wyłącz/Audio ON/Audio OFF) -->
<div class="flex bg-slate-100 dark:bg-slate-800 p-1.5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-inner gap-1">
<button onclick="runCommand('${COMMAND_WAKE}', '${loc.id}', 'all')" class="px-3 py-1.5 text-emerald-600 hover:bg-white dark:text-emerald-400 dark:hover:bg-slate-700 hover:shadow-sm rounded-lg text-sm font-bold transition-all flex items-center gap-2" title="Włącz całą galerię">
<i class="fa fa-play"></i> <span class="hidden xl:inline">Włącz</span>
@ -509,8 +512,11 @@
<button onclick="runCommand('${COMMAND_SHUTDOWN}', '${loc.id}', 'all')" class="px-3 py-1.5 text-slate-600 hover:bg-white dark:text-slate-300 dark:hover:bg-slate-700 hover:shadow-sm rounded-lg text-sm font-bold transition-all flex items-center gap-2" title="Wyłącz całą galerię">
<i class="fa fa-stop"></i> <span class="hidden xl:inline">Wyłącz</span>
</button>
<button onclick="runCommand('${COMMAND_MUTE}', '${loc.id}', 'all')" class="px-3 py-1.5 text-amber-600 hover:bg-white dark:text-amber-400 dark:hover:bg-slate-700 hover:shadow-sm rounded-lg text-sm font-bold transition-all flex items-center gap-2" title="Wycisz całą galerię">
<i class="fa fa-volume-mute"></i> <span class="hidden xl:inline">Wycisz</span>
<button onclick="runCommand('${COMMAND_AUDIO_ON}', '${loc.id}', 'all')" class="px-3 py-1.5 text-sky-600 hover:bg-white dark:text-sky-400 dark:hover:bg-slate-700 hover:shadow-sm rounded-lg text-sm font-bold transition-all flex items-center gap-2" title="Włącz Audio w galerii">
<i class="fa fa-volume-up"></i> <span class="hidden xl:inline">Audio ON</span>
</button>
<button onclick="runCommand('${COMMAND_AUDIO_OFF}', '${loc.id}', 'all')" class="px-3 py-1.5 text-amber-600 hover:bg-white dark:text-amber-400 dark:hover:bg-slate-700 hover:shadow-sm rounded-lg text-sm font-bold transition-all flex items-center gap-2" title="Wyłącz Audio w galerii">
<i class="fa fa-volume-mute"></i> <span class="hidden xl:inline">Audio OFF</span>
</button>
</div>
@ -560,12 +566,12 @@
</div>
</div>
<!-- Dymek (Popover) centralnie nad kafelkiem, wymiar w 100% dopasowany do kafelka w ramach siatki -->
<!-- Dymek (Popover) centralnie nad kafelkiem -->
<div id="popover-${loc.id}" class="absolute inset-0 z-50 flex opacity-0 invisible scale-95 transition-all duration-300 pointer-events-none">
<!-- Właściwe okienko (zajmujące calutką ramkę) -->
<!-- Właściwe okienko (zajmujące 100% obszaru) -->
<div class="relative w-full h-full flex flex-col bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 pointer-events-auto overflow-hidden">
<!-- Header Dymka -->
<div class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 shrink-0">
<h4 class="font-bold text-slate-800 dark:text-slate-200 text-lg flex items-center gap-2">
@ -575,7 +581,7 @@
<i class="fa fa-times"></i>
</button>
</div>
<!-- Obszar przewijany -->
<div class="custom-scrollbar overflow-y-auto p-4 flex flex-col gap-4 flex-1">
${renderTerminalRows(pcs, 'Kontrolery (PC)', true)}
@ -589,12 +595,12 @@
function renderTerminalRows(terminals, title, allowRestart) {
if(!terminals.length) return '';
const rows = terminals.map(t => {
const isRun = t.status?.toLowerCase() === 'running';
const statusCls = isRun ? "text-emerald-500" : "text-slate-400 dark:text-slate-500";
const dotCls = isRun ? "bg-emerald-500" : "bg-slate-300 dark:bg-slate-600";
// Indywidualne przyciski
let actions = `
<button onclick="runSingleCommand('${COMMAND_WAKE}', '${t.id}', '${escapeHtml(t.name)}')" class="px-2 py-1 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 dark:bg-emerald-900/20 dark:text-emerald-400 dark:hover:bg-emerald-900/40 rounded text-xs font-bold transition-colors">Włącz</button>
@ -643,10 +649,17 @@
}
async function runCommand(command, locationId, type) {
const locName = state.terminals.find(t => t.location_id === locationId)?.location_name || locationId;
const typeName = type === 'computer' ? 'Kontrolery' : 'Oświetlenie';
const actionName = command === COMMAND_WAKE ? "Włączenie" : (command === COMMAND_SHUTDOWN ? "Wyłączenie" : "Restart");
const locName = locationId === 'all' ? "Cała wystawa" : (state.terminals.find(t => t.location_id === locationId)?.location_name || locationId);
const typeName = type === 'computer' ? 'Kontrolery' : (type === 'ctrl' ? 'Oświetlenie' : 'Wszystkie urządzenia');
// Logika nazw dla nowych komend
let actionName = "";
if(command === COMMAND_WAKE) actionName = "Włączenie";
else if(command === COMMAND_SHUTDOWN) actionName = "Wyłączenie";
else if(command === COMMAND_RESTART) actionName = "Restart";
else if(command === COMMAND_AUDIO_ON) actionName = "Włączenie Audio";
else if(command === COMMAND_AUDIO_OFF) actionName = "Wyłączenie Audio";
const confirmed = await customConfirm(
`Akcja grupowa: ${actionName}`,
`Lokalizacja: <strong>${locName}</strong>\nUrządzenia: <strong>${typeName}</strong>\n\nCzy na pewno chcesz kontynuować?`
@ -655,14 +668,20 @@
}
async function runSingleCommand(command, terminalId, terminalName) {
const actionName = command === COMMAND_WAKE ? "Włączenie" : (command === COMMAND_SHUTDOWN ? "Wyłączenie" : "Restart");
const terminal = state.terminals.find(t => String(t.id) === String(terminalId));
let actionName = "";
if(command === COMMAND_WAKE) actionName = "Włączenie";
else if(command === COMMAND_SHUTDOWN) actionName = "Wyłączenie";
else if(command === COMMAND_RESTART) actionName = "Restart";
else if(command === COMMAND_AUDIO_ON) actionName = "Włączenie Audio";
else if(command === COMMAND_AUDIO_OFF) actionName = "Wyłączenie Audio";
const terminal = state.terminals.find(t => String(t.id) === String(terminalId));
const confirmed = await customConfirm(
`Pojedyncza Akcja: ${actionName}`,
`Urządzenie: <strong>${terminalName}</strong>\nIP: ${terminal?.ip || 'Brak IP'}\n\nCzy na pewno wysłać polecenie?`
);
if(confirmed) {
if(terminal) executeCommandBulk(command, [terminal], terminalName);
}
@ -681,11 +700,11 @@
async function executeCommandBulk(command, targets, scopeLabel) {
state.busy = true;
setStatus(`Wysyłanie polecenia ${command} do ${targets.length} urządzeń (${scopeLabel})...`, false);
try {
// Wykrywanie Trybu Preview wstrzymuje żądania FETCH
const isPreview = window.location.protocol === 'about:' || window.location.protocol === 'blob:' || window.location.hostname === '';
let failedCount = 0;
for(const t of targets) {
@ -699,7 +718,7 @@
const body = new URLSearchParams();
body.set("command", command);
body.set("tag_id", t.id);
const res = await fetch(API_COMMAND, { method: "POST", body: body });
if(!res.ok) failedCount++;
} catch(e) {
@ -707,10 +726,10 @@
}
}
}
if(failedCount > 0) setStatus(`Zakończono z błędami. Niepowodzenia: ${failedCount}/${targets.length}`, true);
else setStatus(`Polecenie wykonane pomyślnie dla ${targets.length} urządzeń.`, false);
setTimeout(() => refreshTerminals(true), 1500);
} finally {
state.busy = false;
@ -722,4 +741,4 @@
}
</script>
</body>
</html>
</html>
Write Preview
Loading…
Cancel
Save