reactstrap#CardSubtitle JavaScript Examples
The following examples show how to use
reactstrap#CardSubtitle.
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: FormEditors.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Form Editors" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col>
<Card>
<CardBody>
<CardTitle>react-draft-wysiwyg</CardTitle>
<CardSubtitle className="mb-3">
Bootstrap-wysihtml5 is a javascript plugin that makes it
easy to create simple, beautiful wysiwyg editors with the
help of wysihtml5 and Twitter Bootstrap.
</CardSubtitle>
<Form method="post">
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
/>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #2
| Source File: ShowCard.js From master-en-code-g2 with MIT License | 6 votes |
|
ShowCard = ({ id, image, summary, name }) => {
return (
<div>
<Link to={`shows/${id}`} style={{ textDecoration: 'none' }}>
<Card style={{ width: '250px' }}>
<CardImg top width="100%" src={ image } alt="Show Image" />
<CardBody>
<CardTitle tag="h5">{ name }</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">{ id }</CardSubtitle>
<CardText>{ summary }</CardText>
</CardBody>
</Card>
</Link>
</div>
);
}
Example #3
| Source File: JobFitment.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div>
<Card className="Rounded p-3">
<CardSubtitle align="left">Job Fitment</CardSubtitle>
<hr></hr>
<br></br>
<ReactSpeedometer responsive
maxValue={100}
value={this.state.result}
segments={6}
/>
<CardText align='center'>
Description : You are {(this.state.result)} % suitable to the industry with your current
performance in all the tests conducted by GCGC
</CardText>
</Card>
</div>
);
}
Example #4
| Source File: JobFitment.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div class="container-fluid">
<Card className="Rounded p-3">
<CardSubtitle align="left">Job Fitment</CardSubtitle>
<hr></hr>
<br></br>
<ReactSpeedometer responsive
maxValue={100}
value={this.state.result}
segments={6}
/>
<CardText>
Description : You are {this.state.result} % suitable to the industry with your
current performance in all the tests conducted by T&P
</CardText>
</Card>
</div>
);
}
Example #5
| Source File: Section.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="danger" className="Rounded p-3" >
<CardTitle align="left">{this.state.sect}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>Section</Col>
<Col style={{"textAlign":"end"}}><Button onClick={()=>{this.handleModalsection()}}>Edit</Button></Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalsection()} >
<Modal.Header closeButton>Edit Section</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitsection}>
<Table className="section" responsive>
<tbody>
<tr>
<td>
<input type="text" name="section" value={this.state.sect}
onChange={this.onChangesection} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #6
| Source File: TenthMarks.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div class="container-fluid">
<Card color="success" className="Rounded p-3" >
<CardTitle align="left">{this.state.ssc}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
Tenth Percentage
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModaltenth()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModaltenth()} >
<Modal.Header closeButton>Edit Tenth Percentage</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmittenth} responsive>
<Row>
<Col>
<input type="text" name="TenthMarks" value={this.state.ssc}
onChange={this.onChangetenth} />
</Col>
<Col>
<Button type="submit">
Submit
</Button>
</Col>
</Row>
</form>
</Modal.Body>
</Modal>
</Card>
</div>
);
}
Example #7
| Source File: TwelveMarks.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div class="container-fluid">
<Card color="warning" className="Rounded p-3" >
<CardTitle align="left">{this.state.inter}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
Inter Percentage
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModaltwelve()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModaltwelve()} >
<Modal.Header closeButton>Edit Inter Percentage</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmittwelve}>
<Row>
<Col>
<input type="text" name="TwelveMarks" value={this.state.inter}
onChange={this.onChangetwelve} />
</Col>
<Col>
<Button type="submit">
Submit
</Button>
</Col>
</Row>
</form>
</Modal.Body>
</Modal>
</Card>
</div>
);
}
Example #8
| Source File: ViewContact.js From ReactJS-Projects with MIT License | 5 votes |
|
ViewContact = () => {
const { state } = useContext(ContactContext);
const { contact } = state;
return (
<Container>
<Row className="mt-5 mb-5">
<Col md="5" className="offset-md-3">
<Card className="pt-3 pb-5">
<CardBody className="text-center ">
<img
height="150"
width="150"
className="cardImg profile border-danger"
src={contact?.picture}
/>
<CardTitle className="text-primary mt-3">
<h1>{contact?.name}</h1>
</CardTitle>
<CardSubtitle>
<h3>
<FaPhone className="mr-2" />
{contact?.phoneNumber}
</h3>
</CardSubtitle>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`mailto:{contact?.email}`}
>
<FaEnvelope className="icon mr-2" />
{contact?.email}
</a>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`https://maps.google.com/?=${contact?.address}`}
>
<FaMapMarkerAlt className="icon mr-2" />
{contact?.address}
</a>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
Example #9
| Source File: CategoryData.jsx From watchmo with MIT License | 5 votes |
|
CategoryData = props => {
return (
<div>
<CardTitle>
<h4>{props.catData.name}</h4>
</CardTitle>
<CardSubtitle>
Frequency(ms): <br />{' '}
<div id="freqExamples">
(ex: 1 sec = 1000; 1 min = 60000; 30 min = 1800000; 1 hour = 3600000; 1 day = 86400000)
</div>
</CardSubtitle>
<Input
type="text"
name="frequency"
id={`${props.catData.name}-freq`}
placeholder="Set frequency of query execution"
value={props.catData.frequency}
onChange={props.freqChange}
/>
<br />
<CardSubtitle>Queries:</CardSubtitle>
<QueryList
key={props.catData.name}
name={props.catData.name}
queries={props.catData.queries}
deleteQuery={props.deleteQuery}
queryChange={props.queryChange}
/>
<div id="btnAddQuery">
<Button
className="addQueryBtn"
color="primary"
size="md"
id={`${props.catData.name}-addQuery`}
onClick={props.addQuery}
block
>
Add Query
</Button>
</div>
</div>
);
}
Example #10
| Source File: view.js From hivemind with Apache License 2.0 | 5 votes |
|
PopperCard = ({ el, poppers }) => {
const data = el.data()
let path
if (!data.isRoot) {
path = getPath(el).join(' ⟶ ')
}
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
{data.title}
<span>
<small className="text-muted">
({data.isRoot ? 'ROOT NODE' : path})
</small>
</span>
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardSubtitle>
<Row>
<Col className="mb4">Created By: {data.createdBy}</Col>
{data.lastUpdatedBy ? (
<Col className="mb4">Last Updated By: {data.lastUpdatedBy}</Col>
) : null}
</Row>
<hr />
</CardSubtitle>
<CardText tag="div">
{data.summary ? (
<>
<Row>
<h5>Summary</h5>
</Row>
<Row>{data.summary}</Row>
</>
) : null}
{data.content ? (
<>
<hr />
<Row>{data.content}</Row>
</>
) : null}
{data.audio ? (
<>
<Row>
<h5>Audio</h5>
</Row>
<Row>
<audio controls>
<source src={data.audio}/>
</audio>
</Row>
</>
) : null}
</CardText>
</CardBody>
</Card>
)
}
Example #11
| Source File: ExperienceCard.jsx From developer-portfolio with Apache License 2.0 | 5 votes |
|
ExperienceCard = ({ data }) => {
return (
<Col lg="6">
<Fade left duration={2000}>
<Card
style={{ flex: 1 }}
className="shadow-lg--hover mb-3 shadow border-0 text-center rounded"
>
<CardBody className="">
<img
src={data.companylogo}
style={{
objectFit: "cover",
left: 0,
right: 0,
top: "7rem",
marginLeft: "auto",
marginRight: "auto",
width: "8rem",
height: "8rem",
borderRadius: "50%",
}}
className="shadow mb-3"
alt={data.companylogo}
/>
<CardTitle tag="h4" className="mb-2">
{data.company}
</CardTitle>
<CardSubtitle tag="h5" className="mb-2">
{data.role}
</CardSubtitle>
<CardSubtitle>{data.date}</CardSubtitle>
<CardText
tag="div"
className="description my-3 text-left"
>
{data.desc}
<ul>
{data.descBullets
? data.descBullets.map((desc) => {
return <li key={desc}>{desc}</li>;
})
: null}
</ul>
</CardText>
</CardBody>
</Card>
</Fade>
</Col>
);
}
Example #12
| Source File: studentdetails.js From GB-GCGC with MIT License | 5 votes |
|
function studentdetails() {
return (
<div>
<div className='container'>
<Row>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="success" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">Tenth Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="warning" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">Inter Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4" style={{marginRight:'2rem'}}>
<Card color="danger" className="Rounded p-3">
<CardTitle align="left">90%</CardTitle>
<CardSubtitle align="left">B Tech Percentage</CardSubtitle>
</Card>
</Col>
</Row>
</div>
<br></br>
<Collapsible trigger="More Info">
<br></br>
<Row>
<Col md="4">
<Alert color="success" className="Rounded p-3">
<CardTitle align="left">CSE</CardTitle>
<CardSubtitle align="left">Branch</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="warning" className="Rounded p-3">
<CardTitle align="left">A</CardTitle>
<CardSubtitle align="left">Pass Category</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="danger" className="Rounded p-3">
<CardTitle align="left">B</CardTitle>
<CardSubtitle align="left">Section</CardSubtitle>
</Alert>
</Col>
</Row>
</Collapsible>
</div>
);
}
Example #13
| Source File: Cocubes.js From GB-GCGC with MIT License | 5 votes |
|
render(){
if (this.state.id==0){
return( <div>
</div>);
}
else{
return (
<div className="Cocubes">
<Card className="Rounded p-3">
<CardSubtitle align="left">Cocubes Analysis</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Aptitude', 'English', 'Quantitative', 'Analytical', 'Domain', 'Computer Fundamentals',
'Coding','WET'],
datasets: [
{
label: 'COCUBES1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.Aptitude,this.state.English,this.state.Quantitative,this.state.Analytical,this.state.Domain,
this.state.ComputerFundamentals,this.state.Coding,this.state.WET],
},
{
label: 'COCUBES2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0,0,0],
},
],
}}
/>
</Card>
</div>
);
}
}
Example #14
| Source File: Amcat.js From GB-GCGC with MIT License | 5 votes |
|
render(){
if(this.state.id==="NI" || this.state.id=="NA"){
return(<div></div>)
}
return (
<div className="Amcat">
<Card className="Rounded p-3">
<CardSubtitle align="left">Amcat Analysis</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Logical Ability', 'English Comprehension', 'Quantitative Ability', 'Automata', 'Automata Fix', 'Domain_1', 'Domain_2'],
datasets: [
{
label: 'AMCAT1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.LogicalAbility,this.state.EnglishComprehension,this.state.QuantitativeAbility,this.state.Automata,
this.state.AutomataFix,this.state.Domain1,this.state.Domain2],
},
{
label: 'AMCAT2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0]
}
]
}}
/>
</Card>
</div>
);
}
Example #15
| Source File: MusicData.js From Music-Hoster-FrontEnd-Using-React with MIT License | 5 votes |
|
// download(id){
// var token = "Bearer " + localStorage.getItem("jwt");
// let url = '/getpostbyid/' + id;
// fetch(url,{
// headers :{
// "Authorization" : token,
// }
// })
// .then(response => {
// response.blob().then(blob => {
// let url = window.URL.createObjectURL(blob);
// let a = document.createElement('a');
// a.href = url;
// a.download = 'employees.json';
// a.click();
// });
// //window.location.href = response.url;
// });
// }
render(){
let peopleCards = this.state.files.map(data => {
return (
<Col xs="3" key = {data.musicId} className="col">
<div className="div">
<Card>
<i class="fas fa-file-alt"></i>
{/* <Button color="danger" className="btn" onClick={() => this.download(data.musicId)}>Download</Button> */}
<CardBody className="cbody">
<CardTitle><h4 className="tag">{data.tag}</h4></CardTitle>
<CardSubtitle className="name">{data.name}</CardSubtitle>
<CardText className="description">{data.description}</CardText>
<Button color="danger" className="btn" onClick={() => this.delete(data.musicId)}>Delete</Button>
</CardBody>
</Card>
</div>
</Col>
)
})
return (
<Container fluid="md" className="container">
<Row xs="3" className="row">
{peopleCards}
</Row>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</Container>
)
}
Example #16
| Source File: BtechMarks.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div class="container-fluid">
<Card color="danger" className="Rounded p-3" >
<CardTitle align="left">{this.state.gpa}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
B Tech CGPA
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbtech()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalbtech()} >
<Modal.Header closeButton>Edit B.Tech Marks</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitgpa}>
<Row>
<Col>
<input type="text" name="B.techMarks" value={this.state.gpa}
onChange={this.onChangebtech} />
</Col>
<Col>
<Button type="submit">
Submit
</Button>
{/*<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>*/}
</Col>
</Row>
</form>
</Modal.Body>
</Modal>
</Card>
</div>
);
}
Example #17
| Source File: Branch.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="success" className="Rounded p-3" >
<CardTitle align="left">{this.state.branch.slice(0,3)}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
Branch
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbranch()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalbranch()} >
<Modal.Header closeButton>Edit Branch</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitbranch}>
<Table className="branchMarks" responsive>
<tbody>
<tr>
<td>
<input type="text" name="Branch" value={this.state.branch}
onChange={this.onChangebranch} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #18
| Source File: Pass.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="warning" className="Rounded p-3" >
<CardTitle align="left">{this.state.pass}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
Pass Category
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalpass()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalpass()} >
<Modal.Header closeButton>Edit Pass Category</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitpass}>
<Table className="passcategory" responsive>
<tbody>
<tr>
<td>
<input type="text" name="passcategory" value={this.state.pass}
onChange={this.onChangepass} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #19
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
HideCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-4 Hivemind.png"
alt="Context Menu"
/>
<CardBody>
<CardTitle tag="h5">Open the Context Menu</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
The ‘<EyeOff /> Hide’ option is accessible from any node on the
canvas (except root).
</CardSubtitle>
<CardText>Useful for reducing clutter on the canvas.</CardText>
</CardBody>
</Card>
),
caption: 'Open the Context Menu',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-8 Hivemind.png"
alt="Hide Node"
/>
<CardBody>
<CardTitle tag="h5">Hide a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<EyeOff /> Hide’ option from the
context menu.
</CardSubtitle>
<CardText>
Hides the entire sub-tree under this node (as well as the node
itself). Shades the parent to indicate hidden children.
</CardText>
</CardBody>
</Card>
),
caption: 'Hide a Child Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #20
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Cards</strong>
</h5>
<div>
<Card>
<CardImg
top
width="100%"
src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
alt="Card cap"
/>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the bulk of the cards
content.
</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</div>
<div className="mb-5">
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
</CardBody>
<CardImg
top
width="100%"
src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
alt="Card cap"
/>
<CardBody>
<CardText>
Some quick example text to build on the card title and make up the bulk of the cards
content.
</CardText>
<CardLink>Card Link</CardLink>
<CardLink>Another Link</CardLink>
</CardBody>
</Card>
</div>
<h5 className="mb-4">
<strong>Colorful Cards</strong>
</h5>
<div className="row">
<div className="col-lg-6">
<Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button>Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="primary">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="success">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="info">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="warning">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="danger">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
</div>
</div>
)
}
Example #21
| Source File: UiCards.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Cards" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img1} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Button</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img2} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
<ul className="list-group list-group-flush">
<li className="list-group-item">Cras justo odio</li>
<li className="list-group-item">Dapibus ac facilisis in</li>
</ul>
<CardBody>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img3} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col md={6} xl={3}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardSubtitle className="font-14 text-muted">Support card subtitle</CardSubtitle>
</CardBody>
<CardImg className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-center">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-right">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardHeader className="mt-0">Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary">Go somewhere</Link>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>
Quote
</CardHeader>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</CardBody>
<CardFooter className="text-muted">
2 days ago
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
<CardImg bottom className="img-fluid" src={img7} alt="Skote" />
</Card>
</Col>
<Col lg={4}>
<Card>
<CardImg className="img-fluid" src={img6} alt="Skote" />
<CardImgOverlay>
<CardTitle className="text-white mt-0">Card title</CardTitle>
<CardText className="text-light">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-white">Last updated 3 mins ago</small>
</CardText>
</CardImgOverlay>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={4}>
<CardImg className="img-fluid" src={img2} alt="Skote" />
</Col>
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
</Row>
</Card>
</Col>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
<Col md={4}>
<CardImg className="img-fluid" src={img3} alt="Skote" />
</Col>
</Row>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="primary" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-bullseye-arrow mr-3"></i> Primary Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="success" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-check-all mr-3"></i> Success Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="info" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Info Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="warning" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-outline mr-3"></i>Warning Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="danger" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-block-helper mr-3"></i>Danger Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="dark" className="text-light">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Dark Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card outline color="primary" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-primary"><i className="mdi mdi-bullseye-arrow mr-3"></i>Primary outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="danger" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-danger"><i className="mdi mdi-block-helper mr-3"></i>Danger outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="success" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-success"><i className="mdi mdi-check-all mr-3"></i>Success Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} className="mb-4">
<h4 className="my-3">Decks</h4>
<CardDeck>
<Card>
<CardImg top className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img6} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</CardDeck>
</Col>
</Row>
<Row>
<Col sm={12}>
<h4 className="my-3">Cards Columns</h4>
<CardColumns>
<Card>
<CardImg top src={img3} alt="Skote" />
<CardBody>
<CardTitle>Card title that wraps to a new line</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
</CardBody>
</Card>
<Card>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
<Card>
<CardImg top src={img5} alt="Skote" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card color="primary" className="text-white text-center p-3">
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</CardText>
<footer className="blockquote-footer text-white font-size-12">Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</Card>
<Card className="text-center">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has a regular title and short paragraphy of text below it.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card>
<CardImg top src={img7} alt="Skote" />
</Card>
<Card className="p-3 text-right">
<blockquote className="blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer">
<small className="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</Card>
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
</CardColumns>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #22
| Source File: FormXeditable.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 Xeditable" breadcrumbItems={this.state.breadcrumbItems} /> */}
<Row>
<Col>
<Card>
<CardBody>
<CardTitle>Inline Example</CardTitle>
<CardSubtitle className="mb-3">
This library allows you to create editable elements on
your page. It can be used with any engine (bootstrap,
jquery-ui, jquery only) and includes both popup and inline
modes. Please try out demo to see how it works.
</CardSubtitle>
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "50%" }}>Inline</th>
<th>Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simple Text Field</td>
<td>
<Editable
alwaysEditing={false}
disabled={false}
editText="superuser"
id={null}
isValueClickable={false}
mode="inline"
placement="top"
showText
type="textfield"
/>
</td>
</tr>
<tr>
<td>Empty text field, required</td>
<td>
<Editable
ajax={null}
alwaysEditing={false}
className={null}
disabled={false}
editText="Empty"
id={null}
isValueClickable={false}
label={null}
mode="inline"
onSubmit={null}
onValidated={null}
placement="top"
showText
type="textfield"
validate={(value) => {
if (!value) {
return 'Required';
}
}}
/>
</td>
</tr>
<tr>
<td>Select, local array, custom display</td>
<td>
<Editable
ajax={null}
alwaysEditing={false}
className={null}
disabled={false}
editText="male"
id={null}
isValueClickable={false}
label={null}
mode="inline"
onSubmit={null}
onValidated={null}
options={["male", "female"]}
placement="top"
showText
type="select"
validate={null}
/>
</td>
</tr>
<tr>
<td>Combodate</td>
<td>
<Editable
ajax={null}
alwaysEditing={false}
className={null}
disabled={false}
editText="Enter Date"
id={null}
isValueClickable={false}
label={null}
mode="inline"
onSubmit={null}
onValidated={null}
placement="top"
showText
type="date"
validate={null}
/>
</td>
</tr>
<tr>
<td>
Textarea, buttons below. Submit by ctrl+enter
</td>
<td>
<Editable
ajax={null}
alwaysEditing={false}
className={null}
disabled={false}
editText="Awesome User"
id={null}
isValueClickable={false}
label={null}
mode="inline"
onSubmit={null}
onValidated={null}
placement="top"
showText
type="textarea"
validate={null}
/>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #23
| Source File: FormUpload.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 Upload" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xs={12}>
<Card>
<CardBody>
<CardTitle>Dropzone</CardTitle>
<CardSubtitle className="mb-3"> DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
</CardSubtitle>
<Form>
<Dropzone
onDrop={acceptedFiles =>
this.handleAcceptedFiles(acceptedFiles)
}
>
{({ getRootProps, getInputProps }) => (
<div className="dropzone">
<div
className="dz-message needsclick mt-2"
{...getRootProps()}
>
<input {...getInputProps()} />
<div className="mb-3">
<i className="display-4 text-muted ri-upload-cloud-2-line"></i>
</div>
<h4>Drop files here or click to upload.</h4>
</div>
</div>
)}
</Dropzone>
<div
className="dropzone-previews mt-3"
id="file-previews"
>
{this.state.selectedFiles.map((f, i) => {
return (
<Card
className="mt-1 mb-0 shadow-none border dz-processing dz-image-preview dz-success dz-complete"
key={i + "-file"}
>
<div className="p-2">
<Row className="align-items-center">
<Col className="col-auto">
<img
data-dz-thumbnail=""
height="80"
className="avatar-sm rounded bg-light"
alt={f.name}
src={f.preview}
/>
</Col>
<Col>
<Link
to="#"
className="text-muted font-weight-bold"
>
{f.name}
</Link>
<p className="mb-0">
<strong>{f.formattedSize}</strong>
</p>
</Col>
</Row>
</div>
</Card>
);
})}
</div>
</Form>
<div className="text-center mt-4">
<Button color="primary" type="button" className="waves-effect waves-light">Send Files</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #24
| Source File: ARI.js From GB-GCGC with MIT License | 4 votes |
|
render() {
return (
<div class="container-fluid">
<Row>
<Col sm="12">
<Card className="Rounded p-3">
<CardSubtitle align="left">
<Row>
<Col>
Assesment Report Internal
</Col>
<Col style={{"textAlign":"end"}}>
<Button
style={{"background-color": "rgb(42, 50, 75)"}}
onClick={() => {
this.handleModalARI();
}}
>
Edit
</Button>
</Col>
</Row>
</CardSubtitle>
<hr></hr>
<Bar
data={{
labels: ['CT1','CT2','CT3','CT4','CT5','CT6','TT1','TT2','TT3','TT4','TT5','TT6','TT7','TT8','DT1','DT2','DT3','DT4'],
datasets: [
{
label:undefined,
backgroundColor: ['lightblue','lightblue','lightblue','lightblue','lightblue','lightblue',
'lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen',
'pink','pink','pink','pink'
],
borderColor: ['lightblue','lightblue','lightblue','lightblue','lightblue','lightblue',
'lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen','lightgreen',
'pink','pink','pink','pink'
],
borderWidth: 1,
hoverBackgroundColor: ['blue','blue','blue','blue','blue','blue','green','green','green','green','green','green','green','green','red','red','red','red'],
hoverBorderColor: ['blue','blue','blue','blue','blue','blue','green','green','green','green','green','green','green','green','red','red','red','red'],
data: [this.state.AT1,this.state.AT2,this.state.AT3,this.state.AT4,this.state.AT5,this.state.AT6,this.state.TT1,this.state.TT2,this.state.TT3,this.state.TT4,
this.state.TT5,this.state.TT6,this.state.TT7,this.state.TT8,this.state.DT1,this.state.DT2,this.state.DT3,this.state.DT4],
},
],
}}
options={{
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
stepSize: 20
}
}]
},
}}
/>
<br></br>
<Modal
show={this.state.show}
onHide={() => this.handleModalARI()}
size="lg"
style={{ maxWidth: "1600px", width: "80%" }}
>
<Modal.Header closeButton>Edit ARI Marks</Modal.Header>
<form onSubmit={this.onSubmitARI}>
<Modal.Body>
<form>
<Table className="ARIedit" responsive>
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>AT</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at1"
value={this.state.AT1}
onChange={this.onChangeAT1}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at2"
value={this.state.AT2}
onChange={this.onChangeAT2}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at3"
value={this.state.AT3}
onChange={this.onChangeAT3}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at4"
value={this.state.AT4}
onChange={this.onChangeAT4}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at5"
value={this.state.AT5}
onChange={this.onChangeAT5}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="at6"
value={this.state.AT6}
onChange={this.onChangeAT6}
/>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>TT</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt1"
value={this.state.TT1}
onChange={this.onChangeTT1}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt2"
value={this.state.TT2}
onChange={this.onChangeTT2}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt3"
value={this.state.TT3}
onChange={this.onChangeTT3}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt4"
value={this.state.TT4}
onChange={this.onChangeTT4}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt5"
value={this.state.TT5}
onChange={this.onChangeTT5}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt6"
value={this.state.TT6}
onChange={this.onChangeTT6}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt7"
value={this.state.TT7}
onChange={this.onChangeTT7}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="tt8"
value={this.state.TT8}
onChange={this.onChangeTT8}
/>
</td>
</tr>
<tr>
<td>DT</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="dt1"
value={this.state.DT1}
onChange={this.onChangeDT1}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="dt2"
value={this.state.DT2}
onChange={this.onChangeDT2}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="dt3"
value={this.state.DT3}
onChange={this.onChangeDT3}
/>
</td>
<td>
<input
type="text"
style={{ width: "50px" }}
name="dt4"
value={this.state.DT4}
onChange={this.onChangeDT4}
/>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</Table>
</form>
</Modal.Body>
<Modal.Footer>
<Button type="submit">Submit</Button>
</Modal.Footer>
</form>
</Modal>
</Card>
</Col>
</Row>
</div>
);
}
Example #25
| Source File: ChatRoom.js From react-js-chat-webapp-example with MIT License | 4 votes |
|
function ChatRoom() {
const [chats, setChats] = useState([]);
const [users, setUsers] = useState([]);
const [nickname, setNickname] = useState('');
const [roomname, setRoomname] = useState('');
const [newchat, setNewchat] = useState({ roomname: '', nickname: '', message: '', date: '', type: '' });
const history = useHistory();
const { room } = useParams();
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('chats/').orderByChild('roomname').equalTo(roomname).on('value', resp => {
setChats([]);
setChats(snapshotToArray(resp));
});
};
fetchData();
}, [room, roomname]);
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).on('value', (resp2) => {
setUsers([]);
const roomusers = snapshotToArray(resp2);
setUsers(roomusers.filter(x => x.status === 'online'));
});
};
fetchData();
}, [room, roomname]);
const snapshotToArray = (snapshot) => {
const returnArr = [];
snapshot.forEach((childSnapshot) => {
const item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
const submitMessage = (e) => {
e.preventDefault();
const chat = newchat;
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.type = 'message';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
setNewchat({ roomname: '', nickname: '', message: '', date: '', type: '' });
};
const onChange = (e) => {
e.persist();
setNewchat({...newchat, [e.target.name]: e.target.value});
}
const exitChat = (e) => {
const chat = { roomname: '', nickname: '', message: '', date: '', type: '' };
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.message = `${nickname} leave the room`;
chat.type = 'exit';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).once('value', (resp) => {
let roomuser = [];
roomuser = snapshotToArray(resp);
const user = roomuser.find(x => x.nickname === nickname);
if (user !== undefined) {
const userRef = firebase.database().ref('roomusers/' + user.key);
userRef.update({status: 'offline'});
}
});
history.goBack();
}
return (
<div className="Container">
<Container>
<Row>
<Col xs="4">
<div>
<Card className="UsersCard">
<CardBody>
<CardSubtitle>
<Button variant="primary" type="button" onClick={() => { exitChat() }}>
Exit Chat
</Button>
</CardSubtitle>
</CardBody>
</Card>
{users.map((item, idx) => (
<Card key={idx} className="UsersCard">
<CardBody>
<CardSubtitle>{item.nickname}</CardSubtitle>
</CardBody>
</Card>
))}
</div>
</Col>
<Col xs="8">
<ScrollToBottom className="ChatContent">
{chats.map((item, idx) => (
<div key={idx} className="MessageBox">
{item.type ==='join'||item.type === 'exit'?
<div className="ChatStatus">
<span className="ChatDate">{item.date}</span>
<span className="ChatContentCenter">{item.message}</span>
</div>:
<div className="ChatMessage">
<div className={`${item.nickname === nickname? "RightBubble":"LeftBubble"}`}>
{item.nickname === nickname ?
<span className="MsgName">Me</span>:<span className="MsgName">{item.nickname}</span>
}
<span className="MsgDate"> at {item.date}</span>
<p>{item.message}</p>
</div>
</div>
}
</div>
))}
</ScrollToBottom>
<footer className="StickyFooter">
<Form className="MessageForm" onSubmit={submitMessage}>
<InputGroup>
<Input type="text" name="message" id="message" placeholder="Enter message here" value={newchat.message} onChange={onChange} />
<InputGroupAddon addonType="append">
<Button variant="primary" type="submit">Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</footer>
</Col>
</Row>
</Container>
</div>
);
}
Example #26
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
Page = () => (
<Row>
<Col
xs="auto"
md={3}
tabIndex="1"
style={{ height: '90vh', overflowY: 'scroll' }}
>
<h3>Navigation</h3>
<Nav vertical id={'nav'} className={'navbar-light bg-light'}>
<NavLink href="#intro">Introduction</NavLink>
<NavLink href="#at-a-glance">At a Glance</NavLink>
<Nav vertical>
<NavLink href="#key-points" className={'ml-3'}>
Key Points
</NavLink>
</Nav>
<NavLink href="#quick-start">Quick Start</NavLink>
<Nav vertical>
<NavLink href="#logging-in" className={'ml-3'}>
Logging In
</NavLink>
<NavLink href="#create-mind-map" className={'ml-3'}>
Creating a mind map
</NavLink>
<NavLink href="#create-child-node" className={'ml-3'}>
Creating a (child) node
</NavLink>
<NavLink href="#delete-node" className={'ml-3'}>
Deleting a node
</NavLink>
<NavLink href="#edit-node" className={'ml-3'}>
Editing a node
</NavLink>
<NavLink href="#view-node" className={'ml-3'}>
Viewing a node
</NavLink>
<NavLink href="#hide-node" className={'ml-3'}>
Hiding a node
</NavLink>
<NavLink href="#reveal-node" className={'ml-3'}>
Revealing (Un-hiding) a node (sub-tree)
</NavLink>
<NavLink href="#time-travel" className={'ml-3'}>
Time travel
</NavLink>
<Nav vertical>
<NavLink href="#timeline" className={'ml-5'}>
Using the Timeline
</NavLink>
<NavLink href="#playback" className={'ml-5'}>
Using the Playback Buttons
</NavLink>
</Nav>
<NavLink href="#search" className={'ml-3'}>
Searching
</NavLink>
<NavLink href="#rename" className={'ml-3'}>
Renaming a mind map
</NavLink>
<NavLink href="#fit" className={'ml-3'}>
Fit on canvas
</NavLink>
<NavLink href="#show-all" className={'ml-3'}>
Show All
</NavLink>
</Nav>
</Nav>
</Col>
<Col
xs="auto"
md={9}
tabIndex="0"
style={{ height: '90vh', overflowY: 'scroll' }}
>
<Jumbotron>
<h1 id={'intro'}>Introduction</h1>
<p>
Hivemind is a free tool that lets you create mind maps in your
browser. It supports time-travel (through the change history of the
mind map), tagging specific time points (
<Badge color="secondary">Planned</Badge>) and collaborative editing (
<Badge color="secondary">Planned</Badge>).
</p>
<h1 id={'at-a-glance'}>At a Glance</h1>
<p>
Each mind map is modelled as a tree, ie. it has a single root node,
and all other nodes are descendants of this root node through a single
hierarchy. There are no cases of multiple parents, cycles, loops
(self-joining edges), parallel edges or orphaned nodes.
</p>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28 Hivemind.png"
alt="Example Mind Map"
/>
<CardBody>
<CardTitle tag="h5">An example mind map</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Tree structure with a single root node.
</CardSubtitle>
<CardText>
This tree is 3 levels deep. Each node can have one or more
children, but exactly one parent (except the root node, which
has none). The timeline at the bottom shows at what points this
mind map was modified.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<p>
Each node in the mindmap is a container for information. There is a
title, a summary and a content field. This node is connected to
exactly one parent by an edge (except when it is the root node), and
can optionally have one or mode child nodes. The edges themselves do
not carry any information at present, other than which nodes they
connect.
</p>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
alt="Node Details"
/>
<CardBody>
<CardTitle tag="h5">Expanded view of a node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by a context menu upon clicking the node.
</CardSubtitle>
<CardText>
Apart from the title, summary and content, a few other bits of
information are displayed, like who created/last updated the
node, and where the node sits in the overall hierarchy.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<h2 id={'key-points'}>Key Points</h2>
<p>
Every write operation that is performed on a node
(create/update/delete) is recorded permanently in a time-travelling
database, allowing for point-in-time lookups of any historic version
of a single node or the graph as a whole.
</p>
<ol>
<li>
The root node is special - it cannot be deleted, and is the only
node without a parent.
</li>
<li className={'text-danger'}>
Whenever a node is deleted, the entire subtree under it is also
deleted in order to ensure there are no orphaned nodes.
</li>
<li>
Only users with edit or admin access can perform write operations on
the tree.
</li>
<li>
<Badge color="secondary">Planned</Badge> A user with admin access
can additionally share the mindmap with other users (by
granting/revoking read/write/admin access) or make it publicly
(in)visible (read-only).
</li>
<li>
<Badge color="secondary">Planned</Badge> Only an admin user can
delete a mind map.
</li>
<li className={'text-danger'}>
Access control is <strong>NOT</strong> modelled temporally, ie. if
your access to a mind map is revoked, you lose access to ALL its
history, not just from the time of revocation. Conversely, if you
are granted access to a mind map, you gain access to its{' '}
<strong>ENTIRE</strong> history, not just from now onwards.
</li>
</ol>
<h1 id={'quick-start'}>Quick Start</h1>
<h2 id={'logging-in'}>Logging in</h2>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-2 Hivemind.png"
alt="Login Prompt"
/>
<CardBody>
<CardTitle tag="h5">Login Prompt</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Login via email or an external authentication provider.
</CardSubtitle>
<CardText>
Anonymous users must first login to start creating mind maps.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>
Go the the Hivemind{' '}
<Link href={'/'}>
<a>home</a>
</Link>{' '}
page.
</li>
<li>
If you're not logged in, you'll see a login prompt as shown in the
example above.
</li>
<li>
Use an email (that you own) or one of the other providers (currently
Google, GitHub) to sign in.
</li>
<li>
If you're signing in for the first time, you'll have to perform a
few extra steps, either to set your password, or to authorize
Hivemind with the external provider.
</li>
<li>
Once you've signed in, you'll be redirected to the list of mind maps
that you own.
</li>
</ul>
<h2 id={'create-mind-map'}>Creating a mind map</h2>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-3 Hivemind.png"
alt="Login Prompt"
/>
<CardBody>
<CardTitle tag="h5">Create a Mind Map</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed from the mind maps{' '}
<Link href={'/mmaps'}>
<a>list</a>
</Link>{' '}
page.
</CardSubtitle>
<CardText>
Click on the{' '}
<Button color="success" size="sm" id="create">
<Plus /> Create
</Button>{' '}
button. Then just type a name and hit ⏎.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>
Go to the mind maps{' '}
<Link href={'/mmaps'}>
<a>list</a>
</Link>{' '}
page.
</li>
<li>
Click on the{' '}
<Button color="success" size="sm" id="create">
<Plus /> Create
</Button>{' '}
button.
</li>
<li>Type a name and hit ⏎ (<Enter>).</li>
<li>
<strong>
The first node in the mind map will inherit its title from the
mind map's name.
</strong>
</li>
</ul>
<h2 id={'create-child-node'}>Creating a (child) node</h2>
<p>
Each node (except the root node) is a child of exactly one other node.
While the root node is automatically created for you when you create
the mind map, every other node must be created as a descendant of the
root node by accessing a context menu within the mind map canvas (the
black area). This context menu is available on all nodes, but its
contents could vary depending on a number of factors. The ‘create
child’ option is available, provided:
</p>
<ol>
<li>The user has ‘admin’ or ‘write’ access to the mind map, and</li>
<li>
The mind map is being viewed in ‘write’ mode (i.e., not in ‘lookback
mode’ - to be discussed later).
</li>
</ol>
<CollapsibleExample>
<CreateChildCarousel />
</CollapsibleExample>
<ul>
<li>Click on the node under which you wish to create the child.</li>
<li>
Select the ‘<Plus /> Child’ option.
</li>
<li>Type a name and hit ⏎ (<Enter>).</li>
<li>The new node will show up under the node selected above.</li>
</ul>
<h2 id={'delete-node'}>Deleting a node</h2>
<p>
All nodes (except the root node) can be deleted. Upon deletion, the
entire sub-tree under the deleted node is also deleted. The ‘delete
node’ option is available, provided:
</p>
<ol>
<li>The user has ‘admin’ or ‘write’ access to the mind map,</li>
<li>
The mind map is being viewed in ‘write’ mode (i.e., not in ‘lookback
mode’ - to be discussed later), and
</li>
<li>The node is not the root node.</li>
</ol>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-6 Hivemind.png"
alt="Delete a node"
/>
<CardBody>
<CardTitle tag="h5">Delete a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<Trash2 /> Del’ option from the
context menu.
</CardSubtitle>
<CardText>
Confirm delete operation to get rid of the node (and all of its
descendants, if present).
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>Click on the node that you would like to remove.</li>
<li>
Select the ‘<Trash2 /> Del’ option.
</li>
<li>
Confirm that you want to delete the node by clicking the{' '}
<Button size="sm" color="danger">
<Trash2 /> Delete
</Button>{' '}
button.
</li>
</ul>
<h2 id={'edit-node'}>Editing a node</h2>
<p>
All nodes can be edited. The ‘edit node’ option is available,
provided:
</p>
<ol>
<li>The user has ‘admin’ or ‘write’ access to the mind map, and</li>
<li>
The mind map is being viewed in ‘write’ mode (i.e., not in ‘lookback
mode’ - to be discussed later).
</li>
</ol>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-7 Hivemind.png"
alt="Edit a node"
/>
<CardBody>
<CardTitle tag="h5">Edit a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<Edit3 /> Edit’ option from the
context menu.
</CardSubtitle>
<CardText>
Edit one or more of the ‘title’, ‘summary’ and ‘content’ fields,
and click the{' '}
<Button color="primary" size="sm">
<Save /> Save
</Button>{' '}
button.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>Click on the node that you would like to edit.</li>
<li>
Select the ‘<Edit3 /> Edit’ option.
</li>
<li>
The popup screen will appear with a title, summary and content of
the node.
</li>
<li>
Modify one or more of the attributes as required as click on
<Button color="primary" size="sm">
<Save /> Save
</Button>
.
</li>
</ul>
<h2 id={'view-node'}>Viewing a node</h2>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
alt="View a node"
/>
<CardBody>
<CardTitle tag="h5">View a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<Eye /> View’ option from the
context menu.
</CardSubtitle>
<CardText>
View the title, summary and content of the node. Also shows its
position in the hierarchy and who created/last updated it.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>Click on the node that you would like to view.</li>
<li>
Select the ‘<Eye /> View’ option.
</li>
<li>
The popup screen will appear with a title, summary and content of
the node.
</li>
</ul>
<h2 id={'hide-node'}>Hiding a node</h2>
<p>
Each node (except the root node) has an option to be hidden from
display on the canvas. This can be useful to temporarily remove
clutter when a large number of nodes are on display. Upon hiding, the
entire sub-tree under the node is also hidden. To indicate that a node
was hidden, its parent is marked in a grey/black shaded background.
The hidden node (and all its descendants) can be revealed using a menu
option under its parent.
</p>
<CollapsibleExample>
<HideCarousel />
</CollapsibleExample>
<ul>
<li>Click on the node which you wish to hide.</li>
<li>
Select the ‘<EyeOff /> Hide’ option.
</li>
<li>
Hides the entire sub-tree under this node (as well as the node
itself).
</li>
<li>Shades the parent to indicate hidden children.</li>
</ul>
<h2 id={'reveal-node'}>Revealing (Un-hiding) a node (sub-tree)</h2>
<p>
A hidden node (and its descendants) is indicated by a shaded
background on its parent. To reveal its sub-tree and render them back
onto the canvas, a menu option is added to the parent (only for
parents with hidden children). Clicking on this reveals (un-hides) the{' '}
<strong>entire sub-tree under the parent</strong>.
</p>
<CollapsibleExample>
<RevealCarousel />
</CollapsibleExample>
<ul>
<li>Click on the (shaded) node whose children you wish to reveal.</li>
<li>
Select the ‘<Eye /><ArrowDownRight /> Reveal’ option.
</li>
<li>
Reveals the <strong>entire sub-tree under this node</strong>.
</li>
<li>Un-shades the node to indicate no hidden children.</li>
</ul>
<h2 id={'time-travel'}>Time travel</h2>
<p>
Hivemind can <strong>time-travel</strong>. What this means is, as you
keep changing the mindmap through create/edit/delete operations,
Hivemind keeps track of all these changes and retains a history of all
the revisions of the mind map as a whole. This gives users of Hivemind
the unique ability to rewind back to any point in time through the
history of the mind map, and view it as it was at that time. This is
achieved either by using the timeline component (below the canvas) or
the playback buttons (in the menu bar above the canvas). See the image
below.
</p>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-10 Hivemind.png"
alt="Time Travel Controls"
/>
<CardBody>
<CardTitle tag="h5">Time Travel</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Use the playback buttons or the timeline.
</CardSubtitle>
<CardText>
Travel back/forth through the history of changes to the mind
map, and view it as it was at any point in time through its
lifecycle.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<p>
Whenever the user travels through time to look back at a historical
version of the mind map, it is said to be in{' '}
<strong>‘lookback mode’</strong>, and all modifications are disabled
(since its history is treated as immutable). This is indicated in
three ways:
</p>
<ol>
<li>
A <code>timestamp</code> query parameter in the URL, which also
serves as a permalink to this point-in-time version of the mind map,
</li>
<li>
A button at the top right of the menu bar, which shows a{' '}
<span className={'text-secondary'}>
<Lock />
</span>{' '}
symbol (otherwise showing a{' '}
<span className={'text-danger'}>
<Unlock />
</span>{' '}
symbol when in ‘write mode’),
</li>
<li>
A grey border around the canvas (which is otherwise red in ‘write
mode’).
</li>
</ol>
<p>
<strong>
While the mind map is in ‘lookback mode’, it cannot be edited.
</strong>
</p>
<h3 id={'timeline'}>Using the Timeline</h3>
<p>
The timeline is the component displayed at the bottom of the mind map
canvas, that shows a time series of write events that took place on
the mind map, in chronological order. It has the following properties:
</p>
<ol>
<li>
The timeline can zoom in and out. This is manually achieved by
scrolling while the cursor is on the timeline (or using pinch zoom
on a touchscreen).
</li>
<li>
When fully zoomed out, the timeline fits all events of the mind map.
It cannot be zoomed out beyond the boundaries defined by the first
and the last events of the mind map.
</li>
<li>When fully zoomed in, it has a resolution of 1 minute.</li>
<li>
Events are color-coded to depict their type. A ‘create’ event is{' '}
<span className={'text-success'}>green</span>, an ‘update’ event is{' '}
<span className={'text-primary'}>blue</span> and a ‘delete’ event is{' '}
<span className={'text-danger'}>red</span>.
</li>
<li>
When two or more events get too close together on the timeline to be
clearly rendered (ie. they start overlapping), they are clubbed
together in a ‘cluster’, with a number showing the number of events
in that cluster.
</li>
<li>
A cluster can be expanded to fill the timeline by double-clicking on
it.
</li>
<li>
Double-clicking an empty portion of the timeline will cause it to
zoom out fully.
</li>
</ol>
<p>
Open the example below for a step-by-step guide how to use the
timeline.
</p>
<p>
<strong>
Any jump triggered on the timeline automatically puts the mind map
in ‘lookback mode’.
</strong>
It can be put back into ‘write mode’ by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<Lock />
</Button>{' '}
button at the top right in the menu bar.
</p>
<CollapsibleExample>
<TimelineCarousel />
</CollapsibleExample>
<h3 id={'playback'}>Using the Playback Buttons</h3>
<p>
The playback buttons at the top menu bar should be fairly easy to
understand and use. They look and work similar to an audio player -
only that in this case, the buttons are used to jump between events on
the timeline, rather than between items in a playlist.
</p>
<ol>
<li>
The{' '}
<Button outline color="secondary" size={'sm'}>
<SkipBack />
</Button>{' '}
button takes you directly to the first event of the timeline.
</li>
<li>
The{' '}
<Button outline color="secondary" size={'sm'}>
<Rewind />
</Button>{' '}
button takes you to the previous event from the current event on the
timeline. If you are currently in ‘write mode’ then this takes you
to the last event.
</li>
<li>
The{' '}
<Button outline color="secondary" size={'sm'}>
<FastForward />
</Button>{' '}
button takes you to the next event from the current event on the
timeline. If you are currently in ‘write mode’ then this takes you
to the last event.
</li>
<li>
The{' '}
<Button outline color="secondary" size={'sm'}>
<SkipForward />
</Button>{' '}
button takes you directly to the last event of the timeline.
</li>
</ol>
<p>
<strong>
Any action on the playback buttons automatically puts the mind map
in ‘lookback mode’.
</strong>
It can be put back into ‘write mode’ by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<Lock />
</Button>{' '}
button at the top right in the menu bar.
</p>
<h2 id={'search'}>Searching</h2>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-16 Hivemind.png"
alt="Search"
/>
<CardBody>
<CardTitle tag="h5">Search</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Search for nodes on canvas.
</CardSubtitle>
<CardText>
Use one or more filters/sort to locate a particular node of your
interest. Clicking on a row will make the canvas zoom in one the
node corresponding to that row.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>
Click on the{' '}
<Button outline color="secondary" size={'sm'}>
<Search />
</Button>{' '}
button in the top menu bar.
</li>
<li>
Enter your filter criteria or sort the columns in
ascending/descending order.
</li>
<li>
If a node that matches all filter critera exists, you should see it
in the list.
</li>
<li>
Click on the node if you would like to navigate to it in the canvas.
</li>
</ul>
<h2 id={'rename'}>Renaming a mind map</h2>
<p>
The mind map can be renamed when in ‘write mode’. This is true when:
</p>
<ol>
<li>The user has ‘admin’ or ‘write’ access to the mind map, and</li>
<li>
The mind map is being viewed in ‘write’ mode (i.e., not in ‘lookback
mode’ - as discussed earlier).
</li>
</ol>
<CollapsibleExample>
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-17 Hivemind.png"
alt="Rename"
/>
<CardBody>
<CardTitle tag="h5">Rename</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Rename the mind map.
</CardSubtitle>
<CardText>
Click on the{' '}
<Button outline color="primary" size={'sm'}>
<Edit3 />
</Button>{' '}
button. Enter the new name and hit{' '}
<Button color="primary" size="sm">
<Save /> Save
</Button>
.
</CardText>
</CardBody>
</Card>
</CollapsibleExample>
<ul>
<li>
Click on the{' '}
<Button outline color="primary" size={'sm'}>
<Edit3 />
</Button>{' '}
button.
</li>
<li>This button can be found in the menu bar.</li>
<li>Modify the name as required and hit ⏎ (<Enter>).</li>
</ul>
<h2 id={'fit'}>Fit on canvas</h2>
<p>
If the mind map does not optimally fit in the canvas, either because
you played around with the canvas zoom or moved a few nodes around, or
just hid/revealed a bunch of nodes, you can force them to optimally
fit by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<Maximize />
</Button>{' '}
button in the top menu bar.
</p>
<CollapsibleExample>
<FitCarousel />
</CollapsibleExample>
<h2 id={'show-all'}>Show All</h2>
<p>
If several sub-trees were hidden on the canvas, it can get tedious to
reveal them all by navigating to their parents one-by-one. For such
cases a quick shortcut is to click on the{' '}
<Button outline color="secondary" size={'sm'}>
<Eye />
</Button>{' '}
button in the top menu bar. This causes the canvas to immediately
reveal all hidden sub-trees and also re-run the layout if necessary.
</p>
<CollapsibleExample>
<ShowCarousel />
</CollapsibleExample>
</Jumbotron>
</Col>
</Row>
)
Example #27
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
ShowCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-18 Hivemind.png"
alt="Hidden Nodes"
/>
<CardBody>
<CardTitle tag="h5">Canvas with Hidden Nodes</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Some nodes/sub-trees on the canvas have been hidden.
</CardSubtitle>
<CardText>
After hiding, the canvas was told to rerun its layout to optimally
fit the now visible nodes.
</CardText>
</CardBody>
</Card>
),
caption: 'Hidden Nodes',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-19 Hivemind.png"
alt="All Nodes Revealed"
/>
<CardBody>
<CardTitle tag="h5">All Nodes Revealed</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
All hidden nodes/sub-trees are revealed.
</CardSubtitle>
<CardText>
This reveals any hidden nodes/sub-trees on canvas, and also reruns
the layout to optimally fit the now fully visible mind map.
</CardText>
</CardBody>
</Card>
),
caption: 'Layout Fixed',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #28
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
FitCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-20 Hivemind.png"
alt="Messed-Up Layout"
/>
<CardBody>
<CardTitle tag="h5">Messed-Up Layout</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Nodes on the canvas have been manually dragged around.
</CardSubtitle>
<CardText>
Use{' '}
<Button outline color="primary" size={'sm'}>
<Maximize />
</Button>{' '}
to re-run the layout and achieve optimal fit.
</CardText>
</CardBody>
</Card>
),
caption: 'A Messed-Up Layout',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-15 Hivemind.png"
alt="Layout Fixed"
/>
<CardBody>
<CardTitle tag="h5">Layout Fixed</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Optimal fit achieved.
</CardSubtitle>
<CardText>
This resets any movement on canvas, and also refits nodes after a
hide/reveal.
</CardText>
</CardBody>
</Card>
),
caption: 'Layout Fixed',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #29
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
TimelineCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-11 Hivemind.png"
alt="Event Detail"
/>
<CardBody>
<CardTitle tag="h5">Event Detail</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Shows the delta associated with an event (update, in this
instance).
</CardSubtitle>
<CardText>
Accessed by clicking on an event on the timeline. Fields that were
changed are marked in colour. The event time is displayed. If the
title was changed, both the old and new title are shown in the
header section of the detail popup. Clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button makes the mind map jump to a point in time just after this
event had occured. This updates the canvas and also focuses the
timeline on this event.
</CardText>
</CardBody>
</Card>
),
caption: 'Event Detail',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-12 Hivemind.png"
alt="Timeline Jump"
/>
<CardBody>
<CardTitle tag="h5">Timeline Jump</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button from the event detail popup.
</CardSubtitle>
<CardText>
The mind map has jumped to the point in time at which this event
had occured. The state of the canvas reflects the mind map was in
just after this event had occurred. The affected node is
higlighted with a blue border. The timeline focusses on the event
in question.
</CardText>
</CardBody>
</Card>
),
caption: 'Timeline Jump',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-13 Hivemind.png"
alt="Event Detail"
/>
<CardBody>
<CardTitle tag="h5">Event Detail (Focussed)</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Shows the delta associated with an event (update, in this
instance).
</CardSubtitle>
<CardText>
Accessed by clicking on an (focussed) event on the timeline. The{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button is now replaced with a{' '}
<Button outline color="secondary" size={'sm'}>
<Search /> Find
</Button>{' '}
button. This can be used to zoom in on the affected node on the
canvas.
</CardText>
</CardBody>
</Card>
),
caption: 'Focussing on an Event Detail',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-14 Hivemind.png"
alt="Find Node"
/>
<CardBody>
<CardTitle tag="h5">Find Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<Search /> Find
</Button>{' '}
button from the event detail popup.
</CardSubtitle>
<CardText>
The canvas zooms in on the node affected by the event.
</CardText>
</CardBody>
</Card>
),
caption: 'Find Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
interval={false}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel activeIndex={activeIndex} next={next} previous={previous}>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
