Added jsx files to get one member and all members.

2016-06-14 18:31:15 +03:00
parent e8c726fb06
commit 5e02a131b6
3 changed files with 143 additions and 0 deletions
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Haku</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+</head>
+<body>
+
+<div class="container">
+  <h1>Jäsenrekisteri</h1>
+  <h2>Hae jäsen</h2>
+  <p>Syötä jäsenen nimi:</p>
+  <form role="form">
+    <div class="form-group">
+      <label for="usr">Name:</label>
+      <input type="text" class="form-control" id="usr">
+    </div>
+  </form>
+</div>
+
+</body>
+</html>
@@ -0,0 +1,53 @@
+/*This code gets certain member from djangoo*/
+//ajax request!!
+//$.get(url, callback)
+//url /members/api/member/:id
+// :id -> members id
+//fetch!! no get!
+
+var Member = React.createClass({
+	getInitialState: function() {
+		return {
+			id: 0,
+			first_name: '',
+			last_name: '',
+			email: '',
+			AYY: 0,
+			jas: 0,
+			POR: ''
+		};
+	},
+
+	componentDidMount: function() {
+		this.serverRequest = $.get(this.props.source, function(response){
+			var mem = response;
+			this.setState({
+				id = mem.id,
+				first_name: mem.first_name,
+				last_name: mem.last_name,
+				email: mem.email,
+				AYY: mem.AYY,
+				jas: mem.jas,
+				POR: mem.POR
+			});
+		}.bind(this));
+	},
+	
+	componentWillUnmount: function() {
+		this.serverRequest.abort();
+	},
+	
+	render: function() {
+		return (
+			<div>
+			{this.state.id}'s name is
+				{this.state.firstname} {this.state.last_name}
+			</div>
+			);
+	}
+});
+
+ReactDOM.render(
+	<Member source =  "/members/api/member/id" />,
+	mountNode
+);
@@ -0,0 +1,64 @@
+/*	function getAllMembers(){
+		$.get(/members/api/members, result);
+	}*/
+
+var MembersGridRow = React.createClass({
+	render: function(){
+		return (
+			<tr>
+				<td>{this.props.item.id}</td>
+				<td>{this.props.item.first_name}</td>
+				<td>{this.props.item.last_name}</td>
+				<td>{this.props.item.email}</td>
+				<td>{this.props.item.AYY}</td>
+				<td>{this.props.item.jas}</td>
+				<td>{this.props.item.POR}</td>
+			</tr>
+		);
+	}
+});
+
+var MembersGridTable = React.createClass({
+	getInitialState: function(){
+		return {
+			items:[]
+		}
+	},
+	componentDidMount: function(){
+		//Fetch data via ajax
+		$.get(this.props.dataURL, function(data){
+			if(this.isMounted()){
+				this.setState({
+					items: data
+				});
+			}
+		}.bind(this));
+	},
+	render: function(){
+		var rows = [];
+		this.state.item.forEach(function(item){
+			rows.push(<MembersGridRow key = {item.MemberID} item={item}/>);
+		});
+		return(<table className="table table-bordered table-responsive">
+			<thead>
+				<tr>
+					<th>ID</th>
+					<th>First Name</th>
+					<th>Last Name</th>
+					<th>Email</th>
+					<th>AYY</th>
+					<th>jas</th>
+					<th>POR</th>
+				</tr>
+			</thead>
+			<tbody>
+			{rows}
+			</tbody>
+		</table>);
+	}
+});
+
+ReactDOM.render(
+	<MembersGridTable dataURL = "/members/api/members"/>,
+	document.getElementById('griddata')
+);