@ant-design/icons#CheckOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#CheckOutlined.
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: GroupByDropdown.jsx From notence with MIT License | 6 votes |
|
function GroupByDropdown({ properties, groupBy: { propertyId }, onGroupByChange }) {
const [dropdownVisible, setDropdownVisible] = useState(false);
const selectTypeProprties = properties.filter((property) => property.type === "Select");
const propertyList = selectTypeProprties.map((property) => (
<PropertyItem key={property.id} onClick={() => onGroupByChange(property.id)}>
<span className="name">{property.name}</span>
{property.id === propertyId && <CheckOutlined />}
</PropertyItem>
));
const menu = <Menu>{propertyList}</Menu>;
return (
<Dropdown
visible={dropdownVisible}
onVisibleChange={setDropdownVisible}
overlay={menu}
trigger={["click"]}
>
<Button size="small" type="link">
Group by
</Button>
</Dropdown>
);
}
Example #2
| Source File: Event.js From website with MIT License | 6 votes |
|
messages = status =>
({
F: {
message: 'Acesso Bloqueado',
icon: <CloseCircleOutlined />
},
P: {
message: 'Acesso Limitado',
icon: <ExclamationCircleOutlined />
},
O: {
message: 'Acesso Liberado',
icon: <CheckOutlined />
}
}[status])
Example #3
| Source File: text.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/switch', module).add('text', () =>
<>
<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
<br />
<Switch checkedChildren="1" unCheckedChildren="0" />
<br />
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
defaultChecked
/>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>With text and icon.</p></>) } });
Example #4
| Source File: ThemeColor.js From the-eye-knows-the-garbage with MIT License | 6 votes |
|
Tag = React.forwardRef(function (_a, ref) {
var color = _a.color,
check = _a.check,
rest = __rest(_a, ["color", "check"]);
return React.createElement("div", Object.assign({}, rest, {
style: {
backgroundColor: color
},
ref: ref
}), check ? React.createElement(CheckOutlined, null) : '');
})
Example #5
| Source File: BlockCheckbox.js From the-eye-knows-the-garbage with MIT License | 5 votes |
|
BlockCheckbox = function BlockCheckbox(_ref) {
var value = _ref.value,
onChange = _ref.onChange,
list = _ref.list,
prefixCls = _ref.prefixCls;
var baseClassName = "".concat(prefixCls, "-drawer-block-checkbox");
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
dom = _useState2[0],
setDom = _useState2[1];
useEffect(function () {
var domList = (list || []).map(function (item) {
return React.createElement("div", {
key: item.key,
className: "".concat(baseClassName, "-item"),
onClick: function onClick() {
return onChange(item.key);
}
}, React.createElement(_Tooltip, {
title: item.title,
key: item.key
}, React.createElement("img", {
src: item.url,
alt: item.key
})), React.createElement("div", {
className: "".concat(baseClassName, "-selectIcon"),
style: {
display: value === item.key ? 'block' : 'none'
}
}, React.createElement(CheckOutlined, null)));
});
setDom(domList);
}, [value, list === null || list === void 0 ? void 0 : list.length]);
return React.createElement("div", {
className: baseClassName,
style: {
minHeight: 42
}
}, dom);
}
Example #6
| Source File: PaymentModeForm.jsx From erp-crm with MIT License | 5 votes |
|
export default function PaymentModeForm({ isUpdateForm = false }) {
return (
<>
<Form.Item
label="Payment Mode Name"
name="name"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Description"
name="description"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Mode enabled"
name="enabled"
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingRight: '5px',
}}
valuePropName="checked"
initialValue={true}
>
<Switch checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} />
</Form.Item>
<Form.Item
label="Is Default Mode"
name="isDefault"
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingLeft: '5px',
}}
valuePropName="checked"
>
<Switch checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} />
</Form.Item>
</>
);
}
Example #7
| Source File: Currency.jsx From erp-crm with MIT License | 4 votes |
|
export default function Currency() {
const entity = 'currency';
const searchConfig = {
displayLabels: ['name'],
searchFields: 'name',
outputValue: '_id',
};
const entityDisplayLabels = ['name'];
const readColumns = [
{
title: 'Currency Name',
dataIndex: 'name',
},
{
title: 'Symbol',
dataIndex: 'symbol',
},
{
title: 'Decimal Sep',
dataIndex: 'decimalSeparator',
},
{
title: 'Thousand Sep',
dataIndex: 'thousandSeparator',
},
{
title: 'Default',
dataIndex: 'isDefault',
},
];
const dataTableColumns = [
{
title: 'Currency Name',
dataIndex: 'name',
},
{
title: 'Symbol',
dataIndex: 'symbol',
},
{
title: 'Decimal Sep',
dataIndex: 'decimalSeparator',
},
{
title: 'Thousand Sep',
dataIndex: 'thousandSeparator',
},
{
title: 'Default',
dataIndex: 'isDefault',
key: 'isDefault',
render: (text, row) => {
return {
props: {
style: {
width: '60px',
},
},
children: (
<Switch
checked={text}
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
/>
),
};
},
},
];
const ADD_NEW_ENTITY = 'Add new currency';
const DATATABLE_TITLE = 'currencys List';
const ENTITY_NAME = 'currency';
const CREATE_ENTITY = 'Create currency';
const UPDATE_ENTITY = 'Update currency';
const PANEL_TITLE = 'Currency Panel';
const config = {
entity,
PANEL_TITLE,
ENTITY_NAME,
CREATE_ENTITY,
ADD_NEW_ENTITY,
UPDATE_ENTITY,
DATATABLE_TITLE,
readColumns,
dataTableColumns,
searchConfig,
entityDisplayLabels,
};
return (
<CrudModule
createForm={<CurrencyForm />}
updateForm={<CurrencyForm isUpdateForm={true} />}
config={config}
/>
);
}
Example #8
| 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>
);
}
Example #9
| Source File: AddProduct.js From react-admin-portal with MIT License | 4 votes |
|
function AddProduct() {
const [form] = Form.useForm();
const handleSave = values => {
console.log('onFinish', values);
// call save API
};
const requiredFieldRule = [{ required: true, message: 'Required Field' }];
const ownerArray = [
{
id: 1,
value: 'John Nash',
},
{
id: 2,
value: 'Leonhard Euler',
},
{
id: 3,
value: 'Alan Turing',
},
];
const categoryArray = [
{
id: 1,
value: 'Clothing',
},
{
id: 2,
value: 'Jewelery',
},
{
id: 3,
value: 'Accessory',
},
];
return (
<Card title="Add Product" loading={false}>
<Row justify="center">
<Col span={12}>
<Form
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
form={form}
name="product-form"
onFinish={handleSave}
>
<Form.Item label="Name" name="name" rules={requiredFieldRule}>
<Input />
</Form.Item>
<Form.Item label="Description" name="description">
<Input />
</Form.Item>
<Form.Item label="Owner" name="owner">
<Select>
{ownerArray.map(item => (
<Option key={item.id} value={item.id}>
{item.value}
</Option>
))}
</Select>
</Form.Item>
<Form.Item label="Category" name="category">
<Select>
{categoryArray.map(item => (
<Option key={item.id} value={item.id}>
{item.value}
</Option>
))}
</Select>
</Form.Item>
<Form.Item label="Quantity" name="qty">
<InputNumber />
</Form.Item>
<Form.Item
label="Status"
name="active"
valuePropName="checked"
initialValue={false}
>
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
/>
</Form.Item>
<Divider />
<Row justify="center">
<Button type="primary" htmlType="submit">
Save
</Button>
</Row>
</Form>
</Col>
</Row>
</Card>
);
}
Example #10
| Source File: index.jsx From stack-labs-site with MIT License | 4 votes |
|
render() {
const { state } = this;
const { props } = this;
const {
meta,
src,
content,
preview,
highlightedCodes,
style,
highlightedStyle,
expand,
utils,
intl: { locale },
theme,
} = props;
const { copied, copyTooltipVisible } = state;
if (!this.liveDemo) {
this.liveDemo = meta.iframe ? (
<BrowserFrame>
<iframe
ref={this.iframeRef}
onLoad={this.handleIframeReady}
src={src}
height={meta.iframe}
title="demo"
className="iframe-demo"
/>
</BrowserFrame>
) : (
preview(React, ReactDOM)
);
}
const codeExpand = this.state.codeExpand || expand;
const codeBoxClass = classNames('code-box', {
expand: codeExpand,
'code-box-debug': meta.debug,
});
const localizedTitle = meta.title[locale] || meta.title;
const localizeIntro = content[locale] || content;
const introChildren = utils.toReactComponent(['div'].concat(localizeIntro));
const highlightClass = classNames({
'highlight-wrapper': true,
'highlight-wrapper-expand': codeExpand,
});
const prefillStyle = `@import 'antd/dist/antd.css';\n\n${style || ''}`.replace(
new RegExp(`#${meta.id}\\s*`, 'g'),
'',
);
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
</head>
<body>
<div id="container" style="padding: 24px" />
<script>var mountNode = document.getElementById('container');</script>
</body>
</html>`;
const sourceCode = this.getSourceCode();
const codepenPrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
html,
js: sourceCode
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
.replace(
/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/,
'const { $1 } = icons;',
)
.replace("import moment from 'moment';", '')
.replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
.replace(
/import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
'const { $1 } = ReactRouterDOM;',
)
.replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2'),
css: prefillStyle,
editors: '001',
// eslint-disable-next-line no-undef
css_external: `https://unpkg.com/antd@${antdReproduceVersion}/dist/antd.css`,
js_external: [
'[email protected]/umd/react.development.js',
'[email protected]/umd/react-dom.development.js',
'moment/min/moment-with-locales.js',
// eslint-disable-next-line no-undef
`antd@${antdReproduceVersion}/dist/antd-with-locales.js`,
`@ant-design/icons/dist/index.umd.js`,
'react-router-dom/umd/react-router-dom.min.js',
'[email protected]/umd/ReactRouter.min.js',
]
.map(url => `https://unpkg.com/${url}`)
.join(';'),
js_pre_processor: 'typescript',
};
const riddlePrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
js: sourceCode,
css: prefillStyle,
};
const dependencies = sourceCode.split('\n').reduce(
(acc, line) => {
const matches = line.match(/import .+? from '(.+)';$/);
if (matches && matches[1] && !line.includes('antd')) {
const paths = matches[1].split('/');
if (paths.length) {
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
acc[dep] = 'latest';
}
}
return acc;
},
// eslint-disable-next-line no-undef
{ antd: antdReproduceVersion },
);
dependencies['@ant-design/icons'] = 'latest';
// Reorder source code
let parsedSourceCode = sourceCode;
let importReactContent = "import React from 'react';";
const importReactReg = /import(\D*)from 'react';/;
const matchImportReact = parsedSourceCode.match(importReactReg);
if (matchImportReact) {
importReactContent = matchImportReact[0];
parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
}
const indexJsContent = `
${importReactContent}
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
`.trim();
const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
const codesandboxPackage = {
name: `${localizedTitle} - Micro 中国 Demo`,
version: '1.0.0',
main: 'index.js',
dependencies: {
...dependencies,
react: '^16.12.0',
'react-dom': '^16.12.0',
'react-scripts': '^3.0.1',
},
devDependencies: {
typescript: '^3.8.2',
},
scripts: {
start: 'react-scripts start',
build: 'react-scripts build',
test: 'react-scripts test --env=jsdom',
eject: 'react-scripts eject',
},
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
};
const codesanboxPrefillConfig = {
files: {
'package.json': { content: codesandboxPackage },
'index.css': { content: indexCssContent },
'index.js': { content: indexJsContent },
'index.html': {
content: html,
},
},
};
const stackblitzPrefillConfig = {
title: `${localizedTitle} - Micro 中国 Demo`,
template: 'create-react-app',
dependencies,
files: {
'index.css': indexCssContent,
'index.js': indexJsContent,
'index.html': html,
},
};
return (
<section className={codeBoxClass} id={meta.id}>
<section className="code-box-demo">
<ErrorBoundary>{this.liveDemo}</ErrorBoundary>
{style ? (
<style dangerouslySetInnerHTML={{ __html: style }} />
) : null}
</section>
<section className="code-box-meta markdown">
<div className="code-box-title">
<Tooltip title={meta.debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
<a href={`#${meta.id}`} ref={this.saveAnchor}>
{localizedTitle}
</a>
</Tooltip>
<EditButton
title={<FormattedMessage id="app.content.edit-demo" />}
filename={meta.filename}
/>
</div>
<div className="code-box-description">{introChildren}</div>
<div className="code-box-actions">
<form
action="//riddle.alibaba-inc.com/riddles/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'riddle', demo: meta.id })}
>
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
<input
type="submit"
value="Create New Riddle with Prefilled Data"
className="code-box-riddle"
/>
</Tooltip>
</form>
<form
action="https://codesandbox.io/api/v1/sandboxes/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
>
<input
type="hidden"
name="parameters"
value={compress(JSON.stringify(codesanboxPrefillConfig))}
/>
<Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
<input
type="submit"
value="Create New Sandbox with Prefilled Data"
className="code-box-codesandbox"
/>
</Tooltip>
</form>
<form
action="https://codepen.io/pen/define"
method="POST"
target="_blank"
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
style={{
display: sourceCode ? '' : 'none',
}}
>
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
<input
type="submit"
value="Create New Pen with Prefilled Data"
className="code-box-codepen"
/>
</Tooltip>
</form>
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
<span
className="code-box-code-action"
onClick={() => {
this.track({ type: 'stackblitz', demo: meta.id });
stackblitzSdk.openProject(stackblitzPrefillConfig);
}}
>
<ThunderboltOutlined />
</span>
</Tooltip>
<CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
<Tooltip
visible={copyTooltipVisible}
onVisibleChange={this.onCopyTooltipVisibleChange}
title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
>
{React.createElement(
copied && copyTooltipVisible ? CheckOutlined : SnippetsOutlined,
{
className: 'code-box-code-copy',
},
)}
</Tooltip>
</CopyToClipboard>
<Tooltip
title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
>
<span className="code-expand-icon">
<img
alt="expand code"
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
}
className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
onClick={() => this.handleCodeExpand(meta.id)}
/>
<img
alt="expand code"
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
}
className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
onClick={() => this.handleCodeExpand(meta.id)}
/>
</span>
</Tooltip>
</div>
</section>
<section className={highlightClass} key="code">
<CodePreview toReactComponent={props.utils.toReactComponent} codes={highlightedCodes} />
{highlightedStyle ? (
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
</pre>
</div>
) : null}
</section>
</section>
);
}
Example #11
| Source File: build_record_table.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const table_column = [
{
title: 'Brew Build',
dataIndex: "build_id",
key: "build_id",
render: (text, record) => (
<div>
<a href={process.env.REACT_APP_BREW_BUILD_LINK+record["build_id"]}
target="_blank" rel="noopener noreferrer">
{record["build_id"]}
</a>
</div>
)
},
{
title: "Build Status",
dataIndex: "fault_code",
key: "fault_code",
render: (text, record) =>{
if(record["fault_code"] === "0"){
return(
<div>
<CheckOutlined style = {{color: "#52c41a"}}/>
</div>
)
}
else{
return(
<div>
<Tooltip title={"Fault Code is " + record["fault_code"]}>
<CloseOutlined style = {{color: "#f55d42"}}/>
</Tooltip>
</div>
)
}
}
},
{
title: "Brew Task",
dataIndex: "task_id",
key: "task_id",
render: (data, record) => {
return(
<div>
<a href={process.env.REACT_APP_BREW_TASK_LINK+record["task_id"]}
target="_blank" rel="noopener noreferrer">{record["task_id"]}</a>
</div>
)
}
},
{
title: "Jenkins Build URL",
dataIndex: "jenkins_build_url",
key: "jenkins_build_url",
render: (data, record) =>{
return (
<div>
<p><a href={record["jenkins_build_url"]}>{<LinkOutlined/>}</a></p>
</div>
)
}
},
{
title: "DistGit Name",
dataIndex: "label_name",
key: "label_name",
filters: this.state.label_name_filter,
onFilter: (value, record) => record.label_name === value,
width: "20%",
sorter: (a, b) => a.label_name.length - b.label_name.length
},
{
title: "OpenShift Group",
dataIndex: "group",
key: "group",
filters: this.state.group_filter,
onFilter: (value, record) => record.group === value,
width: "20%",
sorter: (a, b) => parseFloat(a.group.split("-")[1]) - parseFloat(b.group.split("-")[1])
},
{
title: "Build Time",
dataIndex: "iso_time",
key: "iso_time",
render: (data, record) => {
let date = new Date(record["iso_time"])
return (
<p>{date.getFullYear()+'-' + this.render_single_digit_to_double_datetime((date.getMonth()+1)) + '-'+this.render_single_digit_to_double_datetime(date.getDate()) + ' ' + this.render_single_digit_to_double_datetime(date.getHours()) + ':' + this.render_single_digit_to_double_datetime(date.getMinutes()) + ":" + this.render_single_digit_to_double_datetime(date.getSeconds())}</p>
)
}
}
]
return (
<div>
<Table dataSource={this.state.data} columns={table_column} style={{padding: "30px"}} loading={this.state.loading}/>
</div>
);
}
Example #12
| Source File: build_history_table.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const columns = [
{
title: 'Brew Build',
dataIndex: "build_id",
key: "build_id",
render: (text, record) => (
<div>
<a href={process.env.REACT_APP_BREW_BUILD_LINK+record["build_id"]}
target="_blank" rel="noopener noreferrer">
{record["build_id"] !== null && record["build_id"]}
{record["build_id"] === null && "Not Available"}
</a>
</div>
)
},
{
title:()=>{
return (
<Row>
<Col span={24} className="left">
Build Status
</Col>
<Col span={24}>
<Run_status_filter search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "fault_code",
key: "fault_code",
align: "center",
render: (text, record) =>{
if(record["fault_code"] === 0){
return(
<div>
<a href={process.env.REACT_APP_BREW_TASK_LINK+record["task_id"]}
target="_blank" rel="noopener noreferrer"><CheckOutlined style = {{color: "#52c41a"}}/></a>
</div>
)
}
else{
return(
<div>
<a href={process.env.REACT_APP_BREW_TASK_LINK+record["task_id"]}
target="_blank" rel="noopener noreferrer">
<Tooltip title={"Fault Code is " + record["fault_code"]}>
<CloseOutlined style = {{color: "#f55d42"}}/>
</Tooltip>
</a>
</div>
)
}
}
},
{
title:()=>{
return (
<Row>
<Col span={24} className="left">
Package
</Col>
<Col span={24}>
<Autocomplete_filter placeholder={"Package Name"} type={"nvr"} search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "dg_name",
key: "dg_name"
},
{
title: "Version",
key: "label_version",
dataIndex: "label_version"
},
{
title: "CGIT Link",
dataIndex: "build_0_source",
key: "build_0_source",
render: (data, record) => {
const http_link = "http://pkgs.devel.redhat.com/cgit/" + record["dg_namespace"] + "/" + record["dg_name"] + "/tree/?id=" + record["dg_commit"];
return (
<a href={http_link} target="_blank" rel="noopener noreferrer">{"#"+record["dg_commit"]}</a>
)
}
},
{
title: "Source Commit",
align: "center",
dataIndex: "build_commit_url_github",
key: "build_commit_url_github",
render: (data, record) => {
if(record["build_commit_url_github"] !== null)
return(
<a href={record["build_commit_url_github"]} target="_blank" rel="noopener noreferrer">{"#" + record["build_commit_url_github"].slice(-8)}</a>
)
else
return(
<p>Not Available</p>
)
}
},
{
title: ()=>{
return (
<Row>
<Col span={24} className="left">
Build Time ISO
</Col>
<Col span={24}>
<Datepicker_filter placeholder={"Build Date"} search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "iso_time",
key: "iso_time",
render: (data, record) => {
//let date = new Date(record["iso_time"])
return (
<p>{record["iso_time"].split("T")[0] + " " + record["iso_time"].split("T")[1].split(".")[0]}</p>
// <p>{date.getFullYear()+'-' + this.render_single_digit_to_double_datetime((date.getMonth()+1)) + '-'+this.render_single_digit_to_double_datetime(date.getDate()) + ' ' + this.render_single_digit_to_double_datetime(date.getHours()) + ':' + this.render_single_digit_to_double_datetime(date.getMinutes()) + ":" + this.render_single_digit_to_double_datetime(date.getSeconds())}</p>
)
}
},
{
title: 'More Details',
align: "center",
render: (text, record) => (
<div>
<a>
<ExpandOutlined onClick={() => this.showBuildDescriptionModal(record)}/>
</a>
<Modal
title= {"Build Details"}
visible= {this.state["visible_modal_"+record["build_id"]]}
onOk={() => this.handleOkBuildDescriptionModal(record)}
onCancel={() => this.handleOkBuildDescriptionModal(record)}
footer={null}
>
<p><a href={record["jenkins_build_url"]}>{"Jenkins Build Url"}</a></p>
<p>{"Jenkins Build Number: " + record["jenkins_build_number"]}</p>
<p>{"Jenkins Job Name: " + record["jenkins_job_name"]}</p>
<p>{"Build Name: " + record["build_name"]}</p>
<p>{"Build Version: " + record["build_version"]}</p>
</Modal>
</div>
)
}
]
return (
<div>
<Table dataSource={this.state.data} columns={columns}/>
</div>
);
}
Example #13
| Source File: PaymentMode.jsx From erp-crm with MIT License | 4 votes |
|
export default function PaymentMode() {
const entity = 'paymentMode';
const searchConfig = {
displayLabels: ['name'],
searchFields: 'name',
outputValue: '_id',
};
const entityDisplayLabels = ['name'];
const readColumns = [
{
title: 'Payment Mode',
dataIndex: 'name',
},
{
title: 'Description',
dataIndex: 'description',
},
{
title: 'Is Default',
dataIndex: 'isDefault',
},
{
title: 'enabled',
dataIndex: 'enabled',
},
];
const dataTableColumns = [
{
title: 'Payment Mode',
dataIndex: 'name',
},
{
title: 'Description',
dataIndex: 'description',
},
{
title: 'Is Default',
dataIndex: 'isDefault',
key: 'isDefault',
render: (text, row) => {
return {
props: {
style: {
width: '60px',
},
},
children: (
<Switch
checked={text}
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
/>
),
};
},
},
{
title: 'Enabled',
dataIndex: 'enabled',
key: 'enabled',
render: (text, row) => {
return {
props: {
style: {
width: '60px',
},
},
children: (
<Switch
checked={text}
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
/>
),
};
},
},
];
const ADD_NEW_ENTITY = 'Add new payment mode';
const DATATABLE_TITLE = 'payment modes List';
const ENTITY_NAME = 'payment mode';
const CREATE_ENTITY = 'Create payment mode';
const UPDATE_ENTITY = 'Update payment mode';
const PANEL_TITLE = 'Currency Panel';
const config = {
entity,
PANEL_TITLE,
ENTITY_NAME,
CREATE_ENTITY,
ADD_NEW_ENTITY,
UPDATE_ENTITY,
DATATABLE_TITLE,
readColumns,
dataTableColumns,
searchConfig,
entityDisplayLabels,
};
return (
<CrudModule
createForm={<PaymentModeForm />}
updateForm={<PaymentModeForm isUpdateForm={true} />}
config={config}
/>
);
}
Example #14
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title={<span>Change User Permissions <ClusterOutlined /></span>}
visible={this.state.permissionModal}
onOk={this.changePermissions}
onCancel={() => { this.setState({ permissionModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<Select size="large" value={this.state.permissionChangeTo} style={{ width: "30ch" }} onSelect={(value) => { this.setState({ permissionChangeTo: value }) }}>
<Option value="0">0 - Normal User</Option>
<Option value="1">1 - Challenge Creator User</Option>
<Option value="2">2 - Admin User</Option>
</Select>
<br />
<br />
<ul>
<li><b>0 - Normal User</b>: Has access to the basic functions and nothing else</li>
<li><b>1 - Challenge Creator User</b>: Has the additional power of submitting new challenges, but not modifying existing ones</li>
<li><b>2 - Admin User</b>: Has full access to the platform via the admin panel.</li>
</ul>
</Modal>
<Modal
title="Create New Account"
visible={this.state.createUserModal}
footer={null}
onCancel={() => { this.setState({ createUserModal: false }) }}
>
<RegisterForm createAccount={this.createAccount.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Account Password For: " + this.state.username}
visible={this.state.passwordResetModal}
footer={null}
onCancel={() => { this.setState({ passwordResetModal: false }) }}
>
<ChangePasswordForm username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Category For: " + this.state.username}
visible={this.state.categoryChangeModal}
footer={null}
onCancel={() => { this.setState({ categoryChangeModal: false }) }}
>
<SelectParticipantCategoryForm fillTableData={this.fillTableData.bind(this)} categoryList={this.state.categoryList} username={this.state.username} participantCategory={this.state.participantCategory} />
</Modal>
<Modal
title={"Changing Email For: " + this.state.username}
visible={this.state.emailChangeModal}
footer={null}
onCancel={() => { this.setState({ emailChangeModal: false }) }}
>
<ChangeEmailForm fillTableData={this.fillTableData.bind(this)} username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UserOutlined />} onClick={() => { this.setState({ createUserModal: true }) }}>Create New User</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} ></Ellipsis>
<h1>Loading Users</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await Promise.all([this.fillTableData(), this.getDisableStates()]); message.success("Users list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the user(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CheckOutlined style={{ color: "#49aa19" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.verifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Verify Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CloseOutlined style={{ color: "#a61d24" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to un-verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
content: 'Please note that this action will send a new email per user asking them to re-verify.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.unverifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Un-Verify Users</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} 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%" }}>No users found/created</h1>
</div>
)
}}>
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Username"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.username.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.username < b.username) return -1
else return 1
}}
/>
<Column title="Email" dataIndex="email" key="email"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Email"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.email.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Permissions" dataIndex="type" key="type" filters={[{ text: "Normal User (0)", value: 0 }, { text: "Challenge Creator (1)", value: 1 }, { text: "Admin (2)", value: 2 }]} onFilter={(value, record) => { return value === record.type }} />
<Column title="Team" dataIndex="team" key="team"
render={(text, row, index) => {
if (text != "N/A") return <Link to={"/Team/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return text;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Team"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.team.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Category" dataIndex="category" key="category" filters={
this.state.categoryList.map((category) => {
return { text: category, value: category }
})} onFilter={(value, record) => { return value === record.category }} />
<Column title="Verified" dataIndex="verified" key="verified" filters={[{ text: "Verified", value: "True" }, { text: "Unverified", value: "False" }]} onFilter={(value, record) => { return value === record.verified }} />
<Column
title=""
key="action"
render={(text, record) => (
<Dropdown trigger={['click']} overlay={
<Menu>
<Menu.Item onClick={() => {
this.setState({ permissionModal: true, username: record.username, permissionChangeTo: record.type.toString() })
}}>
<span>
Change Permissions <ClusterOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ passwordResetModal: true, username: record.username })
}}>
<span>
Change Password <KeyOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ emailChangeModal: true, username: record.username })
}}>
<span>
Change Email <MailOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ categoryChangeModal: true, username: record.username, participantCategory: record.category })
}}>
<span>
Change Category <ApartmentOutlined />
</span>
</Menu.Item>
</Menu>
} placement="bottomCenter">
<Button>Actions</Button>
</Dropdown>
)}
/>
</Table>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable User Registration: <Switch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("registerDisable", value)} checked={this.state.registerDisable} /></h3>
<p>Disables user registration for unregistered users. Admins can still create users from this page.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable User Logins: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("loginDisable", value)} checked={this.state.loginDisable} /></h3>
<p>Disables user login except for admin users. <br /><b>Note:</b> Users already logged into the platform will remain authenticated as tokens cannot be revoked. If you want to restrict a user from accessing the platform anymore, simply delete their account.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Admin Scores: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("adminShowDisable", value)} checked={this.state.adminShowDisable} /></h3>
<p>Prevents admin scores from showing up on scoreboards and profile pages. Admin solves will still appear under the solve list in challenges. <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Profile Picture Max Upload Size: <InputNumber
formatter={value => `${value}B`}
parser={value => value.replace('B', '')}
value={this.state.uploadSize}
disabled={this.state.uploadLoading}
onChange={(value) => this.setState({ uploadSize: value })}
onPressEnter={(e) => { this.changeSetting("uploadSize", this.state.uploadSize) }} /></h3>
<p>Sets the maximum file upload size for profile pictures (in Bytes). Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Category Switches: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("categorySwitchDisable", value)} checked={this.state.categorySwitchDisable} /></h3>
<p>Prevents users from switching their scoreboard category. Useful during competitions where you want to lock the user into a category</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>User Category Management <UserOutlined /></h3>
<Space direction="vertical">
{this.state.categoryList.map((category) => {
return (
<div style={{ display: 'flex', alignItems: "center" }}>
<Input disabled value={category} />
<MinusCircleOutlined onClick={() => { this.removeCategory(category) }} style={{ cursor: "pointer", marginLeft: "1ch", color: "#f5222d" }} />
</div>
)
})}
<div style={{ display: "flex" }}>
<Input value={this.state.newCategoryValue} onChange={(e) => { this.setState({ newCategoryValue: e.target.value }) }} />
<Button
loading={this.state.addCategoryLoading}
style={{ marginLeft: "1ch" }}
type="dashed"
onClick={() => {
this.addCategory()
}}
>
<PlusOutlined /> Add Category
</Button>
</div>
</Space>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Max Team Size: <InputNumber
value={this.state.teamMaxSize}
onChange={(value) => this.setState({ teamMaxSize: value })}
onPressEnter={(e) => { this.changeSetting("teamMaxSize", this.state.teamMaxSize) }} />
</h3>
<p>Sets the maximum number of members in a team. Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Teams: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamMode", value)} checked={this.state.teamMode} /></h3>
<p>Enable teams for the platform. Users in a team will have their scores combined on the scoreboard <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Team Switching: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamChangeDisable", value)} checked={this.state.teamChangeDisable} /></h3>
<p>Prevents users from leaving, joining & creating a team. Enable this option if you want to prevent any team changes during a competition</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Enable Password Reset <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("forgotPass", value)} checked={this.state.forgotPass} /></h3>
<p>Allow users to use the "Forgot Password" option to reset their password. <br />Please ensure that you have connected to an SMTP server correctly in the "Email" tab</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Email Verification <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("emailVerify", value)} checked={this.state.emailVerify} /></h3>
<p>Forces newly registered users to <b>verify their email</b> before being able to access the site.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Profile Picture Upload Path
<Input
value={this.state.uploadPath}
onChange={(e) => this.setState({ uploadPath: e.target.value })}
onPressEnter={(e) => { this.changeSetting("uploadPath", this.state.uploadPath) }} /></h3>
<p>Sets the file upload path for profile pictures. Please ensure that the folder has the appropriate permissions <br />set for the Node process to save the file there. Press <b>Enter</b> to save</p>
</Card>
</div>
</Layout>
);
}
Example #15
| Source File: CurrencyForm.jsx From erp-crm with MIT License | 4 votes |
|
export default function CurrencyForm({ isUpdateForm = false }) {
return (
<>
<Form.Item
label="Currency Name"
name="name"
rules={[
{
required: true,
message: 'Please input your currency name!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Symbol"
name="symbol"
rules={[
{
required: true,
message: 'Please input your surname!',
},
]}
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingRight: '5px',
}}
>
<Input />
</Form.Item>
<Form.Item
label="Decimal Separator"
name="decimalSeparator"
rules={[
{
required: true,
},
]}
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingLeft: '5px',
}}
>
<Input />
</Form.Item>
<Form.Item
label="Thousand Separator"
name="thousandSeparator"
rules={[
{
required: true,
},
]}
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingRight: '5px',
}}
>
<Input />
</Form.Item>
<Form.Item
label="Is Default Currency"
name="isDefault"
rules={[
{
required: true,
},
]}
style={{
display: 'inline-block',
width: 'calc(50%)',
paddingLeft: '5px',
}}
valuePropName="checked"
>
<Switch checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} />
</Form.Item>
</>
);
}
Example #16
| Source File: index.jsx From ui with MIT License | 4 votes |
|
DataProcessingPage = ({ experimentId, experimentData }) => {
const dispatch = useDispatch();
const { navigateTo } = useAppRouter();
const pipelineStatus = useSelector(getBackendStatus(experimentId))?.status?.pipeline;
const processingConfig = useSelector((state) => state.experimentSettings.processing);
const sampleKeys = useSelector((state) => state.experimentSettings.info.sampleIds);
const samples = useSelector((state) => state.samples);
const pipelineStatusKey = pipelineStatus?.status;
const pipelineRunning = pipelineStatusKey === 'RUNNING';
// Pipeline is not loaded (either running or in an errored state)
const pipelineErrors = ['FAILED', 'TIMED_OUT', 'ABORTED'];
const pipelineHadErrors = pipelineErrors.includes(pipelineStatusKey);
const pipelineNotFinished = pipelineRunning || pipelineHadErrors;
const completedSteps = pipelineStatus?.completedSteps || [];
const changedQCFilters = useSelector(
(state) => state.experimentSettings.processing.meta.changedQCFilters,
);
const changesOutstanding = Boolean(changedQCFilters.size);
const [stepIdx, setStepIdx] = useState(0);
const [runQCModalVisible, setRunQCModalVisible] = useState(false);
const [inputsList, setInputsList] = useState([]);
useEffect(() => {
// If processingConfig is not loaded then reload
if (Object.keys(processingConfig).length <= 1) {
dispatch(loadProcessingSettings(experimentId));
}
dispatch(loadSamples(experimentId));
dispatch(loadCellSets(experimentId));
}, []);
// Checks if the step is in the 'completed steps' list we get from the pipeline status
const isStepComplete = (stepName) => {
if (stepName === undefined) {
return true;
}
const lowerCaseStepName = stepName.toLowerCase();
const stepAppearances = _.filter(
completedSteps,
(stepPipelineName) => stepPipelineName.toLowerCase().includes(lowerCaseStepName),
);
return stepAppearances.length > 0;
};
const onConfigChange = useCallback((key) => {
dispatch(addChangedQCFilter(key));
});
const prefixSampleName = (name) => {
// eslint-disable-next-line no-param-reassign
if (!name.match(/$sample/ig)) name = `Sample ${name}`;
return name;
};
useEffect(() => {
if (sampleKeys && sampleKeys.length > 0 && Object.keys(samples).filter((key) => key !== 'meta').length > 0) {
const list = sampleKeys?.map((sampleId) => ({
key: sampleId,
headerName: prefixSampleName(samples[sampleId].name),
params: { key: sampleId },
}));
setInputsList(list);
}
}, [samples, sampleKeys]);
const steps = [
{
key: 'classifier',
name: getUserFriendlyQCStepName('classifier'),
description: 'The Classifier filter is based on the ‘emptyDrops’ method which distinguishes between droplets containing cells and ambient RNA. Droplets are filtered based on the False Discovery Rate (FDR) value - the red line on the density plot. In the knee plot, the ‘mixed’ population shown in grey contains some cells that are filtered out and some that remain and can be filtered further in the next filter.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<Classifier
id='classifier'
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key]?.enabled}
/>
)}
/>
),
},
{
key: 'cellSizeDistribution',
name: getUserFriendlyQCStepName('cellSizeDistribution'),
description: 'The number of unique molecular identifiers (#UMIs) per cell distinguishes real cells (high #UMIs per cell) from empty droplets (low #UMIs per cell). This filter is used to detect empty droplets and fine-tunes the Classifier filter. In some datasets this filter might be used instead of the Classifier filter.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<CellSizeDistribution
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'mitochondrialContent',
name: getUserFriendlyQCStepName('mitochondrialContent'),
description: 'A high percentage of mitochondrial reads is an indicator of cell death. UMIs mapped to mitochondrial genes are calculated as a percentage of total UMIs. The percentage of mitochondrial reads depends on the cell type. The typical cut-off range is 10-50%, with the default cut-off set to 3 median absolute deviations above the median.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<MitochondrialContent
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'numGenesVsNumUmis',
name: getUserFriendlyQCStepName('numGenesVsNumUmis'),
description: 'The number of expressed genes per cell and number of UMIs per cell is expected to have a linear relationship. This filter is used to exclude outliers (e.g. many UMIs originating from only a few genes).',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<GenesVsUMIs
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'doubletScores',
name: getUserFriendlyQCStepName('doubletScores'),
description:
<span>
Droplets may contain more than one cell.
In such cases, it is not possible to distinguish which reads came from which cell.
Such “cells” cause problems in the downstream analysis as they appear as an intermediate type.
“Cells” with a high probability of being a doublet should be excluded.
The probability of being a doublet is calculated using ‘scDblFinder’.
For each sample, the default threshold tries to minimize both the deviation in the
expected number of doublets and the error of a trained classifier. For more details see
{' '}
<a href='https://bioconductor.org/packages/devel/bioc/vignettes/scDblFinder/inst/doc/scDblFinder.html#thresholding' rel='noreferrer' target='_blank'>scDblFinder thresholding</a>
.
</span>,
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<DoubletScores
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'dataIntegration',
name: getUserFriendlyQCStepName('dataIntegration'),
multiSample: false,
render: (key, expId) => (
<DataIntegration
experimentId={expId}
key={key}
onConfigChange={() => onConfigChange(key)}
disableDataIntegration={sampleKeys && sampleKeys.length === 1}
/>
),
},
{
key: 'configureEmbedding',
name: getUserFriendlyQCStepName('configureEmbedding'),
description: 'Cells and clusters are visualized in a 2-dimensional embedding. The UMAP or t-SNE embedding plot can be selected and customized. The clustering method (e.g. Louvain) and resolution are set here.',
multiSample: false,
render: (key, expId) => (
<ConfigureEmbedding
experimentId={expId}
key={key}
onConfigChange={() => onConfigChange(key)}
/>
),
},
];
const currentStep = steps[stepIdx];
// check that the order and identities of the QC steps above match
// the canonical representation
console.assert(_.isEqual(qcSteps, steps.map((s) => s.key)));
const changeStepId = (newStepIdx) => {
setStepIdx(newStepIdx);
};
const renderRunButton = (runMessage, useSmall = true) => (
<Tooltip title='Run data processing with the changed settings'>
<Button
data-testid='runFilterButton'
type='primary'
onClick={() => setRunQCModalVisible(true)}
style={{ minWidth: '80px' }}
size={useSmall ? 'small' : 'medium'}
>
{runMessage}
</Button>
</Tooltip>
);
const renderRunOrDiscardButtons = () => {
if (pipelineHadErrors) {
return renderRunButton('Run Data Processing', false);
} if (changesOutstanding) {
return (
<Alert
message={<>Your new settings are not yet applied</>}
type='info'
showIcon
style={{
paddingTop: '3px', paddingBottom: '3px', paddingLeft: '10px', paddingRight: '10px',
}}
action={(
<Space size='small'>
{renderRunButton('Run', true)}
<Tooltip title='Discard your changes since the last run'>
<Button
id='discardChangesButton'
data-testid='discardChangesButton'
type='primary'
onClick={() => { dispatch(discardChangedQCFilters()); }}
style={{ width: '80px' }}
size='small'
>
Discard
</Button>
</Tooltip>
</Space>
)}
/>
);
}
};
// Called when the pipeline is triggered to be run by the user.
const onPipelineRun = () => {
setRunQCModalVisible(false);
dispatch(runQC(experimentId));
};
const renderTitle = () => {
const stepEnabled = processingConfig[currentStep.key]?.enabled;
const prefiltered = processingConfig[currentStep.key]?.prefiltered || false;
return (
<>
<Row justify='space-between'>
<Col style={{ paddingBottom: '8px' }}>
{/* Should be just wide enough that no ellipsis appears */}
<Row>
<Col style={{ paddingBottom: '8px', paddingRight: '8px' }}>
<Space size='small'>
<Select
value={stepIdx}
onChange={(idx) => {
changeStepId(idx);
}}
style={{ fontWeight: 'bold', width: 290 }}
placeholder='Jump to a step...'
>
{
steps.map(
({ name, key }, i) => {
const disabledByPipeline = (pipelineNotFinished && !isStepComplete(key));
const text = `${i + 1}. ${name}`;
return (
<Option
value={i}
key={key}
disabled={
disabledByPipeline
}
>
{processingConfig[key]?.enabled === false ? (
<>
{/* disabled */}
<Text
type='secondary'
>
<CloseOutlined />
</Text>
<span
style={{ marginLeft: '0.25rem', textDecoration: 'line-through' }}
>
{text}
</span>
</>
) : !disabledByPipeline ? (
<>
{/* finished */}
<Text
type='success'
>
<CheckOutlined />
</Text>
<span
style={{ marginLeft: '0.25rem' }}
>
{text}
</span>
</>
) : pipelineRunning && !isStepComplete(key) ? (
<>
{/* incomplete */}
<Text
type='warning'
strong
>
<EllipsisOutlined />
</Text>
<span style={{ marginLeft: '0.25rem' }}>{text}</span>
</>
) : pipelineNotFinished
&& !pipelineRunning
&& !isStepComplete(key) ? (
<>
<Text
type='danger'
strong
>
<WarningOutlined />
</Text>
<span style={{ marginLeft: '0.25rem' }}>{text}</span>
</>
) : <></>}
</Option>
);
},
)
}
</Select>
{currentStep.description && (
<Tooltip title={currentStep.description}>
<Button icon={<InfoCircleOutlined />} />
</Tooltip>
)}
{currentStep.multiSample && (
<Tooltip title={`${!stepEnabled ? 'Enable this filter' : 'Disable this filter'}`}>
<Button
disabled={prefiltered}
data-testid='enableFilterButton'
onClick={async () => {
await dispatch(saveProcessingSettings(experimentId, currentStep.key));
if (!processingConfig.meta.saveSettingsError) {
dispatch(setQCStepEnabled(
currentStep.key, !stepEnabled,
));
}
}}
>
{
stepEnabled ? 'Disable' : 'Enable'
}
</Button>
</Tooltip>
)}
</Space>
</Col>
<Col>
{renderRunOrDiscardButtons()}
</Col>
</Row>
</Col>
<Col>
<Row align='middle' justify='space-between'>
<Col>
<StatusIndicator
experimentId={experimentId}
allSteps={steps}
currentStep={stepIdx}
completedSteps={completedSteps}
/>
<Space size='small'>
<Tooltip title='Previous'>
<Button
data-testid='pipelinePrevStep'
disabled={stepIdx === 0}
icon={<LeftOutlined />}
onClick={() => changeStepId(Math.max(stepIdx - 1, 0))}
size='small'
/>
</Tooltip>
{stepIdx !== steps.length - 1 ? (
<Tooltip title='Next'>
<Button
data-testid='pipelineNextStep'
onClick={() => {
const newStepIdx = Math.min(stepIdx + 1, steps.length - 1);
changeStepId(newStepIdx);
}}
disabled={steps[stepIdx + 1] !== undefined
&& pipelineNotFinished
&& !isStepComplete(steps[stepIdx + 1].key)}
icon={<RightOutlined />}
size='small'
/>
</Tooltip>
)
: (
<Tooltip title='Finish QC'>
<Button
type='primary'
disabled={steps[stepIdx + 1]
&& pipelineNotFinished
&& !isStepComplete(steps[stepIdx + 1].key)}
icon={<CheckOutlined />}
size='small'
onClick={() => navigateTo(modules.DATA_EXPLORATION, { experimentId })}
/>
</Tooltip>
)}
</Space>
</Col>
</Row>
</Col>
</Row>
</>
);
};
const renderContent = () => {
const { render, key } = currentStep;
if (pipelineRunning && !isStepComplete(key)) {
return <div><PipelineRedirectToDataProcessing pipelineStatus='runningStep' /></div>;
}
if (pipelineNotFinished && !isStepComplete(key)) {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<PlatformError
description={'We don\'t have anything for this step.'}
reason='The last run ended before this step could be finished.'
onClick={() => { onPipelineRun(); }}
/>
</div>
</div>
);
}
if (samples.meta.loading
|| processingConfig.meta.loading
|| Object.keys(processingConfig).length <= 1
) {
return (
<div className='preloadContextSkeleton' style={{ padding: '16px 0px' }}>
<Skeleton.Input style={{ width: '100%', height: 400 }} active />
</div>
);
}
if (samples.meta.error || processingConfig.meta.loadingSettingsError) {
return (
<PlatformError
error={samples.meta.error.toString()
|| processingConfig.meta.loadingSettingsError.toString()}
onClick={() => { dispatch(loadSamples(experimentId)); }}
/>
);
}
return (
<Space direction='vertical' style={{ width: '100%' }}>
{
'enabled' in processingConfig[key] && !processingConfig[key].enabled ? (
<Alert
message={processingConfig[key]?.prefiltered
? 'This filter is disabled because the one of the sample(s) is pre-filtered. Click \'Next\' to continue processing your data.'
: 'This filter is disabled. You can still modify and save changes, but the filter will not be applied to your data.'}
type='info'
showIcon
/>
) : <></>
}
{render(key, experimentId)}
</Space>
);
};
return (
<>
<Header
experimentId={experimentId}
experimentData={experimentData}
title='Data Processing'
/>
<Space direction='vertical' style={{ width: '100%', padding: '0 10px' }}>
{runQCModalVisible && (
<Modal
title='Run data processing with the changed settings'
visible
onCancel={() => setRunQCModalVisible(false)}
onOk={() => onPipelineRun()}
okText='Start'
>
<p>
This might take several minutes.
Your navigation within Cellenics will be restricted during this time.
Do you want to start?
</p>
</Modal>
)}
<Card
title={renderTitle()}
>
{renderContent()}
</Card>
</Space>
</>
);
}
Example #17
| Source File: EditableField.jsx From ui with MIT License | 4 votes |
|
EditableField = (props) => {
const {
value,
deleteEnabled,
showEdit,
onAfterSubmit,
onAfterCancel,
renderBold,
defaultEditing,
validationFunc,
onEditing,
} = props;
const [editing, setEditing] = useState(defaultEditing);
const [editedValue, setEditedValue] = useState(value);
const [isValid, setIsValid] = useState(true);
const saveButton = useRef(null);
const editButton = useRef(null);
useEffect(() => {
setEditedValue(value);
}, [value]);
useEffect(() => {
if (!onEditing) return;
onEditing(editing);
}, [editing]);
const deleteEditableField = (e) => {
e.stopPropagation();
props.onDelete(e, editedValue);
};
const onKeyDown = (e) => {
if (e.key === 'Enter') {
onSubmit(e);
}
if (e.key === 'Escape') {
onCancel(e);
}
};
const onChange = (e) => {
const { value: newValue } = e.target;
if (validationFunc) {
const valid = value === newValue || validationFunc(newValue);
// Validation func may not return false on invalid
setIsValid(valid === true);
}
setEditedValue(newValue);
};
const onSubmit = (e) => {
e.stopPropagation();
if (!isValid) return null;
onAfterSubmit(editedValue);
toggleEditing(e);
};
const onCancel = (e) => {
e.stopPropagation();
if (!isValid) setIsValid(true);
setEditedValue(value);
toggleEditing(e);
onAfterCancel();
};
const toggleEditing = (e) => {
e.stopPropagation();
setEditing(!editing);
};
const renderEditState = () => {
if (editing) {
return (
<>
<Input
data-testid='editableFieldInput'
autoFocus
onChange={onChange}
size='small'
defaultValue={editedValue}
onKeyDown={onKeyDown}
/>
<Tooltip placement='top' title='Save' mouseLeaveDelay={0} ref={saveButton}>
<Button
aria-label='Save'
size='small'
shape='circle'
icon={<CheckOutlined />}
onClick={(e) => {
saveButton.current.onMouseLeave();
onSubmit(e);
}}
/>
</Tooltip>
<Tooltip placement='top' title='Cancel' mouseLeaveDelay={0}>
<Button aria-label='Cancel' size='small' shape='circle' icon={<CloseOutlined />} onClick={onCancel} />
</Tooltip>
</>
);
}
return (
<>
{renderBold ? <strong>{value}</strong> : <span>{value}</span>}
{
showEdit
? (
<Tooltip placement='top' title='Edit' mouseLeaveDelay={0} ref={editButton}>
<Button
aria-label='Edit'
size='small'
shape='circle'
icon={<EditOutlined />}
onClick={(e) => {
editButton.current.onMouseLeave();
toggleEditing(e);
}}
/>
</Tooltip>
) : <></>
}
</>
);
};
return (
<>
<Space direction='vertical'>
<Space align='start'>
{renderEditState()}
{
deleteEnabled
? (
<Tooltip placement='top' title='Delete' mouseLeaveDelay={0}>
<Button
data-test-class={integrationTestConstants.classes.EDITABLE_FIELD_DELETE_BUTTON}
aria-label='Delete'
size='small'
shape='circle'
icon={<DeleteOutlined />}
onClick={deleteEditableField}
/>
</Tooltip>
) : <></>
}
</Space>
{!isValid ? (
<Text type='danger' style={{ fontSize: 12, fontWeight: 600 }}>
{validationFunc(editedValue) === false ? 'Invalid input' : validationFunc(editedValue)}
</Text>
) : <></>}
</Space>
</>
);
}
Example #18
| Source File: App.js From react-perspective-cropper with MIT License | 4 votes |
|
App = () => {
const [cropState, setCropState] = useState()
const [img, setImg] = useState()
const cropperRef = useRef()
const onDragStop = useCallback((s) => setCropState(s), [])
const onChange = useCallback((s) => setCropState(s), [])
const doSomething = async () => {
console.log('CropState', cropState)
try {
const res = await cropperRef.current.done({
preview: true,
filterCvParams: {
thMeanCorrection: 13,
thMode: window.cv.ADAPTIVE_THRESH_GAUSSIAN_C
}
})
console.log('Cropped and filtered image', res)
} catch (e) {
console.log('error', e)
}
}
const onImgSelection = async (e) => {
if (e.fileList && e.fileList.length > 0) {
// it can also be a http or base64 string for example
setImg(e.fileList[0].originFileObj)
}
}
const draggerProps = {
name: 'file',
multiple: false,
onChange: onImgSelection
}
return (
<div className='root-container'>
<Header />
<div className='content-container'>
{cropState && (
<div className='buttons-container'>
<Button onClick={doSomething} icon={<CheckOutlined />}>
Done
</Button>
<Button
onClick={() => {
cropperRef.current.backToCrop()
}}
>
Back
</Button>
<Button
onClick={() => {
setImg(undefined)
setCropState()
}}
>
Reset
</Button>
</div>
)}
<Cropper
openCvPath='./opencv/opencv.js'
ref={cropperRef}
image={img}
onChange={onChange}
onDragStop={onDragStop}
maxWidth={window.innerWidth - 10}
/>
{cropState?.loading && <Spin />}
{!img && (
<Dragger {...draggerProps}>
<p>
<PlusOutlined />
</p>
<p>Upload</p>
</Dragger>
)}
</div>
</div>
)
}
Example #19
| Source File: OfflineSession.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const columns = [{
title: '序号',
dataIndex: 'id',
key: 'id',
render: (id, record, index) => {
return index + 1;
},
}, {
title: '来源IP',
dataIndex: 'clientIp',
key: 'clientIp'
}, {
title: '接入方式',
dataIndex: 'mode',
key: 'mode',
render: (text) => {
return (
<Tag color={MODE_COLORS[text]}>{text}</Tag>
)
}
}, {
title: '用户昵称',
dataIndex: 'creatorName',
key: 'creatorName'
}, {
title: '资产名称',
dataIndex: 'assetName',
key: 'assetName'
}, {
title: '连接协议',
dataIndex: 'protocol',
key: 'protocol',
render: (text, record) => {
const title = `${record.username}@${record.ip}:${record.port}`;
return (
<Tooltip title={title}>
<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>
</Tooltip>
)
}
}, {
title: '接入时间',
dataIndex: 'connectedTime',
key: 'connectedTime',
render: (text, record) => {
return (
<Tooltip title={text}>
{dayjs(text).fromNow()}
</Tooltip>
)
}
}, {
title: '接入时长',
dataIndex: 'connectedTime',
key: 'connectedTime',
render: (text, record) => {
return differTime(new Date(record['connectedTime']), new Date(record['disconnectedTime']));
}
},
{
title: '操作',
key: 'action',
render: (text, record) => {
let disabled = true;
if (record['recording'] && record['recording'] === '1') {
disabled = false
}
return (
<div>
<Button type="link" size='small'
disabled={disabled}
onClick={() => this.showPlayback(record)}>回放</Button>
<Button type="link" size='small'
onClick={() => {
confirm({
title: '您确定要禁止该IP访问本系统吗?',
content: '',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: async () => {
// 向后台提交数据
let formData = {
ip: record['clientIp'],
rule: 'reject',
priority: 99,
}
const result = await request.post('/securities', formData);
if (result.code === 1) {
message.success('禁用成功');
} else {
message.error(result.message, 10);
}
}
});
}}>禁用IP</Button>
<Button type="link" size='small' danger onClick={() => {
confirm({
title: '您确定要删除此会话吗?',
content: '',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.del(record.id)
}
});
}}>删除</Button>
</div>
)
},
}
];
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
selectedRowKeys: this.state.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({selectedRowKeys});
},
};
const hasSelected = selectedRowKeys.length > 0;
const userOptions = this.state.users.map(d => <Select.Option key={d.id}
value={d.id}>{d.nickname}</Select.Option>);
const assetOptions = this.state.assets.map(d => <Select.Option key={d.id}
value={d.id}>{d.name}</Select.Option>);
return (
<>
<Content className="site-layout-background page-content">
<div style={{marginBottom: 20}}>
<Row justify="space-around" align="middle" gutter={24}>
<Col span={4} key={1}>
<Title level={3}>离线会话列表</Title>
</Col>
<Col span={20} key={2} style={{textAlign: 'right'}}>
<Space>
<Search
ref={this.inputRefOfClientIp}
placeholder="来源IP"
allowClear
onSearch={this.handleSearchByClientIp}
/>
<Select
style={{width: 140}}
showSearch
value={this.state.queryParams.userId}
placeholder='用户昵称'
onSearch={this.handleSearchByNickname}
onChange={this.handleChangeByUserId}
filterOption={false}
allowClear
>
{userOptions}
</Select>
<Select
style={{width: 140}}
showSearch
value={this.state.queryParams.assetId}
placeholder='资产名称'
onSearch={this.handleSearchByAssetName}
onChange={this.handleChangeByAssetId}
filterOption={false}
>
{assetOptions}
</Select>
<Select onChange={this.handleChangeByRead}
value={this.state.queryParams.reviewed ? this.state.queryParams.reviewed : ''}
style={{width: 100}}>
<Select.Option value="">全部会话</Select.Option>
<Select.Option value="true">只看已读</Select.Option>
<Select.Option value="false">只看未读</Select.Option>
</Select>
<Select onChange={this.handleChangeByProtocol}
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
style={{width: 100}}>
<Select.Option value="">全部协议</Select.Option>
<Select.Option value="rdp">rdp</Select.Option>
<Select.Option value="ssh">ssh</Select.Option>
<Select.Option value="vnc">vnc</Select.Option>
<Select.Option value="telnet">telnet</Select.Option>
<Select.Option value="kubernetes">kubernetes</Select.Option>
</Select>
<Tooltip title='重置查询'>
<Button icon={<UndoOutlined/>} onClick={() => {
this.inputRefOfClientIp.current.setValue('');
this.loadTableData({
pageIndex: 1,
pageSize: 10,
protocol: ''
})
}}>
</Button>
</Tooltip>
<Divider type="vertical"/>
<Tooltip title="刷新列表">
<Button icon={<SyncOutlined/>} onClick={() => {
this.loadTableData(this.state.queryParams)
}}>
</Button>
</Tooltip>
<Tooltip title="全部标为已阅">
<Button icon={<CheckOutlined />}
loading={this.state.reviewedAllBtnLoading}
onClick={this.handleAllReviewed}>
</Button>
</Tooltip>
<Tooltip title="标为已阅">
<Button disabled={!hasSelected} icon={<EyeOutlined />}
loading={this.state.reviewedBtnLoading}
onClick={this.handleReviewed}>
</Button>
</Tooltip>
<Tooltip title="标为未阅">
<Button disabled={!hasSelected} icon={<EyeInvisibleOutlined />}
loading={this.state.unreviewedBtnLoading}
onClick={this.handleUnreviewed}>
</Button>
</Tooltip>
<Tooltip title="批量删除">
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
loading={this.state.delBtnLoading}
onClick={() => {
const content = <div>
您确定要删除选中的<Text style={{color: '#1890FF'}}
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
</div>;
confirm({
icon: <ExclamationCircleOutlined/>,
content: content,
onOk: () => {
this.batchDelete()
},
onCancel() {
},
});
}}>
</Button>
</Tooltip>
<Tooltip title="清空">
<Button type="primary" danger icon={<ClearOutlined/>}
loading={this.state.clearBtnLoading}
onClick={() => {
const content = <Text style={{color: 'red'}}
strong>您确定要清空全部的离线会话吗？</Text>;
confirm({
icon: <ExclamationCircleOutlined/>,
content: content,
okType: 'danger',
onOk: this.clearSession,
onCancel() {
},
});
}}>
</Button>
</Tooltip>
</Space>
</Col>
</Row>
</div>
<Table rowSelection={rowSelection}
dataSource={this.state.items}
columns={columns}
position={'both'}
pagination={{
showSizeChanger: true,
current: this.state.queryParams.pageIndex,
pageSize: this.state.queryParams.pageSize,
onChange: this.handleChangPage,
total: this.state.total,
showTotal: total => `总计 ${total} 条`
}}
loading={this.state.loading}
rowClassName={(record, index) => {
return record['reviewed'] ? '' : 'unreviewed';
}}
/>
{
this.state.playbackVisible ?
<Modal
className='modal-no-padding'
title={`会话回放 来源IP：${this.state.selectedRow['clientIp']} 用户昵称：${this.state.selectedRow['creatorName']} 资产名称：${this.state.selectedRow['assetName']} 网络：${this.state.selectedRow['username']}@${this.state.selectedRow['ip']}:${this.state.selectedRow['port']}`}
centered={true}
visible={this.state.playbackVisible}
onCancel={this.hidePlayback}
width={window.innerWidth * 0.8}
footer={null}
destroyOnClose
maskClosable={false}
>
{
this.state.selectedRow['mode'] === 'native' || this.state.selectedRow['mode'] === 'terminal' ?
<iframe
title='recording'
style={{
width: '100%',
// height: this.state.iFrameHeight,
overflow: 'visible'
}}
onLoad={() => {
// constant obj = ReactDOM.findDOMNode(this);
// this.setState({
// "iFrameHeight": obj.contentWindow.document.body.scrollHeight + 'px'
// });
}}
ref="iframe"
src={'./asciinema.html?sessionId=' + this.state.selectedRow['id']}
width="100%"
height={window.innerHeight * 0.8}
frameBorder="0"
/>
: <Playback sessionId={this.state.selectedRow['id']}/>
}
</Modal> : undefined
}
</Content>
</>
);
}
Example #20
| Source File: ParticipantsList.js From react-portal with MIT License | 4 votes |
|
ParticipantsList = props => {
const [participants, setParticipants] = useState([]);
const [allParticipants, setAllParticipants] = useState([]);
const [viewDrawer, setViewDrawer] = useState(false);
const [participantId, setParticipantId] = useState(null);
const [eId, setEID] = useState(null);
const [refresh, toggleRefresh] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [branch, setBranch] = useState(null);
const [year, setYear] = useState(null);
const [query, setQuery] = useState(null);
const [page, setPage] = useState(1);
const [count, setCount] = useState(0);
const userData = getRole();
// const [allEvents, setAllEvents] = useState([]);
useEffect(() => {
(async () => {
setIsLoading(true);
try {
const { data } = await getParticipantsService();
setAllParticipants(data.participants);
setParticipants(data.participants);
setCount(data.totalParticipants);
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
})();
}, [refresh]);
const handleEventChange = async id => {
setIsLoading(true);
try {
if (id === "All") {
setParticipants(allParticipants);
setCount(data.totalParticipants);
setBranch(null);
setYear(null);
setEID(null);
} else {
setEID(id);
let params = { eid: id };
if (branch) params = { ...params, branch };
if (year) params = { ...params, year };
const { data } = await getParticipantsService(params);
setParticipants(data.participants);
setCount(data.totalParticipants);
}
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
};
const handleQuery = async val => {
setQuery(val);
setIsLoading(true);
try {
let params = { eid: eId, query: val, branch, year };
const { data } = await getParticipantsService(params);
setParticipants(data.participants);
setCount(data.totalParticipants);
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
};
const handleBranchChange = async val => {
setIsLoading(true);
setBranch(val);
try {
let params = { branch: val };
if (year) params = { ...params, year };
if (query) params = { ...params, query };
if (eId) params = { ...params, eid: eId };
const { data } = await getParticipantsService(params);
setParticipants(data.participants);
setCount(data.totalParticipants);
setIsLoading(false);
} catch (error) {
_notification("warning", "Error", error.message);
}
};
const handleYearChange = async val => {
setIsLoading(true);
setYear(val);
try {
let params = { year: val };
if (branch) params = { ...params, branch };
if (query) params = { ...params, query };
if (eId) params = { ...params, eid: eId };
const { data } = await getParticipantsService(params);
setParticipants(data.participants);
setCount(data.totalParticipants);
setIsLoading(false);
} catch (error) {
_notification("warning", "Error", error.message);
}
};
const handleParticipantRevoke = async id => {
try {
const res = await revokeParticipantServices(id);
if (res.message === "success") {
toggleRefresh(!refresh);
_notification(
"success",
"Success",
"Toggle Participant Revoke"
);
} else {
_notification("warning", "Error", res.message);
}
} catch (err) {
_notification("error", "Error", err.message);
}
};
const handleParticipantDelete = async id => {
try {
const res = await deleteParticipantServices(id);
if (res.message === "success") {
toggleRefresh(!refresh);
_notification("success", "Success", "Participant deleted");
} else {
_notification("warning", "Error", res.message);
}
} catch (error) {
_notification("error", "Error", error.message);
}
};
const columns = [
{
title: "#",
dataIndex: "key",
key: "key",
render: (value, item, index) => (page - 1) * 10 + index + 1
},
{
title: "Name",
dataIndex: "name",
key: "name",
sorter: (a, b) => a.name[0].localeCompare(b.name[0]),
render: text => (
<Link
to="#"
onClick={() => {
setViewDrawer(true);
setParticipantId(text[1]);
}}
>
{text[0]}
</Link>
)
},
{
title: "Email",
dataIndex: "email",
key: "email"
},
{
title: "Branch",
dataIndex: "branch",
key: "branch",
sorter: (a, b) => a.branch.localeCompare(b.branch)
},
{
title: "Year",
dataIndex: "year",
key: "year",
sorter: (a, b) => a.year - b.year
},
{
title: "Phone",
dataIndex: "phone",
key: "phone"
},
{
title: "Action",
dataIndex: "action",
key: "action",
role: "lead",
render: action => (
<span>
<Popconfirm
title="Do you want to toggle user revoke?"
onConfirm={() => handleParticipantRevoke(action[1])}
okText="Yes"
cancelText="No"
>
{action[0] ? (
<CloseOutlined style={{ color: "#F4B400" }} />
) : (
<CheckOutlined style={{ color: "green" }} />
)}
</Popconfirm>
{userData && userData.role === "lead" ? (
<>
<Divider type="vertical" />
<Popconfirm
title="Are you sure delete this user?"
onConfirm={() =>
handleParticipantDelete(action[1])
}
okText="Yes"
cancelText="No"
>
<DeleteOutlined style={{ color: "#DB4437" }} />
</Popconfirm>
</>
) : null}
</span>
)
}
].filter(
item =>
(userData.role !== "lead" && item.role !== "lead") ||
userData.role === "lead"
);
const data = participants
? participants.map((event, id) => {
const { _id, name, email, branch, phone, year, isRevoked } =
event;
return {
index: ++id,
key: _id,
name: [name, _id],
email,
branch,
year,
phone,
action: [isRevoked, _id]
};
})
: null;
return (
<>
<PageTitle title="Participants" bgColor="#4285F4" />
<div className="table-wrapper-card">
<ParticipantsOptions
onEventChange={handleEventChange}
onQuery={handleQuery}
onBranchChange={handleBranchChange}
onYearChange={handleYearChange}
refresh={refresh}
toggleRefresh={toggleRefresh}
/>
<Card
title={`Total Count: ${count}`}
style={{ padding: 0, width: "100%", overflowX: "auto" }}
>
<Table
loading={isLoading}
columns={columns}
dataSource={data}
onChange={(d, e) => console.log(d, e)}
pagination={{
onChange(current) {
setPage(current);
},
defaultPageSize: 500
}}
/>
</Card>
</div>
<Drawer
title="Participant Information"
placement="right"
closable={true}
width="40%"
destroyOnClose={true}
onClose={() => setViewDrawer(false)}
visible={viewDrawer}
>
<ParticipantDetail participantId={participantId} />
</Drawer>
</>
);
}
Example #21
| Source File: challengesTagSortList.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Collapse bordered={false} defaultActiveKey={Object.keys(this.props.tag)}>
{
this.props.selectedTags.map((category) => {
const key = category
const value = this.props.tag[category]
return (
<Panel header={<span style={{ color: "#177ddc", fontSize: "120%", textTransform: "capitalize", textAlign: "center", fontWeight: 700 }}>{key} - <span style={{ color: "#d89614" }}>{"(" + String(value.length) + ")"}</span> </span>} key={key}>
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
gutter: 20
}}
dataSource={value}
key={key + "cat"}
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%" }}>Oops, no challenges have been created.</h1>
</div>
)
}}
renderItem={item => {
if (!("firstBlood" in item)) {
item.firstBlood = "No Solves Yet!"
}
if (item.requires && !item.requiresSolved && this.props.permissions < 2) {
return (
<List.Item key={item._id}>
<Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
<div id={item._id}>
<Card
type="inner"
bordered={true}
className="card-design"
>
<Meta
description={
<div className="card-design-body" >
<LockOutlined className="disabled-style"/>
<h1 className="card-design-name" >{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Tooltip>
</List.Item>
)
}
else if (item.solved === false) {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.props.loadChallengeDetails(item._id, item.solved); }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
>
<Meta
description={
<div className="card-design-body">
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.props.loadingChallenge && this.props.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
else {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.props.loadChallengeDetails(item._id, item.solved);}}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design solved hover"
>
<Meta
description={
<div className="card-design-body">
<CheckOutlined className="correct-style"/>
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.props.loadingChallenge && this.props.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
}
}
/>
</Panel>
)
})
}
</Collapse>
)
}
Example #22
| Source File: challengesTagSort.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="pageTransition" style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title="Hint"
visible={this.state.hintModal}
onCancel={() => { this.setState({ hintModal: false }) }}
footer={null}
>
<p>{this.state.hintContent}</p>
</Modal>
<Modal
title={null}
visible={this.state.challengeModal}
footer={null}
bodyStyle={{ textAlign: "center" }}
onCancel={() => { this.setState({ challengeModal: false }); this.props.history.push("/Challenges/" + this.props.category); }}
>
<Tabs defaultActiveKey="challenge">
<TabPane
tab={<span><ProfileOutlined /> Challenge</span>}
key="challenge"
>
{this.state.challengeWriteup !== "" && this.state.challengeWriteup !== "CompleteFirst" && (
<Tooltip title="View writeups for this challenge">
<Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
</Tooltip>
)}
{this.state.challengeWriteup === "" && (
<Tooltip title="Writeups are not available for this challenge">
<Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
</Tooltip>
)}
{this.state.challengeWriteup === "CompleteFirst" && (
<Tooltip title="Writeups are available for this challenge but you must complete the challenge first to view it.">
<Button shape="circle" size="large" style={{ position: "absolute", right: "2ch", color: "#13a8a8" }} icon={<SolutionOutlined />} />
</Tooltip>
)}
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<div style={{ display: "flex", justifyContent: "center" }}>
<h1 style={{ fontSize: "150%", maxWidth: "35ch", whiteSpace: "initial" }}>{this.state.viewingChallengeDetails.name}
<Tooltip title="Copy challenge link to clipboard.">
<LinkOutlined style={{ color: "#1890ff", marginLeft: "0.5ch" }} onClick={
async () => {
await navigator.clipboard.writeText(window.location.href);
message.success("Challenge link copied to clipboard.")
}} /></Tooltip>
</h1>
</div>
<div>
{this.state.challengeTags}
</div>
<h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.viewingChallengeDetails.points}</h2>
<div className="challengeModal">
<MarkdownRender >{this.state.viewingChallengeDetails.description}</MarkdownRender>
</div>
<div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
{this.state.challengeHints}
</div>
</Suspense>
<div style={{ display: "flex" }}>
<SubmitFlagForm submitFlag={this.submitFlag.bind(this)} currentChallengeStatus={this.state.currentChallengeStatus} currentChallengeSolved={this.state.currentChallengeSolved}></SubmitFlagForm>
</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "-1vh" }}>
<p>Challenge Author: <em>{this.state.viewingChallengeDetails.author}</em></p>
<p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.viewingChallengeDetails.max_attempts}</p>
</div>
</TabPane>
<TabPane
tab={<span><UnlockOutlined /> Solves ({this.state.viewingChallengeDetails.solves.length}) </span>}
key="solves"
>
<List
itemLayout="horizontal"
dataSource={this.state.viewingChallengeDetails.solves}
locale={{
emptyText: (
<div>
<SmileOutlined style={{ fontSize: "500%" }} />
<br />
<br />
<p style={{ fontSize: "150%" }}>No solves yet. Maybe you can be the first!</p>
</div>
)
}}
renderItem={item => {
return (
<List.Item key={item}>
<List.Item.Meta
avatar={<Avatar src={"/static/profile/" + item + ".webp"} />}
title={<Link to={"/Profile/" + item}><a style={{ fontSize: "110%", fontWeight: 700 }} onClick={() => { this.setState({ challengeModal: false }) }}>{item}</a></Link>}
/>
</List.Item>
)
}
} />
</TabPane>
</Tabs>
</Modal>
<Divider style={{ marginTop: "0px" }}>Select Tags</Divider>
<span className="tag-holder" >
{Object.keys(this.state.tag).map((tag) => {
return (
<CheckableTag className="tag-select-style" key={tag} checked={this.state.selectedTags.indexOf(tag) !== -1}
onChange={(checked) => {
let selectedTags = this.state.selectedTags
if (!checked) selectedTags.splice(selectedTags.indexOf(tag), 1)
else selectedTags.push(tag)
if (selectedTags.length === 0) this.sortCats(this.state.sortType, true)
this.setState({ selectedTags: selectedTags })
}}>{tag} <span style={{ color: "#d89614" }}>({this.state.tag[tag].length})</span></CheckableTag>
)
})}
</span>
<Divider />
{this.state.tag && this.state.selectedTags.length > 0 ? (
<ChallengesTagSortList tag={this.state.tag} selectedTags={this.state.selectedTags} permissions={this.props.permissions} loadChallengeDetails={this.loadChallengeDetails.bind(this)} loadingChallenge={this.state.loadingChallenge} currentChallenge={this.state.currentChallenge} />
) : (
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
gutter: 20
}}
dataSource={this.state.challenges}
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%" }}>No challenges have been released yet</h1>
</div>
)
}}
renderItem={item => {
if (item.solves.length === 0) item.firstBlood = "No First Blood Yet!"
else {
if (this.props.disableNonCatFB) {
item.firstBlood = "No First blood Yet"
for (let i = 0; i < item.solves.length; i++) {
if (this.props.userCategories[item.solves[i]] !== "none") {
item.firstBlood = item.solves[i]
break
}
}
}
else item.firstBlood = item.solves[0]
}
if (item.requires && !item.requiresSolved && this.props.permissions < 2) {
return (
<List.Item key={item._id}>
<Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
<div id={item._id}>
<Card
type="inner"
bordered={true}
className="card-design"
>
<Meta
description={
<div className="card-design-body" >
<LockOutlined className="disabled-style" />
<h1 className="card-design-name" >{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Tooltip>
</List.Item>
)
}
else if (!item.solved) {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved, item.firstBlood) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
>
<Meta
description={
<div className="card-design-body">
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
else {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design solved hover"
>
<Meta
description={
<div className="card-design-body">
<CheckOutlined className="correct-style" />
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
}
}
/>)}
</Layout>
);
}
