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

Lokking page work

pull/21/head
Sacha Weatherstone 4 years ago
parent
39bb89dab3
commit
3f1297411d
6 changed files with 114 additions and 56 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. 4
      index.html
  2. 2
      package.json
  3. 8
      pnpm-lock.yaml
  4. 6
      src/components/Connection.tsx
  5. 149
      src/pages/Extensions/Logs.tsx
  6. 1
      tailwind.config.cjs

4
index.html
View File

@ -15,6 +15,10 @@
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-tab.svg" color="#67ea94" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css"
/>
<meta name="theme-color" content="#67ea94" />
<meta
name="viewport"

2
package.json
View File

@ -15,7 +15,7 @@
"@emeraldpay/hashicon-react": "^0.5.2",
"@floating-ui/react-dom": "^0.4.3",
"@meshtastic/components": "^1.0.23",
"@meshtastic/meshtasticjs": "^0.6.42",
"@meshtastic/meshtasticjs": "^0.6.43",
"@reduxjs/toolkit": "^1.7.2",
"base64-js": "^1.5.1",
"framer-motion": "^6.2.6",

8
pnpm-lock.yaml
View File

@ -4,7 +4,7 @@ specifiers:
'@emeraldpay/hashicon-react': ^0.5.2
'@floating-ui/react-dom': ^0.4.3
'@meshtastic/components': ^1.0.23
'@meshtastic/meshtasticjs': ^0.6.42
'@meshtastic/meshtasticjs': ^0.6.43
'@reduxjs/toolkit': ^1.7.2
'@types/mapbox-gl': ^2.6.1
'@types/react': ^17.0.39
@ -62,7 +62,7 @@ dependencies:
'@emeraldpay/hashicon-react': 0.5.2
'@floating-ui/react-dom': 0.4.3_b8fdba992ce7d797017dc07106486496
'@meshtastic/components': 1.0.23_@[email protected]
'@meshtastic/meshtasticjs': 0.6.42
'@meshtastic/meshtasticjs': 0.6.43
'@reduxjs/toolkit': 1.7[email protected][email protected]
base64-js: 1.5.1
framer-motion: 6.2[email protected][email protected]
@ -1587,8 +1587,8 @@ packages:
- '@types/react'
dev: false
/@meshtastic/meshtasticjs/0.6.42:
resolution: {integrity: sha512-sZLsOZXyrMUIVk4HSRsOAtk50IcWb9qEeIfq4i92khbXQvb52yRMAXrt4BBjc3HgnFK4F5gb1KUdLnCpM9QN+A==}
/@meshtastic/meshtasticjs/0.6.43:
resolution: {integrity: sha512-INI9hj3AzjkXzJIp2yq65eV908wTCk6Ih5/5fMknKhwOgx14eC6d5qhlWxjC85kHB6gu8c/2KF3LUCFKHh+1fg==}
dependencies:
'@protobuf-ts/runtime': 2.2.2
sub-events: 1.8.9

6
src/components/Connection.tsx
View File

