fergalmoran/kidarr-server
1
0
Fork 0
mirror of https://github.com/fergalmoran/kidarr-server.git synced 2025-12-22 09:17:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup of maps and new popups

Browse Source
This commit is contained in:
Fergal Moran
2024-02-01 00:22:42 +00:00
parent 01f6a804c2
commit 7c58171a65
9 changed files with 162 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

18
package.json
View File

@@ -6,7 +6,8 @@
"scripts": {
"build": "next build",
"_dev": "next dev",
"dev": "NODE_ENV=development next dev -p 3002 & local-ssl-proxy --config ./ssl-proxy.json",
"turbo": "next dev --turbo",
"dev": "NODE_ENV=development next dev -p 3002 --turbo & local-ssl-proxy --config ./ssl-proxy.json",
"lint": "next lint",
"start": "next start",
"db:generate": "drizzle-kit generate:pg",
@@ -18,8 +19,8 @@
"db:check": "drizzle-kit check:pg"
},
"dependencies": {
"@auth/core": "^0.22.0",
"@auth/drizzle-adapter": "^0.3.16",
"@auth/core": "^0.24.0",
"@auth/drizzle-adapter": "^0.4.0",
"@faker-js/faker": "^8.4.0",
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-accordion": "^1.1.2",
@@ -49,25 +50,24 @@
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@t3-oss/env-nextjs": "^0.7.3",
"@t3-oss/env-nextjs": "^0.8.0",
"@tanstack/react-query": "^4.36.1",
"@trpc/client": "^10.43.6",
"@trpc/next": "^10.43.6",
"@trpc/react-query": "^10.43.6",
"@trpc/server": "^10.43.6",
"@types/leaflet": "^1.9.8",
"@types/react-leaflet": "^3.0.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^0.2.0",
"date-fns": "^3.3.1",
"drizzle-orm": "^0.29.3",
"drizzle-zod": "^0.5.1",
"embla-carousel-react": "^8.0.0-rc20",
"embla-carousel-react": "^8.0.0-rc22",
"http-status-codes": "^2.3.0",
"leaflet": "^1.9.4",
"local-ssl-proxy": "^2.0.5",
"lucide-react": "^0.314.0",
"lucide-react": "^0.320.0",
"next": "^14.1.0",
"next-auth": "^4.24.5",
"next-themes": "^0.2.1",
@@ -78,7 +78,7 @@
"react-hook-form": "^7.49.3",
"react-leaflet": "^4.2.1",
"react-qr-code": "^2.0.12",
"react-resizable-panels": "^1.0.9",
"react-resizable-panels": "^2.0.2",
"server-only": "^0.0.1",
"socket.io": "^4.7.4",
"socket.io-client": "^4.7.4",
@@ -91,7 +91,7 @@
},
"devDependencies": {
"@types/eslint": "^8.44.7",
"@types/node": "^18.17.0",
"@types/node": "^20.11.14",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.11.0",

8
src/app/debug/page.tsx
View File

@@ -6,7 +6,13 @@ import React from "react";
const DebugPage = () => {
return (
<div className="p-8">
<Button variant="default">I am button</Button>
<Button variant="default">default</Button>
<Button variant="secondary">secondary</Button>
<Button variant="ghost">ghost</Button>
<Button variant="destructive">destructive</Button>
<Button variant="link">link</Button>
<Button variant="outline">outline</Button>
<div className="flex flex-col space-y-2 px-2">
{/*<HeadersPrinter />*/}
{/*<SecureDebugDetails />*/}

28
src/components/icons.tsx
View File

@@ -19,14 +19,21 @@ import {
Copy,
Cable,
Edit,
Edit2, Radar, PhoneCall, Smartphone, Waypoints, LocateFixed,
} from 'lucide-react';
Edit2,
Radar,
PhoneCall,
Smartphone,
Waypoints,
LocateFixed,
XCircle,
} from "lucide-react";
export type Icon = LucideIcon;
export const Icons = {
add: PlusIcon,
call: PhoneCall,
close: XCircle,
chevronLeft: ChevronLeft,
connect: Cable,
chevronRight: ChevronRight,
@@ -47,11 +54,7 @@ export const Icons = {
twitter: Twitter,
user: User,
logo: (props: LucideProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
{...props}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
@@ -59,10 +62,7 @@ export const Icons = {
</svg>
),
gitHub: (props: LucideProps) => (
<svg
viewBox="0 0 438.549 438.549"
{...props}
>
<svg viewBox="0 0 438.549 438.549" {...props}>
<path
fill="currentColor"
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
@@ -70,11 +70,7 @@ export const Icons = {
</svg>
),
google: (props: LucideProps) => (
<svg
role="img"
viewBox="0 0 24 24"
{...props}
>
<svg role="img" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"

8
src/components/maps/main-map.tsx
View File

@@ -13,7 +13,8 @@ type MainMapProps = {
mode: "latest" | "route";
};
const _renderMarker = (ping: Ping, device: Device, child: Child) => {
const MainMap: React.FC<MainMapProps> = ({ kids, mode }) => {
const _renderMarker = (ping: Ping, device: Device, child: Child) => {
return (
<MapMarker
key={ping.id}
@@ -26,8 +27,7 @@ const _renderMarker = (ping: Ping, device: Device, child: Child) => {
timestamp={ping.timestamp}
/>
);
};
const MainMap: React.FC<MainMapProps> = ({ kids, mode }) => {
};
return (
<div>
<MapContainer
@@ -36,7 +36,7 @@ const MainMap: React.FC<MainMapProps> = ({ kids, mode }) => {
zoom={10}
scrollWheelZoom={true}
>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
{kids?.map((kid) =>
kid.devices?.map((device) =>
mode === "route"

67
src/components/maps/map-marker.tsx
View File

@@ -1,17 +1,24 @@
import React from "react";
import React, {
ForwardRefExoticComponent,
RefAttributes,
RefObject,
} from "react";
import L from "leaflet";
import { Marker, Popup } from "react-leaflet";
import { Marker, Popup, PopupProps } from "react-leaflet";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import Link from "next/link";
import { Icons } from "@/components/icons";
import { usePingSocket } from "@/lib/hooks/use-ping-socket";
import { getInitials } from "@/lib/helpers/name";
import { Bold } from "lucide-react";
import { Button } from "@/components/ui/button";
type MapMarkerProps = {
childName: string;
@@ -44,34 +51,64 @@ const MapMarker: React.FC<MapMarkerProps> = ({
latitude,
longitude,
]);
const popup = React.createRef<any>();
usePingSocket({
deviceId: deviceId,
locationUpdate: (ping) => {
setPosition([ping.location.latitude, ping.location.longitude]);
},
});
const _closePopup = () => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
popup?.current?._source.closePopup();
};
return (
<div className="animate-spin">
<Marker position={position} icon={_getIcon(avatar)}>
<Popup>
<Popup closeButton={false} ref={popup}>
<Card className="grid w-full max-w-md gap-4">
<CardHeader>
<div className="flex items-center gap-4">
<Avatar className="h-12 w-12">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 pb-2">
<Avatar className="h-6 w-6">
<AvatarImage src={_getAvatarImage(avatar)} alt={childName} />
<AvatarFallback>{getInitials(childName)}</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<div className="text-lg font-bold">{childName}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
<div className="flex flex-row items-center space-x-3 px-2">
<CardTitle className="text-sm font-semibold leading-none tracking-tight">
{childName}
</CardTitle>
<Button variant="ghost" size="icon" onClick={_closePopup}>
<Icons.close />
</Button>
</CardHeader>
{/*<CardHeader>*/}
{/* <div className="flex items-center gap-4">*/}
{/* <Avatar className="h-12 w-12">*/}
{/* <AvatarImage src={_getAvatarImage(avatar)} alt={childName} />*/}
{/* <AvatarFallback>{getInitials(childName)}</AvatarFallback>*/}
{/* </Avatar>*/}
{/* <div className="grid gap-1">*/}
{/* <div className="flex flex-col">*/}
{/* <div className="text-lg font-bold">{childName}</div>*/}
{/* <Button variant="link">*/}
{/* <Icons.close />*/}
{/* </Button>*/}
{/* </div>*/}
{/* <div className="text-sm text-gray-500 dark:text-gray-400">*/}
{/* <div className="flex flex-col items-center space-x-3 px-2">*/}
{/* <Icons.device /> {deviceName}*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/*</CardHeader>*/}
<CardContent>
<div className="flex flex-row items-center space-x-3 pb-2">
<Icons.device /> {deviceName}
</div>
</div>
</div>
</div>
</CardHeader>
<CardContent>
<div className="text-sm text-gray-500 dark:text-gray-400">
Last seen -{" "}
{timestamp.toLocaleDateString() +

1
src/components/maps/map-viewtype-selector.tsx
View File

@@ -15,6 +15,7 @@ export const MapViewTypeSelector: React.FC<MapViewTypeSelectorProps> = ({
<ToggleGroup
type="single"
value={currentView}
variant={"outline"}
onValueChange={(value) =>
onChange(value === "latest" ? "latest" : "route")
}

8
src/components/pages/dashboard-page.tsx
View File

@@ -4,15 +4,17 @@ import dynamic from "next/dynamic";
import ChildrenFilter from "../children/children-filter";
import { MapViewTypeSelector } from "../maps/map-viewtype-selector";
import { type CompleteChild } from "@/server/db/schema/children";
import { Button } from "@/components/ui/button";
const Map = dynamic(() => import("@/components/maps/main-map"), {
ssr: false,
});
type DashboardPageProps = {
children: CompleteChild[];
};
const DashboardPage: React.FC<DashboardPageProps> = ({ children }) => {
const [mode, setMode] = React.useState<"latest" | "route">("latest");
const Map = dynamic(() => import("@/components/maps/main-map"), {
ssr: false,
});
return (
<div>
<div className="flex flex-row justify-between">

77
src/styles/globals.css
View File

@@ -2,50 +2,51 @@
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--card: 258 70% 100%;
--ring: 258 58% 37%;
--input: 220 13% 91%;
--muted: 258 29% 85%;
--accent: 258 19% 81%;
--border: 220 13% 91%;
--popover: 258 70% 100%;
--primary: 258 58% 37%;
--secondary: 258 19% 81%;
--background: 258 70% 100%;
--foreground: 258 77% 0%;
--destructive: 19 98% 27%;
--card-foreground: 258 77% 0%;
--muted-foreground: 258 10% 40%;
--accent-foreground: 258 19% 21%;
--popover-foreground: 258 77% 0%;
--primary-foreground: 258 58% 97%;
--secondary-foreground: 258 19% 21%;
--destructive-foreground: 19 98% 87%;
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%;
--radius: 0.5rem;
}
.dark {
--card: 258 53% 3%;
--ring: 258 58% 37%;
--input: 215 27.9% 16.9%;
--muted: 258 29% 15%;
--accent: 258 15% 10%;
--border: 215 27.9% 16.9%;
--popover: 258 53% 3%;
--primary: 258 58% 37%;
--secondary: 258 15% 10%;
--background: 258 53% 3%;
--foreground: 258 40% 97%;
--destructive: 19 98% 46%;
--card-foreground: 258 40% 97%;
--muted-foreground: 258 10% 60%;
--accent-foreground: 258 15% 70%;
--popover-foreground: 258 40% 97%;
--primary-foreground: 258 58% 97%;
--secondary-foreground: 258 15% 70%;
--destructive-foreground: 0 0% 100%;
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 20.5 90.2% 48.2%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 20.5 90.2% 48.2%;
}
}