feat: 支持获取和查看板子连接的情况。
This commit is contained in:
@ -3,6 +3,7 @@ import { BoardInfo } from '../../models/board-info.model';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import debug from 'debug';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { BoardInfoPanel } from './board-info-panel';
|
||||
|
||||
const logger = debug('app:components:info:board-index');
|
||||
|
||||
@ -28,19 +29,8 @@ export const BoardIndex: Component = () => {
|
||||
<ol class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-2 gap-2">
|
||||
<For each={boards()}>
|
||||
{(board, index) => (
|
||||
<li class="p-2 rounded shadow bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
|
||||
<dl class="flex">
|
||||
<dt class="w-20">host</dt>
|
||||
<dd class="flex-auto">{board.name}</dd>
|
||||
</dl>
|
||||
<dl class="flex">
|
||||
<dt class="w-20">Ip Addr</dt>
|
||||
<dd class="flex-auto font-mono">{board.address}</dd>
|
||||
</dl>
|
||||
<dl class="flex">
|
||||
<dt class="w-20">Port</dt>
|
||||
<dd class="flex-auto font-mono">{board.port}</dd>
|
||||
</dl>
|
||||
<li class="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
|
||||
<BoardInfoPanel board={board} />
|
||||
<span class="absolute left-2 -top-3 bg-sky-300 text-white px-1 py-0.5 text-xs rounded-sm font-mono">
|
||||
#{index() + 1}
|
||||
</span>
|
||||
|
49
src/components/info/board-info-panel.tsx
Normal file
49
src/components/info/board-info-panel.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { Component, ParentComponent, createMemo } from 'solid-js';
|
||||
import { BoardInfo } from '../../models/board-info.model';
|
||||
|
||||
type ItemProps = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
const Item: ParentComponent<ItemProps> = (props) => {
|
||||
return (
|
||||
<dl class="flex">
|
||||
<dt class="w-20">{props.label}</dt>
|
||||
<dd class="flex-auto">{props.children}</dd>
|
||||
</dl>
|
||||
);
|
||||
};
|
||||
|
||||
export const BoardInfoPanel: Component<{ board: BoardInfo }> = (props) => {
|
||||
const ttl = createMemo(() => {
|
||||
if (!props.board.is_online) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
if (props.board.ttl == null) {
|
||||
return 'timeout';
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<span class="font-mono">{props.board.ttl.toFixed(0)}</span> ms
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<section class="p-2 rounded shadow">
|
||||
<Item label="Host">{props.board.host}</Item>
|
||||
<Item label="Ip Addr">
|
||||
<span class="font-mono">{props.board.address}</span>
|
||||
</Item>
|
||||
<Item label="Port">
|
||||
<span class="font-mono">{props.board.port}</span>
|
||||
</Item>
|
||||
<Item label="Status">
|
||||
<span class="font-mono">{props.board.is_online ? 'Online' : 'Offline'}</span>
|
||||
</Item>
|
||||
<Item label="TTL">{ttl()}</Item>
|
||||
</section>
|
||||
);
|
||||
};
|
@ -1,5 +1,8 @@
|
||||
export type BoardInfo = {
|
||||
name: string;
|
||||
host: string;
|
||||
address: string;
|
||||
port: number;
|
||||
ttl: number;
|
||||
is_online: boolean;
|
||||
checked_at: Date;
|
||||
};
|
||||
|
Reference in New Issue
Block a user