-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(maps): add search feature; insert maps as svg
- Loading branch information
1 parent
478cc24
commit 8d8d846
Showing
6 changed files
with
194 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,25 @@ | ||
| import { customFetch } from "@/api/helpers/custom-fetch.ts"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
|
|
||
| export function getMapImageUrl(svgName: string) { | ||
| return `${import.meta.env.VITE_MAPS_API_URL}/static/${svgName}`; | ||
| } | ||
|
|
||
| export function useMapImage(svgName: string) { | ||
| const url = getMapImageUrl(svgName); | ||
| return useQuery({ | ||
| queryKey: ["maps-image", url], | ||
| queryFn: async ({ signal }) => { | ||
| if (!url) { | ||
| return undefined; | ||
| } | ||
|
|
||
| // Use client to add the auth token | ||
| return customFetch.GET(url, { | ||
| parseAs: "text", | ||
| signal, | ||
| }); | ||
| }, | ||
| enabled: !!url, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,65 @@ | ||
| import { $maps } from "@/api/maps"; | ||
| import { MapView } from "@/components/maps/MapView.tsx"; | ||
| import { Link } from "@tanstack/react-router"; | ||
| import clsx from "clsx"; | ||
| import { useNavigate } from "@tanstack/react-router"; | ||
| import { useEffect } from "react"; | ||
|
|
||
| export function MapsPage({ sceneId }: { sceneId: string | undefined }) { | ||
| export function MapsPage({ | ||
| sceneId, | ||
| q, | ||
| }: { | ||
| sceneId: string | undefined; | ||
| q: string | undefined; | ||
| }) { | ||
| const navigate = useNavigate(); | ||
| const { data: scenes } = $maps.useQuery("get", "/scenes/"); | ||
| const { data: searchResult } = $maps.useQuery( | ||
| "get", | ||
| "/scenes/areas/search", | ||
| { | ||
| params: { query: { query: q ?? "" } }, | ||
| }, | ||
| { | ||
| enabled: q !== undefined, | ||
| }, | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| // Show correct floor by navigating to URL with first sceneId | ||
| const firstSceneId = searchResult?.[0]?.scene_id; | ||
| if (firstSceneId !== undefined && firstSceneId !== sceneId) { | ||
| navigate({ | ||
| to: "/maps", | ||
| search: { sceneId: firstSceneId, q: q }, | ||
| }); | ||
| } | ||
| }, [searchResult, sceneId, q, navigate]); | ||
|
|
||
| const currentScene = | ||
| scenes?.find((scene) => scene.scene_id === sceneId) ?? scenes?.[0]; | ||
|
|
||
| if (!currentScene) { | ||
| // Loading scenes or some error... | ||
| return <></>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex grow flex-col"> | ||
| <div className="flex flex-row flex-wrap gap-2 p-4"> | ||
| {scenes?.map((scene) => ( | ||
| <Link | ||
| key={scene.scene_id} | ||
| to="/maps" | ||
| search={{ sceneId: scene.scene_id }} | ||
| className={clsx( | ||
| "rounded-xl bg-primary-main px-4 py-2 text-lg font-semibold hover:bg-primary-hover", | ||
| scene.scene_id === sceneId ? "bg-primary-hover" : "", | ||
| )} | ||
| > | ||
| {scene.title} | ||
| </Link> | ||
| ))} | ||
| <div className="mt-1 flex grow flex-col gap-4 @3xl/content:flex-row"> | ||
| <div className="min-h-[600px] grow"> | ||
| <MapView scene={currentScene} highlightAreas={searchResult ?? []} /> | ||
| </div> | ||
|
|
||
| {currentScene && ( | ||
| <div className="flex flex-row flex-wrap gap-4 2xl:flex-nowrap"> | ||
| <div className=""> | ||
| <MapView scene={currentScene} /> | ||
| </div> | ||
| <div className="flex min-w-56 flex-col gap-2 px-2"> | ||
| <h3 className="text-2xl font-semibold">Legend:</h3> | ||
| {currentScene.legend?.map((legendEntry) => ( | ||
| <div key={legendEntry.legend_id} className="flex flex-row gap-2"> | ||
| <div | ||
| className="mt-1.5 h-4 w-4 flex-shrink-0 rounded-full" | ||
| style={{ backgroundColor: legendEntry.color ?? undefined }} | ||
| /> | ||
| <span className="whitespace-pre-wrap"> | ||
| {legendEntry.legend} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| <div className="flex w-full shrink-0 flex-col gap-2 px-2 @3xl/content:w-64"> | ||
| <h3 className="text-2xl font-semibold">Legend:</h3> | ||
| {currentScene.legend?.map((legendEntry) => ( | ||
| <div key={legendEntry.legend_id} className="flex flex-row gap-2"> | ||
| <div | ||
| className="mt-1.5 h-4 w-4 flex-shrink-0 rounded-full" | ||
| style={{ backgroundColor: legendEntry.color ?? undefined }} | ||
| /> | ||
| <span className="whitespace-pre-wrap">{legendEntry.legend}</span> | ||
| </div> | ||
| </div> | ||
| )} | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { $maps } from "@/api/maps"; | ||
| import { Link, useLocation, useNavigate } from "@tanstack/react-router"; | ||
| import clsx from "clsx"; | ||
| import { useEffect, useRef, useState } from "react"; | ||
|
|
||
| export function MapsPageTabs() { | ||
| const navigate = useNavigate(); | ||
| const { data: scenes } = $maps.useQuery("get", "/scenes/"); | ||
| const { sceneId, q } = useLocation({ select: ({ search }) => search }); | ||
| const [searchText, setSearchText] = useState(q ?? ""); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| // Show current search query | ||
| setSearchText(q ?? ""); | ||
| }, [q]); | ||
|
|
||
| const onSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| inputRef.current?.focus(); | ||
| // Set search query in URL | ||
| if (searchText) { | ||
| navigate({ to: "/maps", search: { q: searchText, sceneId } }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex shrink-0 flex-col whitespace-nowrap @3xl/content:flex-row"> | ||
| <form | ||
| onSubmit={onSubmit} | ||
| className="flex items-center border-b-[1px] border-b-secondary-hover px-2 pb-[1px] focus-within:border-b-2 focus-within:border-b-focus focus-within:pb-0" | ||
| > | ||
| <input | ||
| ref={inputRef} | ||
| placeholder="Search any place" | ||
| value={searchText} | ||
| onChange={(e) => setSearchText(e.target.value)} | ||
| className="min-w-0 grow bg-transparent px-2 py-1 outline-none" | ||
| /> | ||
| <button | ||
| type="submit" | ||
| tabIndex={-1} // Do not allow to focus on this button | ||
| className="icon-[material-symbols--search-rounded] shrink-0 text-2xl text-secondary-hover" | ||
| /> | ||
| </form> | ||
|
|
||
| <div className="flex grow flex-row overflow-x-auto whitespace-nowrap"> | ||
| <div className="w-2 shrink-0 border-b-[1px] border-b-secondary-hover @3xl/content:w-1" /> | ||
| {scenes?.map((scene) => ( | ||
| <Link | ||
| key={scene.scene_id} | ||
| to="/maps" | ||
| search={{ sceneId: scene.scene_id }} | ||
| className={clsx( | ||
| "px-2 py-1", | ||
| scene.scene_id === sceneId | ||
| ? "border-b-2 border-b-focus" | ||
| : "border-b-[1px] border-b-secondary-hover", | ||
| )} | ||
| > | ||
| {scene.title} | ||
| </Link> | ||
| ))} | ||
| <div className="min-w-2 grow border-b-[1px] border-b-secondary-hover" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |