mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-03-14 03:49:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add node bounding box controll to map

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-12-28 13:37:44 +11:00
parent b1f86466f0
commit f61d006a7a
5 changed files with 1255 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -30,6 +30,7 @@
"@meshtastic/meshtasticjs": "^0.7.4",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.8",
"@turf/turf": "^6.5.0",
"base64-js": "^1.5.1",
"chart.js": "^4.1.1",
"chartjs-adapter-date-fns": "^3.0.0",

1163
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

110
src/components/Dialog/ImportDialog.tsx
View File

@@ -25,13 +25,13 @@ export interface ImportDialogProps {
export const ImportDialog = ({
isOpen,
close,
close
}: ImportDialogProps): JSX.Element => {
const [QRCodeURL, setQRCodeURL] = useState<string>("");
const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
const [validURL, setValidURL] = useState<boolean>(false);
const {connection} = useDevice()
const { connection } = useDevice();
useEffect(() => {
const base64String = QRCodeURL.split("e/#")[1]
@@ -48,29 +48,30 @@ export const ImportDialog = ({
}, [QRCodeURL]);
const apply = () => {
channelSet?.settings.map(((ch, index) => {
channelSet?.settings.map((ch, index) => {
connection?.setChannel({
channel: {
index,
role: index === 0 ? Protobuf.Channel_Role.PRIMARY: Protobuf.Channel_Role.SECONDARY,
role:
index === 0
? Protobuf.Channel_Role.PRIMARY
: Protobuf.Channel_Role.SECONDARY,
settings: ch
}
})
}))
});
});
if (channelSet?.loraConfig) {
connection?.setConfig({
config: {
payloadVariant: {
oneofKind: 'lora',
oneofKind: "lora",
lora: channelSet.loraConfig
}
}
})
});
}
}
};
return (
<Dialog
@@ -87,48 +88,55 @@ export const ImportDialog = ({
onChange={(e) => {
setQRCodeURL(e.target.value);
}}
/>{validURL && (
<div className="flex flex-col gap-3">
<div className="flex w-full gap-2">
<div className="w-36">
<Toggle
className="flex-col gap-2"
label="Use Preset?"
/>
{validURL && (
<div className="flex flex-col gap-3">
<div className="flex w-full gap-2">
<div className="w-36">
<Toggle
className="flex-col gap-2"
label="Use Preset?"
disabled
checked={channelSet?.loraConfig?.usePreset ?? true}
/>
</div>
<Select
label="Modem Preset"
disabled
value={channelSet?.loraConfig?.modemPreset}
>
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
</Select>
</div>
<Select
label="Region"
disabled
checked={channelSet?.loraConfig?.usePreset ?? true}
/>
value={channelSet?.loraConfig?.region}
>
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
</Select>
<span className="text-md block font-medium text-gray-700">
Channels:
</span>
<div className="flex w-40 flex-col gap-1">
{channelSet?.settings.map((channel, index) => (
<Checkbox
key={index}
label={
channel.name.length
? channel.name
: `Channel: ${channel.id}`
}
/>
))}
</div>
</div>
<Select
label="Modem Preset"
disabled
value={channelSet?.loraConfig?.modemPreset}
>
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
</Select>
</div>
<Select
label="Region"
disabled
value={channelSet?.loraConfig?.region}
>
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
</Select>
<span className="block text-md font-medium text-gray-700">Channels:</span>
<div className="flex w-40 flex-col gap-1">
{channelSet?.settings.map((channel, index) => (
<Checkbox
key={index}
label={
channel.name.length ? channel.name : `Channel: ${channel.id}`
}
/>
))}
</div>
</div>)}
<Button onClick={() => apply()} disabled={!validURL}>Apply</Button></div>
)}
<Button onClick={() => apply()} disabled={!validURL}>
Apply
</Button>
</div>
</Dialog>
);
};

44
src/components/PageComponents/Map/MapControlls.tsx
View File

@@ -1,13 +1,49 @@
import { FiCrosshair } from "react-icons/fi";
import { useMap } from "react-map-gl";
import { lineString, bbox } from "@turf/turf";
import {
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon
MagnifyingGlassPlusIcon,
ShareIcon
} from "@heroicons/react/24/outline";
import { useDevice } from "@app/core/providers/useDevice.js";
export const MapControlls = (): JSX.Element => {
const { current: map } = useMap();
const { nodes } = useDevice();
const getBBox = () => {
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
if (nodesWithPosition.length > 1) {
const line = lineString(
nodesWithPosition.map((n) => [
(n.data.position?.latitudeI ?? 0) / 1e7,
(n.data.position?.longitudeI ?? 0) / 1e7
])
);
const bounds = bbox(line);
const center = map?.cameraForBounds([
[bounds[1], bounds[0]],
[bounds[3], bounds[2]]
]);
if (center) {
map?.easeTo(center);
}
} else if (nodesWithPosition.length === 1) {
map?.easeTo({
zoom: 12,
center: [
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
]
});
}
};
return (
<div className="absolute right-0 top-0 z-10 m-2 ">
@@ -34,6 +70,12 @@ export const MapControlls = (): JSX.Element => {
>
<FiCrosshair className="h-4 w-4" />
</div>
<div
className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
onClick={() => getBBox()}
>
<ShareIcon className="h-4 w-4" />
</div>
</div>
</div>
);

4
src/validation/moduleConfig/externalNotification.ts
View File

@@ -27,10 +27,10 @@ export class ExternalNotificationValidation
alertMessage: boolean;
@IsBoolean()
alertMessageVibra: boolean
alertMessageVibra: boolean;
@IsBoolean()
alertMessageBuzzer: boolean
alertMessageBuzzer: boolean;
@IsBoolean()
alertBell: boolean;