Initial commit

2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions
--- a/client-wiaas/src/mainComponents/box/WiaasBox.jsx
+++ b/client-wiaas/src/mainComponents/box/WiaasBox.jsx
@@ -0,0 +1,120 @@
+import React, {Component} from 'react';
+import {Container, Col, Row, Popover, PopoverHeader, PopoverBody} from 'reactstrap';
+
+let boxCount = 0;
+
+class WiaasBox extends Component {
+    constructor(props) {
+        super(props);
+
+        if(!this.props.id){
+            boxCount++;
+            this.idBox = 'wiaas-box-' + boxCount;
+        }else{
+            this.idBox = this.props.id;
+        }
+
+        this.className = this.props.className ? 'wiaas-box ' + this.props.className : 'wiaas-box';
+
+        this.toggleBoxVisibility = this.toggleBoxVisibility.bind(this);
+        this.togglePopover = this.togglePopover.bind(this);
+        this.getVisibilityIcon = this.getVisibilityIcon.bind(this);
+        this.getExtraHeaderContentSize = this.getExtraHeaderContentSize.bind(this);
+        this.getMainTitleContentSize = this.getMainTitleContentSize.bind(this);
+        this.state = {
+            isContentVisible: typeof this.props.isContentVisible !== 'undefined' ? this.props.isContentVisible : true,
+            visibilityIcon: 'fa fa-minus',
+            popoverOpen: false
+        };
+    }
+
+    toggleBoxVisibility() {
+        this.setState({
+            isContentVisible: !this.state.isContentVisible,
+        });
+    }
+
+    togglePopover(){
+        this.setState({
+            popoverOpen: !this.state.popoverOpen
+        });
+    }
+
+    getVisibilityIcon() {
+        return this.state.isContentVisible ? 'fa fa-minus' : 'fa fa-plus';
+    }
+
+    getMainTitleContentSize() {
+        return  this.props.customHeader ? 4 : 10;
+    }
+
+    getExtraHeaderContentSize() {
+        if(this.props.mainTitle) {
+            return this.props.customHeader ? 7 : 1;
+        }
+
+        return 12;
+    }
+
+    render() {
+        const {mainTitle, infoPopover} = this.props;
+        const CustomHeader = this.props.customHeader;
+        const customHeaderParams = this.props.customHeaderParams || {};
+
+        return (
+            <div className="wiaas-box-container">
+                <div id={this.idBox} className={this.className} >
+                    {
+                    (mainTitle || CustomHeader) &&
+                    <div className="wiaas-box-header">
+                        <Container fluid={true}>
+                            <Row>
+                                {
+                                    mainTitle &&
+                                    <Col lg={this.getMainTitleContentSize()} xs="12">
+                                        <div className="wiaas-main-title">{mainTitle}</div>
+                                        <div className="wiaas-divider"></div>
+                                    </Col>
+                                }
+                                <Col lg={this.getExtraHeaderContentSize()} md="12" xs="12">
+                                    {
+                                        CustomHeader && <CustomHeader params={customHeaderParams}/>
+                                    }
+                                </Col>
+                                    {
+                                        this.props.children &&
+                                        <div className="wiaas-box-visibility-icon wiaas-icon" onClick={this.toggleBoxVisibility}>
+                                            <i className={this.getVisibilityIcon()} aria-hidden="true"></i>
+                                        </div>
+                                    }
+                                    {
+                                        infoPopover &&
+                                        <div id={'popover-' + this.idBox} onClick={this.togglePopover} className="wiaas-info-icon wiaas-icon">
+                                            <i className="fa fa-question" aria-hidden="true"></i>
+                                            <Popover placement="bottom"
+                                                    container={this.idBox}
+                                                    isOpen={this.state.popoverOpen}
+                                                    target={'popover-' + this.idBox}
+                                                    toggle={this.togglePopover}>
+                                                <PopoverHeader>{infoPopover.title}</PopoverHeader>
+                                                <PopoverBody dangerouslySetInnerHTML={{__html: infoPopover.message}}></PopoverBody>
+                                            </Popover>
+                                        </div>
+                                    }
+                            </Row>
+                        </Container>
+                    </div>
+                    }
+                    {
+                        this.state.isContentVisible &&
+                        <div className="wiaas-box-content">
+                            {this.props.children}
+                        </div>
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default WiaasBox;
--- a/client-wiaas/src/mainComponents/box/WiaasBox.scss
+++ b/client-wiaas/src/mainComponents/box/WiaasBox.scss
@@ -0,0 +1,59 @@
+@import '../../styleConstants.scss';
+
+.wiaas-box-container {
+    padding: 0.5rem 0;
+    height: 100%;
+}
+
+.wiaas-box {
+    border-radius: $box-radius;
+    height: 100%;
+}
+
+.wiaas-box-header {
+    position: relative;
+    padding: 19px;
+    border-radius: $box-radius $box-radius 0 0;
+    box-shadow: 0 2px 4px 0 $boxShadow;
+    background: $container-background;
+    z-index: 1;
+}
+
+.wiaas-main-title {
+    display: inline-block;
+    font-size: $font-size-big;
+    font-weight: 600;
+    text-align: left;
+    color: $title-color;
+}
+
+.wiaas-divider {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    background-color: $divider-color;
+    margin-left: 20px;
+}
+
+.wiaas-icon {
+    width: 1.5625rem;
+    height: 1.5625rem;
+    text-align: center;
+    border-radius: 50%;
+    border: solid 1px $borderColor;
+    cursor: pointer;
+}
+
+.wiaas-box-visibility-icon {
+    position: absolute;
+    right: 0.5rem;
+}
+
+.wiaas-info-icon {
+    position: absolute;
+    right: 2.5625rem;
+}
+
+.no-margin-box {
+    margin: 0;
+}