feat: 支持获取和查看板子连接的情况。

This commit is contained in:
2023-04-30 18:44:26 +08:00
parent 11045f27d8
commit 6c90a5e655
6 changed files with 193 additions and 58 deletions

View File

@ -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>

View 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>
);
};

View File

@ -1,5 +1,8 @@
export type BoardInfo = {
name: string;
host: string;
address: string;
port: number;
ttl: number;
is_online: boolean;
checked_at: Date;
};