mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-01-27 00:37:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update node list styling on map page

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-09-22 23:41:38 +10:00
parent 766e14e2de
commit 2e79fcda99
1 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/Map.tsx
View File

@@ -2,11 +2,17 @@ import type React from "react";
import maplibregl from "maplibre-gl";
import { Map, Marker, useMap } from "react-map-gl";
import { base16 } from "rfc4648";
import { Card } from "@app/components/Card.js";
import { IconButton } from "@app/components/IconButton.js";
import { Mono } from "@app/components/Mono.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { MapPinIcon } from "@heroicons/react/24/outline";
import {
EllipsisHorizontalCircleIcon,
MapPinIcon,
} from "@heroicons/react/24/outline";
export const MapPage = (): JSX.Element => {
const { nodes, waypoints } = useDevice();
@@ -14,31 +20,49 @@ export const MapPage = (): JSX.Element => {
return (
<div className="flex-grow">
<div className="absolute right-0 top-0 z-10 m-2 rounded-md bg-white p-2 shadow-md">
<div className="p-1 text-lg font-medium">Title</div>
<div className="flex flex-col gap-2">
{nodes.map((n) => (
<div key={n.data.num} className="flex gap-2">
<Hashicon value={n.data.num.toString()} size={24} />
<div>{n.data.user?.longName}</div>
<IconButton
icon={<MapPinIcon className="h-4" />}
size="sm"
onClick={() => {
if (n.data.position?.latitudeI) {
map?.flyTo({
center: [
n.data.position.longitudeI / 1e7,
n.data.position.latitudeI / 1e7,
],
zoom: 10,
});
}
}}
/>
</div>
))}
</div>
<div className="absolute right-0 top-0 z-10 m-2">
<Card className="flex-col p-3">
<div className="p-1 text-lg font-medium">Title</div>
<div className="flex flex-col gap-2">
{nodes.map((n) => (
<div
className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
key={n.data.num}
>
<span className="my-auto shrink-0">
<Hashicon value={n.data.num.toString()} size={28} />
</span>
<div className="flex flex-col">
<span className="font-medium">{n.data.user?.longName}</span>
<Mono>
{base16
.stringify(n.data.user?.macaddr ?? [])
.match(/.{1,2}/g)
?.join(":") ?? ""}
</Mono>
</div>
<div className="my-auto ml-auto">
<IconButton
variant="secondary"
size="sm"
icon={<EllipsisHorizontalCircleIcon className="h-4" />}
onClick={() => {
if (n.data.position?.latitudeI) {
map?.flyTo({
center: [
n.data.position.longitudeI / 1e7,
n.data.position.latitudeI / 1e7,
],
zoom: 10,
});
}
}}
/>
</div>
</div>
))}
</div>
</Card>
</div>
<Map
mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"