Initial commit

client-wiaas/src/mainComponents/dialog/DialogBox.jsx

@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
+import {setDialogOpenFlag} from '../../actions/dialog/dialogActions';
+import './DialogBox.css';
+
+class DialogBox extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+          inputValue: ''
+        };
+
+        this.toggleDialogBox = this.toggleDialogBox.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    toggleDialogBox(isDialogOpen, button) {
+        if(button && !button.waitForAction){
+            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
+        }
+
+        if(!button){
+            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
+        }
+
+        if (button && button.action) {
+            button.action(this.state);
+        }
+    }
+
+    handleInputChange(event) {
+      this.setState({inputValue: event.target.value});
+      event.preventDefault();
+    }
+
+
+    render() {
+        const {isDialogOpen, dialogContent} = this.props;
+        const specificClass = dialogContent && dialogContent.class ? dialogContent.class : '';
+
+        return (
+            <div>
+            { dialogContent &&
+                <Modal isOpen={isDialogOpen} toggle={this.toggleDialogBox} className={"generic-dialog-box " + specificClass}>
+                    <ModalHeader>
+                        {dialogContent.header ? dialogContent.header : 'Confirmation'}
+                        {
+                            dialogContent.hasCloseIcon &&
+                            <i className="fa fa-times dialog-close"
+                                onClick={() => {this.toggleDialogBox(isDialogOpen)}}
+                                aria-hidden="true"></i>
+                        }
+                    </ModalHeader>
+                    <ModalBody>
+                        {dialogContent.TagName && <dialogContent.TagName params={dialogContent.params || {}}/>}
+                        {dialogContent.body && dialogContent.body}
+                        {dialogContent.bodyVariable &&
+                            <span className="highlighted-item">{dialogContent.bodyVariable}?</span>
+                        }
+                        {(!dialogContent.body && !dialogContent.TagName) && 'Are you sure?'}
+                        {dialogContent.inputArray &&
+                            dialogContent.inputArray.map((inputContent, mapKey) =>
+                                <Input key={inputContent.class + mapKey}
+                                    className={'dialog-input ' + inputContent.class}
+                                    type={inputContent.type}
+                                    placeholder={inputContent.placeholder}
+                                    value={this.state.inputValue}
+                                    onChange={this.handleInputChange}
+                                    autoFocus />)
+                        }
+                    </ModalBody>
+                    { ('buttons' in dialogContent && dialogContent.buttons.length) &&
+                        <ModalFooter>
+                            {
+                                dialogContent.buttons.map((buttonObject, mapKey) =>
+                                <Button key={mapKey}
+                                    id={buttonObject.id}
+                                    color={buttonObject.color}
+                                    className={buttonObject.className}
+                                    onClick={() => {this.toggleDialogBox(isDialogOpen, buttonObject)}}>
+                                    {buttonObject.name}
+                                </Button>)
+                            }
+                        </ModalFooter>
+                    }
+                </Modal>
+            }
+            </div>
+        );
+    }
+
+}
+
+export default connect()(DialogBox);

client-wiaas/src/mainComponents/dialog/DialogBox.scss

@@ -0,0 +1,128 @@
+@import "../../styleConstants.scss";
+
+.ui-dialog {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    outline: 0 none;
+    padding: 0!important !important;
+    z-index: 101;
+    background-color: #fff;
+    border: 1px solid #f6f6f6;
+}
+
+.ui-dialog.react-draggable .ui-dialog-titlebar {
+    cursor: move;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+    position: relative;
+    font-size: 1em;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    height: 3em;
+    border-bottom: 1px solid #f6f6f6;
+}
+
+.ui-dialog .ui-dialog-titlebar .title {
+    float: left;
+    margin-right: 0.5em;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 1.5em;
+}
+
+.ui-dialog .ui-dialog-content {
+    background: none repeat scroll 0 0 transparent;
+    border: 0 none;
+    overflow: auto;
+    position: relative;
+    padding: 0.5em;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: right;
+    border-width: 1px 0 0;
+    border-top: 1px solid #f6f6f6;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+    padding: 0.5em;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+    margin: 0 0.5em;
+    cursor: pointer;
+    background-color: #f6f6f6;
+    padding: 0.5em 1em;
+    outline: none;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.modal {
+    text-align: center;
+    padding: 0!important;
+}
+
+.modal:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.modal-dialog {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.modal-title {
+    color: $whiteColor;
+}
+
+.modal-header {
+    background: $blueColor;
+}
+
+.modal-content {
+    border-radius: 7px;
+}
+
+.generic-dialog-box {
+    min-width: 30%;
+
+    .btn-success {
+        background-color: $greenColor;
+        border-color: $borderColor;
+        cursor: pointer;
+    }
+
+    .btn-secondary {
+        background-color: $whiteColor;
+        color: $darkGreyColor;
+        cursor: pointer;
+    }
+}
+
+.highlighted-item {
+    font-weight: $font-weight;
+}
+
+.installation-scheduling {
+    width: 35%;
+}
+
+.dialog-input {
+    margin-top: 1rem;
+}
+
+.dialog-close {
+    color: $whiteColor;
+    position: absolute;
+    right: 1rem;
+    cursor: pointer;
+}