e9235de8ec
The uploaded-blueprint thumbnails on the map settings page and the setup wizard used the raw setting value (/api/settings/map-blueprint/ ...), which resolves at the server root and 404s under a subpath mount - while the map itself resolves through blueprintUrlFor and worked. Wrap the previews in withBase.
102 lines
3.7 KiB
Vue
102 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>Floor Map</h2>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<div class="setting-group">
|
|
<h3>Facility Blueprint</h3>
|
|
<p class="setting-description">
|
|
The floor-plan image and its pixel dimensions for this facility. Map
|
|
markers are positioned against these dimensions, so the width and
|
|
height must match the native size of the blueprint image. Leave the
|
|
image paths at their defaults to use the bundled sitemap.
|
|
</p>
|
|
|
|
<div class="setting-row">
|
|
<label>
|
|
<span>Blueprint image (light theme)</span>
|
|
<input
|
|
type="text"
|
|
v-model="settings.map_blueprint_light"
|
|
placeholder="/static/images/sitemap2025-light.png"
|
|
@blur="saveSetting('map_blueprint_light', settings.map_blueprint_light)"
|
|
:disabled="saving"
|
|
>
|
|
<div class="map-upload-row">
|
|
<input type="file" accept="image/*" @change="uploadBlueprint('light', $event)" :disabled="mapUploading" />
|
|
<img v-if="settings.map_blueprint_light" :src="withBase(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 (dark theme)</span>
|
|
<input
|
|
type="text"
|
|
v-model="settings.map_blueprint_dark"
|
|
placeholder="/static/images/sitemap2025-dark.png"
|
|
@blur="saveSetting('map_blueprint_dark', settings.map_blueprint_dark)"
|
|
:disabled="saving"
|
|
>
|
|
<div class="map-upload-row">
|
|
<input type="file" accept="image/*" @change="uploadBlueprint('dark', $event)" :disabled="mapUploading" />
|
|
<img v-if="settings.map_blueprint_dark" :src="withBase(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>
|
|
|
|
<div class="setting-row">
|
|
<label>
|
|
<span>Blueprint width (pixels)</span>
|
|
<input
|
|
type="number"
|
|
v-model="settings.map_width"
|
|
min="1"
|
|
placeholder="3300"
|
|
@blur="saveSetting('map_width', settings.map_width)"
|
|
:disabled="saving"
|
|
>
|
|
<small class="input-hint">Native pixel width of the blueprint image</small>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label>
|
|
<span>Blueprint height (pixels)</span>
|
|
<input
|
|
type="number"
|
|
v-model="settings.map_height"
|
|
min="1"
|
|
placeholder="2550"
|
|
@blur="saveSetting('map_height', settings.map_height)"
|
|
:disabled="saving"
|
|
>
|
|
<small class="input-hint">Native pixel height of the blueprint image</small>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="error" class="error-message">{{ error }}</div>
|
|
<div v-if="success" class="settings-success">{{ success }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { withBase } from '../../utils/basePath'
|
|
import { onMounted } from 'vue'
|
|
import { useSystemSettings } from '../../composables/systemSettings'
|
|
|
|
const {
|
|
settings, saving, mapUploading, error, success,
|
|
loadSettings, saveSetting, uploadBlueprint,
|
|
} = useSystemSettings()
|
|
|
|
onMounted(loadSettings)
|
|
</script>
|