mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Config stuff

pull/110/head
Malte Grimm 3 years ago
parent
3af5499940
commit
487017a837
4 changed files with 94 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      src/components/Dashboard.tsx
  2. 21
      src/components/PageComponents/Config/Device.tsx
  3. 10
      src/core/stores/deviceStore.ts
  4. 8
      src/pages/Config/DeviceConfig.tsx

130
src/components/Dashboard.tsx
View File

@ -71,70 +71,78 @@ const DeviceList = ({devices}: {devices: Device[]}) => {
return (
<div className="flex rounded-md border border-dashed border-slate-200 h-1/2 p-3 mb-2 dark:border-slate-700">
{devices.length ? (
<ul role="list" className="grow divide-y divide-gray-200">
{devices.map((device, index) => {
return (
<li key={device.id}>
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="truncate text-sm font-medium text-accent">
{device.nodes.get(device.hardware.myNodeNum)?.user
?.longName ?? "<Not flashed yet>"}
</p>
<div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
{device.connection?.connType === "ble" && (
<>
<BluetoothIcon size={16} />
BLE
</>
)}
{device.connection?.connType === "serial" && (
<>
<UsbIcon size={16} />
Serial
</>
)}
{device.connection?.connType === "http" && (
<>
<NetworkIcon size={16} />
Network
</>
)}
<div className="flex flex-col justify-between w-full">
<ul role="list" className="grow divide-y divide-gray-200">
{devices.map((device, index) => {
return (
<li key={device.id}>
<div className="py-4">
<div className="flex items-center justify-between">
<p className="truncate text-sm font-medium text-accent">
{device.nodes.get(device.hardware.myNodeNum)?.user
?.longName ?? "<Not flashed yet>"}
</p>
<div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
{device.connection?.connType === "ble" && (
<>
<BluetoothIcon size={16} />
BLE
</>
)}
{device.connection?.connType === "serial" && (
<>
<UsbIcon size={16} />
Serial
</>
)}
{device.connection?.connType === "http" && (
<>
<NetworkIcon size={16} />
Network
</>
)}
</div>
</div>
</div>
<div className="mt-1 sm:flex sm:justify-between">
<div className="flex gap-2 items-center text-sm text-gray-500">
<UsersIcon
size={20}
className="text-gray-400"
aria-hidden="true"
/>
{device.nodes.size === 0 ? 0 : device.nodes.size - 1}
<Button
variant={devicesToFlash[index] ? "default" : "outline"}
size="sm"
className="w-full justify-start gap-2"
onClick={() => {
// TODO: HACKY AF, fix.
// Used to make sure page rerenders but this has issues
devicesToFlash[index] = !devicesToFlash[index];
device.setSelectedToFlash(!devicesToFlash[index]);
setDevicesToFlashFlash(devicesToFlash);
// devicesToFlash[index] = !devicesToFlash[index];
// console.log(`Set device ${index}: ${devicesToFlash[index]}`);
// toggleDeviceFlash(device);
}}
>
{devicesToFlash[index] ? "Yes" : "No"}
</Button>
<div className="mt-1 sm:flex sm:justify-between">
<div className="flex gap-2 w-full items-center text-sm text-gray-500">
<UsersIcon
size={20}
className="text-gray-400"
aria-hidden="true"
/>
{device.nodes.size === 0 ? 0 : device.nodes.size - 1}
<Button
variant={devicesToFlash[index] ? "default" : "outline"}
size="sm"
className="w-full gap-2 h-8"
onClick={() => {
// TODO: HACKY AF, fix.
// Used to make sure page rerenders but this has issues
devicesToFlash[index] = !devicesToFlash[index];
device.setSelectedToFlash(!devicesToFlash[index]);
setDevicesToFlashFlash(devicesToFlash);
// devicesToFlash[index] = !devicesToFlash[index];
// console.log(`Set device ${index}: ${devicesToFlash[index]}`);
// toggleDeviceFlash(device);
}}
>
{devicesToFlash[index] ? "Enabled" : "Disabled"}
</Button>
</div>
</div>
</div>
</div>
</li>
);
})}
</ul>
</li>
);
})}
</ul>
<Button
className="gap-2"
onClick={() => setConnectDialogOpen(true)}
>
Flash
</Button>
</div>
) : (
<div className="m-auto flex flex-col gap-3 text-center">
<ListPlusIcon size={48} className="mx-auto text-textSecondary" />

21
src/components/PageComponents/Config/Device.tsx
View File

@ -1,20 +1,21 @@
import type { DeviceValidation } from "@app/validation/config/device.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { useConfig, useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
// const { config, setWorkingConfig } = useDevice();
const config = useConfig();
const onSubmit = (data: DeviceValidation) => {
setWorkingConfig(
new Protobuf.Config({
payloadVariant: {
case: "device",
value: data
}
})
);
// setWorkingConfig(
// new Protobuf.Config({
// payloadVariant: {
// case: "device",
// value: data
// }
// })
// );
};
return (

10
src/core/stores/deviceStore.ts
View File

@ -5,6 +5,7 @@ import { create } from "zustand";
import { Protobuf, Types } from "@meshtastic/meshtasticjs";
import { channel } from "diagnostics_channel";
import { useAppStore } from "./appStore";
export type Page = "messages" | "map" | "config" | "channels" | "peers";
@ -593,3 +594,12 @@ export const useDevice = (): Device => {
}
return context;
};
export const useConfig = (): Protobuf.Config => {
const context = useContext(DeviceContext);
if(context == undefined) {
const {configPresetRoot, configPresetSelected } = useAppStore();
return configPresetRoot.children[configPresetSelected].config;
}
return context.config;
};

8
src/pages/Config/DeviceConfig.tsx
View File

@ -1,4 +1,4 @@
import { Fragment } from "react";
import { Fragment, useContext } from "react";
import { Network } from "@components/PageComponents/Config/Network.js";
import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
import { Device } from "@components/PageComponents/Config/Device.js";
@ -6,7 +6,7 @@ import { Display } from "@components/PageComponents/Config/Display.js";
import { LoRa } from "@components/PageComponents/Config/LoRa.js";
import { Position } from "@components/PageComponents/Config/Position.js";
import { Power } from "@components/PageComponents/Config/Power.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { DeviceContext, useDevice } from "@core/stores/deviceStore.js";
import {
Tabs,
TabsContent,
@ -15,7 +15,7 @@ import {
} from "@components/UI/Tabs.js";
export const DeviceConfig = (): JSX.Element => {
const { hardware } = useDevice();
const device = useContext(DeviceContext);
const tabs = [
{
@ -34,7 +34,7 @@ export const DeviceConfig = (): JSX.Element => {
{
label: "Network",
element: Network,
disabled: !hardware.hasWifi
disabled: device && !device.hardware.hasWifi
},
{
label: "Display",

Write Preview
Loading…
Cancel
Save