feat: sidebar adapts to the screen showed
This commit is contained in:
parent
55a16da28f
commit
8c4970767b
8 changed files with 386 additions and 93 deletions
|
|
@ -1,14 +1,12 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { AppSidebar } from "@/components/app-sidebar";
|
|
||||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
|
||||||
import ClientCard from "@/components/client-card";
|
import ClientCard from "@/components/client-card";
|
||||||
import DeviceCard from "@/components/device-card";
|
import DeviceCard from "@/components/device-card";
|
||||||
import { useSearchParams, useParams } from "next/navigation";
|
import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const { client } = useParams();
|
const client = searchParams.get("client");
|
||||||
|
|
||||||
const clienti = [
|
const clienti = [
|
||||||
{
|
{
|
||||||
|
|
@ -90,23 +88,11 @@ export default function Page() {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarProvider
|
<div className="flex flex-1 flex-col gap-4 p-4">
|
||||||
style={
|
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
|
||||||
{
|
<ClientCard client={client} />
|
||||||
"--sidebar-width": "350px",
|
<DeviceCard clienti={clienti} />
|
||||||
} as React.CSSProperties
|
</div>
|
||||||
}
|
</div>
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
|
|
||||||
<ClientCard client={client} />
|
|
||||||
<DeviceCard clienti={clienti} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -32,21 +32,10 @@ import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<SidebarProvider
|
<div className="flex flex-1 flex-col gap-4 p-4">
|
||||||
style={
|
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
|
||||||
{
|
THIS IS A DASHBOARD, AND I DON'T KNOW WHAT TO PUT IN IT
|
||||||
"--sidebar-width": "350px",
|
</div>
|
||||||
} as React.CSSProperties
|
</div>
|
||||||
}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
|
|
||||||
THIS IS A DASHBOARD, AND I DON'T KNOW WHAT TO PUT IN IT
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||||
|
import { AppSidebar } from "@/components/app-sidebar";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
|
|
@ -27,7 +29,18 @@ export default function RootLayout({
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
>
|
>
|
||||||
{children}
|
<SidebarProvider
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": "350px",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<AppSidebar />
|
||||||
|
<SidebarInset>
|
||||||
|
{children}
|
||||||
|
</SidebarInset>
|
||||||
|
</SidebarProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,19 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { AppSidebar } from "@/components/app-sidebar";
|
|
||||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const MapWithNoSSR = dynamic(() => import("../../components/map"), {
|
const MapWithNoSSR = dynamic(() => import("../../components/map"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const client = searchParams.get("client");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarProvider
|
<div id="map" className="w-full h-full border rounded-md m-0 p-0">
|
||||||
style={
|
<MapWithNoSSR highlight={client} />
|
||||||
{
|
</div>
|
||||||
"--sidebar-width": "350px",
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<div id="map" className="w-full h-full border rounded-md m-0 p-0">
|
|
||||||
<MapWithNoSSR />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,10 @@
|
||||||
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Home, Map } from "lucide-react";
|
import { Home, Map } from "lucide-react";
|
||||||
|
|
||||||
import { NavUser } from "@/components/nav-user";
|
import { NavUser } from "@/components/nav-user";
|
||||||
import { Label } from "@/components/ui/label";
|
import { Avatar, AvatarImage } from "./ui/avatar";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { usePathname, useRouter } from "next/navigation";
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarContent,
|
SidebarContent,
|
||||||
|
|
@ -18,11 +19,25 @@ import {
|
||||||
SidebarMenuItem,
|
SidebarMenuItem,
|
||||||
useSidebar,
|
useSidebar,
|
||||||
} from "@/components/ui/sidebar";
|
} from "@/components/ui/sidebar";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import {
|
||||||
import { Avatar, AvatarImage } from "./ui/avatar";
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
import { useState, useEffect } from "react";
|
TooltipTrigger,
|
||||||
import { usePathname, useRouter } from "next/navigation";
|
} from "@/components/ui/tooltip";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
user: {
|
user: {
|
||||||
|
|
@ -33,16 +48,27 @@ const data = {
|
||||||
navMain: [
|
navMain: [
|
||||||
{
|
{
|
||||||
title: "Dashboard",
|
title: "Dashboard",
|
||||||
|
page: "dashboard",
|
||||||
url: "/dashboard",
|
url: "/dashboard",
|
||||||
icon: Home,
|
icon: Home,
|
||||||
isActive: true,
|
isActive: true,
|
||||||
|
isVisible: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Map",
|
title: "Map",
|
||||||
|
page: "map",
|
||||||
url: "/map",
|
url: "/map",
|
||||||
icon: Map,
|
icon: Map,
|
||||||
isActive: false,
|
isActive: false,
|
||||||
|
isVisible: true,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Dettaglio cliente",
|
||||||
|
page: "client",
|
||||||
|
url: "/client",
|
||||||
|
icon: Home,
|
||||||
|
isVisible: false,
|
||||||
|
}
|
||||||
],
|
],
|
||||||
clienti: [
|
clienti: [
|
||||||
{
|
{
|
||||||
|
|
@ -129,6 +155,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
setClientPathname(pathname);
|
setClientPathname(pathname);
|
||||||
}, [pathname]);
|
}, [pathname]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log();
|
||||||
|
}, [clientPathname]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sidebar
|
<Sidebar
|
||||||
collapsible="icon"
|
collapsible="icon"
|
||||||
|
|
@ -136,9 +166,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
variant="inset"
|
variant="inset"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{/* This is the first sidebar */}
|
|
||||||
{/* We disable collapsible and adjust width to icon. */}
|
|
||||||
{/* This will make the sidebar appear as icons. */}
|
|
||||||
<Sidebar
|
<Sidebar
|
||||||
collapsible="none"
|
collapsible="none"
|
||||||
className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
|
className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
|
||||||
|
|
@ -175,7 +202,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
<SidebarGroup>
|
<SidebarGroup>
|
||||||
<SidebarGroupContent className="px-1.5 md:px-0">
|
<SidebarGroupContent className="px-1.5 md:px-0">
|
||||||
<SidebarMenu>
|
<SidebarMenu>
|
||||||
{data.navMain.map((item) => (
|
{data.navMain.map((item) => {
|
||||||
|
if (!item.isVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return (
|
||||||
<SidebarMenuItem key={item.title}>
|
<SidebarMenuItem key={item.title}>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
tooltip={{
|
tooltip={{
|
||||||
|
|
@ -204,7 +235,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
<span>{item.title}</span>
|
<span>{item.title}</span>
|
||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
</SidebarGroupContent>
|
</SidebarGroupContent>
|
||||||
</SidebarGroup>
|
</SidebarGroup>
|
||||||
|
|
@ -214,8 +246,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
</SidebarFooter>
|
</SidebarFooter>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
{/* This is the second sidebar */}
|
|
||||||
{/* We disable collapsible and let it fill remaining space */}
|
|
||||||
<Sidebar collapsible="none" className="hidden flex-1 md:flex">
|
<Sidebar collapsible="none" className="hidden flex-1 md:flex">
|
||||||
<SidebarHeader className="gap-3.5 border-b p-4">
|
<SidebarHeader className="gap-3.5 border-b p-4">
|
||||||
<div className="flex w-full items-center justify-between">
|
<div className="flex w-full items-center justify-between">
|
||||||
|
|
@ -225,22 +255,93 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
: data.navMain.find((entry) => entry.url == clientPathname)
|
: data.navMain.find((entry) => entry.url == clientPathname)
|
||||||
?.title}
|
?.title}
|
||||||
</div>
|
</div>
|
||||||
{/*<Label className="flex items-center gap-2 text-sm">
|
|
||||||
<span>Unreads</span>
|
|
||||||
<Switch className="shadow-none" />
|
|
||||||
</Label>*/}
|
|
||||||
</div>
|
</div>
|
||||||
<SidebarInput placeholder="Type to search..." />
|
<div className="flex flex-row max-h-max gap-2">
|
||||||
|
<SidebarInput placeholder="Digita per cercare..." className="h-full" />
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button variant="outline" onClick={() => {
|
||||||
|
if (clientPathname.split("/")[1] == "map") {
|
||||||
|
router.replace('/map', undefined);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Resetta ricerca</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Dialog>
|
||||||
|
<form className="z-10">
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline">Aggiungi cliente</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Aggiungi cliente</DialogTitle>
|
||||||
|
{/*<DialogDescription>
|
||||||
|
Make changes to your profile here. Click save when you're
|
||||||
|
done.
|
||||||
|
</DialogDescription>*/}
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="name">Nome</Label>
|
||||||
|
<Input id="name" name="name" placeholder="Nome" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="ragione_sociale">Ragione sociale</Label>
|
||||||
|
<Input id="ragione_sociale" name="ragione_sociale" placeholder="Ragione sociale" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="p_iva">Partita IVA</Label>
|
||||||
|
<Input id="p_iva" name="p_iva" placeholder="Partita IVA" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="tel">Numero di telefono</Label>
|
||||||
|
<Input id="tel" name="tel" placeholder="Numero di telefono" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="sede_desc">Sede (descrizione)</Label>
|
||||||
|
<Input id="sede_desc" name="sede_desc" placeholder="Sede - descrizione" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="sede_link">Sede (link GMaps)</Label>
|
||||||
|
<Input id="sede_link" name="sede_link" placeholder="Sede - link" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
<Label htmlFor="contratto">Contratto (link)</Label>
|
||||||
|
<Input id="contratto" name="contratto" placeholder="Contratto - link" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button variant="outline">Cancella</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button type="submit">Aggiungi</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</form>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
<SidebarContent>
|
<SidebarContent>
|
||||||
<SidebarGroup className="px-0">
|
<SidebarGroup className="px-0">
|
||||||
<SidebarGroupContent className="">
|
<SidebarGroupContent className="">
|
||||||
{clienti.map((cliente) => (
|
{clienti.map((cliente) => (
|
||||||
<a
|
<span
|
||||||
href="#"
|
onClick={() => {
|
||||||
onClick={() => router.push(`/client/${cliente.name}`)}
|
let path = clientPathname.split("/")[1];
|
||||||
|
if (path == "dashboard") {
|
||||||
|
path = "client"
|
||||||
|
}
|
||||||
|
router.push(`/${path}?client=${cliente.name}`)
|
||||||
|
}}
|
||||||
key={cliente.name}
|
key={cliente.name}
|
||||||
className="w-11/12 mx-auto rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
|
className="hover:cursor-pointer w-11/12 mx-auto rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
|
||||||
>
|
>
|
||||||
<span className="font-medium">{cliente.name}</span>
|
<span className="font-medium">{cliente.name}</span>
|
||||||
<div className="flex w-full items-center gap-2">
|
<div className="flex w-full items-center gap-2">
|
||||||
|
|
@ -249,7 +350,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
<span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">
|
<span className="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">
|
||||||
{cliente.registratori[0].prossima_verifica}
|
{cliente.registratori[0].prossima_verifica}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</span>
|
||||||
))}
|
))}
|
||||||
</SidebarGroupContent>
|
</SidebarGroupContent>
|
||||||
</SidebarGroup>
|
</SidebarGroup>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ import { Button } from "@/components/ui/button";
|
||||||
import { Edit, Plus } from "lucide-react";
|
import { Edit, Plus } from "lucide-react";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { useParams } from "next/navigation";
|
import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
type Invervento = {
|
type Invervento = {
|
||||||
id: string,
|
id: string,
|
||||||
|
|
@ -54,7 +54,8 @@ type Cliente = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const DeviceCard = ({clienti}: {clienti:Array<Cliente>}) => {
|
const DeviceCard = ({clienti}: {clienti:Array<Cliente>}) => {
|
||||||
const { client } = useParams();
|
const searchParams = useSearchParams();
|
||||||
|
const client = searchParams.get("client");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="@container/card">
|
<Card className="@container/card">
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,46 @@
|
||||||
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
|
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
|
||||||
import { Icon } from "leaflet";
|
import { Icon } from "leaflet";
|
||||||
import "leaflet/dist/leaflet.css";
|
import "leaflet/dist/leaflet.css";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Map as MapIcon } from "lucide-react";
|
||||||
|
|
||||||
const Map = () => {
|
const Map = ({highlight}: {highlight?: string}) => {
|
||||||
const positions = [
|
const positions = [
|
||||||
{
|
{
|
||||||
name: "Autogeneral",
|
name: "Autogeneral",
|
||||||
position: [45.49285083101236, 10.15951437254693],
|
position: [45.49285083101236, 10.15951437254693],
|
||||||
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Delizie e Sapori (Cuor di gelato)",
|
name: "Delizie e Sapori (Cuor di gelato)",
|
||||||
position: [45.55425938252774, 10.227818585851844],
|
position: [45.55425938252774, 10.227818585851844],
|
||||||
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Casa dell'Ottica di Zanotti Giulio",
|
name: "Casa dell'Ottica di Zanotti Giulio",
|
||||||
position: [45.53644055688526, 10.222584658771389],
|
position: [45.53644055688526, 10.222584658771389],
|
||||||
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Nuova Ottica",
|
name: "Nuova Ottica",
|
||||||
position: [45.48257540298808, 10.23957216093029],
|
position: [45.48257540298808, 10.23957216093029],
|
||||||
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Savoldi Ettore",
|
||||||
|
position: [45.486316837251415, 10.1737522099259],
|
||||||
|
sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
console.log(highlight);
|
||||||
|
console.log(positions.find((client) => client.name == highlight));
|
||||||
|
|
||||||
const customMarker = new Icon({
|
const customMarker = new Icon({
|
||||||
iconUrl: "marker-icon-red.png",
|
iconUrl: "marker-icon-red.png",
|
||||||
iconAnchor: [10, 20],
|
iconAnchor: [10, 20],
|
||||||
|
|
@ -30,31 +49,80 @@ const Map = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MapContainer
|
<MapContainer
|
||||||
center={positions[0].position}
|
center={highlight ? positions.find((client) => client.name == highlight)?.position : [45.54157745559809, 10.211896906975962]}
|
||||||
zoom={10}
|
zoom={13}
|
||||||
scrollWheelZoom={true}
|
scrollWheelZoom={true}
|
||||||
className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md"
|
className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md z-0"
|
||||||
>
|
>
|
||||||
<TileLayer
|
<TileLayer
|
||||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
|
url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
|
||||||
/>
|
/>
|
||||||
{positions.map((client) => (
|
{ highlight == null ? positions.map((client) => (
|
||||||
<Marker
|
<Marker
|
||||||
position={client.position}
|
position={client.position}
|
||||||
draggable={false}
|
draggable={false}
|
||||||
animate={false}
|
animate={false}
|
||||||
icon={customMarker}
|
icon={customMarker}
|
||||||
>
|
>
|
||||||
<Popup>
|
<Popup className="">
|
||||||
<span className="block text-sm font-bold">{client.name}</span>
|
<div className="flex flex-row gap-5">
|
||||||
<div className="flex gap-2">
|
<div>
|
||||||
<span className="text-xs font-semibold">P.IVA</span>
|
<span className="block text-sm font-bold">{client.name}</span>
|
||||||
<span className="text-xs">03417520172</span>
|
<div className="flex gap-2">
|
||||||
|
<span className="text-xs font-semibold">P.IVA</span>
|
||||||
|
<span className="text-xs">03417520172</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<a href={client.sede_url} target="blank">
|
||||||
|
<Button variant="outline">
|
||||||
|
<MapIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Resetta ricerca</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</Popup>
|
</Popup>
|
||||||
</Marker>
|
</Marker>
|
||||||
))}
|
)) :
|
||||||
|
<Marker
|
||||||
|
position={positions.find((client) => client.name == highlight)?.position}
|
||||||
|
draggable={false}
|
||||||
|
animate={false}
|
||||||
|
icon={customMarker}
|
||||||
|
>
|
||||||
|
<Popup className="">
|
||||||
|
<div className="flex flex-row gap-5">
|
||||||
|
<div>
|
||||||
|
<span className="block text-sm font-bold">{positions.find((client) => client.name == highlight)?.name}</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<span className="text-xs font-semibold">P.IVA</span>
|
||||||
|
<span className="text-xs">03417520172</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<a href={positions.find((client) => client.name == highlight)?.sede_url} target="blank">
|
||||||
|
<Button variant="outline">
|
||||||
|
<MapIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Resetta ricerca</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Marker>
|
||||||
|
}
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
143
src/components/ui/dialog.tsx
Normal file
143
src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue