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

55
dashboard.html
Unescape Escape View File

@ -168,9 +168,13 @@
const API_TERMINALS = "api.php?nav=api_terminal"; const API_TERMINALS = "api.php?nav=api_terminal";
const API_COMMAND = "api.php?nav=api_run_remote_command"; const API_COMMAND = "api.php?nav=api_run_remote_command";
const VISIBLE_GROUP_NAME = "Produkcja"; const VISIBLE_GROUP_NAME = "Produkcja";
// GŁÓWNE KOMENDY (Zmiana: 2 nowe komendy Audio)
const COMMAND_WAKE = "WakeUp"; const COMMAND_WAKE = "WakeUp";
const COMMAND_SHUTDOWN = "ShutDown"; const COMMAND_SHUTDOWN = "ShutDown";
const COMMAND_RESTART = "Restart"; const COMMAND_RESTART = "Restart";
const COMMAND_AUDIO_ON = "AudioOn";
const COMMAND_AUDIO_OFF = "AudioOff";
// Stan aplikacji // Stan aplikacji
const state = { const state = {
@ -283,7 +287,6 @@
document.getElementById('customConfirmMessage').innerHTML = message.replace(/\n/g, '<br>'); document.getElementById('customConfirmMessage').innerHTML = message.replace(/\n/g, '<br>');
modal.classList.remove('hidden'); modal.classList.remove('hidden');
// Małe opóźnienie dla przeglądarki, żeby zastosowała display:block przed animacją
setTimeout(() => { setTimeout(() => {
modal.classList.remove('opacity-0'); modal.classList.remove('opacity-0');
box.classList.remove('scale-95'); box.classList.remove('scale-95');
@ -491,17 +494,17 @@
return ` 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"> <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"> <!-- Nagłówek Karty z wbudowanym panelem przycisków -->
<!-- Lewa strona: Nazwa galerii --> <div class="flex flex-col sm:flex-row justify-between items-start gap-3 w-full">
<div> <!-- Lewa strona: Nazwa galerii (Brak ID!) -->
<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="flex-shrink-0">
<div class="text-xs text-slate-500 dark:text-slate-400 mt-1 font-mono">${loc.id}</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 whitespace-nowrap" onclick="openPopover('${loc.id}')">${escapeHtml(loc.label)}</h3>
</div> </div>
<!-- Prawa strona: Kontrolki Galerii + Przycisk SZCZEGÓŁY --> <!-- Prawa strona: 4 Kontrolki + Przycisk SZCZEGÓŁY -->
<div class="flex items-center gap-3 self-stretch sm:self-auto flex-wrap"> <div class="flex items-center justify-end gap-2 sm:gap-3 flex-1 flex-wrap">
<!-- Przyciski całej galerii (Włącz/Wyłącz/Wycisz) --> <!-- 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"> <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ę"> <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> <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ę"> <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> <i class="fa fa-stop"></i> <span class="hidden xl:inline">Wyłącz</span>
</button> </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ę"> <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-mute"></i> <span class="hidden xl:inline">Wycisz</span> <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> </button>
</div> </div>
@ -560,10 +566,10 @@
</div> </div>
</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"> <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"> <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 --> <!-- Header Dymka -->
@ -643,9 +649,16 @@
} }
async function runCommand(command, locationId, type) { async function runCommand(command, locationId, type) {
const locName = state.terminals.find(t => t.location_id === locationId)?.location_name || locationId; const locName = locationId === 'all' ? "Cała wystawa" : (state.terminals.find(t => t.location_id === locationId)?.location_name || locationId);
const typeName = type === 'computer' ? 'Kontrolery' : 'Oświetlenie'; const typeName = type === 'computer' ? 'Kontrolery' : (type === 'ctrl' ? 'Oświetlenie' : 'Wszystkie urządzenia');
const actionName = command === COMMAND_WAKE ? "Włączenie" : (command === COMMAND_SHUTDOWN ? "Wyłączenie" : "Restart");
// 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( const confirmed = await customConfirm(
`Akcja grupowa: ${actionName}`, `Akcja grupowa: ${actionName}`,
@ -655,7 +668,13 @@
} }
async function runSingleCommand(command, terminalId, terminalName) { async function runSingleCommand(command, terminalId, terminalName) {
const actionName = command === COMMAND_WAKE ? "Włączenie" : (command === COMMAND_SHUTDOWN ? "Wyłączenie" : "Restart"); 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 terminal = state.terminals.find(t => String(t.id) === String(terminalId));
const confirmed = await customConfirm( const confirmed = await customConfirm(

Write Preview
Loading…
Cancel
Save