@ -95,9 +95,9 @@ export const Connection = (): JSX.Element => {
<div className="h-96 overflow-y-auto rounded-md bg-secondaryDark p-2">
{state.logs.map((log, index) => (
<div key={index} className="flex">
<div>[{log.date.toISOString()}]</div>
<div>[{log.emitter}]</div>
<div key={index}>{log.message}</div>
<div className="truncate text-sm font-medium">
{log.message}
</div>
</div>
))}
</div>

149
src/pages/Extensions/Logs.tsx
View File

@ -1,62 +1,115 @@
import React from 'react';
import type React from 'react';
import { m } from 'framer-motion';
import { FiArrowRight } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/useAppSelector';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { Protobuf, Types } from '@meshtastic/meshtasticjs';
export const Logs = (): JSX.Element => {
const logs = useAppSelector((state) => state.meshtastic.logs);
const logColor = (level: Protobuf.LogRecord_Level): string => {
switch (level) {
case Protobuf.LogRecord_Level.UNSET:
return 'text-blue-500';
case Protobuf.LogRecord_Level.CRITICAL:
return 'text-blue-500';
case Protobuf.LogRecord_Level.ERROR:
return 'text-blue-500';
case Protobuf.LogRecord_Level.WARNING:
return 'text-blue-500';
case Protobuf.LogRecord_Level.INFO:
return 'text-blue-500';
case Protobuf.LogRecord_Level.DEBUG:
return 'text-blue-500';
case Protobuf.LogRecord_Level.TRACE:
return 'text-blue-500';
}
type lookupType = { [key: number]: string };
const emitterLookup: lookupType = {
[Types.Emitter.sendPacket]: 'text-blue-500',
[Types.Emitter.sendText]: 'text-blue-500',
[Types.Emitter.sendPacket]: 'text-blue-500',
[Types.Emitter.sendRaw]: 'text-blue-500',
[Types.Emitter.setPreferences]: 'text-blue-500',
[Types.Emitter.confirmSetPreferences]: 'text-blue-500',
[Types.Emitter.setOwner]: 'text-blue-500',
[Types.Emitter.setChannel]: 'text-blue-500',
[Types.Emitter.confirmSetChannel]: 'text-blue-500',
[Types.Emitter.deleteChannel]: 'text-blue-500',
[Types.Emitter.getChannel]: 'text-blue-500',
[Types.Emitter.getAllChannels]: 'text-blue-500',
[Types.Emitter.getPreferences]: 'text-blue-500',
[Types.Emitter.getOwner]: 'text-blue-500',
[Types.Emitter.configure]: 'text-blue-500',
[Types.Emitter.handleFromRadio]: 'text-blue-500',
[Types.Emitter.handleMeshPacket]: 'text-blue-500',
[Types.Emitter.connect]: 'text-blue-500',
[Types.Emitter.ping]: 'text-blue-500',
[Types.Emitter.readFromRadio]: 'text-blue-500',
[Types.Emitter.writeToRadio]: 'text-blue-500',
[Types.Emitter.setDebugMode]: 'text-blue-500',
};
const stringToColour = (str: string) => {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;
const levelLookup: lookupType = {
[Protobuf.LogRecord_Level.UNSET]: 'text-green-500',
[Protobuf.LogRecord_Level.CRITICAL]: 'text-purple-500',
[Protobuf.LogRecord_Level.ERROR]: 'text-red-500',
[Protobuf.LogRecord_Level.WARNING]: 'text-orange-500',
[Protobuf.LogRecord_Level.INFO]: 'text-blue-500',
[Protobuf.LogRecord_Level.DEBUG]: 'text-neutral-500',
[Protobuf.LogRecord_Level.TRACE]: 'text-slate-500',
};
return (
<div className="flex h-full w-full select-none flex-col gap-4 p-4">
<div className="flex w-full select-none flex-col gap-2 overflow-y-auto rounded-md p-4 shadow-md dark:bg-primaryDark">
{logs.map((log, index) => (
<div key={index} className="flex gap-2">
<div className="text-sm font-light dark:text-gray-400">
{log.date.toISOString()}
</div>
<div>[{log.emitter}]</div>
<div className={`text-sm font-medium ${logColor(log.level)}`}>
[{Protobuf.LogRecord_Level[log.level]}]
</div>
<div style={{ color: stringToColour(log.emitter) }}>
{stringToColour(log.emitter)}
</div>
<div>{log.message}</div>
</div>
))}
</div>
<div className="flex h-full p-4 ">
<table className="table-cell h-full w-full select-none rounded-md dark:bg-primaryDark">
{/* \/ flex flex-col gap-2 */}
<tbody
className="
block h-full flex-col overflow-y-auto py-4 px-2 font-mono text-xs dark:text-gray-400"
>
{logs.map((log, index) => (
<tr key={index} className="group hover:bg-secondaryDark">
<m.td
className="w-6 cursor-pointer"
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
>
<div className="m-auto pl-2 dark:text-primaryDark dark:group-hover:text-gray-400">
<FiArrowRight />
</div>
</m.td>
<Wrapper>
{log.date
.toLocaleString(undefined, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})
.replaceAll('/', '-')
.replace(',', '')}
</Wrapper>
<Wrapper>
<div className={emitterLookup[log.emitter]}>
[{Types.EmitterScope[log.scope]}.{Types.Emitter[log.emitter]}]
</div>
</Wrapper>
<Wrapper className={levelLookup[log.level]}>
[{Protobuf.LogRecord_Level[log.level]}]{/* </div> */}
</Wrapper>
<td className="truncate pl-1">{log.message}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
const Wrapper = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}): JSX.Element => (
<td className={className}>
<m.div
className="-my-0.5 flex max-w-min cursor-pointer truncate rounded-sm px-0.5 hover:bg-gray-700"
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
>
{children}
</m.div>
</td>
);

1
tailwind.config.cjs
View File

@ -6,6 +6,7 @@ module.exports = {
theme: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
mono: ['Cascadia Code', ...defaultTheme.fontFamily.mono],
},
extend: {
colors: {

Write Preview
Loading…
Cancel
Save