Skip to content

Commit

Permalink
add ability to copy current geojson in editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmork
vmork committed Aug 22, 2024
1 parent d29dc72 commit 0a2e2de
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 123 deletions.
1 change: 0 additions & 1 deletion src/app/student/map/_components/BoothListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export function BoothListItem({
onBoothClick: (boothId: BoothID) => void
currentLocationId: LocationId
}) {
console.log(booth.exhibitor.name, booth.location)
const logoSrc = booth.exhibitor.logo_squared ?? booth.exhibitor.logo_freesize
return (
<Card className="cursor-pointer" onClick={() => onBoothClick(booth.id)}>
Expand Down
119 changes: 1 addition & 118 deletions src/app/student/map/_components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,123 +13,6 @@ import { cn } from "@/lib/utils"
import { ArrowLeft, ChevronsLeft, ChevronsRight } from "lucide-react"
import { useState } from "react"

// import { ArrowLeft, ChevronsLeft, ChevronsRight } from "lucide-react"
// import { useState } from "react"

// export default function Sidebar({
// boothsById,
// activeBoothId,
// hoveredBoothId,
// setActiveBoothId,
// setHoveredBoothId,
// currentLocation
// }: {
// boothsById: BoothMap
// activeBoothId: BoothID | null
// hoveredBoothId: BoothID | null
// setActiveBoothId: (id: BoothID | null) => void
// setHoveredBoothId: (id: BoothID | null) => void
// currentLocation: LocationId
// }) {
// // Show booths in the current location first, then sort by location, then exhibitor name
// function sortBooths(booths: Booth[]) {
// return booths.sort((a, b) => {
// const c1 =
// (b.location === currentLocation ? 1 : 0) -
// (a.location === currentLocation ? 1 : 0)
// if (c1 !== 0) return c1
// const c2 = a.location.localeCompare(b.location)
// if (c2 !== 0) return c2
// const c3 = a.exhibitor.name.localeCompare(b.exhibitor.name)
// return c3
// })
// }

// const booths = Array.from(boothsById.values())
// const [filteredBooths, setFilteredBooths] = useState(booths)
// const displayedBooths = sortBooths(filteredBooths)

// const { width } = useScreenSize()
// const smallScreen = width ? width <= 800 : false

// if (activeBoothId != null) {
// const exhibitor = boothsById.get(activeBoothId)?.exhibitor
// if (!exhibitor) {
// console.error(`No exhibitor found for booth with id ${activeBoothId}`)
// return null
// }
// return (
// // <SidebarContainer smallScreen={smallScreen}>
// // {!smallScreen && (
// // <div className="flex">
// // <button
// // title="Back to list view"
// // className="p-1 text-stone-400 transition hover:text-stone-200"
// // onClick={() => setActiveBoothId(null)}>
// // <List size={25} />
// // </button>
// // </div>
// // )}
// // <div className="p-3 pt-0 sm:pt-3">
// // <ExhibitorDetails exhibitor={exhibitor} />
// // </div>
// // </SidebarContainer>
// <SidebarContainer smallScreen={smallScreen}>
// <div className="p-2">
// <Button variant="ghost" onClick={() => setActiveBoothId(null)}>
// <ArrowLeft size={30} />
// </Button>
// <ExhibitorDetails exhibitor={exhibitor} />
// </div>
// </SidebarContainer>

// )
// }

// return (
// // <SidebarContainer smallScreen={smallScreen}>
// // <div className="mb-6 border-b border-stone-600 p-3">
// // <ExhibitorFilters
// // exhibitors={exhibitors}
// // onChange={setFilteredExhibitors}
// // />
// // </div>
// // <ul className="divide-y divide-neutral-400">
// // {displayedBooths.map(({ id, exhibitor, location }) => (
// // <li
// // key={id}
// // onClick={() => setActiveBoothId(id)}
// // onMouseEnter={() => setHoveredBoothId(id)}
// // onMouseLeave={() => setHoveredBoothId(null)}
// // className="flex cursor-default p-2 hover:bg-slate-800">
// // <div>{exhibitor.name}</div>
// // <div className="ml-auto text-sm text-stone-400">
// // {locations.find(loc => loc.id === location)?.label}
// // </div>
// // </li>
// // ))}

// // </ul>
// // </SidebarContainer>

// <SidebarContainer smallScreen={smallScreen}>
// <div className="h-[72px] p-2 text-2xl">Search for the booths</div>
// <div className="p-2">
// <MapListFilteringHeader booths={Array.from(boothsById.values())} onChange={setFilteredBooths} />
// </div>
// {filteredBooths.map(booth => (
// <BoothListItem
// key={booth.id}
// booth={booth}
// onBoothClick={setActiveBoothId}
// />
// ))}
// </SidebarContainer>

// )

// =======

export default function Sidebar({
boothsById,
activeBoothId,
Expand Down Expand Up @@ -190,10 +73,10 @@ export default function Sidebar({
</div>
{displayedBooths.map(booth => (
<div
key={booth.id}
onMouseEnter={() => setHoveredBoothId(booth.id)}
onMouseLeave={() => setHoveredBoothId(null)}>
<BoothListItem
key={booth.id}
booth={booth}
onBoothClick={setActiveBoothId}
currentLocationId={currentLocation}
Expand Down
36 changes: 33 additions & 3 deletions src/app/student/map/editor/EditorMapComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export default function EditorMapComponent({
const [drawMode, setDrawMode] = useState<DrawMode>("simple_select")

const [activeFeatureId, setActiveFeatureId] = useState<BoothID | null>(null)
console.log("activeFeatureId", activeFeatureId)

const featureMap = useRef<FeatureMap>(
new Map(geoJsonBoothData.features.map(feat => [feat.properties.id, feat]))
Expand All @@ -71,12 +70,12 @@ export default function EditorMapComponent({
}

function onModeChange(e: { mode: DrawMode }) {
console.log("Mode change", e)
console.log("Mode change", e.mode)
setDrawMode(e.mode)
}

function onSelectionChange(e: { features: GeoJsonBooth[] }) {
console.log("Selection change", drawMode)
console.log("Selection change", drawMode, e)
if (e.features.length === 0) return
if (activeFeature == null) setActiveFeatureId(e.features[0].properties.id)
else setActiveFeatureId(null)
Expand Down Expand Up @@ -291,6 +290,20 @@ export default function EditorMapComponent({
}

function Toolbar() {
const [showJson, setShowJson] = useState(false)
const json = JSON.stringify(
toFeatureCollection(featureMap.current),
null,
2
)
const copyToClipboard = () => {
navigator.clipboard
.writeText(json)
.then(() => setDidCopy(true))
.catch(() => console.error("Failed to copy to clipboard"))
}
const [didCopy, setDidCopy] = useState(false)

return (
<div className="absolute bottom-2 flex ">
<Button
Expand All @@ -302,6 +315,23 @@ export default function EditorMapComponent({
}}>
Draw
</Button>

<div className="relative flex justify-center">
<Button onClick={() => setShowJson(!showJson)}>
{showJson ? "Hide JSON" : "Show JSON"}
</Button>
{showJson && (
<div className="absolute bottom-[45px] h-[500px] w-[500px] overflow-auto rounded-md bg-stone-200 p-2 text-stone-900">
{!didCopy ? <Button
className=""
variant="ghost"
onClick={copyToClipboard}>
Copy to clipboard
</Button> : <div>Copied!</div>}
<pre>{json}</pre>
</div>
)}
</div>
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/student/map/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default async function Page() {
boothsByLocation.get(booth.location)!.set(id, booth)
})

const editorMode = false
const editorMode = true

return (
// TODO: pt-16 is to account for the navbar, will break if navbar size changes
Expand Down

0 comments on commit 0a2e2de

Please sign in to comment.