feat: Added filtering by optional tags in the main page. Created TagFilter... #40
@@ -1,2 +1,3 @@
|
||||
PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
|
||||
PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
|
||||
PUBLIC_GMAPS_API_KEY=your-google-maps-api-key-here
|
||||
@@ -21,6 +21,7 @@ check_types:
|
||||
variables:
|
||||
PUBLIC_SUPABASE_URL: $SUPABASE_URL
|
||||
PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
|
||||
PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
|
||||
script:
|
||||
- npm run check
|
||||
|
||||
@@ -72,6 +73,7 @@ build:
|
||||
variables:
|
||||
PUBLIC_SUPABASE_URL: $SUPABASE_URL
|
||||
PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
|
||||
PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
|
||||
script:
|
||||
- npm run build
|
||||
artifacts:
|
||||
|
||||
83
package-lock.json
generated
83
package-lock.json
generated
@@ -8,18 +8,22 @@
|
||||
"name": "drp-48",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@googlemaps/js-api-loader": "^1.16.8",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "^2.49.8"
|
||||
"@supabase/supabase-js": "^2.49.8",
|
||||
"posthog-js": "^1.250.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.2.5",
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@googlemaps/typescript-guards": "^2.0.3",
|
||||
"@playwright/test": "^1.49.1",
|
||||
"@sveltejs/adapter-node": "^5.2.12",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/svelte": "^5.2.4",
|
||||
"@types/google.maps": "^3.58.1",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^3.0.0",
|
||||
@@ -818,6 +822,19 @@
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@googlemaps/js-api-loader": {
|
||||
"version": "1.16.8",
|
||||
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
|
||||
"integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@googlemaps/typescript-guards": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@googlemaps/typescript-guards/-/typescript-guards-2.0.3.tgz",
|
||||
"integrity": "sha512-3iHuO8H0jPehftsMK0kgyJzPYU/g/oiTRw+wu/yltqSZ7wJPt3vfsJHkPiuRpQjbnnWygX+T3mkRGyK/eyZ/lw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
@@ -1724,6 +1741,13 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/google.maps": {
|
||||
"version": "3.58.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
|
||||
"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@@ -2451,6 +2475,17 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.43.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.43.0.tgz",
|
||||
"integrity": "sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -3030,6 +3065,12 @@
|
||||
"node": "^12.20 || >= 14.13"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
|
||||
"integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/file-entry-cache": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
|
||||
@@ -4090,6 +4131,40 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/posthog-js": {
|
||||
"version": "1.250.1",
|
||||
"resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.250.1.tgz",
|
||||
"integrity": "sha512-Dl9BQjPa5FFVUauLSX/8HP6naRfU605GQYq+oAHFqwyv20NQDCHT0uRtFT1x2EYrY0kIQdd0d/rOY6Tg4wgqEg==",
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
"dependencies": {
|
||||
"core-js": "^3.38.1",
|
||||
"fflate": "^0.4.8",
|
||||
"preact": "^10.19.3",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@rrweb/types": "2.0.0-alpha.17",
|
||||
"rrweb-snapshot": "2.0.0-alpha.17"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@rrweb/types": {
|
||||
"optional": true
|
||||
},
|
||||
"rrweb-snapshot": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.26.8",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.8.tgz",
|
||||
"integrity": "sha512-1nMfdFjucm5hKvq0IClqZwK4FJkGXhRrQstOQ3P4vp8HxKrJEMFcY6RdBRVTdfQS/UlnX6gfbPuTvaqx/bDoeQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
@@ -5117,6 +5192,12 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/web-vitals": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
|
||||
"integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/webidl-conversions": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
|
||||
|
||||
@@ -20,12 +20,14 @@
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.2.5",
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@googlemaps/typescript-guards": "^2.0.3",
|
||||
"@playwright/test": "^1.49.1",
|
||||
"@sveltejs/adapter-node": "^5.2.12",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/svelte": "^5.2.4",
|
||||
"@types/google.maps": "^3.58.1",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^3.0.0",
|
||||
@@ -42,7 +44,9 @@
|
||||
"vitest": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@googlemaps/js-api-loader": "^1.16.8",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "^2.49.8"
|
||||
"@supabase/supabase-js": "^2.49.8",
|
||||
"posthog-js": "^1.250.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
140
src/lib/components/Report.svelte
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
44
src/lib/database.d.ts
vendored
@@ -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
|
||||
|
||||
@@ -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"]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,9 +2,9 @@ alter table "public"."study_spaces" add column "power" text;
|
||||
alter table "public"."study_spaces" add column "volume" text;
|
||||
alter table "public"."study_spaces" add column "wifi" text;
|
||||
|
||||
update "public"."study_spaces" set "power" = 'Many' where "power" is null;
|
||||
update "public"."study_spaces" set "power" = 'Many Outlets' where "power" is null;
|
||||
update "public"."study_spaces" set "volume" = 'Quiet' where "volume" is null;
|
||||
update "public"."study_spaces" set "wifi" = 'Good' where "wifi" is null;
|
||||
update "public"."study_spaces" set "wifi" = 'Good WiFi' where "wifi" is null;
|
||||
|
||||
alter table "public"."study_spaces" alter column "power" set not null;
|
||||
alter table "public"."study_spaces" alter column "volume" set not null;
|
||||
|
||||
3
supabase/migrations/20250609145614_gmaps_location.sql
Normal file
3
supabase/migrations/20250609145614_gmaps_location.sql
Normal file
@@ -0,0 +1,3 @@
|
||||
-- rename old colum nto building_location_old and create a new column instead of altering
|
||||
alter table "public"."study_spaces" rename column "building_location" to "building_location_old";
|
||||
alter table "public"."study_spaces" add column "building_location" jsonb;
|
||||
12
supabase/migrations/20250610163930_add_report_table.sql
Normal file
12
supabase/migrations/20250610163930_add_report_table.sql
Normal file
@@ -0,0 +1,12 @@
|
||||
CREATE TABLE reports (
|
||||
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
|
||||
created_at timestamp with time zone DEFAULT now(),
|
||||
updated_at timestamp with time zone DEFAULT now(),
|
||||
type text NOT NULL,
|
||||
content text
|
||||
);
|
||||
|
||||
CREATE TRIGGER reports_updated_at
|
||||
AFTER UPDATE ON reports
|
||||
FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
|
||||
@@ -11,7 +11,9 @@ CREATE TABLE study_spaces (
|
||||
description text,
|
||||
-- Location within building, e.g., "Room 101"
|
||||
location text,
|
||||
building_location text,
|
||||
-- Not bothered to write a proper data migration
|
||||
building_location_old text,
|
||||
building_location jsonb,
|
||||
tags text[] NOT NULL DEFAULT array[]::text[],
|
||||
volume text NOT NULL,
|
||||
wifi text NOT NULL,
|
||||
@@ -28,6 +30,14 @@ CREATE TABLE study_space_images (
|
||||
PRIMARY KEY (study_space_id, image_path)
|
||||
);
|
||||
|
||||
CREATE TABLE reports (
|
||||
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
study_space_id uuid REFERENCES study_spaces(id) ON DELETE CASCADE,
|
||||
created_at timestamp with time zone DEFAULT now(),
|
||||
updated_at timestamp with time zone DEFAULT now(),
|
||||
type text NOT NULL,
|
||||
content text
|
||||
);
|
||||
|
||||
-- Triggers
|
||||
CREATE TRIGGER study_spaces_updated_at
|
||||
@@ -37,3 +47,7 @@ FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
|
||||
CREATE TRIGGER study_space_images_updated_at
|
||||
AFTER UPDATE ON study_space_images
|
||||
FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
|
||||
|
||||
CREATE TRIGGER reports_updated_at
|
||||
AFTER UPDATE ON reports
|
||||
FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
|
||||
|
||||
Reference in New Issue
Block a user