hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Widget cleanup

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-10-09 14:39:55 +10:30
parent 32401601a5
commit 10e20df814
3 changed files with 65 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Widgets/BatteryWidget.tsx
+25 -25
View File
@@ -45,38 +45,38 @@ export const BatteryWidget = ({
if (currentStat && previousStat) { if (currentStat && previousStat) {
const timeDiff = currentTime.getTime() - previousTime.getTime(); const timeDiff = currentTime.getTime() - previousTime.getTime();
const statDiff = Math.abs(currentStat - previousStat); const statDiff = Math.abs(currentStat - previousStat);
//convert to ms/% if (statDiff !== 0) {
const msPerPercent = timeDiff / statDiff; //convert to ms/%
const formatted = prettyMilliseconds( const msPerPercent = timeDiff / statDiff;
(100 - currentStat) * msPerPercent const formatted = prettyMilliseconds(
); (100 - currentStat) * msPerPercent
setTimeRemaining(formatted); );
setTimeRemaining(formatted);
}
} else setTimeRemaining("Unknown"); } else setTimeRemaining("Unknown");
} }
}, [hardware.myNodeNum, nodes]); }, [hardware.myNodeNum, nodes]);
return ( return (
<div className="relative overflow-hidden rounded-lg bg-white p-4 shadow"> <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
<dt> <div className="rounded-md bg-indigo-500 p-3">
<div className="absolute rounded-md bg-indigo-500 p-3"> <Battery100Icon className="h-6 text-white" />
<Battery100Icon className="h-6 text-white" aria-hidden="true" /> </div>
</div> <div>
<p className="ml-16 truncate text-sm font-medium text-gray-500"> <p className="truncate text-sm font-medium text-gray-500">
Battery State Battery State
</p> </p>
</dt> <div className="flex gap-1">
<dd className="ml-16 flex items-baseline"> <p className="text-xl font-semibold text-gray-900">{batteryLevel}%</p>
<p className="text-2xl font-semibold text-gray-900">{batteryLevel}%</p> <div className={`flex text-sm font-semibold text-orange-600`}>
<p <ClockIcon
className={`ml-2 flex items-baseline text-sm font-semibold text-orange-600`} className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
> aria-hidden="true"
<ClockIcon />
className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center" <span className="my-auto">{timeRemaining}</span>
aria-hidden="true" </div>
/> </div>
{timeRemaining} </div>
</p>
</dd>
</div> </div>
); );
}; };
src/components/Widgets/PeersWidget.tsx
+30 -43
View File
@@ -1,16 +1,12 @@
import type React from "react"; import type React from "react";
import { base16 } from "rfc4648"; import { useDevice } from "@app/core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { import {
EllipsisHorizontalCircleIcon, EllipsisHorizontalIcon,
UserGroupIcon, UserGroupIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import type { Protobuf } from "@meshtastic/meshtasticjs"; import type { Protobuf } from "@meshtastic/meshtasticjs";
import { Card } from "../Card.js";
import { Dropdown } from "../Dropdown.js";
import { IconButton } from "../IconButton.js"; import { IconButton } from "../IconButton.js";
import { Mono } from "../Mono.js"; import { Mono } from "../Mono.js";
@@ -19,45 +15,36 @@ export interface PeersWidgetProps {
} }
export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => { export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
const { setActivePage } = useDevice();
return ( return (
<Card className="flex-col"> <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
<Dropdown <div className="rounded-md bg-emerald-500 p-3">
title="Peers" <UserGroupIcon className="h-6 text-white" />
stat={peers.length} </div>
icon={<UserGroupIcon className="h-4" />} <div>
> <p className="truncate text-sm font-medium text-gray-500">
<div className="flex flex-col p-3"> Connected Peers
{peers.map((peer) => ( </p>
<div <div className="flex gap-1">
className="flex gap-2 rounded-md p-2 hover:bg-slate-100" {peers.length > 0 ? (
key={peer.num} <p className="text-lg font-semibold text-gray-900">
> {`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`}
<span className="my-auto shrink-0"> </p>
<Hashicon value={peer.num.toString()} size={28} /> ) : (
</span> <Mono className="m-auto">None Discovered.</Mono>
<div className="flex flex-col">
<span className="font-medium">{peer.user?.longName}</span>
<Mono>
{base16
.stringify(peer.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" />}
/>
</div>
</div>
))}
{peers.length === 0 && (
<Mono className="m-auto">No devices discovered yet.</Mono>
)} )}
</div> </div>
</Dropdown> </div>
</Card> <IconButton
className="my-auto ml-auto"
variant="secondary"
size="sm"
onClick={() => {
setActivePage("peers");
}}
icon={<EllipsisHorizontalIcon className="h-4" />}
/>
</div>
); );
}; };
src/components/Widgets/PositionWidget.tsx
+10 -10
View File
@@ -8,18 +8,18 @@ export interface PositionWidgetProps {
export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => { export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
return ( return (
<div className="relative overflow-hidden rounded-lg bg-white p-4 shadow"> <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
<dt> <div className="rounded-md bg-rose-500 p-3">
<div className="absolute rounded-md bg-rose-500 p-3"> <MapPinIcon className="h-6 text-white" />
<MapPinIcon className="h-6 text-white" aria-hidden="true" /> </div>
</div> <div>
<p className="ml-16 truncate text-sm font-medium text-gray-500"> <p className="truncate text-sm font-medium text-gray-500">
Current Location Current Location
</p> </p>
</dt> <div className="flex gap-1">
<dd className="ml-16 flex items-baseline"> <p className="text-lg font-semibold text-gray-900">{grid}</p>
<p className="text-lg font-semibold text-gray-900">{grid}</p> </div>
</dd> </div>
</div> </div>
); );
}; };