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

Upload floor-map blueprints (light/dark) instead of typing a path

Browse Source 
The Floor Map settings only had text fields for the blueprint image path with
no way to upload one. Add a real upload.

- POST /settings/map-blueprint (multipart: file + theme) saves the image to the
  instance maps dir and points map_blueprint_<theme> at the served URL;
  GET /settings/map-blueprint/<file> serves it (public - kiosks read the map).
- Settings > Floor Map: a file picker + thumbnail next to each theme's field
  (still accepts a manual path/URL too).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-07-10 10:50:51 -04:00
parent d08f341403
commit b26d0d1b87
3 changed files with 97 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/views/settings/SystemSettings.vue
View File

@@ -358,7 +358,7 @@
<div class="setting-row">
<label>
<span>Blueprint image URL (light theme)</span>
<span>Blueprint image (light theme)</span>
<input
type="text"
v-model="settings.map_blueprint_light"
@@ -366,13 +366,17 @@
@blur="saveSetting('map_blueprint_light', settings.map_blueprint_light)"
:disabled="saving"
>
<small class="input-hint">Path or URL to the light-theme floor plan</small>
<div class="map-upload-row">
<input type="file" accept="image/*" @change="uploadBlueprint('light', $event)" :disabled="mapUploading" />
<img v-if="settings.map_blueprint_light" :src="settings.map_blueprint_light" class="map-thumb" alt="light blueprint" />
</div>
<small class="input-hint">Upload an image, or type a path/URL to the light-theme floor plan</small>
</label>
</div>
<div class="setting-row">
<label>
<span>Blueprint image URL (dark theme)</span>
<span>Blueprint image (dark theme)</span>
<input
type="text"
v-model="settings.map_blueprint_dark"
@@ -380,7 +384,11 @@
@blur="saveSetting('map_blueprint_dark', settings.map_blueprint_dark)"
:disabled="saving"
>
<small class="input-hint">Path or URL to the dark-theme floor plan</small>
<div class="map-upload-row">
<input type="file" accept="image/*" @change="uploadBlueprint('dark', $event)" :disabled="mapUploading" />
<img v-if="settings.map_blueprint_dark" :src="settings.map_blueprint_dark" class="map-thumb map-thumb-dark" alt="dark blueprint" />
</div>
<small class="input-hint">Upload an image, or type a path/URL to the dark-theme floor plan</small>
</label>
</div>
@@ -788,6 +796,7 @@ const computerTypes = ref([]) // ComputerType names for the dropdown
const loading = ref(true)
const saving = ref(false)
const mapUploading = ref(false)
const testingEmail = ref(false)
const error = ref('')
const success = ref('')
@@ -908,6 +917,27 @@ async function changePcTypeMapping(pxetype, computertype) {
}
}
async function uploadBlueprint(theme, event) {
const file = event.target.files[0]
if (!file) return
mapUploading.value = true
error.value = ''
success.value = ''
try {
const { data } = await settingsApi.uploadMapBlueprint(theme, file)
const url = data?.data?.value
if (theme === 'light') settings.map_blueprint_light = url
else settings.map_blueprint_dark = url
success.value = 'Blueprint uploaded'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {
error.value = apiError(e, 'Upload failed')
} finally {
mapUploading.value = false
event.target.value = ''
}
}
async function toggleSetting(key) {
const newValue = !settings[key]
await saveSetting(key, newValue)
@@ -1319,4 +1349,7 @@ onMounted(loadSettings)
.identifier-matrix .identifier-name {
color: var(--text);
}
.map-upload-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.map-thumb { height: 40px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.map-thumb-dark { background: #222; }
</style>