daily pastebin goal
77%
SHARE
TWEET

Untitled

a guest Mar 23rd, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** ----- NPM PACKAGE IMPORTS -----**/
  2. import React from "react";
  3.  
  4. /** ----- COMPONENT IMPORTS -----**/
  5.  
  6. /** ----- CSS/STYLING IMPORTS -----**/
  7. import "../../resources/static/css/staff.css";
  8.  
  9. /**
  10.  * This JS file contains all code related to the rendering of the 'Staff' perspective.
  11.  *
  12.  * Any components you wish to create related to this perspective should be developed within
  13.  * this file.
  14.  */
  15.  
  16. export class Staff extends React.Component {
  17.     constructor(props) {
  18.         super(props);
  19.         this.state = {selectedView: 'Staff'};
  20.         this.tester = this.tester.bind(this);
  21.     }
  22.  
  23.     tester(){
  24.         console.log("Reload");
  25.         this.props.loadResourceFromServer('diningSessions', this.state.pageSize);
  26.         this.props.loadResourceFromServer('orders', this.state.pageSize);
  27.     }
  28.     componentDidMount() {
  29.         this.props.loadResourceFromServer('diningSessions', this.state.pageSize)
  30.         setInterval(this.tester, 5000);
  31.     }
  32.  
  33.  
  34.     render() {
  35.         return (
  36.             <div className={"page staff-page"}>
  37.                 <StaffLanding history={this.props.history}
  38.                               orders={this.props.orders}
  39.                               onUpdate={this.props.onUpdate}
  40.                               orderAttributes={this.props.orderAttributes}
  41.                               diningSessions={this.props.diningSessions}
  42.                               diningSessionsAttributes={this.props.diningSessionAttributes}
  43.                               filterDiningSessionList={this.props.filterDiningSessionList}
  44.                               selectedView={this.props.selectedView}/>
  45.             </div>
  46.         )
  47.     }
  48. }
  49.  
  50. export class StaffLanding extends React.Component {
  51.     constructor(props) {
  52.         super(props);
  53.         this.handleClickOrders = this.handleClickOrders.bind(this);
  54.         this.handleClickRequests = this.handleClickRequests.bind(this);
  55.     }
  56.  
  57.     // Method called when attempting to navigate to the 'Staff Requests' page
  58.     handleClickRequests(e) {
  59.         e.preventDefault();
  60.         this.props.history.push({
  61.             pathname: '/staff-requests',
  62.             state: {onUpdate: this.props.onUpdate,
  63.                     diningSessions: this.props.diningSessions,
  64.                     diningSessionAttributes: this.props.diningSessionAttributes,
  65.                     filterDiningSessionList: this.props.filterDiningSessionList,
  66.                     selectedView: this.props.selectedView}
  67.         })
  68.     }
  69.  
  70.     // Method called when attempting to navigate to the 'Staff Orders' page
  71.     handleClickOrders(e) {
  72.         e.preventDefault();
  73.         this.props.history.push({
  74.             pathname: '/staff-orders',
  75.             state: {onUpdate: this.props.onUpdate,
  76.                 orders: this.props.orders,
  77.                 orderAttributes: this.props.orderAttributes,
  78.                 selectedView: this.props.selectedView}
  79.         })
  80.     }
  81.  
  82.     render() {
  83.         let numBR = this.props.filterDiningSessionList("br_status").length;
  84.         let numSR = this.props.filterDiningSessionList("sr_status").length;
  85.         let numOR = this.props.orders.length;
  86.         return (
  87.             <div>
  88.                 <title>Staff Landing Page</title>
  89.                 <div id="staff-wrapper">
  90.                     <header className="staff-frontpage">
  91.                         <a href="#" className="staff-logo">
  92.                             <img src="./img/logo.png" alt="Home"/>
  93.                         </a>
  94.                     </header>
  95.                 </div>
  96.                 <div className="staff-navigation">
  97.                     <div className="staff-overlay">
  98.                         <div className="staff-nav-btn-wrapper">
  99.                             <button className="staff-nav-btn" onClick={this.handleClickRequests}>{numSR}</button>
  100.                         </div>
  101.                         <div className="staff-nav-btn-wrapper">
  102.                             <button className="staff-nav-btn" onClick={this.handleClickOrders}>All Orders</button>
  103.                         </div>
  104.                     </div>
  105.                 </div>
  106.             </div>
  107.  
  108.  
  109.         )
  110.     }
  111. }
  112.  
  113.  
  114. /**
  115.  * This component should contain the 'page' for the staff member to view all the current customer requests,
  116.  * either bill or service requests.
  117.  *
  118.  * See 'Customer-Menu' component in Customer.js for an example of how to navigate to this page and connect it
  119.  * to the Staff component above.
  120.  */
  121. export class StaffRequests extends React.Component {
  122.  
  123.     constructor(props) {
  124.         super(props);
  125.         // this.state = {clicked: false};
  126.         this.handleBackClick = this.handleBackClick.bind(this);
  127.     }
  128.  
  129.  
  130.     handleBackClick(e) {
  131.         e.preventDefault();
  132.         this.props.history.push({
  133.             pathname: '/staff-landing'
  134.         });
  135.     }
  136.  
  137.     render() {
  138.  
  139.         const StaffBillRequestItems = this.props.location.state.filterDiningSessionList("br_status").map(bill_request =>
  140.             <StaffBillRequestItem key={bill_request.entity._links.self.href}
  141.                                   bill_request={bill_request}
  142.             />);
  143.  
  144.  
  145.         const StaffServiceRequestItems = this.props.location.state.filterDiningSessionList("sr_status").map(service_request =>
  146.             <StaffServiceRequestItem key={service_request.entity._links.self.href}
  147.                                      service_request={service_request}
  148.             />);
  149.  
  150.         return (
  151.             <div>
  152.                 <div id="wrapper">
  153.                     <main className="main-wrapper">
  154.                         <header className="detail full">
  155.                             <a className="back" onClick={this.handleBackClick} data-transition="slide-from-top" />
  156.                             <section>
  157.                                 <h1 className="category-title">Requests</h1>
  158.                                 <h3 className="page-badge">Bill and more</h3>
  159.                             </section>
  160.                         </header>
  161.                         <div className="content-wrap full-width">
  162.                             <div className="gridViewContainer">
  163.                                 {StaffBillRequestItems}
  164.                                 {StaffServiceRequestItems}
  165.                             </div>
  166.                             <footer>
  167.                                 <div className="signature">
  168.                                     <h6>Sushi</h6>
  169.                                     <h5>PotatoPeeps</h5>
  170.                                 </div>
  171.                             </footer>
  172.                         </div>
  173.                     </main>
  174.                 </div>
  175.             </div>
  176.         );
  177.     }
  178. }
  179.  
  180. export class StaffBillRequestItem extends React.Component {
  181.     constructor(props) {
  182.         super(props);
  183.     }
  184.  
  185.  
  186.     render() {
  187.         return (
  188.             <div className="gridViewItem">
  189.                 <img className="itemImage" draggable="false" src="./img/2.jpg" />
  190.                 <div className="overlay billReq">
  191.                     <div className="text">Table {this.props.bill_request.entity.tableNumber}</div>
  192.                     <div className="text">Bill Request</div>
  193.                     <div style={{display: 'flex', justifyContent: 'center'}}>
  194.                         <button title="View Detail" className="view-detail-button">
  195.                             <i className="view-order" style={{fontSize: '20px'}}>Answer</i>
  196.                         </button>
  197.                     </div>
  198.                 </div>
  199.             </div>
  200.         );
  201.     }
  202.  
  203. }
  204.  
  205. export class StaffServiceRequestItem extends React.Component {
  206.     constructor(props) {
  207.         super(props);
  208.     }
  209.  
  210.  
  211.     render() {
  212.         return (
  213.             <div className="gridViewItem">
  214.                 <img className="itemImage" draggable="false" src="./img/4.jpg" />
  215.                 <div className="overlay serviceReq">
  216.                     <div className="text">Table {this.props.service_request.entity.tableNumber}</div>
  217.                     <div className="text">Service Request</div>
  218.                     <div style={{display: 'flex', justifyContent: 'center'}}>
  219.                         <button title="View Detail" className="view-detail-button">
  220.                             <i className="view-order" style={{fontSize: '20px'}}>Answer</i>
  221.                         </button>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.         );
  226.  
  227.     }
  228.  
  229. }
  230.  
  231.  
  232. /**
  233.  * This component should contain the 'page' for the staff member to view all the current orders,
  234.  * generated by customers.
  235.  */
  236. export class StaffOrders extends React.Component {
  237.     constructor(props) {
  238.         super(props);
  239.     }
  240.  
  241.     render() {
  242.         return (
  243.             <div>
  244.  
  245.             </div>
  246.         );
  247.     }
  248.  
  249. }
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