@ant-design/icons#HourglassOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#HourglassOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Status.js From network-rc with Apache License 2.0 | 4 votes |
|
export default function Status({
statusInfo,
piPowerOff,
wsConnected,
delay = 0,
isFullscreen,
setting,
isLogin,
session,
changeEditabled,
channelStatus,
changeChannel,
serverConfig,
version,
connectType,
onCarMicphoneChange,
locked,
onControllerMicphoneChange = () => {},
enabledControllerMicphone = true,
}) {
const isWebRTC = connectType === "webrtc";
const { sharedEndTime } = serverConfig;
const gamepadPress = ({ detail: { index, value } }) => {
if (index === 3 && value > 0.5) {
onControllerMicphoneChange(!enabledControllerMicphone);
}
};
useKeyPress(
"t",
() => onControllerMicphoneChange(!enabledControllerMicphone),
{
events: ["keyup"],
}
);
useEventListener("gamepadpress", gamepadPress);
return (
<Form layout="inline" className="app-status" size="small">
<Form.Item>
<Link to={`${process.env.PUBLIC_URL}/controller`}>
<img className="logo" src="/logo-256.png" alt="N-RC" />
</Link>
<span>N RC</span>
</Form.Item>
<Form.Item>
<Tag
style={{
width: "7em",
}}
icon={
locked ? (
<StopOutlined />
) : wsConnected ? (
<LinkOutlined />
) : (
<DisconnectOutlined />
)
}
color={locked || delay > 80 || !wsConnected ? "red" : "green"}
size="xs"
>
{isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
</Tag>
</Form.Item>
{(serverConfig.channelList || [])
.filter(({ enabled, type }) => enabled && type === "switch")
.map(({ pin, name }) => (
<Form.Item key={pin}>
<Switch
checked={channelStatus[pin] || false}
checkedChildren={name}
unCheckedChildren={name}
onChange={(value) => changeChannel({ pin, value })}
/>
</Form.Item>
))}
{isLogin && isWebRTC && (
<Form.Item>
<Switch
checked={enabledControllerMicphone}
onChange={onControllerMicphoneChange}
checkedChildren={
<>
<DesktopOutlined /> <AudioOutlined />
</>
}
unCheckedChildren={
<>
<DesktopOutlined /> <AudioMutedOutlined />
</>
}
/>
</Form.Item>
)}
{isLogin && (
<Form.Item>
<AudioPlayer
session={session}
connectType={connectType}
onMicphoneChange={onCarMicphoneChange}
url={`${
window.location.protocol === "https:" ? "wss://" : "ws://"
}${setting.host}/microphone`}
/>
</Form.Item>
)}
<Form.Item>
<Switch
checkedChildren={<FormOutlined />}
unCheckedChildren={<FormOutlined />}
onChange={changeEditabled}
></Switch>
</Form.Item>
<Form.Item>
<Link to={`${process.env.PUBLIC_URL}/setting`}>
<Button
size="small"
icon={<SettingOutlined />}
shape="circle"
></Button>
</Link>
</Form.Item>
{document.body.requestFullscreen && (
<Form.Item>
<Button
type="primary"
shape="circle"
icon={
isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
}
onClick={() => {
if (isFullscreen) {
document.exitFullscreen();
} else {
document.body.requestFullscreen();
}
}}
></Button>
</Form.Item>
)}
{wsConnected && isLogin && (
<Form.Item>
<Button
type="danger"
shape="circle"
icon={<PoweroffOutlined />}
onClick={piPowerOff}
></Button>
</Form.Item>
)}
{wsConnected &&
isLogin &&
Object.keys(statusInfo).map((key) => {
const { color, label, value } = statusInfo[key];
return !["gps"].includes(label) ? (
<Form.Item key={key}>
<Tag color={color}>
{label}:{value}
</Tag>
</Form.Item>
) : undefined;
})}
{wsConnected && sharedEndTime && (
<Form.Item>
<Tag
icon={<HourglassOutlined />}
color={session && session.endTime && "orange"}
>
{((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
</Tag>
</Form.Item>
)}
{version && (
<Form.Item>
<Tag>v{version}</Tag>
</Form.Item>
)}
</Form>
);
}
Example #2
| Source File: MainWindow.js From ikago-web with MIT License | 4 votes |
|
render() {
return (
<Layout>
<Header className="header">
<a className="header-a" href="https://github.com/zhxie/ikago">
<img className="header-icon" src={logo} alt="icon" />
</a>
<p className="header-title">{this.state.name}</p>
<p className="header-subtitle">{this.state.version}</p>
</Header>
<Content className="content">
<Row gutter={16}>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={(() => {
if (this.state.active) {
return <CheckOutlined />;
} else if (this.state.inactive) {
return <WarningOutlined />;
} else {
return <LoadingOutlined />;
}
})()}
title="Status"
value={(() => {
if (this.state.active) {
return 'Active';
} else if (this.state.inactive) {
return 'Inactive';
} else {
return 'Connecting';
}
})()}
valueStyle={{
color: (() => {
if (!this.state.inactive) {
return '#000';
} else {
return '#cf1322';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
precision={2}
prefix={<ClockCircleOutlined />}
title="Operation Time"
value={this.convertTime(this.state.time)}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowUpOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.outboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.outboundSize) + '/s';
}
})()}
title="Outbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.outboundSizeTotal);
} else {
return this.convertSize(this.state.outboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowDownOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.inboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.inboundSize) + '/s';
}
})()}
title="Inbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.inboundSizeTotal);
} else {
return this.convertSize(this.state.inboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={<HourglassOutlined />}
suffix={this.state.ping < 0 ? '' : 'ms'}
title="Delay"
value={(() => {
if (this.state.ping === -1) {
return 'N/A';
} else if (this.state.ping === -2) {
return 'Timeout';
} else {
return this.state.ping;
}
})()}
valueStyle={{
color: (() => {
if (this.state.ping === -2) {
return '#cf1322';
} else if (this.state.ping >= 100) {
return '#faad14';
} else {
return '#000';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
configure: true
});
}}
>
<Statistic prefix={<SettingOutlined />} title="Configure" value={this.convertPath(this.state.path)} />
</Card>
<ConfigurationForm
visible={this.state.configure}
onOk={(values) => {
localStorage.setItem('path', values.path);
localStorage.setItem('showTotal', values.showTotal ? 'true' : 'false');
this.setState({
configure: false,
path: values.path,
showTotal: values.showTotal,
active: this.state.path !== values.path ? false : this.state.active,
inactive: this.state.path !== values.path ? false : this.state.inactive
});
}}
onCancel={() => {
this.setState({
configure: false
});
}}
initialValues={{ path: this.state.path, showTotal: this.state.showTotal }}
/>
</Col>
</Row>
<Row gutter={16}>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.local)} pagination={false} size="middle">
<Column title="Source" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.remote)} pagination={false} size="middle">
<Column title="Destination" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
</Row>
</Content>
</Layout>
);
}
