feat: edit page
This commit is contained in:
491
src/routes/space/[id]/edit/+page.svelte
Normal file
491
src/routes/space/[id]/edit/+page.svelte
Normal file
@@ -0,0 +1,491 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import Text from "$lib/components/inputs/Text.svelte";
|
||||
import Textarea from "$lib/components/inputs/Textarea.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import crossUrl from "$lib/assets/cross.svg";
|
||||
import Button from "$lib/components/Button.svelte";
|
||||
import Images from "$lib/components/inputs/Images.svelte";
|
||||
import {
|
||||
availableStudySpaceTags,
|
||||
wifiTags,
|
||||
powerOutletTags,
|
||||
volumeTags,
|
||||
gmapsLoader
|
||||
} from "$lib";
|
||||
import { onMount } from "svelte";
|
||||
import type { Json } from "$lib/database.js";
|
||||
|
||||
const { data } = $props();
|
||||
const { supabase } = $derived(data);
|
||||
|
||||
const { space, images } = $derived(data);
|
||||
const studySpaceData = $state({
|
||||
...space
|
||||
});
|
||||
|
||||
let scrollPosition = $state(0);
|
||||
const existingImages = $derived(
|
||||
Promise.all(
|
||||
images?.map(async ({ image_path }) => {
|
||||
const { data, error } = await supabase.storage
|
||||
.from("files_bucket")
|
||||
.download(image_path);
|
||||
if (error) {
|
||||
console.error(`Error downloading image ${image_path}:`, error);
|
||||
return null;
|
||||
}
|
||||
return { data, name: image_path.split("/").pop() || "image", type: data.type };
|
||||
}) || []
|
||||
)
|
||||
);
|
||||
let spaceImgs = $state<FileList>();
|
||||
let uploading = $state(false);
|
||||
|
||||
async function uploadStudySpace() {
|
||||
if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
|
||||
if (!studySpaceData.building_location) return alert("Please select a building location.");
|
||||
|
||||
const { data: studySpaceInsert, error: studySpaceError } = await supabase
|
||||
.from("study_spaces")
|
||||
.upsert(
|
||||
{
|
||||
...studySpaceData,
|
||||
building_location: studySpaceData.building_location as Json
|
||||
},
|
||||
{
|
||||
onConflict: "id"
|
||||
}
|
||||
)
|
||||
.select()
|
||||
.single();
|
||||
if (studySpaceError)
|
||||
return alert(`Error uploading study space: ${studySpaceError.message}`);
|
||||
|
||||
const imgUploads = await Promise.all(
|
||||
Array(spaceImgs.length)
|
||||
.keys()
|
||||
.map(async (i) => {
|
||||
const imageFile = spaceImgs![i];
|
||||
const resp = await supabase.storage
|
||||
.from("files_bucket")
|
||||
.upload(
|
||||
`public/${studySpaceInsert.id}-${crypto.randomUUID()}-${imageFile.name}`,
|
||||
imageFile,
|
||||
{
|
||||
contentType: imageFile.type
|
||||
}
|
||||
);
|
||||
return resp;
|
||||
})
|
||||
);
|
||||
|
||||
const imageError = imgUploads.find(({ error }) => error)?.error;
|
||||
if (imageError) return alert(`Error uploading image: ${imageError.message}`);
|
||||
if (space.id) {
|
||||
const { error: imageOverwriteError } = await supabase
|
||||
.from("study_space_images")
|
||||
.delete()
|
||||
.eq("study_space_id", space.id);
|
||||
if (imageOverwriteError)
|
||||
return alert(`Error overwriting existing images: ${imageOverwriteError.message}`);
|
||||
}
|
||||
|
||||
const { error: imageInsertError } = await supabase
|
||||
.from("study_space_images")
|
||||
.insert(
|
||||
imgUploads.map(({ data }) => ({
|
||||
study_space_id: studySpaceInsert.id,
|
||||
image_path: data!.path
|
||||
}))
|
||||
)
|
||||
.select();
|
||||
if (imageInsertError) return alert(`Error creating image: ${imageInsertError.message}`);
|
||||
|
||||
alert("Thank you for your contribution!");
|
||||
// Redirect to the new study space page
|
||||
await goto(`/space/${studySpaceInsert.id}`, {
|
||||
invalidate: ["db:study_spaces"]
|
||||
});
|
||||
}
|
||||
|
||||
// Tag
|
||||
let tagFilter = $state("");
|
||||
let tagFilterElem = $state<HTMLInputElement>();
|
||||
let filteredTags = $derived(
|
||||
availableStudySpaceTags
|
||||
.filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
|
||||
.filter((tag) => !studySpaceData.tags.includes(tag))
|
||||
);
|
||||
let dropdownVisible = $state(false);
|
||||
|
||||
function deleteTag(tagName: string) {
|
||||
return () => {
|
||||
studySpaceData.tags = studySpaceData.tags.filter((tag) => tag !== tagName);
|
||||
};
|
||||
}
|
||||
|
||||
function addTag(tagName: string) {
|
||||
return () => {
|
||||
if (!studySpaceData.tags.includes(tagName)) {
|
||||
studySpaceData.tags.push(tagName);
|
||||
}
|
||||
tagFilter = "";
|
||||
};
|
||||
}
|
||||
|
||||
let addressInput = $state<HTMLInputElement>();
|
||||
onMount(async () => {
|
||||
const loader = await gmapsLoader();
|
||||
const places = await loader.importLibrary("places");
|
||||
if (!addressInput) return console.error("Address input element not found");
|
||||
addressInput.value = studySpaceData.building_location?.formatted_address || "";
|
||||
if (studySpaceData.building_location?.name) {
|
||||
addressInput.value = `${studySpaceData.building_location.name}, ${addressInput.value}`;
|
||||
}
|
||||
const placeAutocomplete = new places.Autocomplete(addressInput, {
|
||||
componentRestrictions: { country: "gb" }
|
||||
});
|
||||
placeAutocomplete.addListener("place_changed", () => {
|
||||
studySpaceData.building_location = placeAutocomplete.getPlace();
|
||||
});
|
||||
});
|
||||
onMount(async () => {
|
||||
const images = await existingImages;
|
||||
const dt = new DataTransfer();
|
||||
images.forEach((response) => {
|
||||
if (response) {
|
||||
const file = new File([response.data], response.name, { type: response.type });
|
||||
dt.items.add(file);
|
||||
}
|
||||
});
|
||||
spaceImgs = dt.files;
|
||||
});
|
||||
</script>
|
||||
|
||||
<Navbar>
|
||||
<a href="/">
|
||||
<img src={crossUrl} alt="close" />
|
||||
</a>
|
||||
</Navbar>
|
||||
|
||||
<form
|
||||
onsubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
uploading = true;
|
||||
await uploadStudySpace();
|
||||
uploading = false;
|
||||
}}
|
||||
>
|
||||
<Images
|
||||
name="study-space-image"
|
||||
minHeight="16rem"
|
||||
bind:files={spaceImgs}
|
||||
bind:scrollPosition
|
||||
required
|
||||
/>
|
||||
{#if spaceImgs?.length || 0 > 0}
|
||||
<label class="additionalImages" for="additionalImages">
|
||||
Add more images
|
||||
<input
|
||||
type="file"
|
||||
name="additionalImages"
|
||||
id="additionalImages"
|
||||
multiple
|
||||
accept=".png, .jpg, .jpeg, .svg"
|
||||
onchange={function () {
|
||||
const dt = new DataTransfer();
|
||||
if (spaceImgs) {
|
||||
for (let i = 0; i < spaceImgs.length; i++) {
|
||||
dt.items.add(spaceImgs[i]);
|
||||
}
|
||||
}
|
||||
if (this.files) {
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
dt.items.add(this.files[i]);
|
||||
}
|
||||
}
|
||||
spaceImgs = dt.files;
|
||||
scrollPosition = dt.files.length - 1;
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<label for="location">Enter the name:</label>
|
||||
<Text
|
||||
name="location"
|
||||
bind:value={studySpaceData.location}
|
||||
placeholder="Room 123, Floor 1"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="compulsoryTags">
|
||||
<div class="compulsoryContainer">
|
||||
<label for="volume">Sound level:</label>
|
||||
<select bind:value={studySpaceData.volume} name="volume" class="compulsoryTagSelect">
|
||||
<option value="" disabled selected>How noisy is it?</option>
|
||||
{#each volumeTags as volumeTag (volumeTag)}
|
||||
<option value={volumeTag}>{volumeTag}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="compulsoryContainer">
|
||||
<label for="powerOutlets">Power outlets:</label>
|
||||
<select
|
||||
bind:value={studySpaceData.power}
|
||||
name="poweOutlets"
|
||||
class="compulsoryTagSelect"
|
||||
>
|
||||
<option value="" disabled selected>Power outlets?</option>
|
||||
{#each powerOutletTags as powerOutletTag (powerOutletTag)}
|
||||
<option value={powerOutletTag}>{powerOutletTag}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="compulsoryContainer">
|
||||
<label for="wifi">Wifi:</label>
|
||||
<select bind:value={studySpaceData.wifi} name="wifi" class="compulsoryTagSelect">
|
||||
<option value="" disabled selected>How's the wifi?</option>
|
||||
{#each wifiTags as wifiTag (wifiTag)}
|
||||
<option value={wifiTag}>{wifiTag}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="tags">Additional tags:</label>
|
||||
<div class="tagDisplay">
|
||||
{#each studySpaceData.tags as tagName (tagName)}
|
||||
<button class="tag" onclick={deleteTag(tagName)} type="button">
|
||||
{tagName}
|
||||
<img src={crossUrl} alt="delete" /></button
|
||||
>
|
||||
{/each}
|
||||
<input
|
||||
type="text"
|
||||
name="tagInput"
|
||||
class="tagInput"
|
||||
bind:value={tagFilter}
|
||||
bind:this={tagFilterElem}
|
||||
onfocus={() => {
|
||||
dropdownVisible = true;
|
||||
}}
|
||||
onblur={() => {
|
||||
dropdownVisible = false;
|
||||
}}
|
||||
onkeypress={(event) => {
|
||||
event.preventDefault();
|
||||
if (event.key === "Enter") {
|
||||
const tag = filteredTags[0];
|
||||
if (tag) addTag(tag)();
|
||||
}
|
||||
}}
|
||||
placeholder="Add tags..."
|
||||
/>
|
||||
{#if dropdownVisible}
|
||||
<div class="tagDropdown">
|
||||
{#each filteredTags as avaliableTag (avaliableTag)}
|
||||
<button
|
||||
class="avaliableTag"
|
||||
onclick={addTag(avaliableTag)}
|
||||
onmousedown={(e) => {
|
||||
// Keep input focused
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
{avaliableTag}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<label for="description">Optional brief description:</label>
|
||||
<Textarea
|
||||
name="description"
|
||||
bind:value={studySpaceData.description}
|
||||
placeholder="A quiet room with a lovely view of the park."
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
<label for="building-location">Add the building location:</label>
|
||||
<Text
|
||||
name="building-location"
|
||||
bind:inputElem={addressInput}
|
||||
placeholder="Huxley Building, Imperial South Kensington Campus"
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="submit">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={(spaceImgs?.length || 0) === 0 ||
|
||||
!studySpaceData.location ||
|
||||
!studySpaceData.wifi ||
|
||||
!studySpaceData.volume ||
|
||||
!studySpaceData.power ||
|
||||
!studySpaceData.building_location ||
|
||||
uploading}
|
||||
>
|
||||
Share this study space!
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
max-width: 32rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #ffffff;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.submit {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.5rem;
|
||||
bottom: 0;
|
||||
margin-left: -0.5rem;
|
||||
width: calc(100% + 1rem);
|
||||
}
|
||||
.tagDisplay {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: left;
|
||||
justify-content: left;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #eaffeb;
|
||||
background: none;
|
||||
color: #eaffeb;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.tagInput {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
color: #eaffeb;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
::placeholder {
|
||||
color: #859a90;
|
||||
opacity: 1;
|
||||
}
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #2e4653;
|
||||
color: #eaffeb;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
border-width: 0rem;
|
||||
}
|
||||
.tag img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.tagDropdown {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
background-color: #2e4653;
|
||||
box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0.5rem;
|
||||
overflow-y: auto;
|
||||
max-height: 10rem;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.avaliableTag {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #eaffeb;
|
||||
font-size: 0.9rem;
|
||||
margin: 0%;
|
||||
padding: 0 0.8rem 0.4rem;
|
||||
}
|
||||
.avaliableTag:first-child {
|
||||
padding-top: 0.6rem;
|
||||
background-color: hsl(201, 26%, 60%);
|
||||
}
|
||||
.avaliableTag:last-child {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.compulsoryTags {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: none;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.compulsoryContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
justify-content: top;
|
||||
border-radius: 0.5rem;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.compulsoryTagSelect {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #eaffeb;
|
||||
background: none;
|
||||
color: #eaffeb;
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.compulsoryTagSelect option {
|
||||
background-color: #2e4653;
|
||||
color: #eaffeb;
|
||||
}
|
||||
.additionalImages {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(-83deg, #3fb095, #49bd85);
|
||||
box-shadow: 0rem 0rem 0.5rem #182125;
|
||||
color: #eaffeb;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.additionalImages:focus {
|
||||
outline: 2px solid #007bff;
|
||||
}
|
||||
.additionalImages input {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user