mirror of
https://github.com/ajvpot/meshexplorer.git
synced 2026-08-06 16:42:43 +02:00
aaa
This commit is contained in:
ajvpot
Generated
+722
-9
File diff suppressed because it is too large
Load Diff
@@ -9,12 +9,19 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^2.2.4",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@types/leaflet": "^1.9.19",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clickhouse": "^2.6.0",
|
||||
"clsx": "^2.1.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "15.3.4",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-leaflet": "^5.0.0",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+19
-101
@@ -1,103 +1,21 @@
|
||||
import Image from "next/image";
|
||||
import MapWithChat from "../components/MapWithChat";
|
||||
import { clickhouse } from "../lib/clickhouse";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
// --- Server action ---
|
||||
export async function getNodePositions() {
|
||||
const rows = await clickhouse.query(
|
||||
"SELECT from_node_id, latitude, longitude, altitude, last_seen FROM meshtastic_position_latest"
|
||||
).toPromise();
|
||||
return rows as Array<{
|
||||
from_node_id: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
altitude?: number;
|
||||
last_seen?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default async function Home() {
|
||||
const nodePositions = await getNodePositions();
|
||||
return <MapWithChat nodePositions={nodePositions} />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ChatBox() {
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<div className="w-80 bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-4 flex flex-col h-96">
|
||||
<div className="flex-1 overflow-y-auto mb-2 text-sm text-gray-700 dark:text-gray-200">
|
||||
<div className="text-gray-400 text-center mt-8">Chat coming soon...</div>
|
||||
</div>
|
||||
<form
|
||||
className="flex gap-2"
|
||||
onSubmit={e => {
|
||||
e.preventDefault();
|
||||
setValue("");
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="flex-1 border rounded px-2 py-1 bg-neutral-100 dark:bg-neutral-800 text-black dark:text-white"
|
||||
placeholder="Type a message..."
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 text-white px-3 py-1 rounded disabled:opacity-50"
|
||||
disabled
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode, useRef } from "react";
|
||||
|
||||
interface Config {
|
||||
theme: "light" | "dark";
|
||||
// Add more config options as needed
|
||||
}
|
||||
|
||||
interface ConfigContextType {
|
||||
config: Config;
|
||||
setConfig: (config: Config) => void;
|
||||
openConfig: () => void;
|
||||
}
|
||||
|
||||
const defaultConfig: Config = {
|
||||
theme: "light",
|
||||
};
|
||||
|
||||
const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
|
||||
|
||||
export function ConfigProvider({ children }: { children: ReactNode }) {
|
||||
const [config, setConfigState] = useState<Config>(defaultConfig);
|
||||
const [showPopover, setShowPopover] = useState(false);
|
||||
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
||||
const popoverRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("globalConfig");
|
||||
if (stored) setConfigState(JSON.parse(stored));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("globalConfig", JSON.stringify(config));
|
||||
}, [config]);
|
||||
|
||||
// Close popover on outside click or Escape
|
||||
useEffect(() => {
|
||||
if (!showPopover) return;
|
||||
function onClick(e: MouseEvent) {
|
||||
if (
|
||||
popoverRef.current &&
|
||||
!popoverRef.current.contains(e.target as Node) &&
|
||||
buttonRef.current &&
|
||||
!buttonRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setShowPopover(false);
|
||||
}
|
||||
}
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setShowPopover(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onClick);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onClick);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [showPopover]);
|
||||
|
||||
const setConfig = (newConfig: Config) => setConfigState(newConfig);
|
||||
const openConfig = () => setShowPopover(v => !v);
|
||||
|
||||
// Provide ref to button for Header
|
||||
const contextValue = React.useMemo(() => ({ config, setConfig, openConfig }), [config]);
|
||||
|
||||
return (
|
||||
<ConfigContext.Provider value={contextValue}>
|
||||
{/* Clone header to inject ref */}
|
||||
{React.Children.map(children, child => {
|
||||
if (
|
||||
React.isValidElement(child) &&
|
||||
child.type &&
|
||||
(child as any).type.name === "Header"
|
||||
) {
|
||||
return React.cloneElement(child, { configButtonRef: buttonRef });
|
||||
}
|
||||
return child;
|
||||
})}
|
||||
{/* Popover */}
|
||||
{showPopover && (
|
||||
<div
|
||||
ref={popoverRef}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: buttonRef.current?.getBoundingClientRect().bottom ?? 60,
|
||||
left: buttonRef.current?.getBoundingClientRect().right ?? window.innerWidth - 300,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
className="fixed bg-white dark:bg-neutral-900 p-6 rounded shadow-lg min-w-[300px] border border-neutral-200 dark:border-neutral-700"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4">Configuration</h2>
|
||||
<label className="block mb-2">
|
||||
Theme:
|
||||
<select
|
||||
value={config.theme}
|
||||
onChange={e => setConfig({ ...config, theme: e.target.value as Config["theme"] })}
|
||||
className="ml-2 border rounded px-2 py-1"
|
||||
>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</ConfigContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useConfig() {
|
||||
const ctx = useContext(ConfigContext);
|
||||
if (!ctx) throw new Error("useConfig must be used within a ConfigProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { Cog6ToothIcon } from "@heroicons/react/24/outline";
|
||||
import { useConfig } from "./ConfigContext";
|
||||
import React from "react";
|
||||
|
||||
interface HeaderProps {
|
||||
configButtonRef?: React.Ref<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
export default function Header({ configButtonRef }: HeaderProps) {
|
||||
const { openConfig } = useConfig();
|
||||
return (
|
||||
<header className="w-full flex items-center justify-between px-6 py-3 bg-white dark:bg-neutral-900 shadow z-20">
|
||||
<nav className="flex gap-6 items-center">
|
||||
<Link href="/" className="font-bold text-lg">MeshExplorer</Link>
|
||||
<Link href="/about">About</Link>
|
||||
<Link href="/docs">Docs</Link>
|
||||
</nav>
|
||||
<button
|
||||
ref={configButtonRef}
|
||||
onClick={openConfig}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
||||
aria-label="Open configuration menu"
|
||||
>
|
||||
<Cog6ToothIcon className="h-6 w-6" />
|
||||
<span className="hidden sm:inline">Config</span>
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from "react-leaflet";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
|
||||
const DEFAULT = {
|
||||
lat: 47.6062, // Seattle
|
||||
lng: -122.3321,
|
||||
zoom: 12,
|
||||
};
|
||||
|
||||
function parseQuery(searchParams: ReturnType<typeof useSearchParams>) {
|
||||
const lat = parseFloat(searchParams.get("lat") || "");
|
||||
const lng = parseFloat(searchParams.get("lng") || "");
|
||||
const zoom = parseInt(searchParams.get("zoom") || "");
|
||||
return {
|
||||
lat: isNaN(lat) ? DEFAULT.lat : lat,
|
||||
lng: isNaN(lng) ? DEFAULT.lng : lng,
|
||||
zoom: isNaN(zoom) ? DEFAULT.zoom : zoom,
|
||||
};
|
||||
}
|
||||
|
||||
function MapSync() {
|
||||
const map = useMapEvents({});
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const last = useRef({ lat: 0, lng: 0, zoom: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const onMove = () => {
|
||||
const center = map.getCenter();
|
||||
const zoom = map.getZoom();
|
||||
if (
|
||||
Math.abs(center.lat - last.current.lat) > 1e-6 ||
|
||||
Math.abs(center.lng - last.current.lng) > 1e-6 ||
|
||||
zoom !== last.current.zoom
|
||||
) {
|
||||
last.current = { lat: center.lat, lng: center.lng, zoom };
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("lat", center.lat.toFixed(5));
|
||||
params.set("lng", center.lng.toFixed(5));
|
||||
params.set("zoom", String(zoom));
|
||||
router.replace("?" + params.toString(), { scroll: false });
|
||||
}
|
||||
};
|
||||
map.on("moveend", onMove);
|
||||
map.on("zoomend", onMove);
|
||||
return () => {
|
||||
map.off("moveend", onMove);
|
||||
map.off("zoomend", onMove);
|
||||
};
|
||||
}, [map, router, searchParams]);
|
||||
return null;
|
||||
}
|
||||
|
||||
type NodePosition = {
|
||||
from_node_id: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
altitude?: number;
|
||||
last_seen?: string;
|
||||
};
|
||||
|
||||
interface MapViewProps {
|
||||
nodePositions?: NodePosition[];
|
||||
}
|
||||
|
||||
export default function MapView({ nodePositions = [] }: MapViewProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const { lat, lng, zoom } = useMemo(() => parseQuery(searchParams), [searchParams]);
|
||||
return (
|
||||
<MapContainer
|
||||
center={[lat, lng]}
|
||||
zoom={zoom}
|
||||
style={{ width: "100%", height: "100%", zIndex: 1 }}
|
||||
className="bg-gray-200"
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© OpenStreetMap contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
{nodePositions.map((node) => (
|
||||
<Marker key={node.from_node_id} position={[node.latitude, node.longitude]}>
|
||||
<Popup>
|
||||
<div>
|
||||
<div><b>ID:</b> {node.from_node_id}</div>
|
||||
<div><b>Lat:</b> {node.latitude}</div>
|
||||
<div><b>Lng:</b> {node.longitude}</div>
|
||||
{node.altitude !== undefined && <div><b>Alt:</b> {node.altitude}</div>}
|
||||
{node.last_seen && <div><b>Last seen:</b> {node.last_seen}</div>}
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
))}
|
||||
<MapSync />
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
import MapView from "./MapView";
|
||||
import ChatBox from "./ChatBox";
|
||||
|
||||
type NodePosition = {
|
||||
from_node_id: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
altitude?: number;
|
||||
last_seen?: string;
|
||||
};
|
||||
|
||||
interface MapWithChatProps {
|
||||
nodePositions: NodePosition[];
|
||||
}
|
||||
|
||||
export default function MapWithChat({ nodePositions }: MapWithChatProps) {
|
||||
return (
|
||||
<div className="flex flex-col h-[100dvh] w-screen overflow-hidden">
|
||||
<div className="flex-1 relative">
|
||||
<MapView nodePositions={nodePositions} />
|
||||
<div className="absolute bottom-6 right-6 z-30">
|
||||
<ChatBox />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ClickHouse } from 'clickhouse';
|
||||
|
||||
const host = process.env.CLICKHOUSE_HOST || 'localhost';
|
||||
const port = process.env.CLICKHOUSE_PORT || '8123';
|
||||
const user = process.env.CLICKHOUSE_USER || 'default';
|
||||
const password = process.env.CLICKHOUSE_PASSWORD || 'password';
|
||||
|
||||
export const clickhouse = new ClickHouse({
|
||||
url: `http://${host}`,
|
||||
port: Number(port),
|
||||
basicAuth: { username: user, password },
|
||||
isUseGzip: false,
|
||||
format: 'json',
|
||||
});
|
||||
Reference in New Issue
Block a user