{#each spaces as space (space.id)}
{@const status = spaceStatus[space.id] || { isOccupied: false }}
@@ -160,7 +161,7 @@
{#if status.isOccupied && space.type === 'DESK'}
{#if status.reservation?.user?.profilePicture}
- 
+ })
{:else}
{status.reservation?.user?.email?.charAt(0).toUpperCase()}
diff --git a/apps/web/src/lib/components/admin/BuildingEditorModal.svelte b/apps/web/src/lib/components/admin/BuildingEditorModal.svelte
index a22b96a..3b3358e 100644
--- a/apps/web/src/lib/components/admin/BuildingEditorModal.svelte
+++ b/apps/web/src/lib/components/admin/BuildingEditorModal.svelte
@@ -2,6 +2,7 @@
import { createEventDispatcher } from 'svelte';
import { X, Plus, Trash2, Building2 } from 'lucide-svelte';
import { apiFetch } from '$lib/api/client';
+ import { resolveAssetUrl } from '$lib/utils/url';
export let building: any = null; // if null, we are creating a new building
export let show = false;
@@ -11,11 +12,15 @@
let name = building?.name || '';
let description = building?.description || '';
let imageUrl = building?.imageUrl || '';
+ let imageFile: File | null = null;
+ let fileInput: HTMLInputElement;
let floors = building?.floors ? JSON.parse(JSON.stringify(building.floors)) : [];
let loading = false;
let error = '';
let showDangerZone = false;
+ const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
$: {
if (show && building) {
name = building.name;
@@ -26,22 +31,62 @@
name = '';
description = '';
imageUrl = '';
+ imageFile = null;
floors = [];
}
}
+ function handleFileChange(e: Event) {
+ const target = e.target as HTMLInputElement;
+ const file = target.files?.[0];
+ if (file) {
+ if (file.size > MAX_FILE_SIZE) {
+ error = "File size exceeds 10MB limit";
+ target.value = "";
+ return;
+ }
+ imageFile = file;
+ // If a file is selected, clear the imageUrl to avoid ambiguity
+ imageUrl = "";
+ error = "";
+ }
+ }
+
+ function handleUrlChange() {
+ // If the user starts typing a URL, clear the file selection
+ if (imageFile) {
+ imageFile = null;
+ if (fileInput) {
+ fileInput.value = "";
+ }
+ }
+ }
+
+ // Reactive preview URL
+ $: previewUrl = imageFile ? URL.createObjectURL(imageFile) : resolveAssetUrl(imageUrl);
+
async function saveBuilding() {
loading = true;
error = '';
try {
let savedBuilding;
if (building) {
+ if (imageFile) {
+ const formData = new FormData();
+ formData.append('file', imageFile);
+ const assetResponse = await apiFetch(`/assets/building/${building.id}/image`, {
+ method: 'POST',
+ body: formData,
+ });
+ imageUrl = assetResponse.imageUrl;
+ }
+
savedBuilding = await apiFetch(`/spaces/buildings/${building.id}`, {
method: 'PATCH',
body: JSON.stringify({
name,
description: description || null,
- imageUrl: imageUrl || null
+ imageUrl: imageUrl || ""
})
});
@@ -60,14 +105,31 @@
}
}
} else {
- savedBuilding = await apiFetch('/spaces/buildings', {
+ savedBuilding = await apiFetch('/spaces/buildings', {
method: 'POST',
body: JSON.stringify({
name,
description: description || null,
- imageUrl: imageUrl || null
+ imageUrl: imageUrl || ""
})
});
+
+ if (imageFile) {
+ const formData = new FormData();
+ formData.append('file', imageFile);
+ const assetResponse = await apiFetch(`/assets/building/${savedBuilding.id}/image`, {
+ method: 'POST',
+ body: formData,
+ });
+
+ // Re-update the building with the new image URL returned from asset upload
+ savedBuilding = await apiFetch(`/spaces/buildings/${savedBuilding.id}`, {
+ method: 'PATCH',
+ body: JSON.stringify({
+ imageUrl: assetResponse.imageUrl
+ })
+ });
+ }
// Add floors if any were defined during creation
for (const floor of floors) {
@@ -78,6 +140,7 @@
}
}
+ imageFile = null;
dispatch('save');
close();
} catch (e: any) {
@@ -173,11 +236,25 @@
-
+
+
+
+
+
+
+ Upload an image for this building (max 10MB).
+
+
- {#if imageUrl}
- 
+ {#if previewUrl}
+ 
{:else}
(`/assets/floor/${floorId}/plan`, {
+ method: 'POST',
+ body: formData
+ });
- // Save to backend
- try {
- await apiFetch(`/spaces/floor/${floorId}/plan`, {
- method: 'PATCH',
- body: JSON.stringify({ planImageUrl: url })
- });
- } catch (err) {
- console.error('Failed to update floor plan', err);
- }
- };
- reader.readAsDataURL(file);
+ // Update local plan image URL (which should be the served asset URL)
+ planImageUrl = updatedFloor.planImageUrl;
+ alert('Floorplan uploaded successfully!');
+ } catch (err: any) {
+ console.error('Failed to upload floor plan', err);
+ alert(err.message || 'Failed to upload floor plan');
+ }
}
async function saveLayout() {
@@ -350,7 +356,7 @@
{#if !planImageUrl}
diff --git a/apps/web/src/lib/utils/url.ts b/apps/web/src/lib/utils/url.ts
new file mode 100644
index 0000000..975fa84
--- /dev/null
+++ b/apps/web/src/lib/utils/url.ts
@@ -0,0 +1,15 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000';
+
+export function resolveAssetUrl(url: string | null | undefined): string {
+ if (!url) return '';
+ if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('blob:') || url.startsWith('data:')) {
+ return url;
+ }
+ // If it starts with /assets/, prepend API_BASE_URL
+ if (url.startsWith('/assets/')) {
+ // Check if it's already a full URL (though startsWith /assets/ implies relative)
+ return `${API_BASE_URL}${url}`;
+ }
+ // Otherwise, return as is (could be a legacy relative path or something else)
+ return url;
+}
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 10c6ee1..1102ac7 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
import { token, user } from "$lib/stores/auth";
import { organization, loadOrganization } from "$lib/stores/organization";
import { onMount } from "svelte";
+ import { resolveAssetUrl } from "$lib/utils/url";
onMount(async () => {
if ($user?.organizationId) {
@@ -19,7 +20,7 @@