SHARE
TWEET

Untitled

a guest Jan 28th, 2020 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. topbar.js---------------
  2.  
  3. import React from 'react';
  4.  
  5. import logo from '../../assets/images/logo.png';
  6. import './topbar.css';
  7. import '../../../node_modules/@fortawesome/fontawesome-free/css/all.css';
  8. import Navbar from 'react-bootstrap/Navbar';
  9. import Nav from 'react-bootstrap/Nav';
  10.  
  11. const Topbar = () => {
  12.   return (
  13.     <Navbar className="navbar__background">
  14.       <Navbar.Brand>
  15.         <img className="navbar__logo d-inline-block align-top" src={ logo } alt="Logo"></img>
  16.       </Navbar.Brand>
  17.       <Navbar.Collapse className="justify-content-end">
  18.         <Nav>
  19.           <Nav.Link className="navbar__link" >
  20.             <i className="far fa-bell" aria-hidden="true"></i>
  21.           </Nav.Link>
  22.           <Nav.Link className="navbar__link">
  23.             <i className="far fa-envelope-open" aria-hidden="true"></i>
  24.           </Nav.Link>
  25.           <Nav.Link className="navbar__link">
  26.             <i className="far fa-calendar-alt" aria-hidden="true"></i>
  27.           </Nav.Link>
  28.           <Nav.Link className="navbar__link">
  29.             <i className="far fa-user" aria-hidden="true"></i>
  30.           </Nav.Link>
  31.           <Nav.Link className="navbar__link">
  32.             <i className="fas fa-sign-out-alt" aria-hidden="true"></i>
  33.           </Nav.Link>
  34.         </Nav>
  35.       </Navbar.Collapse>
  36.     </Navbar>
  37.   );
  38. }
  39.  
  40. export default Topbar;
  41.  
  42. dotValidation.js----------
  43.  
  44. import React from 'react';
  45.  
  46. import './dotValidation.css';
  47.  
  48. const DotValidation = ({ hidden, validation, touched }) => {
  49.   let content;
  50.  
  51.   if (hidden) {
  52.     content =
  53.     <div className="validation__container">
  54.       <div className="validation__dot"></div>
  55.     </div>;
  56.   } else if ((!hidden && validation && touched) || (!hidden && validation && (touched == null))) {
  57.     content =
  58.     <div className="validation__container">
  59.       <div className="validation__dot validation__dot--red"></div>
  60.     </div>
  61.   } else {
  62.     content =
  63.     <div className="validation__container">
  64.       <div className="validation__dot validation__dot--green"></div>
  65.     </div>
  66.   }
  67.  
  68.   return (
  69.     <>
  70.       { content }
  71.     </>
  72.   );
  73. }
  74.  
  75. export default DotValidation;
  76.  
  77. page.js------------
  78. import React, { Component } from 'react';
  79.  
  80. import './page.css';
  81.  
  82. import Row from 'react-bootstrap/Row';
  83. import Col from 'react-bootstrap/Col';
  84.  
  85. class Page extends Component {
  86.   render() {
  87.     return (
  88.       <Col lg="9" md="8" xs="12">
  89.         <Row className="row--no-margin-left">
  90.           <Col className="page__bar" xs="12">
  91.             <h1 className="page__title">{ this.props.title } <small className="page__description">{ this.props.description }</small>
  92.             </h1>
  93.           </Col>
  94.           <Col xs="12">{ this.props.children }</Col>
  95.         </Row>
  96.       </Col>
  97.     );
  98.   }
  99. }
  100.  
  101. export default Page;
  102.  
  103.  
  104.  
  105. sidebar.js--------------
  106.  
  107. import React from 'react';
  108. import { NavLink } from 'react-router-dom';
  109.  
  110. import './sidebar.css';
  111. import '../../../node_modules/@fortawesome/fontawesome-free/css/all.css';
  112.  
  113. const Sidebar = () => {
  114.   return (
  115.     <div className="sidebar">
  116.       <div className="sidebar__content">
  117.         <nav className="sidebar__menu">
  118.           <ul className="sidebar__menu-list">
  119.             <li className="sidebar__list-item">
  120.               <NavLink className="sidebar__link" exact={true} activeClassName="sidebar__link--active" to="/panel">
  121.                 <i className="fas fa-chart-line icon--padding-right-15"></i> <span className="sidebar__text">Dashboard</span>
  122.               </NavLink>
  123.             </li>
  124.             <li className="sidebar__list-item">
  125.               <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/users">
  126.                 <i className="fas fa-users icon--padding-right-15"></i> <span className="sidebar__text">Użytkownicy</span>
  127.               </NavLink>
  128.             </li>
  129.             <li className="sidebar__list-item">
  130.               <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/lines">
  131.                 <i className="fas fa-bars icon--padding-right-15"></i> <span className="sidebar__text">Linie</span>
  132.               </NavLink>
  133.             </li>
  134.             <li className="sidebar__list-item">
  135.               <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/devices">
  136.                 <i className="fas fa-tools icon--padding-right-15"></i> <span className="sidebar__text">Urządzenia</span>
  137.               </NavLink>
  138.             </li>
  139.             <li className="sidebar__list-item">
  140.               <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/parameters">
  141.                 <i className="fas fa-flask icon--padding-right-15"></i> <span className="sidebar__text">Parametry</span>
  142.               </NavLink>
  143.             </li>
  144.             {/* <li className="sidebar__list-item">
  145.               <NavLink className="sidebar__link" activeClassName="sidebar__link--active" to="/panel/reports">
  146.                 Raporty <i class="fas fa-file-alt"></i>
  147.               </NavLink>
  148.             </li> */}
  149.           </ul>
  150.         </nav>
  151.       </div>
  152.     </div>
  153.   );
  154. }
  155.  
  156. export default Sidebar;
  157.  
  158.  
  159. sidepanel.js------------
  160. import React, { Component } from 'react';
  161. import { AgGridReact } from 'ag-grid-react';
  162.  
  163. import './sidepanel.css';
  164.  
  165. import Col from 'react-bootstrap/Col';
  166. import ButtonGroup from 'react-bootstrap/ButtonGroup';
  167. import Button from 'react-bootstrap/Button';
  168.  
  169. class Sidepanel extends Component {
  170.   constructor(props) {
  171.     super(props)
  172.    
  173.     this.state = {
  174.       hasReceivedData: false,
  175.       columnDefs: [],
  176.       rowData: []
  177.     }
  178.   }
  179.  
  180.   componentDidUpdate() {
  181.     // if (!this.state.columnDefs.length && this.props.columnDefs) {
  182.     //   this.setState({ columnDefs: this.props.columnDefs });
  183.     // }
  184.  
  185.     // if (!this.state.rowData.length && this.props.rowData) {
  186.     //   this.setState({ rowData: this.props.rowData });
  187.     // }
  188.   }
  189.  
  190.   render() {
  191.     return (
  192.       <Col className="sidepanel" lg="3" md="4" xs="12">
  193.         <Col className="sidepanel__topbar" xs="12">
  194.           <ButtonGroup aria-label="Sidepanel buttons top group">
  195.             <Button onClick={() => this.props.onChangingMode } disabled={ this.props.mode === true }>
  196.               Dodaj
  197.             </Button>
  198.           </ButtonGroup>
  199.         </Col>
  200.         <div className="ag-theme-balham" style={ { height: 'calc(100vh - 10rem)', width: '100%', margin: '15px 0 0 0' } }>
  201.           <AgGridReact
  202.             columnDefs={ this.state.columnDefs }
  203.             rowData={ this.state.rowData }>
  204.           </AgGridReact>
  205.         </div>
  206.       </Col>
  207.     );
  208.   };
  209. }
  210.  
  211. export default Sidepanel;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top