@ant-design/icons#TeamOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#TeamOutlined.
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: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function Navigation() {
const { state: stateApp, appContextAction } = useAppContext();
const { isNavMenuClose } = stateApp;
const { navMenu } = appContextAction;
const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
useEffect(() => {
if (isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
const timer = setTimeout(() => {
if (!isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
}, 200);
return () => clearTimeout(timer);
}, [isNavMenuClose]);
const onCollapse = () => {
navMenu.collapse();
};
return (
<>
<Sider collapsible collapsed={isNavMenuClose} onCollapse={onCollapse} className="navigation">
<div className="logo">
<img
src={logoIcon}
alt="Logo"
// style={{ margin: "0 auto 40px", display: "block" }}
/>
{!showLogoApp && (
<img src={logoText} alt="Logo" style={{ marginTop: '3px', marginLeft: '10px' }} />
)}
</div>
<Menu mode="inline">
<Menu.Item key={'Dashboard'} icon={<DashboardOutlined />}>
<Link to={'/'} />
Dashboard
</Menu.Item>
<Menu.Item key={'Customer'} icon={<CustomerServiceOutlined />}>
<Link to={'/customer'} />
Customer
</Menu.Item>
<Menu.Item key={'Invoice'} icon={<FileTextOutlined />}>
<Link to={'/invoice'} />
Invoice
</Menu.Item>
<Menu.Item key={'Quote'} icon={<FileSyncOutlined />}>
<Link to={'/quote'} />
Quote
</Menu.Item>
<Menu.Item key={'PaymentInvoice'} icon={<CreditCardOutlined />}>
<Link to={'/payment/invoice'} />
Payment Invoice
</Menu.Item>
<Menu.Item key={'Employee'} icon={<UserOutlined />}>
<Link to={'/employee'} />
Employee
</Menu.Item>
<Menu.Item key={'Admin'} icon={<TeamOutlined />}>
<Link to={'/admin'} />
Admin
</Menu.Item>
<SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
<Menu.Item key={'PaymentMode'}>
<Link to={'/payment/mode'} />
Payment Mode
</Menu.Item>
<Menu.Item key={'Role'}>
<Link to={'/role'} />
Role
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
</>
);
}
Example #2
| Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
function Navigation() {
const [collapsed, setCollapsed] = useState(false);
const onCollapse = () => {
setCollapsed(!collapsed);
};
return (
<>
<Sider
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
style={{
zIndex: 1000,
}}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1" icon={<DashboardOutlined />}>
<Link to="/" />
Home Page
</Menu.Item>
<Menu.Item key="2" icon={<CustomerServiceOutlined />}>
<Link to="/customer">Customer</Link>
</Menu.Item>
<Menu.Item key="24" icon={<UserOutlined />}>
<Link to="/selectcustomer">Custom Select Customer</Link>
</Menu.Item>
<Menu.Item key="21" icon={<FileTextOutlined />}>
<Link to="/lead" />
Lead
</Menu.Item>
<Menu.Item key="3" icon={<FileSyncOutlined />}>
<Link to="/product" />
Product
</Menu.Item>
<Menu.Item key="31" icon={<TeamOutlined />}>
<Link to="/admin" />
Admins Management
</Menu.Item>
<Menu.Item key="32" icon={<SettingOutlined />}>
<Link to="/settings" />
Settings
</Menu.Item>
</Menu>
</Sider>
</>
);
}
Example #3
| Source File: custom-trigger-debug.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<FileOutlined />} />
</Menu>
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
Example #4
| Source File: side.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
const { collapsed } = this.state;
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<FileOutlined />}>
Files
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '0 16px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
Bill is a cat.
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
Example #5
| Source File: Scoreboard.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<div>
<h1 style={{ fontSize: "150%" }}>Scoring History</h1>
</div>
{this.state.liveUpdates ?
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Live Scoreboard </h4> <Ripple color="#a61d24" size={40} /></div> :
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Connecting Live Scoreboard </h4> <Ellipsis color="#177ddc" size={40} /></div>
}
</div>
<div>
{!this.state.loadingTable && (
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scoreTransactions} pagination={{ pageSize: 7 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no solves yet. You could be the first!</h1>
</div>
)
}}>
<Column title="Username" dataIndex="author" key="author"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="points" key="points" />
<Column title="Timestamp" dataIndex="time" key="time" />
</Table>
)}
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<div style={{ display: "flex", alignContent: "center" }}>
<h1><ApartmentOutlined /> Category: </h1>
<Select loading={this.state.loadingTable} defaultValue="none" style={{ width: "20ch", backgroundColor: "#1f1f1f", marginLeft: "1ch" }} onChange={(value) => { this.handleCategoryChange(value) }}>
{this.state.categoryListOptions}
</Select>
</div>
<div style={{ display: "flex", alignContent: "center" }}>
<h1><ApartmentOutlined /> Category: </h1>
<Select loading={this.state.loadingTable} defaultValue="none" style={{ width: "20ch", backgroundColor: "#1f1f1f", marginLeft: "1ch" }} onChange={(value) => { this.handleCategoryChange2(value) }}>
{this.state.categoryListOptions}
</Select>
</div>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ height: "70%", width: "48%", minWidth: "35vw" }}>
{!this.state.loadingTable && (
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 20 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no users created/There are no users in this category</h1>
</div>
)
}}>
<Column title="Position" dataIndex="position" key="position" />
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="score" key="score" />
<Column title="Last Solve" dataIndex="time" key="time" />
</Table>
)}
</div>
<div style={{ height: "70%", width: "48%", minWidth: "35vw" }}>
{!this.state.loadingTable2 && (
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores2} pagination={{ pageSize: 20 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no users created/There are no users in this category</h1>
</div>
)
}}>
<Column title="Position" dataIndex="position" key="position" />
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="score" key="score" />
<Column title="Last Solve" dataIndex="time" key="time" />
</Table>
)}
</div>
</div>
</Layout>
);
}
Example #6
| Source File: App.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<div style={{ position: "fixed" }}>
<Transition
items={this.state.logined}
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}
>
{(styles, item) => {
if (item && !this.state.loading) {
return (
<animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
<Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Sider
className={this.state.mobileBreakpoint ? "mobileSider" : ""}
breakpoint="md"
collapsedWidth={0}
onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
>
<div className="overflow-handle">
<div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
<img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
</div>
<Dropdown overlay={
<Menu>
{this.state.team != "teams-disabled" && this.state.team != "loading" && (
<div>
<Menu.Item key="Team">
<NavLink to="/Team">
<span>
<b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
<br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
</span>
<TeamOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
</div>
)}
<Menu.Item key="Profile">
<NavLink to="/Profile">
<span>Profile </span>
<UserOutlined />
</NavLink>
</Menu.Item>
<Menu.Item key="Settings">
<NavLink to="/Settings">
<span>Settings </span>
<SettingOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout" onClick={() => {
confirm({
title: 'Are you sure you want to logout?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.handleLogout(); close(); },
onCancel: () => { },
});
}}>
<span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
</Menu.Item>
</Menu>}
trigger={['click']}>
<div className="buttonHover"
style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
<h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
<Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
</div>
<div>
<h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
</div>
</div>
</Dropdown>
<Menu
selectedKeys={[this.state.current]}
onSelect={(selection) => { this.setState({ current: selection.key }) }}
mode="inline"
theme="dark"
> {/*
defaultSelectedKeys - default selected menu items
defaultOpenKeys - default opened sub menus
inline - Sidebar Menu
*/}
<Menu.Item key="" className="menu-item">
<NavLink to="/">
<HomeTwoTone className="menu-item-icon" />
<span>Home</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Challenges" className="menu-item">
<NavLink to="/Challenges">
<FlagTwoTone className="menu-item-icon" />
<span>Challenges</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Scoreboard" className="menu-item">
<NavLink to="/Scoreboard">
<FundTwoTone className="menu-item-icon" />
<span>Scoreboard</span>
</NavLink>
</Menu.Item>
<Menu.Divider />
{this.state.permissions === 1 && (
<Menu.Item key="CreateChallenge" className="menu-item">
<NavLink to="/CreateChallenge">
<PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
<span>Create Challenge</span>
</NavLink>
</Menu.Item>
)}
{this.state.permissions === 2 && (
<Menu.Item key="Admin" className="menu-item">
<NavLink to="/Admin">
<CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
<span>Admin Panel</span>
</NavLink>
</Menu.Item>
)}
</Menu>
<div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
<p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
</div>
</div>
</Sider>
<Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
<Route
render={({ location, ...rest }) => (
<Transition
native
items={location.pathname.split("/")[1]}
trail={5}
key={location.pathname.split("/")[1]}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}>
{(style, loc) => (
<animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} transition={style} />} />
<Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
<Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />
<Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
<Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
<Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
<Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
{this.state.permissions >= 1 ? (
<Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
)}
{this.state.permissions === 2 ? (
<Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
)}
<Route path='/*' render={(props) => <Oops {...props} transition={style} />} />
</Switch>
</Suspense>
</animated.div>
)}
</Transition>
)}
/>
</Content>
</Layout>
</animated.div>
)
}
else {
if (!this.state.loading && !item && !this.state.token) {
return (
<animated.div style={{ ...styles, position: "absolute" }}>
<Suspense fallback={<div className="loading-style">
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Login handleLogin={this.handleLogin.bind(this)}></Login>
</Suspense>
</animated.div>)
}
else {
return (
<animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>
)
}
}
}
}
</Transition>
</div >
);
}
Example #7
| Source File: Scoreboard.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350} debounce={200}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color2" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c4a15" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8cf8d" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color3" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c5914" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8df8b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color4" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#536d13" stopOpacity={0.3} />
<stop offset="95%" stopColor="#e4f88b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color5" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#306317" stopOpacity={0.3} />
<stop offset="95%" stopColor="#b2e58b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color6" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#146262" stopOpacity={0.3} />
<stop offset="95%" stopColor="#84e2d8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color7" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#164c7e" stopOpacity={0.3} />
<stop offset="95%" stopColor="#8dcff8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color8" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#203175" stopOpacity={0.3} />
<stop offset="95%" stopColor="#a8c1f8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color9" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3e2069" stopOpacity={0.3} />
<stop offset="95%" stopColor="#cda8f0" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color10" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#75204f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8a8cc" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[0]} stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[1]} stroke="#d87a16" fillOpacity={1} fill="url(#color2)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[2]} stroke="#d89614" fillOpacity={1} fill="url(#color3)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[3]} stroke="#8bbb11" fillOpacity={1} fill="url(#color4)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[4]} stroke="#49aa19" fillOpacity={1} fill="url(#color5)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[5]} stroke="#13a8a8" fillOpacity={1} fill="url(#color6)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[6]} stroke="#177ddc" fillOpacity={1} fill="url(#color7)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[7]} stroke="#2b4acb" fillOpacity={1} fill="url(#color8)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[8]} stroke="#642ab5" fillOpacity={1} fill="url(#color9)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[9]} stroke="#cb2b83" fillOpacity={1} fill="url(#color10)" />
<Area isAnimationActive={false} type="monotone" dataKey="Hi" stroke="#8884d8" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>
</ResponsiveContainer>
{this.state.loadingGraph && (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
)}
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
{this.state.liveUpdates ?
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Live Scoreboard </h4> <Ripple color="#a61d24" size={40} /></div> :
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Connecting Live Scoreboard </h4> <Ellipsis color="#177ddc" size={40} /></div>
}
<div style={{ display: "flex", alignContent: "center" }}>
<h1><ApartmentOutlined /> Category: </h1>
<Select loading={this.state.loadingGraph || this.state.loadingTable} defaultValue="none" style={{ width: "20ch", backgroundColor: "#1f1f1f", marginLeft: "1ch" }} onChange={(value) => { this.handleCategoryChange(value) }}>
{this.state.categoryListOptions}
</Select>
</div>
</div>
{!this.state.loadingTable && (
<div style={{ height: "70%", width: "100%", minWidth: "70vw" }}>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 20 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no users created/There are no users in this category</h1>
</div>
)
}}>
<Column title="Position" dataIndex="position" key="position" />
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="score" key="score" />
<Column title="Last Solve" dataIndex="time" key="time" />
</Table>
</div>
)}
</Layout>
);
}
Example #8
| Source File: Teams.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<Modal
title={<span>Create New Team <UsergroupAddOutlined /></span>}
visible={this.state.createTeamModal}
footer={null}
onCancel={() => { this.setState({ createTeamModal: false }) }}
>
<CreateTeamForm setState={this.setState.bind(this)} obtainScore={this.props.obtainScore.bind(this)} loadTeamDetails={this.loadTeamDetails.bind(this)} setTeam={this.props.setTeam.bind(this)} />
</Modal>
{this.state.loading ? (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
) : (
<div>
{this.props.team === "teams-disabled" ? (
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>It seem's like teams are disabled.</h1>
<p>If you believe this is an error, please contact the admins.</p>
</div>
</div>
</div>
) : (
<div>
{this.state.notFound ? (
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>We were unable to find this team.</h1>
</div>
</div>
</div>
) : (
<div>
{this.state.teamName ?
(
<Layout style={{ height: "100%", width: "100%", padding: "3%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2ch" }}>
<div style={{ display: "flex" }}>
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<Avatar.Group
maxCount={3}
>
{this.state.members.map((member) => {
return (
<Avatar style={{ backgroundColor: "transparent", marginRight: "3ch", width: "10ch", height: "10ch" }} size='large' src={"/static/profile/" + member + ".webp"} />
)
})}
</ Avatar.Group>
<h1 style={{ fontSize: "5ch" }}>{this.state.teamName}</h1>
</div>
<div>
<h1 style={{ fontSize: "5ch", color: "#faad14" }}><span style={{ color: "#d48806", fontSize: "1.5ch" }}><u>Team Score:</u> </span>{this.state.teamScore}</h1>
</div>
</div>
</div>
{this.state.teamName === this.props.team && (
<div style={{ backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", width: "fit-content", padding: "20px" }}>
<h4 style={{ fontSize: "2ch", color: "#49aa19" }}>You are part of this team</h4>
<div style={{ marginTop: "2ch" }}>
<div style={{ display: "flex", marginBottom: "2ch" }}>
<Input value={window.location.origin + "/Team/Join/" + this.state.code} />
<Button type="primary" style={{ marginLeft: "1ch" }} icon={<LinkOutlined />} onClick={async () => {
await navigator.clipboard.writeText(window.location.origin + "/Team/Join/" + this.state.code);
message.success("Invite link copied to clipboard.")
}}>Copy Invite Link</Button>
</div>
<Button style={{ marginRight: "1ch" }} danger type="primary" onClick={() => {
confirm({
title: "Leave Team?",
content: <span>Are you sure you want to leave: <b><u>{this.state.teamName}</u></b>?</span>,
icon: <WarningOutlined />,
maskClosable: true,
okText: "Leave Team",
confirmLoading: this.state.joinLoading,
onOk: (close) => { this.leaveTeam(close) },
onCancel: () => { },
});
}}>Leave Team</Button>
</div>
</div>
)}
<Divider />
<h1 style={{ fontSize: "3ch" }}>Individual Member's Scoring</h1>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.userScores} pagination={{ pageSize: 10 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>{this.state.teamName} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={30} title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
/>
<Column width={30} title="Total Score" dataIndex="score" key="score" />
</Table>
<Divider />
<h1 style={{ fontSize: "3ch" }}>Team Score History</h1>
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey="Score" stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
</AreaChart>
</ResponsiveContainer>
</div>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 10 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>{this.state.teamName} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={30} title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
/>
<Column width={1} title="Challenge/Hint" dataIndex="challenge" key="challenge"
render={(text, row, index) => {
if (row.challengeID !== "") return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return (<span>{text}</span>);
}} />
<Column width={30} title="Score Change" dataIndex="score" key="score" />
<Column width={30} title="Solved Timestamp" dataIndex="time" key="time" />
</Table>
</Layout>
) :
(
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>The world's a dangerous place</h1> <h2>Don't go alone, join/create a team today!</h2>
</div>
<Button icon={<UsergroupAddOutlined />} type="primary" size="large" onClick={() => { this.setState({ createTeamModal: true }) }}>Create a Team</Button>
<div style={{ marginTop: "3ch" }}>
<span>Got an <b>invite link <LinkOutlined />?</b></span>
<div>
<Button style={{ marginTop: "1ch" }} size="large" type="primary" icon={<LinkOutlined />} onClick={() => {
navigator.clipboard.readText().then(text => {
if (!(/^.*\/Team\/Join\/[0-9a-fA-F]{32}$/.test(text))) message.error("Invalid link. Please check that you have copied the link correctly.", 3)
else {
const code = text.split("/Team/Join/")
this.getCodeDetails(code[1])
}
}).catch(err => {
console.log(err)
message.error("Failed to read link from your clipboard.", 5)
message.info("Please ensure that you have allowed permissions for reading of clipboard text.", 5)
})
}}>Paste & Use Link</Button>
</div>
</div>
</div>
</div>
)
}
</div>
)}
</div>
)}
</div>
)}
</Layout>
)
}
Example #9
| Source File: index.js From certificate-generator with MIT License | 4 votes |
|
function ListEvents(props) {
const { Meta } = Card;
/*Recebe o organizador e o JSON de organizadores*/
const { organizador, users } = props
/*Trabalham para trocar a tela da lista de eventos com o formulário de edição/criação*/
const [ toEditFormEvent, setToEditFormEvent] = useState(false);
const [ toCreateFormEvent, setToCreateFormEvent] = useState(false);
const [ toProfile, setProfile] = useState(false);
const [ toList, setList] = useState(false);
const [ toSeeEvents, setSeeEvents] = useState(false);
/*Esta variavel guarda o evento referente quando o botão check participantes for acionado*/
const [ eventChecked, setEventChecked] = useState('');
/*JSON dos eventos*/
const [ eventos, setEventos ] = useState(eventosData)
/*Vaiável para saber qual evento foi editado*/
const [ eventEdited, setEventEdited ] = useState('')
//Dados do evento:
//Serão usados para editar no formulário
const [ company, setCompany] = useState('');
const [ course, setCourse ] = useState('');
const [ startDate, setStartDate ] = useState('');
const [ finishDate, setFinishDate ] = useState('');
const [ workload, setWorkload ] = useState('');
/*---------- Assinatura Digital ----------*/
const [ imageURL, setImageURL ] = useState(null)
const sigCanvas = useRef({})
const clear = () => sigCanvas.current.clear();
const save = () => {
setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"))
}
/*--------- Formulário para criar evento ---------*/
const { RangePicker } = DatePicker;
/*Constroi o layout do input de datas*/
const formItemLayout = {
labelCol: {
xs: {
span: 24,
},
sm: {
span: 8,
},
},
wrapperCol: {
xs: {
span: 24,
},
sm: {
span: 16,
},
},
};
/*Constroi o layout do input de name/curso*/
const formInputLayout = {
labelCol: {
span: 4,
},
wrapperCol: {
span: 8,
},
};
/*Define as regras para que a data seja aceita */
const rangeConfig = {
rules: [
{
type: 'array',
required: true,
message: 'Este campo é obrigatório!',
},
],
};
/*Define as regras para que os inputs de texto sejam aceitos */
const rangeInputs = {
rules: [
{
required: true,
message: 'Por favor, preencha esse campo',
},
],
};
/*Função acionada quando um evento for ser criado*/
/*Ela não é chamada caso os campos não forem preeenchidos*/
const onFinish = fieldsValue => {
/*Dados do calendário*/
const rangeValue = fieldsValue['range-picker'];
if(imageURL === null) {
message.error('Por favor, escreva sua assinatura digital')
} else {
setEventos([
...eventos, {
user: organizador,
company: fieldsValue.company,
course: fieldsValue.course,
startDate: rangeValue[0].format('DD-MM-YYYY'),
finishDate: rangeValue[1].format('DD-MM-YYYY'),
workload: fieldsValue.workload,
logo: "https://miro.medium.com/max/478/1*jriufqYKgJTW4DKrBizU5w.png",
digitalSignature: imageURL
}
])
message.success('Evento criado com sucesso')
/*Retira o componente do formulário de eventos e volta para a lista*/
setToCreateFormEvent(false)
}
};
/*Buscando os eventos do organizador*/
let eventsOfOrganizer = []
eventos.map(evento => {
if(evento.user === organizador) {
eventsOfOrganizer.push(evento)
}
})
/*Verifica se existem eventos cadastrados para mostrar elemento do Antd 'No Data'*/
let noEvents = true
/* ------------- Deletando Eventos ---------------*/
const deleteEvent = (eventToBeDeleted) => {
message.success('O evento foi excluido')
setEventos( eventsOfOrganizer.filter(evento => {
if(evento.course !== eventToBeDeleted) {
return evento
}
}))
}
/* -------------- Editando eventos ----------------*/
const beforeEdit = () => {
if( !company || !course || !startDate || !finishDate || ! workload || !imageURL){
message.error('Por favor, não deixe seus dados vazios.')
//quando o formulário aparece na tela, essa mensagem aparece, caso o campo não tenha sido preenchido.
} else {
setToEditFormEvent(!toEditFormEvent)
}
}
//Ao salvar as informações editadas:
const saveEditFormEvent = (e) => {
e.preventDefault();
//Os campos que devem ser preenchidos:
if( !company || !course || !startDate || !finishDate || ! workload || !imageURL){
message.error('Por favor, preencha todos os campos do formulário.')
//quando o formulário aparece na tela, essa mensagem aparece, caso o campo não tenha sido preenchido.
} else {
/*Atualizando o evento do organizador*/
setEventos(eventsOfOrganizer.map(evento => {
/*Mudando somente o evento requerido*/
if(eventEdited === evento.course) {
evento['company'] = company
evento['course'] = course
evento['startDate'] = startDate
evento['finishDate'] = finishDate
evento['workload'] = workload
evento['digitalSignature'] = imageURL
return evento;
} else {
return evento;
}
}) )
message.success('Os dados do evento foram atualizados com sucesso!')
/*Voltando para a lista de eventos*/
//setToEditFormEvent(!toEditFormEvent)
}
}
const clickEditFormEvent = (eventToBeEdit) => {
/*Trocando a lista de eventos pelo formulário de edição*/
setToEditFormEvent(!toEditFormEvent)
/*Guardando qual evento será editado*/
setEventEdited(eventToBeEdit.course)
setCompany(eventToBeEdit.company)
setCourse(eventToBeEdit.course)
setStartDate(eventToBeEdit.startDate)
setFinishDate(eventToBeEdit.finishDate)
setWorkload(eventToBeEdit.workload)
}
/*Esta função é acionada quando o botão para o check list é acionado*/
const saveEventToList = (eventToList) => {
setList(true)
setEventChecked(eventToList)
}
/*Esta função é acionada quando o botão para mais infomações do evento*/
const seeEvents = (eventToList) => {
setSeeEvents(true)
setEventChecked(eventToList)
}
return(
<>
<div style={{ display: ( toEditFormEvent || toCreateFormEvent || toProfile || toList || toSeeEvents )? 'none' : null }}>
<h1 className="title-2-list-events"><UserOutlined onClick={() => setProfile(true)}/> {organizador}</h1>
<Button className="button-add" onClick={() => setToCreateFormEvent(true)}><UsergroupAddOutlined/> Cadastrar mais um evento</Button>
<br/>
<h1 className="title">Eventos Cadastrados</h1>
<div className="listEvents">
{
eventos.map(eventoJson => {
if(eventoJson.user === organizador ){
noEvents = false
return(
<Card
style={{ width: 300 }}
cover={
<img
alt="Poster do evento"
src="https://jaquelinecramos.files.wordpress.com/2018/03/dyfqkqaw0aad5xm.jpg?w=776"
/>
}
actions={[
<>
<Popover content={<h5>Ver mais info. do evento</h5>}>
<Button style={{ borderColor: 'transparent'}} onClick={() => seeEvents(eventoJson) }><HeartOutlined key="edit" /></Button>
</Popover>
<Popover content={<h5>Editar evento</h5>}>
<Button style={{ borderColor: 'transparent'}} onClick={() => clickEditFormEvent(eventoJson) } ><FormOutlined key="edit" /></Button>
</Popover>
<Popover content={<h5>Participantes</h5>}>
<Button style={{ borderColor: 'transparent'}} onClick={() => saveEventToList(eventoJson)}><TeamOutlined key="ellipsis" /></Button>
</Popover>
<Popconfirm
title="Você tem certeza de que quer excluir este evento?"
onConfirm={() => deleteEvent(eventoJson.course) }
okText="Sim"
cancelText="Não"
>
<Button style={{ borderColor: 'transparent'}} ><CloseOutlined key="edit" /></Button>
</Popconfirm>
</>
]}
>
<Meta
avatar={<Avatar src="https://cdn-images-1.medium.com/max/1200/1*B8rGvo7fJ7qL4uFJ_II_-w.png" />}
title={<h4 style={{ color: '#C6255A'}}>{eventoJson.course}</h4>}
description={
<>
<h5 style={{ fontSize: '12px'}}>Inicio: {eventoJson.startDate}</h5>
<h5 style={{ fontSize: '12px'}}>Encerramento: {eventoJson.finishDate}</h5>
</>
}
/>
</Card>
)
}
})
}
{ noEvents && <Empty style={{marginTop: '5%'}}/> }
</div>
</div>
{toEditFormEvent &&
// Mostra na tela o formulário com os campos para serem editados
//o value está trazendo as informações do último cadastrado "Lucas...."
//quando eu troco o nome do course (Evento), altera o nome dos 3 eventos que estão sendo mostrados na tela
<div className="edit-event"
style={{ display: toEditFormEvent ? 'block' : 'none' }} >
<h2 className="edit-event-title">Edite os dados do seu evento:</h2>
<h4>Comunidade:</h4>
<Input
className="edit-event-input"
placeholder="Comunidade"
value={company}
onChange={ newValue => setCompany(newValue.target.value) } />
<br/>
<h4>Evento:</h4>
<Input
className="edit-event-input"
placeholder="Evento"
value={course}
onChange={ newValue => setCourse(newValue.target.value) }/>
<br/>
<h4>Data de Inicio:</h4>
<Input
className="edit-event-input"
placeholder="Data de Início"
value={startDate}
onChange={ newValue => setStartDate(newValue.target.value) }/>
<br/>
<h4>Data de Encerramento:</h4>
<Input
className="edit-event-input"
placeholder="Data de Fim"
value={finishDate}
onChange={ newValue => setFinishDate(newValue.target.value) }/>
<br/>
<h4>Carga Horaria:</h4>
<Input
className="edit-event-input"
placeholder="Carga Horária"
value={workload}
onChange={ newValue => setWorkload(newValue.target.value) }/>
<br/>
<h4>Assinatura Digital:</h4>
<div>
<Popup modal trigger={<Button className="button-open-pad">Abrir Pad para assinar</Button>}>
{ close => (
<>
<SignaturePad ref={sigCanvas}
canvasProps={{
className: 'signatureCanvas'
}}
/>
<Button onClick={save} className="button-save">Salvar</Button>
<Button onClick={clear} >Apagar Tudo</Button>
<Button onClick={close} className="button-close" >Fechar</Button>
</>
)}
</Popup>
<br/>
<br/>
{ imageURL ? (
<img
src={imageURL}
alt="Minha assinatura Digital"
className="buttons-pad"
/>
) : null }
</div>
<Button
className="button-edit-event" type="primary" primary
onClick={saveEditFormEvent}>Atualizar dados</Button>
<br/>
<Button className="back-edit-event" onClick={beforeEdit}>Voltar para a lista de eventos</Button>
</div>
}
{ toCreateFormEvent &&
<>
<Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
<div className="inputs-event">
<h1 className="h1-form-event">Criando um novo evento</h1>
<Form.Item
{...formInputLayout}
{...rangeInputs}
className="input-1-event"
name="company"
label="Comunidade" >
<Input placeholder="Digite a comunidade responsável pelo evento" />
</Form.Item>
<Form.Item
{...formInputLayout}
{...rangeInputs}
className="input-2-event"
name="course"
label="Curso/Evento">
<Input placeholder="Digite o nome do evento" />
</Form.Item>
<Form.Item
{...rangeInputs}
className="input-3-event"
label="Carga Horária"
name="workload" >
<InputNumber />
</Form.Item>
<Form.Item
name="range-picker"
className="input-4-event"
label="Data de inicio/fim do evento"
{...rangeConfig}>
<RangePicker />
</Form.Item>
<div className="upload-assinature">
<h3 className="h3-form-event">Assinatura Digital:</h3>
<div>
<Popup modal trigger={<Button className="button-open-pad">Abrir Pad para assinar</Button>}>
{ close => (
<>
<SignaturePad ref={sigCanvas}
canvasProps={{
className: 'signatureCanvas'
}}
/>
<Button onClick={save} className="button-save">Salvar</Button>
<Button onClick={clear} >Apagar Tudo</Button>
<Button onClick={close} className="button-close" >Fechar</Button>
</>
)}
</Popup>
<br/>
<br/>
{ imageURL ? (
<img
src={imageURL}
alt="Minha assinatura Digital"
className="buttons-pad"
/>
) : <h4 style={{ color: 'red'}}>Sem assinatura</h4> }
</div>
</div>
<Form.Item>
<Button type="primary" htmlType="submit" className="button-events">
Cadastrar Novo Evento
</Button>
<br/>
</Form.Item>
</div>
</Form>
<Button
onClick={() => setToCreateFormEvent(false)}
className="button-back-from-create"
>
Voltar para a lista de Eventos
</Button>
</>
}
{ toProfile &&
<>
<ProfileCard organizador={organizador} users={users} assinatura={imageURL}/>
<Button
onClick={() => setProfile(false)}
className="button-back-of-profile"
>
Voltar para a lista de Eventos
</Button>
</>
}
{ toList &&
<>
<ListOfPresents evento={eventChecked}/>
<Button onClick={() => setList(false)} className="button-back-from-list" style={{ marginButtom: '-20%'}}>
Voltar para a lista de Eventos
</Button>
</>
}
{
toSeeEvents &&
<>
<InfoEvent evento={eventChecked}/>
<Button
onClick={() => setSeeEvents(false)}
className="button-back-of-profile"
>
Voltar para a lista de Eventos
</Button>
</>
}
</>
);
}
Example #10
| Source File: App.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const menu = (
<Menu>
<Menu.Item>
<Link to={'/info'}>
<SolutionOutlined/> 个人中心
</Link>
</Menu.Item>
<Menu.Divider/>
<Menu.Item>
<Popconfirm
key='login-btn-pop'
title="您确定要退出登录吗?"
onConfirm={this.confirm}
okText="确定"
cancelText="取消"
placement="left"
>
<LogoutOutlined/> 退出登录
</Popconfirm>
</Menu.Item>
</Menu>
);
return (
<Switch>
<Route path="/access" component={Access}/>
<Route path="/term" component={Term}/>
<Route path="/login"><Login updateUser={this.updateUser}/></Route>
<Route path="/">
<Layout className="layout" style={{minHeight: '100vh'}}>
{
isAdmin() ?
<>
<Sider collapsible collapsed={this.state.collapsed} trigger={null}>
<div className="logo">
<img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
</div>
<Menu
onClick={(e) => this.setCurrent(e.key)}
selectedKeys={[this.state.current]}
onOpenChange={this.subMenuChange}
defaultOpenKeys={this.state.openKeys}
theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
inlineCollapsed={this.state.collapsed}
style={{lineHeight: '64px'}}>
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
<Link to={'/'}>
控制面板
</Link>
</Menu.Item>
<SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
<Menu.Item key="asset" icon={<DesktopOutlined/>}>
<Link to={'/asset'}>
资产列表
</Link>
</Menu.Item>
<Menu.Item key="credential" icon={<IdcardOutlined/>}>
<Link to={'/credential'}>
授权凭证
</Link>
</Menu.Item>
<Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
<Link to={'/dynamic-command'}>
动态指令
</Link>
</Menu.Item>
<Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
<Link to={'/access-gateway'}>
接入网关
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
<Menu.Item key="online-session" icon={<LinkOutlined/>}>
<Link to={'/online-session'}>
在线会话
</Link>
</Menu.Item>
<Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
<Link to={'/offline-session'}>
历史会话
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
<Menu.Item key="login-log" icon={<LoginOutlined/>}>
<Link to={'/login-log'}>
登录日志
</Link>
</Menu.Item>
<Menu.Item key="job" icon={<BlockOutlined/>}>
<Link to={'/job'}>
计划任务
</Link>
</Menu.Item>
<Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
<Link to={'/access-security'}>
访问安全
</Link>
</Menu.Item>
<Menu.Item key="storage" icon={<HddOutlined/>}>
<Link to={'/storage'}>
磁盘空间
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
<Menu.Item key="user" icon={<UserOutlined/>}>
<Link to={'/user'}>
用户管理
</Link>
</Menu.Item>
<Menu.Item key="user-group" icon={<TeamOutlined/>}>
<Link to={'/user-group'}>
用户组管理
</Link>
</Menu.Item>
<Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
<Link to={'/strategy'}>
授权策略
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="my-file" icon={<FolderOutlined/>}>
<Link to={'/my-file'}>
我的文件
</Link>
</Menu.Item>
<Menu.Item key="info" icon={<SolutionOutlined/>}>
<Link to={'/info'}>
个人中心
</Link>
</Menu.Item>
<Menu.Item key="setting" icon={<SettingOutlined/>}>
<Link to={'/setting'}>
系统设置
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background"
style={{padding: 0, height: headerHeight, zIndex: 20}}>
<div className='layout-header'>
<div className='layout-header-left'>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.onCollapse,
})}
</div>
<div className='layout-header-right'>
<div className={'layout-header-right-item'}>
<a style={{color: 'black'}} target='_blank'
href='https://github.com/dushixiang/next-terminal'
rel='noreferrer noopener'>
<GithubOutlined/>
</a>
</div>
</div>
<div className='layout-header-right'>
<Dropdown overlay={menu}>
<div className='nickname layout-header-right-item'>
{getCurrentUser()['nickname']} <DownOutlined/>
</div>
</Dropdown>
</div>
</div>
</Header>
<Route path="/" exact component={Dashboard}/>
<Route path="/user" component={User}/>
<Route path="/user-group" component={UserGroup}/>
<Route path="/asset" component={Asset}/>
<Route path="/credential" component={Credential}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
<Route path="/batch-command" component={BatchCommand}/>
<Route path="/online-session" component={OnlineSession}/>
<Route path="/offline-session" component={OfflineSession}/>
<Route path="/login-log" component={LoginLog}/>
<Route path="/info" component={Info}/>
<Route path="/setting" component={Setting}/>
<Route path="/job" component={Job}/>
<Route path="/access-security" component={Security}/>
<Route path="/access-gateway" component={AccessGateway}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/storage" component={Storage}/>
<Route path="/strategy" component={Strategy}/>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</Layout>
</> :
<>
<Header style={{padding: 0}}>
<div className='km-header'>
<div style={{flex: '1 1 0%'}}>
<Link to={'/'}>
<img src={this.state.logo} alt='logo' width={120}/>
</Link>
<Link to={'/my-file'}>
<Button type="text" style={{color: 'white'}}
icon={<FolderOutlined/>}>
文件
</Button>
</Link>
<Link to={'/dynamic-command'}>
<Button type="text" style={{color: 'white'}}
icon={<CodeOutlined/>}>
指令
</Button>
</Link>
</div>
<div className='km-header-right'>
<Dropdown overlay={menu}>
<span className={'km-header-right-item'}>
{getCurrentUser()['nickname']}
</span>
</Dropdown>
</div>
</div>
</Header>
<Content className='km-container'>
<Layout>
<Route path="/" exact component={MyAsset}/>
<Content className={'kd-content'}>
<Route path="/info" component={Info}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
</Content>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</>
}
</Layout>
</Route>
</Switch>
);
}
Example #11
| Source File: Storage.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
<Content className="site-layout-background page-content">
<div>
<Row justify="space-around" align="middle" gutter={24}>
<Col span={12} key={1}>
<Title level={3}>磁盘空间</Title>
</Col>
<Col span={12} key={2} style={{textAlign: 'right'}}>
<Space>
<Search
ref={this.inputRefOfName}
placeholder="名称"
allowClear
onSearch={this.handleSearchByName}
/>
<Tooltip title='重置查询'>
<Button icon={<UndoOutlined/>} onClick={() => {
this.inputRefOfName.current.setValue('');
this.loadTableData({pageIndex: 1, pageSize: 10, name: '', content: ''})
}}>
</Button>
</Tooltip>
<Divider type="vertical"/>
<Tooltip title="新增">
<Button type="dashed" icon={<PlusOutlined/>}
onClick={() => this.showModal('新增磁盘空间')}>
</Button>
</Tooltip>
<Tooltip title="刷新列表">
<Button icon={<SyncOutlined/>} onClick={() => {
this.loadTableData(this.state.queryParams)
}}>
</Button>
</Tooltip>
</Space>
</Col>
</Row>
</div>
</Content>
<div style={{margin: '0 16px'}}>
<List
loading={this.state.loading}
grid={{gutter: 16, column: 4}}
dataSource={this.state.items}
renderItem={item => {
let delBtn;
if (item['isDefault']) {
delBtn = <DeleteOutlined key="delete" className={'disabled-icon'}/>
} else {
delBtn = <Popconfirm
title="您确认要删除此空间吗?"
onConfirm={() => {
this.delete(item['id']);
}}
okText="是"
cancelText="否"
>
<DeleteOutlined key="delete"/>
</Popconfirm>
}
return (
<List.Item>
<Card title={item['name']}
hoverable
actions={[
<FolderOutlined key='file' onClick={() => {
this.setState({
fileSystemVisible: true,
storageId: item['id']
});
if (this.storageRef) {
this.storageRef.reSetStorageId(item['id']);
}
}}/>,
<EditOutlined key="edit" onClick={() => {
// 转换文件大小限制单位为MB
let model = cloneObj(item);
if(model['limitSize'] > 0){
model['limitSize'] = model['limitSize'] / 1024 / 1024;
}
this.showModal('修改磁盘空间', model);
}}/>,
delBtn
,
]}>
<Descriptions title="" column={1}>
<Descriptions.Item label={<div><TeamOutlined/> 是否共享</div>}>
<strong>{item['isShare'] ? '是' : '否'}</strong>
</Descriptions.Item>
<Descriptions.Item label={<div><SafetyCertificateOutlined/> 是否默认</div>}>
<strong>{item['isDefault'] ? '是' : '否'}</strong>
</Descriptions.Item>
<Descriptions.Item label={<div><FireOutlined/> 大小限制</div>}>
<strong>{item['limitSize'] < 0 ? '无限制' : renderSize(item['limitSize'])}</strong>
</Descriptions.Item>
<Descriptions.Item label={<div><HeartOutlined/> 已用大小</div>}>
<strong>{renderSize(item['usedSize'])}</strong>
</Descriptions.Item>
<Descriptions.Item label={<div><UserOutlined/> 所属用户</div>}>
<strong>{item['ownerName']}</strong>
</Descriptions.Item>
</Descriptions>
</Card>
</List.Item>
)
}}
/>
</div>
<Drawer
title={'文件管理'}
placement="right"
width={window.innerWidth * 0.8}
closable={true}
maskClosable={true}
onClose={() => {
this.setState({
fileSystemVisible: false
});
this.loadTableData(this.state.queryParams);
}}
visible={this.state.fileSystemVisible}
>
<FileSystem
storageId={this.state.storageId}
storageType={'storages'}
onRef={this.onRef}
upload={true}
download={true}
delete={true}
rename={true}
edit={true}
minHeight={window.innerHeight - 103}/>
</Drawer>
{
this.state.modalVisible ?
<StorageModal
visible={this.state.modalVisible}
title={this.state.modalTitle}
handleOk={this.handleOk}
handleCancel={() => {
this.setState({
modalTitle: '',
modalVisible: false
});
}}
confirmLoading={this.state.modalConfirmLoading}
model={this.state.model}
>
</StorageModal> : undefined
}
</div>
);
}
Example #12
| Source File: SiderMenu.js From react-admin-portal with MIT License | 4 votes |
|
function SiderMenu({ handleOnCollapse, collapsed }) {
const theme = 'light';
const history = useHistory();
const handleSiderMenuClick = action => {
console.log('menu:', action);
switch (action.key) {
case 'dashboard':
history.push('/');
break;
case 'showProducts':
history.push('/products');
break;
case 'addProduct':
history.push('/add-product');
break;
case 'showCustomers':
history.push('/customers');
break;
case 'addCustomer':
history.push('/add-customer');
break;
default:
history.push('/');
}
};
return (
<Sider
breakpoint="lg"
collapsedWidth="80"
onCollapse={handleOnCollapse}
collapsed={collapsed}
width="256"
theme={theme}
>
<a>
<div className="menu-logo" />
</a>
<Menu mode="inline" theme={theme} onClick={handleSiderMenuClick}>
<Menu.Item key="dashboard">
<DashboardOutlined />
<span className="nav-text">Dashboard</span>
</Menu.Item>
<SubMenu
key="products"
title={
<span>
<PartitionOutlined />
<span>Products</span>
</span>
}
>
<Menu.Item key="showProducts">
<span className="nav-text">Show Products</span>
</Menu.Item>
<Menu.Item key="addProduct">
<span className="nav-text">Add Product</span>
</Menu.Item>
</SubMenu>
<SubMenu
key="customers"
title={
<span>
<TeamOutlined />
<span>Customers</span>
</span>
}
>
<Menu.Item key="showCustomers">
<span className="nav-text">Show Customers</span>
</Menu.Item>
<Menu.Item key="addCustomer">
<span className="nav-text">Add Customer</span>
</Menu.Item>
</SubMenu>
<Menu.Item key="settings">
<SettingOutlined />
<span className="nav-text">Settings</span>
</Menu.Item>
<Menu.Item key="reports">
<FundProjectionScreenOutlined />
<span className="nav-text">Reports</span>
</Menu.Item>
</Menu>
</Sider>
);
}
Example #13
| Source File: fixed-sider.jsx From virtuoso-design-system with MIT License | 4 votes |
|
storiesOf('antd/layout', module).add('fixed-sider', () =>
<Layout>
<Sider
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<BarChartOutlined />}>
nav 4
</Menu.Item>
<Menu.Item key="5" icon={<CloudOutlined />}>
nav 5
</Menu.Item>
<Menu.Item key="6" icon={<AppstoreOutlined />}>
nav 6
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
nav 7
</Menu.Item>
<Menu.Item key="8" icon={<ShopOutlined />}>
nav 8
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout" style={{ marginLeft: 200 }}>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
...
<br />
Really
<br />
...
<br />
...
<br />
...
<br />
long
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>When dealing with long content, a fixed sider can provide a better user experience.</p></>) } });
