Änderung Controller
This commit is contained in:
Erik Thiele
@@ -150,8 +150,12 @@
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
.media-list .list-group-item.active {
|
||||
background: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
background: #e9ecef;
|
||||
border-color: #d9dee3;
|
||||
}
|
||||
[data-bs-theme="dark"] .media-list .list-group-item.active {
|
||||
background: #2b3440;
|
||||
border-color: #3a4555;
|
||||
}
|
||||
.upload-dropzone {
|
||||
border: 1.5px dashed var(--ccm-border);
|
||||
@@ -202,9 +206,31 @@
|
||||
.control-btn {
|
||||
min-width: 3.2rem;
|
||||
}
|
||||
.app-footer {
|
||||
margin-top: 1rem;
|
||||
padding: 0.65rem 1.5rem 0.95rem;
|
||||
color: var(--ccm-muted);
|
||||
font-size: 0.82rem;
|
||||
background: transparent;
|
||||
}
|
||||
.app-footer-inner {
|
||||
width: 100%;
|
||||
max-width: 1320px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.2rem 0.75rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
}
|
||||
.app-footer-separator {
|
||||
color: #b0b7c3;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.control-btn { min-width: 2.8rem; font-size: 0.85rem; }
|
||||
.control-btn i { font-size: 1.1rem; }
|
||||
.app-footer-inner { gap: 0.1rem 0.5rem; font-size: 0.75rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -217,8 +243,8 @@
|
||||
<span class="navbar-brand-wordmark"><strong>Videoplayer</strong><span>Media Kiosk</span></span>
|
||||
</a>
|
||||
<div class="ms-auto d-flex align-items-center gap-2 flex-wrap justify-content-end">
|
||||
<button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i><span>Theme</span></button>
|
||||
<div class="topbar-metric"><i class="ti ti-circle-check-filled"></i><span>Online</span></div>
|
||||
<button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i></button>
|
||||
<div class="topbar-metric" id="online-indicator"><i class="ti ti-circle-check-filled"></i><span id="online-label">Online</span></div>
|
||||
<div class="topbar-metric"><i class="ti ti-device-tv"></i><span id="host-label">{{ request.host }}</span></div>
|
||||
<div class="topbar-metric"><i class="ti ti-clock-hour-4"></i><span id="clock-label">--:--</span></div>
|
||||
</div>
|
||||
@@ -268,7 +294,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Media Library -->
|
||||
<div class="card shadow-sm">
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-photo-scan"></i></span>
|
||||
@@ -276,7 +302,31 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data" class="mb-3">
|
||||
<div class="mb-2 fw-medium">Dateien</div>
|
||||
<div class="list-group media-list" id="media-list">
|
||||
{% for item in items %}
|
||||
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
|
||||
<span class="text-truncate" style="min-width:0">{{ item.name }}</span>
|
||||
<span class="ms-auto d-flex align-items-center gap-1 flex-shrink-0">
|
||||
<span class="badge bg-secondary-lt text-secondary">{{ item.kind }}</span>
|
||||
<i class="ti ti-trash text-danger" style="cursor:pointer;font-size:1.05rem" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen"></i>
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload -->
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-cloud-upload"></i></span>
|
||||
<h3 class="card-title mb-0">Dateien hochladen</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
|
||||
<input id="file-input" class="d-none" type="file" name="files" multiple accept="video/*,audio/*,image/*">
|
||||
<div id="dropzone" class="upload-dropzone mb-2">
|
||||
<div class="mb-1"><i class="ti ti-cloud-upload fs-2"></i></div>
|
||||
@@ -287,33 +337,33 @@
|
||||
<button type="submit" class="btn btn-primary"><i class="ti ti-upload me-1"></i>Hochladen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mb-2 fw-medium">Dateien</div>
|
||||
<div class="list-group media-list" id="media-list">
|
||||
{% for item in items %}
|
||||
<button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
|
||||
<span class="text-truncate me-2">{{ item.name }}</span>
|
||||
<span>
|
||||
<span class="badge bg-secondary-lt text-secondary me-2">{{ item.kind }}</span>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen">
|
||||
<i class="ti ti-trash"></i>
|
||||
</button>
|
||||
</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<div class="app-footer-inner">
|
||||
<span>Videoplayer Media Kiosk</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>© {{ app_year }} CANCOM GmbH</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>Version {{ app_version }}</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>Host {{ app_host }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const clockLabel = document.getElementById('clock-label');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const nowPlaying = document.getElementById('now-playing');
|
||||
const playStatus = document.getElementById('play-status');
|
||||
const onlineIndicator = document.getElementById('online-indicator');
|
||||
const onlineLabel = document.getElementById('online-label');
|
||||
const volumeSlider = document.getElementById('volume-slider');
|
||||
const volumeLabel = document.getElementById('volume-label');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
@@ -378,6 +428,17 @@
|
||||
clearHighlight();
|
||||
}
|
||||
updateVolume(state.volume);
|
||||
updateOnline(state.display_online);
|
||||
}
|
||||
|
||||
function updateOnline(online) {
|
||||
if (online) {
|
||||
onlineLabel.textContent = 'Online';
|
||||
onlineIndicator.style.opacity = '1';
|
||||
} else {
|
||||
onlineLabel.textContent = 'Offline';
|
||||
onlineIndicator.style.opacity = '0.5';
|
||||
}
|
||||
}
|
||||
|
||||
async function pollState() {
|
||||
@@ -461,8 +522,8 @@
|
||||
function updateThemeToggle() {
|
||||
const theme = document.documentElement.getAttribute('data-bs-theme');
|
||||
themeToggle.innerHTML = theme === 'dark'
|
||||
? '<i class="ti ti-sun-high"></i><span>Theme</span>'
|
||||
: '<i class="ti ti-moon-stars"></i><span>Theme</span>';
|
||||
? '<i class="ti ti-sun-high"></i>'
|
||||
: '<i class="ti ti-moon-stars"></i>';
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
|
||||
@@ -172,9 +172,15 @@
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function heartbeat() {
|
||||
fetch('/api/display/ping', { method: 'POST' }).catch(() => {});
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
poll();
|
||||
heartbeat();
|
||||
setInterval(poll, 1500);
|
||||
setInterval(heartbeat, 5000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user