football2801
8beb7331dd
CI / test (push) Has been cancelled
Three problems were stacked:
1. The 200 serving path didn't set currentImage when a locked image was
served (RotationService.advance bypassed). The frame got the locked
photo; the DB kept the previous one; Home showed the old one.
2. The 304 path didn't flush at all. lastSeenAt (markSeen) was lost on
every no-change poll, and any drift in currentImage couldn't self-heal.
For a frame that's been locked for a while, polls cycle as 304 forever
and the DB stays wrong indefinitely.
3. Pull-to-refresh fetched via fetchDevices(), which flips loading=true
and replaces the cards with "Loading…" mid-fetch. The PTR spinner was
working but users couldn't see the result of their refresh.
Fixes:
- Both 200 and 304 paths now set currentImage = $image and flush. The
304 path becomes self-healing for any device whose currentImage drifted
from reality (e.g., from before the 200-path fix).
- fetchDevices / fetchImages take an optional { silent: true } that
skips toggling loading.value. PTR refresh callbacks pass silent so
the cards stay visible during background refresh.
- HomeView also listens on visibilitychange and silently re-fetches when
the PWA returns to foreground, so reopening the app shows current
state without a manual pull.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref } from 'vue'
|
|
import type { Device } from '@/types'
|
|
|
|
export const useDevicesStore = defineStore('devices', () => {
|
|
const devices = ref<Device[]>([])
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
/**
|
|
* Fetch the device list. Pass `silent: true` from background refreshes
|
|
* (pull-to-refresh, visibility-change polling) so the loading spinner
|
|
* doesn't blink and replace the existing cards mid-fetch.
|
|
*/
|
|
async function fetchDevices(opts: { silent?: boolean } = {}) {
|
|
if (!opts.silent) loading.value = true
|
|
error.value = null
|
|
try {
|
|
const res = await fetch('/api/devices')
|
|
if (!res.ok) throw new Error('Failed to load devices')
|
|
devices.value = await res.json()
|
|
} catch (e) {
|
|
error.value = e instanceof Error ? e.message : 'Unknown error'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function updateDevice(id: number, patch: Partial<Pick<Device, 'name' | 'orientation' | 'rotationIntervalMinutes' | 'wakeHour' | 'timezone' | 'uniquenessWindow'>>) {
|
|
const res = await fetch(`/api/devices/${id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(patch),
|
|
})
|
|
if (!res.ok) throw new Error('Failed to update device')
|
|
const updated: Device = await res.json()
|
|
const idx = devices.value.findIndex(d => d.id === id)
|
|
if (idx !== -1) devices.value[idx] = updated
|
|
return updated
|
|
}
|
|
|
|
async function lockImage(deviceId: number, imageId: number): Promise<Device> {
|
|
const res = await fetch(`/api/devices/${deviceId}/lock`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ imageId }),
|
|
})
|
|
if (!res.ok) throw new Error('Failed to lock image')
|
|
const updated: Device = await res.json()
|
|
const idx = devices.value.findIndex(d => d.id === deviceId)
|
|
if (idx !== -1) devices.value[idx] = updated
|
|
return updated
|
|
}
|
|
|
|
async function unlockImage(deviceId: number): Promise<Device> {
|
|
const res = await fetch(`/api/devices/${deviceId}/lock`, { method: 'DELETE' })
|
|
if (!res.ok) throw new Error('Failed to unlock')
|
|
const updated: Device = await res.json()
|
|
const idx = devices.value.findIndex(d => d.id === deviceId)
|
|
if (idx !== -1) devices.value[idx] = updated
|
|
return updated
|
|
}
|
|
|
|
return { devices, loading, error, fetchDevices, updateDevice, lockImage, unlockImage }
|
|
})
|