Imperial-MEng/drp-48
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/filter-by-tags' of https://gitlab.doc.ic.ac.uk/gk1623/drp-48 into feat/filter-by-tags

Browse Source
This commit is contained in:
TadiosT
2025-06-11 03:40:34 +01:00
parent 3d95ea3763 d7fcf9d9ff
commit 348229691f
17 changed files with 438 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/CompulsoryTags.svelte
View File

@@ -33,7 +33,7 @@
background-color: #eaffeb;
color: #2e4653;
cursor: pointer;
padding: 0.2rem 0.6rem;
padding: 0.2rem 0.2rem;
}
.compulsoryTagYellow {
display: flex;
@@ -45,7 +45,7 @@
background-color: #ffffd4;
color: #534b2e;
cursor: pointer;
padding: 0.2rem 0.6rem;
padding: 0.2rem 0.2rem;
}
.compulsoryTagRed {
display: flex;
@@ -57,6 +57,6 @@
background-color: #ffcece;
color: #532e2e;
cursor: pointer;
padding: 0.2rem 0.6rem;
padding: 0.2rem 0.2rem;
}
</style>

140
src/lib/components/Report.svelte Normal file
View File

@@ -0,0 +1,140 @@
<script lang="ts">
import { reportTypes } from "$lib";
import crossUrl from "$lib/assets/cross.svg";
import Textarea from "./inputs/Textarea.svelte";
import type { Table } from "$lib";
import type { SupabaseClient } from "@supabase/supabase-js";
import type { Database } from "$lib/database.d.ts";
interface Props {
data: { supabase: SupabaseClient<Database> };
studySpaceId: string;
hideFunc: () => void;
}
const { data, studySpaceId, hideFunc }: Props = $props();
const { supabase } = $derived(data);
let uploading = $state(false);
let reportData = $state<Omit<Table<"reports">, "id" | "created_at" | "updated_at">>({
study_space_id: studySpaceId,
type: "",
content: ""
});
async function uploadReport() {
const { error: reportUploadError } = await supabase
.from("reports")
.insert(reportData)
.select()
.single();
if (reportUploadError)
return alert(`Error submitting report: ${reportUploadError.message}`);
else alert("Report submitted successfully!");
}
</script>
<div class="overlay">
<form
onsubmit={async (event) => {
event.preventDefault();
uploading = true;
await uploadReport();
uploading = false;
hideFunc();
}}
class="reportContainer"
>
<h1 class="submitHeader">Submit a Report</h1>
<p>What's the reason?</p>
<select name="reportType" class="reportType" required bind:value={reportData.type}>
<option value="" disabled selected>Report type</option>
{#each reportTypes as reportType (reportType)}
<option value={reportType}>{reportType}</option>
{/each}
</select>
<label for="description">Briefly describe the problem:</label>
<Textarea
name="description"
placeholder="Image is inappropriate..."
rows={2}
bind:value={reportData.content}
/>
<button
disabled={!reportData.type || reportData.content?.length === 0 || 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;
}
.reportContainer {
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%;
}
.reportType {
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;
}
.reportType option {
background-color: #2e4653;
color: #eaffeb;
}
.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;
}
</style>

6
src/lib/components/SpaceCard.svelte
View File

@@ -77,8 +77,8 @@
.compulsoryContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
font-size: 0.875rem;
grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
gap: 0.3rem;
font-size: 0.8rem;
}
</style>

5
src/lib/components/inputs/Text.svelte
View File

