feat: Added feedback feature
This commit is contained in:
Barf-Vader
338
src/lib/components/Feedback.svelte
Normal file
338
src/lib/components/Feedback.svelte
Normal file
@@ -0,0 +1,338 @@
|
||||
<script lang="ts">
|
||||
import crossUrl from "$lib/assets/cross.svg";
|
||||
import type { Table } from "$lib";
|
||||
import type { SupabaseClient } from "@supabase/supabase-js";
|
||||
import type { Database } from "$lib/database.d.ts";
|
||||
import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
|
||||
import { invalidate } from "$app/navigation";
|
||||
|
||||
type StudySpaceData = Omit<
|
||||
Table<"study_spaces">,
|
||||
"id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
|
||||
> & {
|
||||
id?: string;
|
||||
building_location?: google.maps.places.PlaceResult;
|
||||
};
|
||||
interface Props {
|
||||
studySpaceData: StudySpaceData;
|
||||
supabase: SupabaseClient<Database>;
|
||||
hideFunc: () => void;
|
||||
}
|
||||
|
||||
const { studySpaceData, supabase, hideFunc }: Props = $props();
|
||||
let newStudySpaceData: StudySpaceData = $state({ ...studySpaceData });
|
||||
let uploading = $state(false);
|
||||
async function uploadFeedback() {
|
||||
const { error: feedbackUpload } = await supabase
|
||||
.from("study_spaces")
|
||||
.update({
|
||||
volume: newStudySpaceData.volume,
|
||||
wifi: newStudySpaceData.wifi,
|
||||
power: newStudySpaceData.power,
|
||||
tags: newStudySpaceData.tags
|
||||
})
|
||||
.eq("id", newStudySpaceData.id ?? "");
|
||||
invalidate("db:study_spaces");
|
||||
if (feedbackUpload) return alert(`Error submitting feedback: ${feedbackUpload.message}`);
|
||||
else alert("Feedback submitted successfully!");
|
||||
}
|
||||
|
||||
// Tag
|
||||
let tagFilter = $state("");
|
||||
let tagFilterElem = $state<HTMLInputElement>();
|
||||
let filteredTags = $derived(
|
||||
availableStudySpaceTags
|
||||
.filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
|
||||
.filter((tag) => !newStudySpaceData.tags.includes(tag))
|
||||
);
|
||||
let dropdownVisible = $state(false);
|
||||
|
||||
function deleteTag(tagName: string) {
|
||||
return () => {
|
||||
newStudySpaceData.tags = newStudySpaceData.tags.filter((tag) => tag !== tagName);
|
||||
};
|
||||
}
|
||||
|
||||
function addTag(tagName: string) {
|
||||
return () => {
|
||||
if (!newStudySpaceData.tags.includes(tagName)) {
|
||||
newStudySpaceData.tags.push(tagName);
|
||||
}
|
||||
tagFilter = "";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overlay">
|
||||
<form
|
||||
onsubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
uploading = true;
|
||||
await uploadFeedback();
|
||||
uploading = false;
|
||||
hideFunc();
|
||||
}}
|
||||
class="feedbackContainer"
|
||||
>
|
||||
<h1 class="submitHeader">Submit Feedback</h1>
|
||||
|
||||
<div class="compulsoryTags">
|
||||
<div class="compulsoryContainer">
|
||||
<label for="volume">Sound level:</label>
|
||||
<select
|
||||
bind:value={newStudySpaceData.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={newStudySpaceData.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={newStudySpaceData.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 newStudySpaceData.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>
|
||||
|
||||
<button disabled={uploading} class="submit">Submit</button>
|
||||
<button type="button" class="exit" aria-label="exit" onclick={hideFunc}
|
||||
><img src={crossUrl} alt="exit" /></button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(8, 15, 18, 0.9);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.feedbackContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background-color: #182125;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
|
||||
color: #eaffeb;
|
||||
position: absolute;
|
||||
translate: 0 -3.5rem;
|
||||
border: 2px solid #eaffeb;
|
||||
}
|
||||
|
||||
.submitHeader {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background-color: #49bd85;
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exit {
|
||||
position: absolute;
|
||||
top: 0.1rem;
|
||||
right: 0.1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: none;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user