-
-
- To get started, edit the page.tsx file.
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-Loading...
;
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/app/api/admin/locations/[id]/route.ts b/src/app/api/admin/locations/[id]/route.ts
new file mode 100644
index 0000000..aa6fe2d
--- /dev/null
+++ b/src/app/api/admin/locations/[id]/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function PUT(
+ request: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ try {
+ const { id } = await params;
+ const body = await request.json();
+
+ const location = await prisma.location.update({
+ where: { id },
+ // @ts-ignore
+ data: {
+ title: body.title,
+ city: body.city,
+ gpxData: body.gpxData,
+ tags: body.tags,
+ captureDate: new Date(body.captureDate),
+ visibility: body.visibility,
+ },
+ });
+
+ return NextResponse.json(location);
+ } catch (error) {
+ console.error("Error updating location:", error);
+ return NextResponse.json({ error: "Failed to update location" }, { status: 500 });
+ }
+}
+
+export async function DELETE(
+ request: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ try {
+ const { id } = await params;
+
+ await prisma.location.delete({
+ where: { id },
+ });
+
+ return NextResponse.json({ success: true });
+ } catch (error) {
+ console.error("Error deleting location:", error);
+ return NextResponse.json({ error: "Failed to delete location" }, { status: 500 });
+ }
+}
diff --git a/src/app/api/admin/locations/route.ts b/src/app/api/admin/locations/route.ts
new file mode 100644
index 0000000..ad05d84
--- /dev/null
+++ b/src/app/api/admin/locations/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const locations = await prisma.location.findMany({
+ orderBy: {
+ createdAt: "desc",
+ },
+ });
+
+ return NextResponse.json(locations);
+ } catch (error) {
+ console.error("Error fetching all locations:", error);
+ return NextResponse.json({ error: "Failed to fetch locations" }, { status: 500 });
+ }
+}
+
+export async function POST(request: Request) {
+ try {
+ const body = await request.json();
+
+ // Convert strings to float for lat/lng, or they might already be numbers
+ const location = await prisma.location.create({
+ data: {
+ title: body.title,
+ city: body.city,
+ gpxData: body.gpxData,
+ tags: body.tags,
+ captureDate: new Date(body.captureDate),
+ visibility: body.visibility || "public",
+ },
+ });
+
+ return NextResponse.json(location);
+ } catch (error: any) {
+ console.error("Error creating location:", error);
+ return NextResponse.json({ error: error instanceof Error ? error.message : "Failed to create location" }, { status: 500 });
+ }
+}
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
new file mode 100644
index 0000000..55fee6f
--- /dev/null
+++ b/src/app/api/auth/login/route.ts
@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+ try {
+ // const { password } = await request.json();
+ const { username, password } = await request.json();
+ const correctPassword = process.env.ADMIN_PASSWORD;
+ const correctUsername = process.env.ADMIN_USERNAME || "admin";
+
+ if (!correctPassword) {
+ console.error("ADMIN_PASSWORD environment variable is not set.");
+ return NextResponse.json({ error: "Server Configuration Error" }, { status: 500 });
+ }
+
+ // if (password === correctPassword) {
+ if (username === correctUsername && password === correctPassword) {
+ const response = NextResponse.json({ success: true });
+
+ // Set an HTTP-only cookie that expires in 30 days
+ response.cookies.set({
+ name: 'admin_session',
+ value: 'authenticated',
+ httpOnly: true,
+ secure: process.env.NODE_ENV === 'production',
+ sameSite: 'lax',
+ maxAge: 60 * 60 * 24 * 30, // 30 days
+ path: '/',
+ });
+
+ return response;
+ }
+
+ // return NextResponse.json({ error: "Invalid password." }, { status: 401 });
+ return NextResponse.json({ error: "Invalid credentials." }, { status: 401 });
+
+ } catch (error) {
+ return NextResponse.json({ error: "Invalid request." }, { status: 400 });
+ }
+}
diff --git a/src/app/api/auth/logout/route.ts b/src/app/api/auth/logout/route.ts
new file mode 100644
index 0000000..acafaca
--- /dev/null
+++ b/src/app/api/auth/logout/route.ts
@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+ const response = NextResponse.json({ success: true });
+
+ // Hard delete the cookie
+ response.cookies.delete('admin_session');
+
+ return response;
+}
diff --git a/src/app/api/config/route.ts b/src/app/api/config/route.ts
new file mode 100644
index 0000000..a089ed7
--- /dev/null
+++ b/src/app/api/config/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+ return NextResponse.json({
+ apiKey: process.env.GOOGLE_MAPS_API_KEY || ""
+ });
+}
\ No newline at end of file
diff --git a/src/app/api/locations/route.ts b/src/app/api/locations/route.ts
new file mode 100644
index 0000000..96b631f
--- /dev/null
+++ b/src/app/api/locations/route.ts
@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const locations = await prisma.location.findMany({
+ where: {
+ visibility: "public",
+ },
+ orderBy: {
+ createdAt: "desc",
+ },
+ });
+
+ return NextResponse.json(locations);
+ } catch (error) {
+ console.error("Error fetching public locations:", error);
+ return NextResponse.json({ error: "Failed to fetch locations" }, { status: 500 });
+ }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index e3734be..1eaf6da 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,42 +1,130 @@
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-html,
body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
margin: 0;
+ padding: 0;
+ font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ background-color: #202124;
+ color: #e8eaed;
}
-a {
- color: inherit;
- text-decoration: none;
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
}
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
+::-webkit-scrollbar-track {
+ background: #202124;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #5f6368;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #80868b;
+}
+
+.gsv-navbar {
+ background-color: #202124;
+ border-bottom: 1px solid #3c4043;
+}
+
+.gsv-sidebar {
+ background-color: #202124;
+ border-right: 1px solid #3c4043;
+}
+
+.gsv-search-container {
+ border-bottom: 1px solid #3c4043;
+}
+
+.gsv-input {
+ background-color: #303134;
+ border: 1px solid #5f6368;
+ color: #e8eaed;
+}
+
+.gsv-input:focus {
+ background-color: #303134;
+ border-color: #8ab4f8;
+ color: #e8eaed;
+ box-shadow: 0 0 0 1px #8ab4f8;
+}
+
+.gsv-input::placeholder {
+ color: #9aa0a6;
+}
+
+select.gsv-input option {
+ background-color: #303134;
+ color: #e8eaed;
+}
+
+.gsv-card {
+ background-color: #303134;
+ border: 1px solid transparent;
+ color: #e8eaed;
+ transition: all 0.2s ease-in-out;
+ border-radius: 8px;
+}
+
+.gsv-card:hover {
+ background-color: #3c4043;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.gsv-card-active {
+ background-color: #42474b;
+ border: 1px solid #8ab4f8;
+}
+
+.gsv-title {
+ color: #e8eaed;
+ font-weight: 500;
+}
+
+.gsv-subtitle {
+ color: #9aa0a6;
+}
+
+.gsv-btn-share {
+ color: #8ab4f8;
+ border: 1px solid #5f6368;
+ background-color: transparent;
+ transition: all 0.2s ease-in-out;
+}
+
+.gsv-btn-share:hover {
+ background-color: rgba(138, 180, 248, 0.04);
+ color: #a8c7fa;
+ border-color: #8ab4f8;
+}
+
+.gsv-btn-maps {
+ background-color: #8ab4f8;
+ color: #202124;
+ font-weight: 500;
+ border: none;
+ transition: all 0.2s ease-in-out;
+}
+
+.gsv-btn-maps:hover {
+ background-color: #a8c7fa;
+ color: #202124;
+}
+
+.offcanvas-backdrop {
+ opacity: 0 !important;
+ background-color: transparent !important;
+}
+
+.gsv-search-wrapper {
+ max-width: 150px;
+}
+
+@media (min-width: 768px) {
+ .gsv-search-wrapper {
+ max-width: 400px;
}
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 42fc323..31291f8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,11 @@
import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import "bootstrap/dist/css/bootstrap.min.css";
import "./globals.css";
-
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
+import BootstrapClient from "@/components/BootstrapClient";
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Street View Gallery",
+ description: "Public gallery of Google Street View panoramas",
};
export default function RootLayout({
@@ -23,9 +14,12 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
- {children}
+
+
+
+
+ Manage Locations (Projects)
+ + + Add New Project + +
+
+
+
+
+
+
+ | Title | +City | +GPX Route | +Visibility | +Actions | +
|---|---|---|---|---|
| {loc.title} | +{loc.city} | ++ {loc.gpxData ? ( + Has Route + ) : ( + No Route + )} + | ++ + {loc.visibility} + + | ++ + Edit + + + | +
| + No locations found. Start by adding one. + | +
+ {children}
+
+
+
+ );
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 59dea42..8f1b56e 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -93,7 +93,6 @@ a.secondary {
border-color: var(--button-secondary-border);
}
-/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7b947a2..044f44b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,66 +1,5 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Gallery from "@/components/Gallery";
export default function Home() {
- return (
-
+
+
+
+ Admin Portal
+ Portfolio Management +
+
+
+
+
+
+
-
-
-
- );
+ return Loading...
;
+
+ return (
+
+ );
+}
diff --git a/src/components/BootstrapClient.tsx b/src/components/BootstrapClient.tsx
new file mode 100644
index 0000000..97cfaac
--- /dev/null
+++ b/src/components/BootstrapClient.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function BootstrapClient() {
+ useEffect(() => {
+ require("bootstrap/dist/js/bootstrap.bundle.min.js");
+ }, []);
+
+ return null;
+}
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
new file mode 100644
index 0000000..865b489
--- /dev/null
+++ b/src/components/Gallery.tsx
@@ -0,0 +1,520 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { importLibrary, setOptions } from "@googlemaps/js-api-loader";
+import { Location } from "@prisma/client";
+import { gpx } from "@tmcw/togeojson";
+
+export default function Gallery() {
+ const [locations, setLocations] = useState
+
+
+
+ {/* Left: List */}
+
+
+ {isMobileSidebarOpen && (
+
+
+
+ {/* Main Panel */}
+
+
+
+ Locations
+ +
+
+
+ {filteredLocations.map((loc) => (
+
+ handleLocationSelect(loc)}
+ style={{ cursor: "pointer", overflow: "hidden" }}
+ >
+ {/* --- MOBILE LAYOUT --- */}
+
+ ))}
+ {filteredLocations.length === 0 && (
+
+
+
+ {/* --- DESKTOP LAYOUT --- */}
+
+ {thumbnails[loc.id] ? (
+ 
+ ) : (
+
+
+ Loading...
+
+ )}
+
+
+ {loc.title}
+
+ {loc.city}
{new Date(loc.captureDate).toLocaleDateString()}
+
+ {loc.tags && (
+ {loc.tags}
+ )}
+ {!loc.gpxData && (
+ No Route
+ )}
+
+
+
+
+ {thumbnails[loc.id] ? (
+
+ ) : (
+ Loading Map...
+ )}
+
+
+
+ {loc.title}
++ {loc.city} • {new Date(loc.captureDate).toLocaleDateString()} +
+
+ {loc.tags}
+
+
+ {!loc.gpxData && (
+ No Route Data
+ )}
+
+ No locations found.
+ )}
+
+ {locations.length > 0 && (
+
+ Images dating back to {
+ new Date(Math.min(...locations.map(l => new Date(l.captureDate).getTime()))).getFullYear()
+ }
+
+ )}
+
+
+
+ {viewingStreetView && iframeUrl && (
+ <>
+
+
+
+
+
+
+ )}
+
+
+ setIsMobileSidebarOpen(false)}
+ />
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts
new file mode 100644
index 0000000..9fbde77
--- /dev/null
+++ b/src/lib/prisma.ts
@@ -0,0 +1,10 @@
+import { PrismaClient } from "@prisma/client";
+
+// PrismaClient is attached to the `global` object in development to prevent
+// exhausting your database connection limit.
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma =
+ globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..7df1462
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+ const isAuthRoute = request.nextUrl.pathname.startsWith('/login') || request.nextUrl.pathname.startsWith('/api/auth');
+ const isAdminRoute = request.nextUrl.pathname.startsWith('/admin') || request.nextUrl.pathname.startsWith('/api/admin');
+
+ // If trying to access admin routes, verify the session cookie
+ if (isAdminRoute) {
+ const adminSession = request.cookies.get('admin_session');
+
+ // Allow GET /api/admin/locations (used by the public gallery)
+ if (request.nextUrl.pathname === '/api/admin/locations' && request.method === 'GET') {
+ return NextResponse.next();
+ }
+
+ // Redirect to login if no session cookie exists
+ if (!adminSession?.value) {
+ if (request.nextUrl.pathname.startsWith('/api/')) {
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ }
+ return NextResponse.redirect(new URL('/login', request.url));
+ }
+ }
+
+ // If trying to access login page but already authenticated, redirect to admin
+ if (request.nextUrl.pathname === '/login') {
+ const adminSession = request.cookies.get('admin_session');
+ if (adminSession?.value) {
+ return NextResponse.redirect(new URL('/admin', request.url));
+ }
+ }
+
+ return NextResponse.next();
+}
+
+export const config = {
+ matcher: ['/admin/:path*', '/api/admin/:path*', '/login'],
+};