reactstrap#Progress JavaScript Examples
The following examples show how to use
reactstrap#Progress.
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: Progress.jsx From nodejs-rest-api-boilerplate with MIT License | 6 votes |
|
render() {
return (
<>
<Col lg="5">
<h3 className="h4 text-success font-weight-bold mb-4">
Progress bars
</h3>
<div className="progress-wrapper">
<div className="progress-info">
<div className="progress-label">
<span>Task completed</span>
</div>
<div className="progress-percentage">
<span>40%</span>
</div>
</div>
<Progress max="100" value="25" color="default" />
</div>
<div className="progress-wrapper">
<div className="progress-info">
<div className="progress-label">
<span>Task completed</span>
</div>
<div className="progress-percentage">
<span>60%</span>
</div>
</div>
<Progress max="100" value="60" />
</div>
</Col>
</>
);
}
Example #2
| Source File: Widget04.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
const { className, cssModule, header, icon, color, value, children, invert, ...attributes } = this.props;
// demo purposes only
const progress = { style: '', color: color, value: value };
const card = { style: '', bgColor: '', icon: icon };
if (invert) {
progress.style = 'progress-white';
progress.color = '';
card.style = 'text-white';
card.bgColor = 'bg-' + color;
}
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
progress.style = classNames('progress-xs mt-3 mb-0', progress.style);
return (
<Card className={classes} {...attributes}>
<CardBody>
<div className="h1 text-muted text-right mb-2">
<i className={card.icon}></i>
</div>
<div className="h4 mb-0">{header}</div>
<small className="text-muted text-uppercase font-weight-bold">{children}</small>
<Progress className={progress.style} color={progress.color} value={progress.value} />
</CardBody>
</Card>
);
}
Example #3
| Source File: Widget01.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
const { className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes } = this.props;
// demo purposes only
const progress = { style: '', color: color, value: value };
const card = { style: '', bgColor: '' };
if (variant === 'inverse') {
progress.style = 'progress-white';
progress.color = '';
card.style = 'text-white';
card.bgColor = 'bg-' + color;
}
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
progress.style = classNames('progress-xs my-3', progress.style);
return (
<Card className={classes} {...attributes}>
<CardBody>
<div className="h4 m-0">{header}</div>
<div>{mainText}</div>
<Progress className={progress.style} color={progress.color} value={progress.value} />
<small className="text-muted">{smallText}</small>
<div>{children}</div>
</CardBody>
</Card>
);
}
Example #4
| Source File: Proficiency.jsx From developer-portfolio with Apache License 2.0 | 6 votes |
|
Proficiency = () => {
return (
<Container className="section section-lg">
<Fade bottom duration={2000} >
<Row>
<Col lg="6">
<h1 className="h1">Proficiency</h1>
{SkillBars.map((skill) => {
return (
<div
className="progress-info"
key={skill.Stack}
>
<div className="progress-label">
<span>{skill.Stack}</span>
</div>
<div className="progress-percentage">
<span>{skill.progressPercentage}%</span>
</div>
<Progress
max="100"
value={skill.progressPercentage}
color="info"
role="progressbar"
aria-label={skill.Stack}
/>
</div>
);
})}
</Col>
<Col lg="6">
<GreetingLottie animationPath="/lottie/build.json" />
</Col>
</Row>
</Fade>
</Container>
);
}
Example #5
| Source File: Progress.js From light-blue-react-template with MIT License | 5 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">60%</span>
<h6 className="m-0 mb-1">
<strong>Urgent:</strong>
Rails 4.1.0 upgrade
</h6>
<Progress className={['m-0'].join(' ')} color="primary" value="60" />
<span className="help-block">3 notes added by James 2h ago...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">83%</span>
<h6 className="m-0 mb-1">
<strong>Primary:</strong>
Light Blue App
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
<span className="help-block">verifying stable probability status</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">44%</span>
<h6 className="m-0 mb-1">
<span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
<i className="fa fa-question" />
</span>
<UncontrolledTooltip placement="bottom" target="TooltipQuestion">
2 issues require your attention
</UncontrolledTooltip>
Finish The Road to Hell Song
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
<span className="help-block">last update: 2h ago</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">86%</span>
<h6 className="m-0 mb-1">
Complete project planning
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
<span className="help-block">no, no way this is not working...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">100%</span>
<h6 className="m-0 mb-1">
<strong>Completed:</strong>
Instruct newbies on coding standards
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
<span className="help-block">last update: April 22, 2014 2:36 pm</span>
</ListGroupItem>
</ListGroup>
);
}
Example #6
| Source File: CardBox.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="task-box">
<Progress className="progress-sm animated-progess" value={this.props.data['progressValue']} style={{height: "3px"}}></Progress>
<CardBody className="borad-width">
<div className="float-right ml-2">
<div>
{this.props.data['date']}
</div>
</div>
<div className="mb-3">
<Link to="#" className="">{this.props.data['id']}</Link>
</div>
<div>
<h5 className="font-size-16"><Link to="#" className="text-dark">{this.props.data['title']}</Link></h5>
<p className="mb-4">{this.props.data['subtitle']}</p>
</div>
<div className="d-inline-flex team mb-0">
<div className="mr-3 align-self-center">
Team :
</div>
{
this.props.data['team'].map((member, key) =>
<div className="team-member" key={key}>
<Link to="# " className="team-member d-inline-block" id={"memberTooltip"+member.id} >
{
member.img === "Null" ?
<div className="avatar-xs">
<span className="avatar-title bg-soft-primary text-primary rounded-circle">
{member.name.charAt(0)}
</span>
</div>
: <img src={member.img} className="rounded-circle avatar-xs" alt="Nazox"/>
}
</Link>
<UncontrolledTooltip target={"memberTooltip"+member.id} placement="top">
{member.name}
</UncontrolledTooltip>
</div>
)
}
</div>
</CardBody>
</Card>
</React.Fragment>
);
}
Example #7
| Source File: EdgeAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="클러스터 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4">코어 클라우드 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem> */}
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">04</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">서비스 명</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 명</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트명을 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="/cluster/edge" className="btn btn-success">완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 2 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #8
| Source File: Dashboard.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-info">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1} toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData2} options={cardChartOpts2} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2} toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData1} options={cardChartOpts1} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3} toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper" style={{ height: '70px' }}>
<Line data={cardChartData3} options={cardChartOpts3} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4} toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70} />
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" aria-label="First group">
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year</Button>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
<Line data={mainChart} options={mainChartOpts} height={300} />
</div>
</CardBody>
<CardFooter>
<Row className="text-center">
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<Progress className="progress-xs mt-2" color="primary" value="40" />
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {' & '} Sales
</CardHeader>
<CardBody>
<Row>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="34" />
<Progress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="56" />
<Progress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="12" />
<Progress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="43" />
<Progress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="22" />
<Progress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="53" />
<Progress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="9" />
<Progress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><Badge pill color="info"> </Badge></sup>
New clients
<sup className="px-1"><Badge pill color="danger"> </Badge></sup>
Recurring clients
</small>
</div>
</Col>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<ul>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-user progress-group-icon"></i>
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<i className="icon-user-female progress-group-icon"></i>
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-globe progress-group-icon"></i>
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-facebook progress-group-icon"></i>
<span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="15" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-twitter progress-group-icon"></i>
<span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="11" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-linkedin progress-group-icon"></i>
<span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</div>
</ul>
</Col>
</Row>
<br />
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/1.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-us h4 mb-0" title="us" id="us"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-br h4 mb-0" title="br" id="br"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-in h4 mb-0" title="in" id="in"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-fr h4 mb-0" title="fr" id="fr"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-es h4 mb-0" title="es" id="es"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-pl h4 mb-0" title="pl" id="pl"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #9
| Source File: ProgressBar.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="text-center">0%</div>
<Progress />
<div className="text-center">25%</div>
<Progress value="25" />
<div className="text-center">50%</div>
<Progress value={50} />
<div className="text-center">75%</div>
<Progress value={75} />
<div className="text-center">100%</div>
<Progress value="100" />
<div className="text-center">Multiple bars</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="30" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5" />
</Progress>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> color variants</small>
</CardHeader>
<CardBody>
<Progress value={2 * 5} className="mb-3" />
<Progress color="success" value="25" className="mb-3" />
<Progress color="info" value={50} className="mb-3" />
<Progress color="warning" value={75} className="mb-3" />
<Progress color="danger" value="100" className="mb-3" />
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> labels</small>
</CardHeader>
<CardBody>
<Progress value="25" className="mb-3">25%</Progress>
<Progress value={50} className="mb-3">1/2</Progress>
<Progress value={75} className="mb-3">You're almost there!</Progress>
<Progress color="success" value="100" className="mb-3">You did it!</Progress>
<Progress multi className="mb-3">
<Progress bar value="15">Meh</Progress>
<Progress bar color="success" value="30">Wow!</Progress>
<Progress bar color="info" value="25">Cool</Progress>
<Progress bar color="warning" value="20">20%</Progress>
<Progress bar color="danger" value="5">!!</Progress>
</Progress>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> striped</small>
</CardHeader>
<CardBody>
<Progress striped value={2 * 5} className="mb-3" />
<Progress striped color="success" value="25" className="mb-3" />
<Progress striped color="info" value={50} className="mb-3" />
<Progress striped color="warning" value={75} className="mb-3" />
<Progress striped color="danger" value="100" className="mb-3" />
<Progress multi className="mb-3">
<Progress striped bar value="10" />
<Progress striped bar color="success" value="30" />
<Progress striped bar color="warning" value="20" />
<Progress striped bar color="danger" value="20" />
</Progress>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> animated</small>
</CardHeader>
<CardBody>
<Progress animated value={2 * 5} className="mb-3" />
<Progress animated color="success" value="25" className="mb-3" />
<Progress animated color="info" value={50} className="mb-3" />
<Progress animated color="warning" value={75} className="mb-3" />
<Progress animated color="danger" value="100" className="mb-3" />
<Progress multi>
<Progress animated bar value="10" />
<Progress animated bar color="success" value="30" />
<Progress animated bar color="warning" value="20" />
<Progress animated bar color="danger" value="20" />
</Progress>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> multiple bars / stacked</small>
</CardHeader>
<CardBody>
<div className="text-center">Plain</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="20" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="15" />
</Progress>
<div className="text-center">With Labels</div>
<Progress multi>
<Progress bar value="15">Meh</Progress>
<Progress bar color="success" value="35">Wow!</Progress>
<Progress bar color="warning" value="25">25%</Progress>
<Progress bar color="danger" value="25">LOOK OUT!!</Progress>
</Progress>
<div className="text-center">Stripes and Animations</div>
<Progress multi>
<Progress bar striped value="15">Stripes</Progress>
<Progress bar animated color="success" value="30">Animated Stripes</Progress>
<Progress bar color="info" value="25">Plain</Progress>
</Progress>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<small> max value</small>
</CardHeader>
<CardBody>
<div className="text-center">1 of 5</div>
<Progress value="1" max="5" />
<div className="text-center">50 of 135</div>
<Progress value={50} max="135" />
<div className="text-center">75 of 111</div>
<Progress value={75} max={111} />
<div className="text-center">463 of 500</div>
<Progress value="463" max={500} />
<div className="text-center">Various (40) of 55</div>
<Progress multi>
<Progress bar value="5" max={55}>5</Progress>
<Progress bar color="success" value="15" max={55}>15</Progress>
<Progress bar color="warning" value="10" max={55}>10</Progress>
<Progress bar color="danger" value="10" max={55}>10</Progress>
</Progress>
</CardBody>
</Card>
</div>
);
}
Example #10
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Progress</strong>
</h5>
<div className="mb-5">
<div className="text-center">0%</div>
<Progress className="mb-4" />
<div className="text-center">25%</div>
<Progress className="mb-4" value="25" />
<div className="text-center">50%</div>
<Progress className="mb-4" value={50} />
<div className="text-center">75%</div>
<Progress className="mb-4" value={75} />
<div className="text-center">100%</div>
<Progress className="mb-4" value="100" />
<div className="text-center">Multiple bars</div>
<Progress className="mb-4" multi>
<Progress className="mb-4" bar value="15" />
<Progress className="mb-4" bar color="success" value="30" />
<Progress className="mb-4" bar color="info" value="25" />
<Progress className="mb-4" bar color="warning" value="20" />
<Progress className="mb-4" bar color="danger" value="5" />
</Progress>
</div>
<h5 className="mb-4">
<strong>Colors Variants</strong>
</h5>
<div className="mb-5">
<Progress className="mb-4" value={2 * 5} />
<Progress className="mb-4" color="success" value="25" />
<Progress className="mb-4" color="info" value={50} />
<Progress className="mb-4" color="warning" value={75} />
<Progress className="mb-4" color="danger" value="100" />
</div>
<h5 className="mb-4">
<strong>Labels</strong>
</h5>
<div className="mb-5">
<Progress className="mb-4" value="25">
25%
</Progress>
<Progress className="mb-4" value={50}>
1/2
</Progress>
<Progress className="mb-4" value={75}>
Youre almost there!
</Progress>
<Progress className="mb-4" color="success" value="100">
You did it!
</Progress>
<Progress className="mb-4" multi>
<Progress className="mb-4" bar value="15">
Meh
</Progress>
<Progress className="mb-4" bar color="success" value="30">
Wow!
</Progress>
<Progress className="mb-4" bar color="info" value="25">
Cool
</Progress>
<Progress className="mb-4" bar color="warning" value="20">
20%
</Progress>
<Progress className="mb-4" bar color="danger" value="5">
!!
</Progress>
</Progress>
</div>
<h5 className="mb-4">
<strong>Striped</strong>
</h5>
<div className="mb-5">
<Progress className="mb-4" striped value={2 * 5} />
<Progress className="mb-4" striped color="success" value="25" />
<Progress className="mb-4" striped color="info" value={50} />
<Progress className="mb-4" striped color="warning" value={75} />
<Progress className="mb-4" striped color="danger" value="100" />
<Progress className="mb-4" multi>
<Progress className="mb-4" striped bar value="10" />
<Progress className="mb-4" striped bar color="success" value="30" />
<Progress className="mb-4" striped bar color="warning" value="20" />
<Progress className="mb-4" striped bar color="danger" value="20" />
</Progress>
</div>
<h5 className="mb-4">
<strong>Multiple bars / Stacked</strong>
</h5>
<div className="mb-5">
<Progress className="mb-4" animated value={2 * 5} />
<Progress className="mb-4" animated color="success" value="25" />
<Progress className="mb-4" animated color="info" value={50} />
<Progress className="mb-4" animated color="warning" value={75} />
<Progress className="mb-4" animated color="danger" value="100" />
<Progress className="mb-4" multi>
<Progress className="mb-4" animated bar value="10" />
<Progress className="mb-4" animated bar color="success" value="30" />
<Progress className="mb-4" animated bar color="warning" value="20" />
<Progress className="mb-4" animated bar color="danger" value="20" />
</Progress>
</div>
<h5 className="mb-4">
<strong>Multiple bars / Stacked</strong>
</h5>
<div className="mb-5">
<Progress className="mb-4" multi>
<Progress className="mb-4" bar value="15" />
<Progress className="mb-4" bar color="success" value="20" />
<Progress className="mb-4" bar color="info" value="25" />
<Progress className="mb-4" bar color="warning" value="20" />
<Progress className="mb-4" bar color="danger" value="15" />
</Progress>
<div className="text-center">With Labels</div>
<Progress className="mb-4" multi>
<Progress className="mb-4" bar value="15">
Meh
</Progress>
<Progress className="mb-4" bar color="success" value="35">
Wow!
</Progress>
<Progress className="mb-4" bar color="warning" value="25">
25%
</Progress>
<Progress className="mb-4" bar color="danger" value="25">
LOOK OUT!!
</Progress>
</Progress>
<div className="text-center">Stripes and Animations</div>
<Progress className="mb-4" multi>
<Progress className="mb-4" bar striped value="15">
Stripes
</Progress>
<Progress className="mb-4" bar animated color="success" value="30">
Animated Stripes
</Progress>
<Progress className="mb-4" bar color="info" value="25">
Plain
</Progress>
</Progress>
</div>
</div>
)
}
Example #11
| Source File: ServiceAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ServiceAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/service")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #12
| Source File: PodAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
PodAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/pod")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #13
| Source File: JobAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
JobAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/job")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #14
| Source File: DeploymentAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
DeploymentAdd2 = observer((props) => {
const { callApiStore } = store;
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "디플로이먼트", link: "#" },
{ title: "디플로이먼트 추가", link: "#" },
]);
const [name, setName] = React.useState("")
const [description, setDescription] = React.useState("")
const [workspace, setWorkspace] = React.useState("")
const [project, setProject] = React.useState("")
const [cluster, setCluster] = React.useState("")
const [containerImage, setContainerImage] = React.useState("")
const [containerName, setContainerName] = React.useState("")
const [containerType, setContainerType] = React.useState("")
const [cpuReserv, setCpuReservation] = React.useState("0m")
const [cpuLimit, setCpuLimit] = React.useState("0m")
const [memoryReserv, setMemoryReservation] = React.useState("0Mi")
const [memoryLimit, setMemoryLimit] = React.useState("0Mi")
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
//replicas 쪽 변수
const [empty_val, setEmpty_val] = React.useState(0)
const [toggleSwitch, setToggleSwitch] = React.useState(true)
const [content, setContent] = React.useState("")
const [loading, setLoading] = React.useState(false)
const template = {
"apiVersion": "apps/v1",
"kind": "Deployment",
"metadata": {
"labels": {
"app": name
},
"name": name,
"namespace:": project
},
"spec": {
"replicas": empty_val,
"selector": {
"matchLabels": {
"app": name
}
},
"template": {
"metadata": {
"labels": {
"app": name
}
},
"spec": {
"containers": [
{
"image": containerImage,
"name": containerName
}
],
"resources":
{
"limits": {
"memory": memoryLimit,
"cpu": cpuLimit
},
"requests": {
"memory": memoryReserv,
"cpu": cpuReserv
}
}
}
}
}
}
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const buttonClick = () => {
// console.log(`workspace name : ${workspace}\nAlias : ${alias} \ntest: ${description} \ntest: ${empty_val} \ntest: ${toggleSwitch}`);
// const YAML = require('yamljs');
// const nativeObject = YAML.parse(content);
// console.log(nativeObject.apiVersion)
const body =
{
workspaceName: workspace,
workspaceDescription: description,
selectCluster: cluster,
cluster: "cluster1",
clusterName: "cluster1",
// workspaceOwner: "innogrid",
// workspaceCreator: "innogrid"
}
callApiStore.postDeployment("deployments", body)
setLoading(true)
setTimeout(function () {
setLoading(false)
props.history.push("/workload/deployment")
}, 500);
}
const formChange = (value, kind) => {
if (kind === "workspace") {
setWorkspace(value)
setProject("")
setCluster("")
}
if (kind === "project") {
setProject(value)
setCluster("")
}
if (kind === "cluster") {
setCluster(value)
}
}
useEffect(() => {
// console.log(template)
if (activeTabProgress === 3) {
const YAML = require('json-to-pretty-yaml');
setContent(YAML.stringify(template))
}
}, [activeTabProgress]);
useEffect(() => {
if (content !== "") {
if (activeTabProgress !== 3) {
const YAML = require('yamljs');
const nativeObject = YAML.parse(content);
if (nativeObject?.metadata.name !== null) {
setName(nativeObject?.metadata.name)
}
else {
setName("")
}
if (nativeObject?.spec.replicas !== null) {
setEmpty_val(nativeObject?.spec.replicas)
}
else {
setEmpty_val(0)
}
if (nativeObject?.spec.template.spec.containers[0].image !== null) {
setContainerImage(nativeObject?.spec.template.spec.containers[0].image)
}
else {
setContainerImage("")
}
if (nativeObject?.spec.template.spec.containers[0].name !== null) {
setContainerName(nativeObject?.spec.template.spec.containers[0].name)
}
else {
setContainerName("")
}
if (nativeObject?.spec.template.spec.resources.limits.cpu !== null) {
setCpuLimit(nativeObject?.spec.template.spec.resources.limits.cpu)
}
else {
setCpuLimit("")
}
if (nativeObject?.spec.template.spec.resources.requests.cpu !== null) {
setCpuReservation(nativeObject?.spec.template.spec.resources.requests.cpu)
}
else {
setCpuReservation("")
}
if (nativeObject?.spec.template.spec.resources.limits.memory !== null) {
setMemoryLimit(nativeObject?.spec.template.spec.resources.limits.memory)
}
else {
setMemoryLimit("")
}
if (nativeObject?.spec.template.spec.resources.requests.memory !== null) {
setMemoryReservation(nativeObject?.spec.template.spec.resources.requests.memory)
}
else {
setMemoryReservation("")
}
}
}
}, [content, activeTabProgress]);
useEffect(() => {
callApiStore.getDBProejct("userprojects")
}, []);
const data = callApiStore.userprojects
let workspaceList = data.map((item) => {
return (
item.workspaceName
)
})
workspaceList = Array.from(new Set(workspaceList));
const projectList = data.map((item) => {
if (item.workspaceName == workspace) {
return (
item.projectName
)
}
})
let clusterList = []
data.map((item) => {
if (item.projectName == project) {
const arr = item.selectCluster.split(",")
clusterList = arr
}
})
// console.log(name, description, workspace, project, cluster, empty_val, containerImage, containerName, containerType)
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="디플로이먼트" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">컨테이너 이미지</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">Cluster 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24"> Name</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="Name" value={name} required onChange={(e) => setName(e.target.value)} />
</FormGroup>
<FormGroup>
<Label> Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</FormGroup>
<FormGroup>
<Label> Istio</Label>
<div className="custom-control custom-switch mb-2" dir="ltr">
<Input type="checkbox" className="custom-control-input" id="customSwitch1" defaultChecked />
<Label className="custom-control-label" htmlFor="customSwitch1" name="toggleSwitch" onClick={(e) => { setToggleSwitch(!toggleSwitch) }}>Use istio</Label>
</div>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspaces</Label>
<Dropdown
placeholder="Select an Workspace"
className="selectWorkspace"
options={workspaceList}
value={workspace}
onChange={(value) => { formChange(value.value, "workspace") }
}
/>
</FormGroup>
<FormGroup>
<Label for="basicpill-namecard-input24">Project</Label>
{workspace !== "" ?
<Dropdown
placeholder="Select an Project"
className="selectProject"
options={projectList}
value={project}
onChange={(value) =>
formChange(value.value, "project")
}
/>
:
<Dropdown
placeholder="Select an Project"
className="selectProject my-disabled"
value=""
disabled />}
</FormGroup>
<FormGroup>
<Label for="basicpill-namecard-input24">Cluster</Label>
{project !== "" ?
<Dropdown
placeholder="Select an Cluster"
className="selectCluster "
options={clusterList}
value={cluster}
onChange={(value) =>
formChange(value.value, "cluster")
}
/>
:
<Dropdown
placeholder="Select an Cluster"
className="selectCluster my-disabled"
value=""
disabled />}
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="2">
<FormGroup>
<Label>Pod Replicas</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
setEmpty_val(empty_val - 1)
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={empty_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="prepend" name="empty_val"
onClick={() =>
setEmpty_val(empty_val + 1)
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="3">
<Label> Container </Label>
</Col>
</Row>
<Row>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Image</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24"
placeholder="e.g. nginx:lastest" name="containerImage" value={containerImage} onChange={(e) => setContainerImage(e.target.value)} />
</FormGroup>
</Col>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Name</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24"
placeholder="e.g. container-1" name="containerName" value={containerName} onChange={(e) => setContainerName(e.target.value)} />
</FormGroup>
</Col>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Type</Label>
<select className="custom-select" name="containerType" value={containerType} onChange={(e) => setContainerType(e.target.value)}>
<option defaultValue>Select Container Type</option>
<option value="worker">Worker Container</option>
<option value="init">Init Container</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="3">
<Label> Resources </Label>
</Col>
</Row>
<Row>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">CPU Reservation</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 1000" name="cpuReservation" value={cpuReserv} onChange={(e) => setCpuReservation(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">CPU Limit</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 1000" name="cpuLimit" value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">Memory Reservation</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 128" name="memoryReservation" value={memoryReserv} onChange={(e) => setMemoryReservation(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">Memory Limit</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 128" name="memoryLimit" value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} />
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Shows the set yaml file.</p>
</div>
</div>
<Col sm="12">
<div className="table-responsive">
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="monokai"
name="editor"
width="100%"
// onLoad={this.onLoad}
// onChange={this.onChange}
onChange={value => {
setContent(value);
}}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
// value={`function onLoad(editor) {
// console.log("hello world");
// }`}
value={content}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 4,
}}
/>
</div>
</Col>
<br />
<div className="row justify-content-center" onClick={() => buttonClick()}>
생성 요청
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <FormGroup> */}
{/* <Link to="/workload/deployment" className="btn btn-success" onClick={(e) => appChange()}> */}
{/* <Button className="btn btn-success" onClick={() => buttonClick()}>
생성 요청
</Button>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
</FormGroup> */}
</div>
</Col>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { toggleTabProgress(activeTabProgress - 1); }}>이전</Link></li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"}><Link to="#" onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment >
)
})
Example #15
| Source File: Appadd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="앱 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4">앱 추가</h4>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">앱 선택</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">컴포넌트</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">04</span>
<span className="step-title">인터넷 접근</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
{/* <Row> */}
{/* <Col lg="6"> */}
<FormGroup>
<AppTable />
</FormGroup>
{/* </Col> */}
{/* </Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">엑세스 타입</Label>
<select className="custom-select">
<option defaultValue>Virtual IP: 클러스터의 내부 IP를 통해 서비스에 엑세스 합니다</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-vatno-input19">VAT/TIN No.</Label>
<Input type="text" className="form-control" id="basicpill-vatno-input19" />
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cstno-input20">CST No.</Label>
<select className="custom-select">
<option defaultValue>키</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/*
<Col lg="6">
<FormGroup>
<select className="custom-select">
<option defaultValue>값</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-companyuin-input22">Company UIN</Label>
<Input type="text" className="form-control" id="basicpill-companyuin-input22" />
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-declaration-input23">Declaration</Label>
<Input type="text" className="form-control" id="basicpill-Declaration-input23" />
</FormGroup>
</Col> */}
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Name on Card</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label>Credit Card Type</Label>
<select className="custom-select">
<option defaultValue>Select Card Type</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cardno-input25">Credit Card Number</Label>
<Input type="text" className="form-control" id="basicpill-cardno-input25" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-card-verification-input26">Card Verification Number</Label>
<Input type="text" className="form-control" id="basicpill-card-verification-input26" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-expiration-input27">Expiration Date</Label>
<Input type="text" className="form-control" id="basicpill-expiration-input27" />
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={4}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="#" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 4 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #16
| Source File: ProjectUserAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="사용자 프로젝트 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4">코어 클라우드 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem> */}
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">02</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">프로젝트 명 *</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">워크스페이스 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>워크스페이스를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">설명</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 소유자 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트 소유자를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="#" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 2 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #17
| Source File: ProjectSystemAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="시스템 프로젝트 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4">코어 클라우드 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem> */}
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">02</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">프로젝트 명 *</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">워크스페이스 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>워크스페이스를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">설명</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 소유자 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트 소유자를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="/project/system" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 2 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #18
| Source File: ProjectAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { userProjectName, alias, description, select } = this.state;
const { appChange, appClick, appKeyPress } = this;
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="UserProject 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4"> Create Project</h4>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">Select Workspace</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">UserProject 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Name</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="userProjectName" placeholder="Enter Name"
required="required" onChange={appChange} />
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={appChange} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<Label>UserProject Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={this.appChange}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Workspace</Label>
<select className="custom-select" name="select" onChange={appChange}>
<option defaultValue>Select Workspace</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Cluster</Label>
<select className="custom-select" name="select" onChange={appChange}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted"> UserProeject Name : {this.state.userProjectName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="/project/user" className="btn btn-success" onClick={appClick}>
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 3 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #19
| Source File: CoreCloudAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { workspaceName, alias, description, select } = this.state;
const { appChange, appClick, appKeyPress } = this;
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title=" Cluster추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4"> 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">Cluster Settings</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">Cluster 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Cluster Name *</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="clusterName" onChange={appChange} />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Tag </Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={appChange} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-namecard-input24">Provider*</Label>
<select className="custom-select" name="select" onChange={appChange}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="select" onChange={appChange}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={this.appChange}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select">
<option defaultValue>Select Clusters</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
{/* <p className="text-muted">If several languages coalesce, the grammar of the resulting</p> */}
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="/workspace" className="btn btn-success" onClick={appClick}>
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 3 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #20
| Source File: WorkspaceAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
WorkspaceAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "워크스페이스", link: "#" },
{ title: "워크스페이스 추가", link: "#" },
]);
const [activeTab, setActiveTab] = React.useState(1)
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [col1, setCol1] = React.useState(true)
const [col2, setCol2] = React.useState(false)
const [col3, setCol3] = React.useState(false)
const [loading, setLoading] = React.useState(false)
const t_col1 = () => {
setCol1(!col1)
setCol2(false)
setCol3(false)
}
const t_col2 = () => {
setCol1(false)
setCol2(!col2)
setCol3(false)
}
const t_col3 = () => {
setCol1(false)
setCol2(false)
setCol3(!col3)
}
const toggleTab = (tab) => {
if (activeTab !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTab(tab)
}
}
}
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const inputChange = (value) => {
if (value === "workspaceName") {
setWorkspaceName(value)
}
if (value === "alias") {
setAlias(value)
}
if (value === "administrator") {
setAdministrator(value)
}
if (value === "description") {
setDescription(value)
}
if (value === "clusterSelect") {
setClusterSelect(value)
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
// const unblock = props.history.block('정말 떠나실건가요?');
setLoading(false)
callApiStore.getMemberList("members")
callApiStore.getClusterList("clusters")
return () => {
// unblock();
};
}, [props.history]);
const buttonClick = () => {
// console.log(`workspace name : ${workspaceName}\nAlias : ${alias} \nAdministrator: ${administrator}\nDescription: $description} \nclusterSelect: ${clusterSelect}`);
setClusterSelect(callApiStore.clusterCheck)
const body =
{
workspaceName: workspaceName,
workspaceDescription: description,
selectCluster: callApiStore.clusterCheck,
workspaceOwner: administrator,
workspaceCreator: "innogrid"
}
if (workspaceName != "" && callApiStore.clusterCheck != "" && administrator != "") {
console.log(body, "body")
callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workspace")
}, 500);
}
}
let CoreList = [];
let EdgeList = [];
if (callApiStore.coreCloudList == undefined) {
CoreList = []
} else {
CoreList = callApiStore.coreCloudList
}
if (callApiStore.cloudEdgeList == undefined) {
EdgeList = []
} else {
EdgeList = callApiStore.cloudEdgeList
}
// const appKeyPress = (e) => {
// if (e.key === 'Enter') {
// buttonClick();
// }
// }
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Workspace 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} required={true} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
<div className="div-alert">
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
{/* {callApiStore.duplicateCheck = 0 ? <Alert color="success">사용할 수 있는 워크스페이스</Alert> : <></>} */}
{/* {callApiStore.duplicateCheck < 0 ? <Alert color="warning">중복 체크 미완료</Alert> : <></>} */}
</div>
</Col>
<Col lg="6">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<Dropdown
placeholder="Select Administrator "
className="selectWorkspace"
options={callApiStore.memberNameList}
value=""
onChange={(value) => { setAdministrator(value.value) }
}
/>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
{Object.keys(CoreList).length !== 0 && Object.keys(EdgeList).length ? <ClusterSelectTable CoreList={CoreList} EdgeList={EdgeList} /> : <></>}
{/* <ClusterSelectTable CoreList={CoreList} EdgeList={EdgeList}/> */}
{/* <select className="custom-select" name="clusterSelect" onChange={(e) => inputChange(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select> */}
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Name : {workspaceName}</p>
<p className="text-muted">Description : {description}</p>
<p className="text-muted">Administrator : {administrator}</p>
<p className="text-muted">Select Cluster : {callApiStore.clusterCheck}</p>
</div>
</div>
</Col>
</div>
<div className="btn btn-success" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "next-btn previous disabled" : "next-btn previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next-btn next disabled" : "next-btn next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #21
| Source File: UiProgressbar.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Progress Bars" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Examples</h4>
<p className="card-title-desc">
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
</p>
<div>
<Progress className="mb-4" color="primary" value={25}></Progress>
<Progress className="mb-4" color="primary" value={50}></Progress>
<Progress className="mb-4" color="primary" value={75}></Progress>
<Progress color="primary" value={100}></Progress>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Backgrounds</h4>
<p className="card-title-desc">
Use background utility classes to change the
appearance of individual progress bars.
</p>
<div>
<Progress className="mb-4" color="success" value={25}></Progress>
<Progress className="mb-4" color="info" value={50}></Progress>
<Progress className="mb-4" color="warning" value={75}></Progress>
<Progress color="danger" value={100}></Progress>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Labels Example</h4>
<p className="card-title-desc">
Add labels to your progress bars by placing text within the{" "}
<code className="highlighter-rouge">.progress-bar</code>.
</p>
<div className="">
<Progress color="primary" value={25} >
25%
</Progress>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Multiple bars</h4>
<p className="card-title-desc">
Include multiple progress bars in a progress component if you need.
</p>
<div className="">
<Progress multi>
<Progress bar color="primary" value={15}></Progress>
<Progress bar color="success" value={30}></Progress>
<Progress bar color="info" value={20}></Progress>
</Progress>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Height</h4>
<p className="card-title-desc">
We only set a{" "} <code className="highlighter-rouge">height</code> value on the{" "}
<code className="highlighter-rouge">.progress-bar</code>, so if you change that value the outer{" "}
<code className="highlighter-rouge">.progress</code> will automatically resize accordingly.
</p>
<div className="">
<Progress
className="mb-3"
value={25}
color="primary"
style={{ height: "3px" }}
></Progress>
<Progress
value={25}
color="primary"
style={{ height: "24px" }}
></Progress>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Animated stripes</h4>
<p className="card-title-desc">
The striped gradient can also be animated. Add{" "} <code className="highlighter-rouge"> striped{" "} animated </code>{" "} to{" "} to animate the stripes right to left via CSS3 animations.
</p>
<div className="">
<Progress striped animated color="primary" value="80" />
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Striped</h4>
<p className="card-title-desc">
Add{" "} <code className="highlighter-rouge"> striped{" "} </code> to any{" "} to apply a stripe via CSS gradient over the progress bar’s background color.
</p>
<div className="">
<Progress className="mb-4" striped color="primary" value={10}></Progress>
<Progress className="mb-4" striped color="success" value={25}></Progress>
<Progress className="mb-4" striped color="info" value={50}></Progress>
<Progress className="mb-4" striped color="warning" value={75}></Progress>
<Progress striped color="danger" value={100}></Progress>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Animated progress</h4>
<p className="card-title-desc mb-5">Add <code className="highlighter-rounge">.animated-progess</code> class with <code className="highlighter-rounge">.progress-bar</code> for animated progressbar.</p>
<div className="">
<Progress color="success" className="animated-progess mb-4" value={25}></Progress>
<Progress color="info" className="animated-progess mb-4" value={50}></Progress>
<Progress color="warning" className="animated-progess mb-4" value={75}></Progress>
<Progress color="danger" className="animated-progess" value={100}></Progress>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #22
| Source File: FormWizard.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Form Wizard" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4">Basic pills Wizard</h4>
<div id="basic-pills-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav nav-pills nav-justified">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === 1 })} onClick={() => { this.toggleTab(1); }} >
<span className="step-number">01</span>
<span className="step-title">Seller Details</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === 2 })} onClick={() => { this.toggleTab(2); }} >
<span className="step-number">02</span>
<span className="step-title">Company Document</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === 3 })} onClick={() => { this.toggleTab(3); }} >
<span className="step-number">03</span>
<span className="step-title">Bank Details</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === 4 })} onClick={() => { this.toggleTab(4); }} >
<span className="step-number">04</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<TabContent activeTab={this.state.activeTab} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input1">First name</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input1"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input2">Last name</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input2"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input3">Phone</Label>
<Input type="text" className="form-control" id="basicpill-phoneno-input3"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-email-input4">Email</Label>
<Input type="email" className="form-control" id="basicpill-email-input4"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input1">Address</Label>
<textarea id="basicpill-address-input1" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
</Form>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-pancard-input5">PAN Card</Label>
<Input type="text" className="form-control" id="basicpill-pancard-input5"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-vatno-input6">VAT/TIN No.</Label>
<Input type="text" className="form-control" id="basicpill-vatno-input6"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cstno-input7">CST No.</Label>
<Input type="text" className="form-control" id="basicpill-cstno-input7"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-servicetax-input8">Service Tax No.</Label>
<Input type="text" className="form-control" id="basicpill-servicetax-input8"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-companyuin-input9">Company UIN</Label>
<Input type="text" className="form-control" id="basicpill-companyuin-input9"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-declaration-input10">Declaration</Label>
<Input type="text" className="form-control" id="basicpill-Declaration-input10"/>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input11">Name on Card</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input11"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label>Credit Card Type</Label>
<select className="custom-select">
<option defaultValue>Select Card Type</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cardno-input12">Credit Card Number</Label>
<Input type="text" className="form-control" id="basicpill-cardno-input12"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-card-verification-input">Card Verification Number</Label>
<Input type="text" className="form-control" id="basicpill-card-verification-input"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-expiration-input13">Expiration Date</Label>
<Input type="text" className="form-control" id="basicpill-expiration-input13"/>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={4}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTab === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTab(this.state.activeTab - 1);} }>Previous</Link></li>
<li className={this.state.activeTab === 4 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTab(this.state.activeTab + 1);} }>Next</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4">Wizard with progressbar</h4>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">Seller Details</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">Company Document</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">Bank Details</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">04</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">First name</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">Last name</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">Phone</Label>
<Input type="text" className="form-control" id="basicpill-phoneno-input16"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-email-input17">Email</Label>
<Input type="email" className="form-control" id="basicpill-email-input17"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
</Form>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-pancard-input18">PAN Card</Label>
<Input type="text" className="form-control" id="basicpill-pancard-input18"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-vatno-input19">VAT/TIN No.</Label>
<Input type="text" className="form-control" id="basicpill-vatno-input19"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cstno-input20">CST No.</Label>
<Input type="text" className="form-control" id="basicpill-cstno-input20"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-servicetax-input21">Service Tax No.</Label>
<Input type="text" className="form-control" id="basicpill-servicetax-input21"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-companyuin-input22">Company UIN</Label>
<Input type="text" className="form-control" id="basicpill-companyuin-input22"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-declaration-input23">Declaration</Label>
<Input type="text" className="form-control" id="basicpill-Declaration-input23"/>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Name on Card</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label>Credit Card Type</Label>
<select className="custom-select">
<option defaultValue>Select Card Type</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cardno-input25">Credit Card Number</Label>
<Input type="text" className="form-control" id="basicpill-cardno-input25"/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-card-verification-input26">Card Verification Number</Label>
<Input type="text" className="form-control" id="basicpill-card-verification-input26"/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-expiration-input27">Expiration Date</Label>
<Input type="text" className="form-control" id="basicpill-expiration-input27"/>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={4}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1);} }>Previous</Link></li>
<li className={this.state.activeTabProgress === 4 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1);} }>Next</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #23
| Source File: AddProduct.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Add Product" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4">Wizard with progressbar</h4>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">04</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">서비스 명</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 명</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트명을 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">엑세스 타입</Label>
<select className="custom-select">
<option defaultValue>Virtual IP: 클러스터의 내부 IP를 통해 서비스에 엑세스 합니다</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-vatno-input19">VAT/TIN No.</Label>
<Input type="text" className="form-control" id="basicpill-vatno-input19" />
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cstno-input20">CST No.</Label>
<select className="custom-select">
<option defaultValue>키</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/*
<Col lg="6">
<FormGroup>
<select className="custom-select">
<option defaultValue>값</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-companyuin-input22">Company UIN</Label>
<Input type="text" className="form-control" id="basicpill-companyuin-input22" />
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-declaration-input23">Declaration</Label>
<Input type="text" className="form-control" id="basicpill-Declaration-input23" />
</FormGroup>
</Col> */}
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Name on Card</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label>Credit Card Type</Label>
<select className="custom-select">
<option defaultValue>Select Card Type</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cardno-input25">Credit Card Number</Label>
<Input type="text" className="form-control" id="basicpill-cardno-input25" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-card-verification-input26">Card Verification Number</Label>
<Input type="text" className="form-control" id="basicpill-card-verification-input26" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-expiration-input27">Expiration Date</Label>
<Input type="text" className="form-control" id="basicpill-expiration-input27" />
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={4}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="#" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 4 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #24
| Source File: Dashboard.js From sofia-react-template with MIT License | 4 votes |
|
Dashboard = () => {
const [checkboxes, setCheckboxes] = useState([true, false])
const toggleCheckbox = (id) => {
setCheckboxes(checkboxes => checkboxes
.map((checkbox, index) => index === id ? !checkbox : checkbox ))
}
const meals = [meal1, meal2, meal3];
return (
<div>
<Row>
<Col className="pr-grid-col" xs={12} lg={8}>
<Row className="gutter mb-4">
<Col className="mb-4 mb-md-0" xs={12} md={6}>
<Widget className="">
<div className="d-flex justify-content-between widget-p-md">
<div className="headline-3 d-flex align-items-center">Your activity</div>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<ApexActivityChart className="pb-4"/>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget className="widget-p-md">
<div className="d-flex justify-content-between">
<div className="headline-3 d-flex align-items-center">Your meals</div>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
{meals.map((meal) =>
<div key={uuidv4()} className={`mt-4 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={meal} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">Salmon salad</p>
<p className="body-3 muted">300 g</p>
</div>
</div>
<div className="body-3 muted">
175 cal
</div>
</div>
</div>
)}
</Widget>
</Col>
</Row>
<Row className="gutter mb-4">
<Col xs={12}>
<Widget className="widget-p-none">
<div className="d-flex flex-wrap align-items-center justify-content-center">
<div className="d-flex flex-column align-items-center col-12 col-xl-6 p-sm-4">
<p className="headline-1">Upgrade your plan</p>
<p className="body-3">So how did the classical Latin become so </p>
<div className="d-flex justify-content-between my-4">
<Button className="rounded-pill mr-3" color="primary">Go Premium</Button>
<Button className="rounded-pill body-3" outline color="dark">Try for free</Button>
</div>
</div>
<div className="d-flex justify-content-center col-12 col-xl-6">
<img className="p-1 img-fluid" src={upgradeImage} alt="..." />
</div>
</div>
</Widget>
</Col>
</Row>
<Row className="gutter">
<Col className="mb-4 mb-xl-0" xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartRed} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-red" className={`progress-xs ${s.mutedPink}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col className="mb-4 mb-xl-0" xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartYellow} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-yellow" className={`progress-xs ${s.mutedYellow}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartTeal} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="secondary-cyan" className={`progress-xs ${s.mutedTeal}`} value="75" />
</div>
</div>
</Widget>
</Col>
<Col xs={6} sm={6} xl={3}>
<Widget className="widget-p-sm">
<div className={s.smallWidget}>
<div className="d-flex mb-4">
<img className="py-1 mr-2 img-fluid" src={heartViolet} alt="..." />
<div className="d-flex flex-column">
<p className="headline-3">Text</p>
<p className="body-2">Num<span className="body-3 muted">/ ber</span></p>
</div>
</div>
<div>
<Progress color="violet" className={`progress-xs ${s.mutedViolet}`} value="75" />
</div>
</div>
</Widget>
</Col>
</Row>
</Col>
<Col className="mt-4 mt-lg-0 pl-grid-col" xs={12} lg={4}>
<Widget className="widget-p-lg">
<div className="d-flex">
<img className={s.image} src={user} alt="..." />
<div className={s.userInfo}>
<p className="headline-3">Christina Karey</p>
<p className="body-3 muted">Brasil</p>
</div>
</div>
<div className={s.userParams}>
<div className="d-flex flex-column">
<p className="headline-3">63 kg</p>
<p className="body-3 muted">Weight</p>
</div>
<div className="d-flex flex-column">
<p className="headline-3">175 sm</p>
<p className="body-3 muted">Height</p>
</div>
<div className="d-flex flex-column">
<p className="headline-3">28 y.</p>
<p className="body-3 muted">Age</p>
</div>
</div>
<div className={s.goals}>
<div className={s.goalsTitle}>
<p className="headline-3">Your Goals</p>
<UncontrolledDropdown>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Sleep</p>
<p className="body-2">92<span className="body-3 muted"> / 160</span></p>
</div>
<Progress color="secondary-red" className="progress-xs" value={60} />
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Sport</p>
<p className="body-2">40<span className="body-3 muted"> / 50</span></p>
</div>
<Progress color="secondary-yellow" className="progress-xs" value={80} />
</div>
<div className="d-flex flex-column mt-3">
<div className={s.activity}>
<p className="body-2">Water</p>
<p className="body-2">25<span className="body-3 muted"> / 40</span></p>
</div>
<Progress color="secondary-cyan" className="progress-xs" value={40} />
</div>
</div>
<p className="headline-3">Appointments</p>
<div className={`mt-3 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={gymIcon} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">02.11 , 12:00 - 13:00</p>
<p className="body-3 muted">Yoga, Airplace Gym</p>
</div>
</div>
<div className="checkbox checkbox-primary">
<input
id="checkbox0"
type="checkbox"
className="styled"
checked={checkboxes[0]}
onChange={() => toggleCheckbox(0)}
/>
<label htmlFor="checkbox0" />
</div>
</div>
</div>
<div className={`mt-3 ${s.widgetBlock}`}>
<div className={s.widgetBody}>
<div className="d-flex">
<img className="img-fluid mr-2" src={therapyIcon} alt="..." />
<div className="d-flex flex-column">
<p className="body-2">03.11 , 16:00 - 17:30</p>
<p className="body-3 muted">Therapy</p>
</div>
</div>
<div className="checkbox checkbox-primary">
<input
id="checkbox1"
type="checkbox"
className="styled"
checked={checkboxes[1]}
onChange={() => toggleCheckbox(1)}
/>
<label htmlFor="checkbox1" />
</div>
</div>
</div>
<a className={`btn-secondary-red ${s.statsBtn}`} href="#top" role="button">
<img className={s.pieImg} src={statsPie} alt="..." />
<div>
<p className="headline-2">STATISTIC</p>
<p className="body-3">Download your activity</p>
</div>
</a>
</Widget>
</Col>
</Row>
</div>
)
}
Example #25
| Source File: Static.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<div className={s.root}>
<h2 className="page-title">
Tables - <span className="fw-semi-bold">Static</span>
</h2>
<Row>
<Col lg={6} md={12} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
bodyClass={s.mainTableWidget}
>
<div className={s.overFlow}>
<Table lg={12} md={12} sm={12} striped>
<thead>
<tr className="fs-sm">
<th className="hidden-sm-down">#</th>
<th>Picture</th>
<th>Description</th>
<th className="hidden-sm-down">Info</th>
<th className="hidden-sm-down">Date</th>
<th className="hidden-sm-down">Size</th>
<th className="hidden-sm-down">Status</th>
</tr>
</thead>
<tbody>
{this.state.tableStyles.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>
<img
className="img-rounded"
src={row.picture}
alt=""
height="50"
/>
</td>
<td>
{row.description}
{row.label && (
<div>
<Badge color={row.label.colorClass}>
{row.label.text}
</Badge>
</div>
)}
</td>
<td>
<p className="mb-0">
<small>
Type:
<span className="text-muted fw-semi-bold">
{row.info.type}
</span>
</small>
</p>
<p>
<small>
Dimensions:
<span className="text-muted fw-semi-bold">
{row.info.dimensions}
</span>
</small>
</p>
</td>
<td className="text-muted">{this.parseDate(row.date)}</td>
<td className="text-muted">{row.size}</td>
<td className="width-150">
<Progress
color={row.progress.colorClass}
value={row.progress.percent}
className="progress-sm mb-xs"
/>
</td>
</tr>
))}
</tbody>
</Table>
</div>
<div className="clearfix">
<div className="float-right">
<Button color="default" className="mr-2" size="sm">
Send to...
</Button>
<UncontrolledButtonDropdown>
<DropdownToggle
color="inverse"
className="mr-xs"
size="sm"
caret
>
Clear
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Clear</DropdownItem>
<DropdownItem>Move ...</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<p>Basic table with styled content</p>
</div>
</Widget>
</Col>
<Col lg={6} md={12} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Stripped <span className="fw-semi-bold">Table</span>
</h3>
<p>
Each row is highlighted. You will never lost there. Just{" "}
<code>.table-striped</code> it.
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-striped">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox1"
type="checkbox"
checked={this.state.checkboxes1[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes1")
}
/>
<Label for="checkbox1" />
</div>
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox2"
type="checkbox"
checked={this.state.checkboxes1[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 1)
}
/>
<Label for="checkbox2" />
</div>
</td>
<td>Mark</td>
<td>Otto</td>
<td>
<Badge color="danger">Online</Badge>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox3"
type="checkbox"
checked={this.state.checkboxes1[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 2)
}
/>
<Label for="checkbox3" />
</div>
</td>
<td>
Jacob{" "}
<Badge color="warning" className="ml-2">
ALERT!
</Badge>
</td>
<td>Thornton</td>
<td>
<span className="text-secondary badge badge-gray">
Away
</span>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox4"
type="checkbox"
checked={this.state.checkboxes1[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 3)
}
/>
<Label for="checkbox4" />
</div>
</td>
<td>Larry</td>
<td>the Bird</td>
<td>
<Badge color="danger">Construct</Badge>
</td>
</tr>
</tbody>
</Table>
</div>
<br />
<br />
<h3>
Hover <span className="fw-semi-bold">Table</span>
</h3>
<p>
{"Trace only what's really important. "}
<code>.table-hover</code> is made for it.
</p>
<div className={s.overFlow}>
<Table className="table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
{/* eslint-disable */}
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="gray" className="text-secondary" pill>
Pending
</Badge>
</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="gray" className="text-secondary" pill>
Unconfirmed
</Badge>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="primary" className="text-secondary" pill>
New
</Badge>
</td>
</tr>
<tr>
<td>4</td>
<td>Peter</td>
<td>Horadnia</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="success" className="text-secondary" pill>
Active
</Badge>
</td>
</tr>
</tbody>
{/* eslint-enable */}
</Table>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} md={6} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Bordered <span className="fw-semi-bold">Table</span>
</h3>
<p>
Each row is highlighted. You will never lost there. That's
how all of us learned in school the table should look like. Just
add
<code>.table-bordered</code> to it.
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-bordered table-lg mt-lg mb-0">
<thead className="text-uppercase">
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox10"
type="checkbox"
checked={this.state.checkboxes2[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes2")
}
/>
<Label for="checkbox10" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox11"
type="checkbox"
checked={this.state.checkboxes2[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 1)
}
/>
<Label for="checkbox11" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines
data={[13, 14, 16, 15, 4, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#1870DC" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox12"
type="checkbox"
checked={this.state.checkboxes2[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 2)
}
/>
<Label for="checkbox12" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines
data={[14, 12, 16, 11, 17, 19, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#58D777" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox13"
type="checkbox"
checked={this.state.checkboxes2[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 3)
}
/>
<Label for="checkbox13" />
</div>
</td>
<td>Let's Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines
data={[11, 17, 19, 16, 14, 12, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#f0af03" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox14"
type="checkbox"
checked={this.state.checkboxes2[4]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 4)
}
/>
<Label for="checkbox14" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines
data={[13, 14, 20, 16, 15, 4, 14]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#F45722" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox15"
type="checkbox"
checked={this.state.checkboxes2[5]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 5)
}
/>
<Label for="checkbox15" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines
data={[16, 15, 4, 14, 13, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#4ebfbb" }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</div>
</Widget>
</Col>
<Col lg={6} md={6} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Overflow <span className="fw-semi-bold">Table</span>
</h3>
<p>
Add any non-bordered .table within a widget for a seamless
design. Awesome look for no cost. Just wrap the table with
simple css class <code>.widget-table-overflow</code> inside of
widget
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-striped table-lg mt-lg mb-0">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox20"
type="checkbox"
checked={this.state.checkboxes3[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes3")
}
/>
<Label for="checkbox20" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox21"
type="checkbox"
checked={this.state.checkboxes3[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 1)
}
/>
<Label for="checkbox21" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines
data={[13, 14, 16, 15, 4, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#1870DC" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox22"
type="checkbox"
checked={this.state.checkboxes3[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 2)
}
/>
<Label for="checkbox22" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines
data={[14, 12, 16, 11, 17, 19, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#F45722" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox23"
type="checkbox"
checked={this.state.checkboxes3[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 3)
}
/>
<Label for="checkbox23" />
</div>
</td>
<td>Let's Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines
data={[11, 17, 19, 16, 14, 12, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#f0af03" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox24"
type="checkbox"
checked={this.state.checkboxes3[4]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 4)
}
/>
<Label for="checkbox24" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines
data={[13, 14, 20, 16, 15, 4, 14]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#58D777" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox25"
type="checkbox"
checked={this.state.checkboxes3[5]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 5)
}
/>
<Label for="checkbox25" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines
data={[16, 15, 4, 14, 13, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#4ebfbb" }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
Example #26
| Source File: Dashboard.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<div className={s.root}>
<h1 className="page-title">
Dashboard
<small>
<small>The Lucky One</small>
</small>
</h1>
<Row>
<Col lg={7}>
<Widget className="bg-transparent">
<Map />
</Widget>
</Col>
<Col lg={1} />
<Col lg={4}>
<Widget
className="bg-transparent"
title={
<h5>
{" "}
Map
<span className="fw-semi-bold"> Statistics</span>
</h5>
}
settings
refresh
close
>
<p>
Status: <strong>Live</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-map-marker" />
</span>{" "}
146 Countries, 2759 Cities
</p>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Foreign Visits</h6>
<p className="description deemphasize mb-xs text-white">
Some Cool Text
</p>
<Progress
color="primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={75} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Local Visits</h6>
<p className="description deemphasize mb-xs text-white">
P. to C. Conversion
</p>
<Progress
color="danger"
value="39"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={84} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Sound Frequencies</h6>
<p className="description deemphasize mb-xs text-white">
Average Bitrate
</p>
<Progress
color="success"
value="80"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={92} />%
</small>
</span>
</div>
</div>
<h6 className="fw-semi-bold mt">Map Distributions</h6>
<p>
Tracking: <strong>Active</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-cog" />
</span>
391 elements installed, 84 sets
</p>
<div className="input-group mt">
<input
type="text"
className="form-control bg-custom-dark border-0"
placeholder="Search Map"
/>
<span className="input-group-btn">
<button
type="submit"
className={`btn btn-subtle-blue ${s.searchBtn}`}
>
<i className="fa fa-search text-light" />
</button>
</span>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> USERBASE GROWTH </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">76.38%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">10.38%</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">3.38%</p>
</div>
</div>
<Progress
color="success"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-up" />
</span>
</small>
<span className="fw-semi-bold"> 17% higher</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> TRAFFIC VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Values</h6>
<p className="value">17 567 318</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">55 120</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">9 695</p>
</div>
</div>
<Progress
color="danger"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-down" />
</span>
</small>
<span className="fw-semi-bold"> 8% lower</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> RANDOM VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name fs-sm">Overcome T.</h6>
<p className="value">104.85%</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">Takeoff Angle</h6>
<p className="value">14.29°</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">World Pop.</h6>
<p className="value">7,211M</p>
</div>
</div>
<Progress
color="bg-primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-plus" />
</span>
</small>
<span className="fw-semi-bold"> 8 734 higher</span>
than last month
</p>
</Widget>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
<span className="badge badge-success mr-2">New</span> Messages
</h6>
}
refresh
close
>
<div className="widget-body undo_padding">
<div className="list-group list-group-lg">
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA2}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Chris Gray</h6>
<p className="help-block text-ellipsis m-0">
Hey! What's up? So many times since we
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA4}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Jamey Brownlow</h6>
<p className="help-block text-ellipsis m-0">
Good news coming tonight. Seems they agreed to proceed
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA1}
alt="..."
/>
<i className="status status-bottom bg-primary" />
</span>
<div>
<h6 className="m-0">Livia Walsh</h6>
<p className="help-block text-ellipsis m-0">
Check my latest email plz!
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA5}
alt="..."
/>
<i className="status status-bottom bg-danger" />
</span>
<div>
<h6 className="m-0">Jaron Fitzroy</h6>
<p className="help-block text-ellipsis m-0">
What about summer break?
</p>
</div>
</button>
</div>
</div>
<footer className="bg-widget-transparent mt">
<input
type="search"
className="form-control form-control-sm bg-custom-dark border-0"
placeholder="Search"
/>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
{" "}
Market <span className="fw-semi-bold">Stats</span>
</h6>
}
close
>
<div className="widget-body">
<h3>$720 Earned</h3>
<p className="fs-mini text-muted mb mt-sm">
Target <span className="fw-semi-bold">$820</span> day earnings
is <span className="fw-semi-bold">96%</span> reached.
</p>
</div>
<div className={`widget-table-overflow ${s.table}`}>
<Table striped size="sm">
<thead className="no-bd">
<tr>
<th>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox210"
type="checkbox"
onClick={() => this.checkTable(0)}
checked={this.state.checkedArr[0]}
readOnly
/>{" "}
<Label for="checkbox210" />
</div>
</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox212"
type="checkbox"
onClick={() => this.checkTable(1)}
checked={this.state.checkedArr[1]}
readOnly
/>{" "}
<Label for="checkbox212" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-align-right fw-semi-bold">$346.1</td>
</tr>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox214"
onClick={() => this.checkTable(2)}
type="checkbox"
checked={this.state.checkedArr[2]}
readOnly
/>{" "}
<Label for="checkbox214" />
</div>
</td>
<td>Air Pro</td>
<td className="text-align-right fw-semi-bold">$533.1</td>
</tr>
</tbody>
</Table>
</div>
<div
className="widget-body mt-xlg chart-overflow-bottom"
style={{ height: "100px" }}
>
<Rickshaw height={100} />
</div>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6>Calendar</h6>}
settings
close
bodyClass={"pt-2 px-0 py-0"}
>
<Calendar />
<div className="list-group fs-mini">
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-primary float-right">
6:45
</span>
Weed out the flower bed
</button>
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-success float-right">
9:41
</span>
Stop world water pollution
</button>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
Example #27
| Source File: Sidebar.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<nav
className={cx(s.root)}
ref={(nav) => {
this.element = nav;
}}
>
<header className={s.logo}>
<a href="https://demo.flatlogic.com/light-blue-react/">Light <span
className="fw-bold">Blue</span></a>
</header>
<ul className={s.nav}>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Dashboard"
isHeader
iconName={<HomeIcon className={s.menuIcon} />}
link="/app/main"
index="main"
/>
<h5 className={[s.navTitle, s.groupTitle].join(' ')}>TEMPLATE</h5>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Typography"
isHeader
iconName={<TypographyIcon className={s.menuIcon} />}
link="/app/typography"
index="core"
/>
<LinksGroup
onActiveSidebarItemChange={t => this.props.dispatch(changeActiveSidebarItem(t))}
activeItem={this.props.activeItem}
header="Tables Basic"
isHeader
iconName={<TablesIcon className={s.menuIcon} />}
link="/app/tables"
index="tables"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Notifications"
isHeader
iconName={<NotificationsIcon className={s.menuIcon}/>}
link="/app/notifications"
index="ui"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Components"
isHeader
iconName={<ComponentsIcon className={s.menuIcon}/>}
link="/app/components"
index="components"
childrenLinks={[
{
header: 'Charts', link: '/app/components/charts',
},
{
header: 'Icons', link: '/app/components/icons',
},
{
header: 'Maps', link: '/app/components/maps',
},
]}
/>
</ul>
<h5 className={s.navTitle}>
LABELS
{/* eslint-disable-next-line */}
</h5>
{/* eslint-disable */}
<ul className={s.sidebarLabels}>
<li>
<a href="#">
<i className="fa fa-circle text-success mr-2"/>
<span className={s.labelName}>My Recent</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-primary mr-2"/>
<span className={s.labelName}>Starred</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-danger mr-2"/>
<span className={s.labelName}>Background</span>
</a>
</li>
</ul>
{/* eslint-enable */}
<h5 className={s.navTitle}>
PROJECTS
</h5>
<div className={s.sidebarAlerts}>
{this.props.alertsList.map(alert => // eslint-disable-line
<Alert
key={alert.id}
className={s.sidebarAlert}
color="transparent"
isOpen={true} // eslint-disable-line
toggle={() => {
this.dismissAlert(alert.id);
}}
>
<span>{alert.title}</span><br/>
<Progress className={`bg-subtle-blue progress-xs mt-1`} color={alert.color}
value={alert.value}/>
<span className={s.alertFooter}>{alert.footer}</span>
</Alert>,
)}
</div>
</nav>
);
}
Example #28
| Source File: footerSection.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span style={{"display": "contents"}}>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<CardFooter>
<Col md={6} className="widget-description">
<Row>
{this.props.box.curBid >= this.props.box.minBid && <span>
<b className="fsize-1">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)}{' '}{this.props.box.currency}
</b>{' '}
<text
style={{fontSize: '10px'}}
className="text-success pl-1 pr-1"
>
{this.props.box.increase}%
<FontAwesomeIcon icon={faAngleUp}/>
</text>
</span>}
{this.props.box.curBid < this.props.box.minBid && <span>
<i
style={{fontSize: '12px'}}
className="pl-1 pr-1"
>
No bids yet
</i>{' '}
</span>}
</Row>
</Col>
<Col md={6} className="justify-content-end ml-3">
<div className="widget-content">
<div className="widget-content-outer">
<div className="widget-content-wrapper">
{this.props.box.remTime}
</div>
<div className="widget-progress-wrapper">
<Progress
className="progress-bar-xs progress-bar-animated-alt"
value={this.props.box.done}
/>
</div>
</div>
</div>
</Col>
</CardFooter>
{!this.props.box.isFinished && <ButtonGroup>
<div className="d-block text-center">
<button className="btn-icon btn-icon-only btn btn-outline-primary"
onClick={(e) => {
e.preventDefault();
this.props.openBid();
}}>
<i className="pe-7s-edit btn-icon-wrapper"> </i>
</button>
</div>
<button type="button" className="btn btn-outline-primary btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.nextBid, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Bid
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>
{this.props.box.instantAmount !== -1 &&
<button type="button" className="btn btn-outline-dark btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.instantAmount, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Buy
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.instantAmount, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>}
</ButtonGroup>}
{this.props.box.isFinished &&
<p className="text-danger mr-2 ml-2">
{this.props.box.remTime === 0 && <text>
This auction is already finished!
</text>}
{this.props.box.remTime !== 0 && <text>
This auction has been bought with the "Instant Buy" option.
</text>}
</p>}
</span>
);
}
Example #29
| Source File: SectionProgress.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionProgress() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) {
setActiveTab(tab);
}
};
return (
<>
<div className="section">
<Container>
<Row>
<Col md="6">
<div className="title">
<h3>Progress Bar</h3>
<br />
</div>
<Progress
max="100"
value="25"
barClassName="progress-bar-success"
/>
<br />
<Progress max="100" value="50" barClassName="progress-bar-info" />
<br />
<Progress
max="100"
value="100"
barClassName="progress-bar-danger"
/>
<br />
<Progress multi>
<Progress bar max="100" value="15" />
<Progress
bar
barClassName="progress-bar-success"
max="100"
value="30"
/>
<Progress
bar
barClassName="progress-bar-warning"
max="100"
value="20"
/>
</Progress>
</Col>
<Col md="6">
<div className="title">
<h3>Pagination</h3>
<br />
</div>
<nav aria-label="Page navigation example">
<Pagination>
<PaginationItem>
<PaginationLink
aria-label="Previous"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-left" />
<span className="sr-only">Previous</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
aria-label="Next"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-right" />
<span className="sr-only">Next</span>
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
<br />
<nav aria-label="...">
<Pagination>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
tabIndex="-1"
>
Previous
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem className="active">
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3 <span className="sr-only">(current)</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Next
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
</Col>
</Row>
<br />
<Row>
<Col md="6">
<div className="title">
<h3>Navigation Tabs</h3>
</div>
<div className="nav-tabs-navigation">
<div className="nav-tabs-wrapper">
<Nav id="tabs" role="tablist" tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "3" ? "active" : ""}
onClick={() => {
toggle("3");
}}
>
Messages
</NavLink>
</NavItem>
</Nav>
</div>
</div>
<TabContent activeTab={activeTab} className="text-center">
<TabPane tabId="1">
<p>
Larger, yet dramatically thinner. More powerful, but
remarkably power efficient. With a smooth metal surface that
seamlessly meets the new Retina HD display.
</p>
</TabPane>
<TabPane tabId="2">
<p>Here is your profile.</p>
</TabPane>
<TabPane tabId="3">
<p>Here are your messages.</p>
</TabPane>
</TabContent>
</Col>
<Col md="6">
<div className="title">
<h3>Labels</h3>
</div>
<label className="label label-default mr-1">Default</label>
<label className="label label-primary mr-1">Primary</label>
<label className="label label-info mr-1">Info</label>
<label className="label label-success mr-1">Success</label>
<label className="label label-warning mr-1">Warning</label>
<label className="label label-danger">Danger</label>
</Col>
</Row>
</Container>
</div>{" "}
</>
);
}