@@ -1,15 +1,16 @@
<script lang="ts">
interface Props {
inputElem?: HTMLInputElement;
name: string;
value?: string | null;
placeholder?: string;
required?: boolean;
}
let { value = $bindable(), name, ...rest }: Props = $props();
let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
</script>
<input type="text" id={name} {name} bind:value {...rest} />
<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
<style>
input {

44
src/lib/database.d.ts vendored
View File

@@ -34,6 +34,41 @@ export type Database = {
}
public: {
Tables: {
reports: {
Row: {
content: string | null
created_at: string | null
id: string
study_space_id: string | null
type: string
updated_at: string | null
}
Insert: {
content?: string | null
created_at?: string | null
id?: string
study_space_id?: string | null
type: string
updated_at?: string | null
}
Update: {
content?: string | null
created_at?: string | null
id?: string
study_space_id?: string | null
type?: string
updated_at?: string | null
}
Relationships: [
{
foreignKeyName: "reports_study_space_id_fkey"
columns: ["study_space_id"]
isOneToOne: false
referencedRelation: "study_spaces"
referencedColumns: ["id"]
},
]
}
study_space_images: {
Row: {
created_at: string | null
@@ -65,7 +100,8 @@ export type Database = {
}
study_spaces: {
Row: {
building_location: string | null
building_location: Json | null
building_location_old: string | null
created_at: string | null
description: string | null
id: string
@@ -77,7 +113,8 @@ export type Database = {
wifi: string
}
Insert: {
building_location?: string | null
building_location?: Json | null
building_location_old?: string | null
created_at?: string | null
description?: string | null
id?: string
@@ -89,7 +126,8 @@ export type Database = {
wifi: string
}
Update: {
building_location?: string | null
building_location?: Json | null
building_location_old?: string | null
created_at?: string | null
description?: string | null
id?: string

17
src/lib/index.ts
View File

@@ -1,3 +1,4 @@
import { PUBLIC_GMAPS_API_KEY } from "$env/static/public";
import type { Database } from "./database.d.ts";
export type Table<T extends keyof Database["public"]["Tables"]> =
@@ -26,3 +27,19 @@ export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
export const allTags = [...availableStudySpaceTags, ...volumeTags, ...wifiTags, ...powerOutletTags];
export const reportTypes = [
"Inappropriate content",
"Duplicate content",
"Incorrect content",
"Other"
];
export async function gmapsLoader() {
const { Loader } = await import("@googlemaps/js-api-loader");
return new Loader({
apiKey: PUBLIC_GMAPS_API_KEY,
version: "weekly",
libraries: ["places"]
});
}

9
src/routes/+layout.svelte
View File

@@ -1,7 +1,16 @@
<script lang="ts">
import posthog from "posthog-js";
import logoUrl from "$lib/assets/logo.svg";
import { onMount } from "svelte";
const { children } = $props();
onMount(() => {
posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
api_host: "https://eu.i.posthog.com",
person_profiles: "always"
});
});
</script>
<svelte:head>

42
src/routes/space/+page.svelte
View File

@@ -7,15 +7,30 @@
import Button from "$lib/components/Button.svelte";
import Images from "$lib/components/inputs/Images.svelte";
import type { Table } from "$lib";
import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
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);
let spaceImgs = $state<FileList>();
let uploading = $state(false);
let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
let studySpaceData = $state<
Omit<
Table<"study_spaces">,
"id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
> & {
building_location?: google.maps.places.PlaceResult;
}
>({
description: "",
building_location: "",
building_location: undefined,
location: "",
tags: [],
volume: "",
@@ -25,10 +40,14 @@
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")
.insert(studySpaceData)
.insert({
...studySpaceData,
building_location: studySpaceData.building_location as Json
})
.select()
.single();
if (studySpaceError)
@@ -92,6 +111,19 @@
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");
const placeAutocomplete = new places.Autocomplete(addressInput, {
componentRestrictions: { country: "gb" }
});
placeAutocomplete.addListener("place_changed", () => {
studySpaceData.building_location = placeAutocomplete.getPlace();
});
});
</script>
<Navbar>
@@ -211,7 +243,7 @@
<label for="building-location">Add the building location:</label>
<Text
name="building-location"
bind:value={studySpaceData.building_location}
bind:inputElem={addressInput}
placeholder="Huxley Building, Imperial South Kensington Campus"
required
/>

64
src/routes/space/[id]/+page.svelte
View File

@@ -4,10 +4,14 @@
import placeholder from "$lib/assets/study_space.png";
import Carousel from "$lib/components/Carousel.svelte";
import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
import Report from "$lib/components/Report.svelte";
import { onMount } from "svelte";
import { gmapsLoader } from "$lib";
const { data } = $props();
const { space, supabase } = $derived(data);
const place = $derived(space.building_location as google.maps.places.PlaceResult);
const imgUrls = $derived(
space.study_space_images.length === 0
? [placeholder]
@@ -17,6 +21,28 @@
.publicUrl
)
);
let isReportVisible = $state(false);
function hideFunc() {
isReportVisible = false;
}
let mapElem = $state<HTMLDivElement>();
onMount(async () => {
if (!mapElem) return console.error("Map element not found");
const loader = await gmapsLoader();
const { Map } = await loader.importLibrary("maps");
const { AdvancedMarkerElement } = await loader.importLibrary("marker");
const map = new Map(mapElem, {
center: place.geometry?.location,
zoom: 15,
mapId: "9f4993cd3fb1504d495821a5"
});
new AdvancedMarkerElement({
position: place.geometry?.location,
map
});
});
</script>
<Navbar>
@@ -25,6 +51,8 @@
</a>
</Navbar>
{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
{/if}
<main>
<Carousel urls={imgUrls} />
<div class="nameContainer">
@@ -49,8 +77,22 @@
<hr />
<div class="subtitle">Where it is:</div>
<p class="addrContainer">
{space.building_location}
{#if place.name}
{place.name} <br />
{/if}
{#each place.formatted_address?.split(",") || [] as line (line)}
{line.trim()} <br />
{/each}
</p>
<div class="addrMap" bind:this={mapElem}></div>
<button
type="button"
class="reportButton"
onclick={() => {
isReportVisible = true;
}}>Report</button
>
</main>
<style>
@@ -110,7 +152,7 @@
.addrContainer {
font-size: 1.2rem;
padding: 0rem 1.4rem;
padding: 0rem 1.4rem 1rem;
}
.tagContainer {
@@ -141,4 +183,22 @@
font-size: 1.3rem;
padding-bottom: 0;
}
.addrMap {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 0.5rem;
border: 2px solid #eaffeb;
}
.reportButton {
width: 100%;
padding: 0.4rem;
border-radius: 0.5rem;
border: none;
background-color: #bd4949;
color: #ffffff;
font-size: 1rem;
cursor: pointer;
margin-top: 1rem;
}
</style>