ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show the kiosk label prefix, and let a plugin declare the settings it owns

Browse Source
This commit is contained in:
Cameron Proudlock
2026-08-06 18:17:56 -04:00
parent 307de925f1
commit c674000ccc
15 changed files with 1070 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
plugins/slides/frontend/views/SlideManager.vue
View File

@@ -33,10 +33,19 @@
<div v-else-if="!slides.length" class="muted empty">No slides yet. Upload some images.</div>
<div v-else class="slide-list">
<div v-for="(slide, idx) in slides" :key="slide.slideid" class="slide-row">
<div v-for="(slide, idx) in slides" :key="slide.slideid" class="slide-row"
:class="{ dragging: dragIndex === idx, 'drop-target': dropIndex === idx && dragIndex !== idx }"
draggable="true"
@dragstart="onDragStart(idx, $event)"
@dragover.prevent="dropIndex = idx"
@dragleave="onDragLeave(idx)"
@drop.prevent="onDrop(idx)"
@dragend="onDragEnd">
<input type="checkbox" class="pick" :value="slide.filename" v-model="selected" />
<span class="grip" title="Drag to reorder">&#8942;&#8942;</span>
<span class="order-num">{{ idx + 1 }}</span>
<img :src="withBase(slide.url)" :alt="slide.filename" class="thumb" />
<img :src="withBase(slide.url)" :alt="slide.filename" class="thumb"
@mouseenter="previewSlide = slide" @mouseleave="previewSlide = null" />
<span class="fname" :title="slide.filename">{{ slide.filename }}</span>
<div class="move">
<button class="btn btn-sm btn-secondary" :disabled="idx === 0" @click="move(idx, -1)" title="Move up">&uarr;</button>
@@ -45,6 +54,18 @@
</div>
</div>
</div>
<!--
Hover preview. A 120x68 thumbnail is cropped (object-fit: cover) and far
too small to read the text on a slide, so picking the right one meant
opening images by hand. Fixed position rather than inside the row: a
relatively-positioned parent would clip it, and the list scrolls.
Pointer-events none so it can never sit between the cursor and a button.
-->
<div v-if="previewSlide" class="slide-preview">
<img :src="withBase(previewSlide.url)" :alt="previewSlide.filename" />
<div class="slide-preview-name">{{ previewSlide.filename }}</div>
</div>
</div>
</template>
@@ -53,6 +74,60 @@ import { ref, computed, onMounted } from 'vue'
import { slidesApi } from '@/api'
import { withBase } from '@/utils/basePath'
// Slide currently hovered, shown enlarged. Null when the cursor is elsewhere.
const previewSlide = ref(null)
// Drag reordering. dragIndex is the row being carried, dropIndex the row it is
// currently over. Both null when no drag is in progress.
const dragIndex = ref(null)
const dropIndex = ref(null)
function onDragStart(idx, event) {
dragIndex.value = idx
// The hover preview would otherwise sit over the list for the whole drag.
previewSlide.value = null
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move'
// Firefox starts no drag at all unless some data is set.
event.dataTransfer.setData('text/plain', String(idx))
}
}
function onDragLeave(idx) {
// Only clear when leaving the row that is actually marked, or the row being
// entered next would clear its own highlight.
if (dropIndex.value === idx) dropIndex.value = null
}
function onDragEnd() {
dragIndex.value = null
dropIndex.value = null
}
async function onDrop(target) {
const from = dragIndex.value
onDragEnd()
if (from === null || from === target) return
await reorderTo(from, target)
}
// Shared by the drag handler and the up/down buttons, so both persist the same
// way and a failure recovers the same way.
async function reorderTo(from, to) {
const arr = slides.value.slice()
const [item] = arr.splice(from, 1)
arr.splice(to, 0, item)
slides.value = arr
try {
await slidesApi.reorder(surface.value, arr.map(s => s.filename))
} catch (err) {
console.error('Reorder failed:', err)
// The list on screen no longer matches the server; reload rather than
// leave an order that looks saved and is not.
await load()
}
}
const surfaces = [
{ key: 'lobby', label: 'Lobby Display' },
{ key: 'shopfloor', label: 'Shopfloor Screensaver' }
@@ -104,16 +179,7 @@ async function onUpload(event) {
async function move(idx, delta) {
const target = idx + delta
if (target < 0 || target >= slides.value.length) return
const arr = slides.value.slice()
const [item] = arr.splice(idx, 1)
arr.splice(target, 0, item)
slides.value = arr
try {
await slidesApi.reorder(surface.value, arr.map(s => s.filename))
} catch (err) {
console.error('Reorder failed:', err)
await load()
}
await reorderTo(idx, target)
}
async function deleteSelected() {
@@ -184,6 +250,28 @@ onMounted(load)
font-weight: 700;
color: var(--text-light);
}
.grip {
cursor: grab;
color: var(--text-light);
letter-spacing: -3px;
user-select: none;
padding: 0 0.25rem;
}
.slide-row {
transition: background 0.12s, opacity 0.12s;
}
.slide-row.dragging {
opacity: 0.4;
}
/* A line on the edge being dropped against, rather than moving rows around
under the cursor - that reads as the list fighting the drag. */
.slide-row.drop-target {
box-shadow: inset 0 2px 0 0 var(--primary);
}
.thumb {
width: 120px;
height: 68px;
@@ -191,6 +279,41 @@ onMounted(load)
object-fit: cover;
border-radius: 4px;
background: #000;
cursor: zoom-in;
}
.slide-preview {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
z-index: 1000;
padding: 0.5rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.slide-preview img {
display: block;
/* Bounded by the viewport, not the image: a 3300x2550 slide would otherwise
fill the screen. object-fit contain keeps the whole slide visible, since
the point is reading it rather than filling the box. */
max-width: min(46vw, 900px);
max-height: 76vh;
object-fit: contain;
background: #000;
border-radius: 4px;
}
.slide-preview-name {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--text-light);
text-align: center;
word-break: break-all;
}
.fname {
flex: 1;

31
plugins/slides/frontend/views/TVDashboard.vue
View File

@@ -67,9 +67,14 @@ onMounted(async () => {
// Refresh slide list every 60 seconds
refreshTimer = setInterval(fetchSlides, 60000)
// On window, not on an element: the display has nothing focused, and a
// presenter remote sends the same keys as a keyboard.
window.addEventListener('keydown', onKeydown)
})
onUnmounted(() => {
window.removeEventListener('keydown', onKeydown)
if (slideTimer) clearTimeout(slideTimer)
if (progressTimer) clearTimeout(progressTimer)
if (refreshTimer) clearInterval(refreshTimer)
@@ -139,6 +144,32 @@ function nextSlide() {
if (slides.value.length === 0) return
currentSlide.value = (currentSlide.value + 1) % slides.value.length
}
function previousSlide() {
if (slides.value.length === 0) return
const count = slides.value.length
currentSlide.value = (currentSlide.value - 1 + count) % count
}
// Left and right arrows step through the slides by hand. Someone standing at
// the display wanting to hold a slide, or go back to one that has just passed,
// otherwise has to wait for the whole rotation to come round again.
//
// Stepping RESTARTS the timer rather than leaving it running: advancing
// manually and then having it move again a second later, because the existing
// timer was most of the way through, reads as the display ignoring you.
function onKeydown(event) {
if (slides.value.length < 2) return
if (event.key === 'ArrowRight' || event.key === 'PageDown') {
event.preventDefault()
nextSlide()
scheduleNextSlide()
} else if (event.key === 'ArrowLeft' || event.key === 'PageUp') {
event.preventDefault()
previousSlide()
scheduleNextSlide()
}
}
</script>
<style scoped>