tinchoaranda05 · tinchoaranda05 · May 12, 2017 · May 13, 2017 · May 14, 2017 · May 15, 2017
diff --git a/05-UI-ReactJS/my-app/.gitignore b/05-UI-ReactJS/my-app/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/05-UI-ReactJS/my-app/README.md b/05-UI-ReactJS/my-app/README.md
diff --git a/05-UI-ReactJS/my-app/package.json b/05-UI-ReactJS/my-app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "react": "^15.5.4",
+    "react-bootstrap": "^0.31.0",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "react-edit-inline": "^1.0.8",
+    "react-scripts": "0.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/05-UI-ReactJS/my-app/public/favicon.ico b/05-UI-ReactJS/my-app/public/favicon.ico
diff --git a/05-UI-ReactJS/my-app/public/index.html b/05-UI-ReactJS/my-app/public/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+
+    <title>Topic 05</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/05-UI-ReactJS/my-app/src/index.css b/05-UI-ReactJS/my-app/src/index.css
@@ -0,0 +1,50 @@
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.square:focus {
+  outline: none;
+}
+
+.kbd-navigation .square:focus {
+  background: #ddd;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}
diff --git a/05-UI-ReactJS/my-app/src/index.js b/05-UI-ReactJS/my-app/src/index.js
@@ -0,0 +1,193 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import 'bootstrap/dist/css/bootstrap.css';
+
+
+
+// ========================================
+
+
+class movie {
+  constructor(title, duration, year) {
+    this.title = title;
+    this.duration = duration;
+    this.year = year;
+    }
+}
+
+class Formu extends React.Component {
+  constructor(){
+    super();
+    this.state= {
+      title: '',
+      duration: '',
+      year: '',
+      title2: '',
+      duration2: '',
+      year2: '',
+      sub: '',
+      sub2: '',
+      index: '',
+      cssClass: 'hidden',
+      listaPelis : []
+    }
+
+    this.handleTitleChange = this.handleTitleChange.bind(this)
+    this.handleDurationChange = this.handleDurationChange.bind(this)
+    this.handleYearChange = this.handleYearChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete=this.handleDelete.bind(this)
+    this.handleEdit=this.handleEdit.bind(this)
+
+    this.handleTitleEdit = this.handleTitleEdit.bind(this)
+    this.handleDurationEdit = this.handleDurationEdit.bind(this)
+    this.handleYearEdit = this.handleYearEdit.bind(this)
+    this.handleSub = this.handleSub.bind(this)
+    this.handleSub2 = this.handleSub2.bind(this)
+
+  } 
+
+  handleTitleChange(e){
+    this.setState({title: e.target.value});
+  }
+
+  handleDurationChange(e){
+    this.setState({duration: e.target.value});
+  }
+
+  handleYearChange(e){
+    this.setState({year: e.target.value});
+  }
+
+  handleTitleEdit(e){
+    this.setState({title2: e.target.value});
+  }
+
+  handleDurationEdit(e){
+    this.setState({duration2: e.target.value});
+  }
+
+  handleYearEdit(e){
+    this.setState({year2: e.target.value});
+  }
+
+  handleSub(e){
+    this.setState({sub: e.target.value});
+  }
+
+  handleSub2(e){
+    this.setState({sub2: e.target.value});
+  }
+
+
+  handleSubmit(e){
+    e.preventDefault();
+    let Peli= new movie(e.target.title.value, e.target.duration.value, e.target.year.value);
+    this.state.listaPelis.push(Peli)
+    this.setState({
+      title: '',
+      duration:'',
+      year:'',
+      listaPelis: this.state.listaPelis
+    })
+  }
+
+  handleDelete(i){
+    this.state.listaPelis.splice(i,1)
+    this.setState({
+      listaPelis: this.state.listaPelis
+    })    
+  }
+
+  handleAdd(n){
+    this.setState({ cssClass: 'show',
+                    index: n
+                  })  
+  }
+
+
+  handleEdit(e){
+    let PeliNueva= new movie(this.state.title2, this.state.duration2, this.state.year2);
+
+    this.state.listaPelis.splice(e,1, PeliNueva)
+    this.setState({  
+      title: '',
+      duration:'',
+      year:'',
+      listaPelis: this.state.listaPelis,
+      cssClass: 'hidden'
+    })   
+  }
+
+  render(){
+
+    return(
+      <div className="container">
+        <h1 className="text-center">Video Store</h1>
+        <div className="row">
+          <div className="col-md-8 col-md-offset-3">
+            <form  className="form form-group" onSubmit={this.handleSubmit}>
+              <h5>Movie title:</h5>
+              <input type="text" className="form-control" id="title" placeholder="title.." value={this.state.title} onChange={this.handleTitleChange}/> 
+              <h5>Duration</h5>
+              <input type="text" className="form-control" id="duration" placeholder="in hours.." value={this.state.duration} onChange={this.handleDurationChange}/> 
+              <h5>Release Date</h5>
+              <input type="text" className="form-control" id="year" placeholder="year.." value={this.state.year}  onChange={this.handleYearChange}/>
+              <input type="Submit" className="btn btn-default btn-success" value="Add" onChange={this.handleSub}/>
+            </form>
+          </div>
+        </div>
+        <div className="col-md-6 col-md-offset-3">
+          <h1 className="text-center">Favorite Movies</h1>
+          <table className="table table-striped table-hover">        
+            <thead>
+              <tr>    
+                <th>Movie Title</th>
+                <th>Duration</th>
+                <th>Release Date</th>
+                <th></th>
+              </tr>
+              <tr>
+                <td><input type="text" className={this.state.cssClass} id="title2" placeholder="title.." value={this.state.title2} onChange={this.handleTitleEdit}/></td>
+                <td><input type="text" className={this.state.cssClass} id="duration2" placeholder="in hours.." value={this.state.duration2} onChange={this.handleDurationEdit}/></td>
+                <td><input type="text" className={this.state.cssClass} id="year2" placeholder="year.." value={this.state.year2}  onChange={this.handleYearEdit}/></td>
+                <td><button className={this.state.cssClass  + ' btn btn-xs btn-success' } onClick={() => this.handleEdit(this.state.index)}>
+                      <span className="glyphicon glyphicon-ok"></span>
+                    </button>
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.listaPelis.map((movie, number) => {
+                return(  
+                      <tr key={number}>
+                        <td>{movie.title}</td>
+                        <td>{movie.duration}</td>
+                        <td>{movie.year}</td>
+                        <td><button className="btn btn-xs btn-info" onClick={() => this.handleAdd(number)}>
+                              <span className="glyphicon glyphicon-pencil"></span>
+                            </button>
+                            <button className="btn btn-xs btn-danger" onClick={() => this.handleDelete(number)}>
+                              <span className="glyphicon glyphicon-trash"></span>
+                            </button>
+                        </td>
+                      </tr>                  
+                )
+              })} 
+            </tbody>      
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+// ========================================
+
+
+ReactDOM.render(
+  <Formu  />,
+  document.getElementById('root')
+);