SHARE
TWEET

Untitled

a guest May 24th, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { withStyles } from '@material-ui/core/styles';
  4. import CssBaseline from '@material-ui/core/CssBaseline';
  5. import Typography from '@material-ui/core/Typography';
  6. import TextField from '@material-ui/core/TextField';
  7. import { connect } from 'react-redux';
  8. import { compose } from 'redux';
  9. import Button from '@material-ui/core/Button';
  10. import * as roomsAction from './../../actions/rooms-actions';
  11. import * as moviesAction from './../../actions/movies-actions'
  12. import * as authAction from './../../actions/auth-actions'
  13.  
  14. const drawerWidth = 240;
  15.  
  16. const styles = theme => (
  17.  
  18. {
  19.        
  20.   root: {
  21.     display: 'flex',
  22.     backgroundColor: "white"
  23.   },
  24.   appBar: {
  25.     width: `calc(100% - ${drawerWidth}px)`,
  26.     marginLeft: drawerWidth,
  27.   },
  28.   drawer: {
  29.     width: drawerWidth,
  30.     flexShrink: 0,
  31.   },
  32.   drawerPaper: {
  33.     backgroundColor: "#43425d",
  34.     width: drawerWidth,
  35.   },
  36.   toolbar: theme.mixins.toolbar,
  37.   content: {
  38.     flexGrow: 1,
  39.     backgroundColor: "#ebeded",
  40.     padding: theme.spacing.unit * 3,
  41.     height: "100%",
  42.     minHeight: "100vh"
  43.   },
  44.   settings:{
  45.       minHeight: "100%",
  46.       backgroundColor: "white",
  47.       color: "black",
  48.       borderRadius: "3%"
  49.   },
  50.   color: {
  51.     color: "#43425d",
  52.     marginBottom: "1%"
  53. },
  54. form: {
  55.     width: '100%', // Fix IE 11 issue.
  56.     marginTop: theme.spacing.unit * 20,
  57.     textAlign: 'center'
  58.   },
  59.   inputField: {
  60.       width: "80%",
  61.       borderBottom: "2px solid #3B86FF"
  62.   },
  63.   submit: {
  64.     width: "65%",
  65.     marginTop: "1%",
  66.       backgroundColor: "#3B86FF",
  67.       color: "white",
  68.       marginBottom: "2%",
  69.       marginRight: "2%"
  70.   },
  71.   card: {
  72.     backgroundColor: "#43425d",
  73.     marginBottom: "2%",
  74.     marginLeft: "2%"
  75.   },
  76.   media: {
  77.     height: 170,
  78.     width: 400
  79.   }
  80.  
  81. }
  82.  
  83. );
  84.  
  85.  
  86. class Movies extends Component {
  87.     constructor(props){
  88.         super(props);
  89.         this.state ={
  90.             loading: true,
  91.             currentPage: "movies",
  92.             itemToEdit: null,
  93.             moviesToDelete: [],
  94.             addMovie: {},
  95.             editMovie: {}
  96.            
  97.         }
  98.     }
  99.  
  100.  
  101.     async componentDidMount(){
  102.         await this.props.getRooms();
  103.         await this.props.getMovies();
  104.         this.setState({
  105.             // user: this.props.user.local, method: this.props.user.method,
  106.             loading: false})
  107.     }
  108.  
  109.  
  110.     onChange = (time, timeString) => {
  111.       console.log(time, timeString);
  112.     }
  113.  
  114.  
  115.     handleAddMovie = async () => {
  116.       let toSend = {
  117.         name: this.state.addMovie.movieName,
  118.         duration: {
  119.           hour: this.state.addMovie.movieHour,
  120.           minutes: this.state.addMovie.movieMinutes,
  121.           seconds: this.state.addMovie.movieSeconds
  122.         },
  123.         price: this.state.addMovie.moviePrice,
  124.         imagePath : this.state.addMovie.imagePath
  125.       }
  126.       await this.props.addMovie(toSend)
  127.       await this.props.getMovies();
  128.       this.setState({currentPage:"movies"})
  129.     }
  130.  
  131.  
  132.     handleUpdateMovie = async () => {
  133.       let newState = this.state.editMovie;
  134.       newState.id = this.state.itemToEdit._id;
  135.       newState.duration = this.state.itemToEdit.duration;
  136.      
  137.       for(let itm in newState ){
  138.         if(itm === 'hour' || itm === 'minutes' || itm === 'seconds'){
  139.           newState.duration[itm] = newState[itm]
  140.         }
  141.       }
  142.      
  143.       console.log(this.state.editMovie,'EDIT MOOOOOVIE')
  144.       await this.setState({editMovie:newState});
  145.       await this.props.updateMovie(newState);
  146.       await this.props.getMovies();
  147.       let newItemToEdit = this.props.movies.find(item=>item._id === newState.id)
  148.       this.setState({addMovie:{},moviesToDelete:[],itemToEdit:newItemToEdit})
  149.     }
  150.  
  151.  
  152.     handleDeleteMovie = async id => {
  153.         // console.log("Delete room with id", id);
  154.        
  155.         await this.props.deleteMovie(this.state.moviesToDelete);
  156.         await this.props.getMovies();
  157.         this.setState({moviesToDelete: []})
  158.       }
  159.  
  160.  
  161.     handleBook = async id =>{
  162.           await this.props.getSecret();
  163.  
  164.           console.log(this.props)
  165.           let data ={
  166.               userid : this.props.user2._id,
  167.               movieid : id
  168.           }
  169.           await this.props.bookMovie(data);
  170.       }
  171.    
  172.     render() {
  173.        
  174.         const { classes } = this.props;
  175.         console.log("My props are from Home",this.props,this.state)
  176.       return (
  177.      
  178.         <div className={classes.root} >
  179.        
  180.             <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
  181.             <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500,600,700,700i" rel="stylesheet"/>
  182.             <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  183.             <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
  184.             <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" rel="stylesheet"
  185.           media="screen"/>
  186.             <link media="screen" rel="stylesheet" type="text/css" href="../admin-menu-ip/admin-menu-ip.css"/>
  187.             <link media="screen" rel="stylesheet" type="text/css" href="admin-home-ip.css"/>
  188.  
  189.            
  190.                    
  191.       <CssBaseline />
  192.      
  193.      {this.state.loading==false && <main className={classes.content}>
  194.        
  195.        
  196.        
  197.        <Typography component="h3" variant="h4" className={classes.color} onClick={()=>console.log(this.state)}>
  198.                 Admin | Home
  199.          </Typography>
  200.          <div className={classes.settings}>
  201.          
  202.              <div className="row myrowsettings">
  203.  
  204. {/* --------------------------------------MAIN PAGE HOME ------------------------------------------------------------ */}
  205.           {this.state.currentPage === "movies" &&
  206.          
  207.           [
  208.          
  209.             <div className="main">
  210.                 <div className="main-admin">
  211.                     <div className="display-information">
  212.                         <div className="total-users">
  213.                             <p className="info-text">Total Users</p>
  214.                             <p className="info-numbers">144</p>
  215.                         </div>
  216.                         <div className="total-movies">
  217.                             <p className="info-text">Total Movies</p>
  218.                             <p className="info-numbers">44</p>
  219.                         </div>
  220.                         <div className="total-rooms">
  221.                             <p className="info-text">Total Rooms</p>
  222.                             <p className="info-numbers">22</p>
  223.                         </div>
  224.                         <div className="total-bookings">
  225.                             <p className="info-text">Total Bookings</p>
  226.                             <p className="info-numbers">Coming soon</p>
  227.                         </div>
  228.                     </div>
  229.                     <div className="column-50">
  230.                         <div className="display-last-updates">
  231.                             <div className="last-update-information">
  232.                                 <h2>Last five reservations</h2>
  233.                                 <p><img className="mini-image" src="../resources/images/john-doe.png"/> Numele de utilizator</p>
  234.                                 <p><img className="mini-image" src="../resources/images/john-doe.png"/> Numele de utilizator</p>
  235.                                 <p><img className="mini-image" src="../resources/images/john-doe.png"/> Numele de utilizator</p>
  236.                                 <p><img className="mini-image" src="../resources/images/john-doe.png"/> Numele de utilizator</p>
  237.                                 <p><img className="mini-image" src="../resources/images/john-doe.png"/> Numele de utilizator</p>
  238.                                 <h2>Last updates</h2>
  239.                                 <div className="last-registered-user">
  240.                                     <img src="../resources/images/john-doe.png"/>
  241.                                     <p>
  242.                                         <a href="REDIRECT SPRE ADMIN USERS cu search pe numele utilizatorului(sa apara utlimul utilizator inregistrat primu)"
  243.                                         >Numele de utilizator</a> is the last
  244.                                         <mark className="purple">registered user</mark>
  245.                                     </p>
  246.                                 </div>
  247.                                 <div className="last-added">
  248.                                     <img src="../resources/images/cinema-room-1-1.jpg"/>
  249.                                     <p><a href="REDIRECT SPRE ADMIN ROOMS cu search pe camera(sa apara camera prima)"
  250.                                     >Red-Cinema-Room</a> is the last
  251.                                         <mark className="purple">added room</mark>
  252.                                     </p>
  253.                                 </div>
  254.                                 <div className="last-added">
  255.                                     <img src="../resources/images/Hellboy.jpg"/>
  256.                                     <p><a href="REDIRECT SPRE ADMIN MOVIES cu search pe film(sa apara filmul primu)"
  257.                                     >Hellboy</a> is the last
  258.                                         <mark className="purple">added movie</mark>
  259.                                     </p>
  260.                                 </div>
  261.                             </div>
  262.                         </div>
  263.                         <div className="display-right-information">
  264.                             <div className="right-info">
  265.                                 <img className="right-image" src="../resources/images/back.png"/>
  266.                             </div>
  267.                         </div>
  268.                     </div>
  269.                 </div>
  270.             </div>
  271.              
  272.           ]
  273.          
  274.           }
  275.          
  276.  
  277. {/* ----------------------------EDIT---------------------------------------------------- */}
  278.            {this.state.currentPage === "edit" && [<div class="main-panel">
  279.             <div className="buttons">
  280.           <Button
  281.             // type="submit"
  282.             fullWidth
  283.             variant="contained"
  284.             className={classes.submit}
  285.             onClick={()=>this.setState({currentPage:"movies",itemToEdit:null,addMovie:{},editMovie:{}})}
  286.           >
  287.            Discard
  288.           </Button>
  289.           <Button
  290.             // type="submit"
  291.             onClick={this.handleUpdateMovie}
  292.             fullWidth
  293.             variant="contained"
  294.             className={classes.submit}
  295.           >
  296.             Save
  297.           </Button>
  298.           </div>
  299.                             <p>Current Name:</p>
  300.                             <input type="text" disabled name="old-movie-name" value={this.state.itemToEdit.name}/>
  301.                             <p>Current Price:</p>
  302.                             <input type="text" disabled name="old-movie-price" value={this.state.itemToEdit.price}/>
  303.                             <p>Current Duration:</p>
  304.                             <input type="text" disabled name="old-movie-duration" value={`${this.state.itemToEdit.duration.hour}h ${this.state.itemToEdit.duration.minutes}m ${this.state.itemToEdit.duration.seconds}s`}/>
  305.                             <p class="go-down">Current Image:</p>
  306.                             <img class="old-image" src={require(`./../../resources/images/${this.state.itemToEdit.imagePath}`)}/>
  307.                         </div>,
  308.                         <div class="col" style={{marginTop: "3%"}}>
  309.                             <form
  310.                   onChange={e=>{
  311.                     const {target: {id,value}} = e;
  312.                     let newMovieState = this.state.editMovie;
  313.                     newMovieState[id] = value
  314.                     this.setState({editMovie:newMovieState});
  315.                     console.log(this.state)
  316.                   }}
  317.                   style={{width: "50%",margin:"auto"}}
  318.                   >
  319.      
  320.                       <TextField
  321.           id="name"
  322.           label="Movie Name"
  323.           defaultValue=""
  324.           style={{width:"100%"}}
  325.           value={this.state.editMovie.name}
  326.         />
  327.  
  328. <TextField
  329.           id="price"
  330.           label="Movie Price"
  331.           defaultValue=""
  332.           style={{width:"100%"}}
  333.           value={this.state.editMovie.price}
  334.         />
  335. <div style={{display:"inline-flex",marginLeft:"13%",marginRight:"12%"}}>
  336. <TextField
  337.           id="hour"
  338.           label="Hours"
  339.           defaultValue=""
  340.           style={{width:"100%"}}
  341.           value={this.state.editMovie.hour}
  342.         />
  343.  
  344. <TextField
  345.           id="minutes"
  346.           label="Minutes"
  347.           defaultValue=""
  348.           style={{width:"100%"}}
  349.           value={this.state.editMovie.minutes}
  350.         />
  351.  
  352. <TextField
  353.           id="seconds"
  354.           label="Seconds"
  355.           defaultValue=""
  356.           style={{width:"100%"}}
  357.           value={this.state.editMovie.seconds}
  358.         />
  359. </div>
  360.  
  361. <input type="file" accept="image/*" id="movieImage" onChange={(e)=>{
  362.   let path = e.target.value.split("\\").pop();
  363.   let newState = this.state.editMovie;
  364.   newState.imagePath = path;
  365.   this.setState({editMovie:newState})
  366.   console.log(path)
  367.  
  368. }}
  369.   required name="movie-image"/>
  370.         </form>
  371.                          
  372.             </div>]}
  373.  
  374.  
  375.  
  376.             {this.state.currentPage === "addMovie" && <form
  377.                   onChange={e=>{
  378.                     const {target: {id,value}} = e;
  379.                     let newMovieState = this.state.addMovie;
  380.                     newMovieState[id] = value
  381.                     this.setState({addMovie:newMovieState});
  382.                     console.log(this.state)
  383.                   }}
  384.                   style={{width: "50%",margin:"auto"}}
  385.                   >
  386.  
  387.                       <TextField
  388.           id="movieName"
  389.           label="Movie Name"
  390.           defaultValue=""
  391.           style={{width:"100%"}}
  392.           value={this.state.addMovie.name}
  393.         />
  394.  
  395. <TextField
  396.           id="moviePrice"
  397.           label="Movie Price"
  398.           defaultValue=""
  399.           style={{width:"100%"}}
  400.           value={this.state.addMovie.price}
  401.         />
  402. <div style={{display:"inline-flex",marginLeft:"13%",marginRight:"12%"}}>
  403. <TextField
  404.           id="movieHour"
  405.           label="Hours"
  406.           defaultValue=""
  407.           style={{width:"100%"}}
  408.           value={this.state.addMovie.movieHour}
  409.         />
  410.  
  411. <TextField
  412.           id="movieMinutes"
  413.           label="Minutes"
  414.           defaultValue=""
  415.           style={{width:"100%"}}
  416.           value={this.state.addMovie.movieMinutes}
  417.         />
  418.  
  419. <TextField
  420.           id="movieSeconds"
  421.           label="Seconds"
  422.           defaultValue=""
  423.           style={{width:"100%"}}
  424.           value={this.state.addMovie.movieSeconds}
  425.         />
  426. </div>
  427.  
  428. <input type="file" accept="image/*" id="movieImage" onChange={(e)=>{
  429.   let path = e.target.value.split("\\").pop();
  430.   let newState = this.state.addMovie;
  431.   newState.imagePath = path;
  432.   this.setState({addMovie:newState})
  433.   console.log(path)
  434.  
  435. }}
  436.   required name="movie-image"/>
  437.  
  438.        
  439.         <Button
  440.             fullWidth
  441.             variant="contained"
  442.             className={classes.submit}
  443.             style={{marginLeft:"18%"}}
  444.             onClick={this.handleAddMovie}
  445.           >
  446.            Add Movie
  447.           </Button>
  448.           <Button
  449.             fullWidth
  450.             variant="contained"
  451.             className={classes.submit}
  452.             style={{marginLeft:"18%"}}
  453.             onClick={()=>this.setState({currentPage:"movies",itemToEdit:null,moviesToDelete:[],addMovie:{},editMovie:{}})}
  454.           >
  455.             Back To Movies
  456.           </Button>
  457.         </form>}
  458.               </div>
  459.          </div>
  460.        </main>}
  461.      
  462.     </div>
  463.       );
  464.     }
  465.   }
  466.  
  467.   Movies.propTypes = {
  468.     classes: PropTypes.object.isRequired,
  469.   };
  470.  
  471.   function mapStateToProps(state) {
  472.     return {
  473.       user2: state.main.secret.user,
  474.       rooms: state.rooms.rooms.payload,
  475.       movies: state.movies.movies.payload
  476.     }
  477.   }
  478.  
  479.   const mapActionsToProps =  {
  480.       getRooms: roomsAction.getRooms,
  481.       getMovies: moviesAction.getMovies,
  482.       addMovie: moviesAction.addMovie,
  483.       deleteMovie : moviesAction.deleteMovie,
  484.       bookMovie: moviesAction.bookMovie,
  485.       getSecret: authAction.getSecret,
  486.       updateMovie: moviesAction.updateMovie,
  487.       switchRoute : authAction.switchRoute
  488.   }
  489.  
  490.  
  491.  
  492.   export default compose(
  493.     connect(mapStateToProps,mapActionsToProps),
  494.     withStyles(styles)
  495.   )(Movies)
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top