[WIP] Initial commit for react

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": ["es2015", "stage-2", "react"],
+  "env": {
+    "test": {
+      "plugins": [
+        "istanbul"
+      ]
+    }
+  }
+}

.gitignore

@@ -61,3 +61,20 @@ brus/settings/local.py
 brus/db.sqlite
 celerybeat.pid
 files/
+
+old
+test
+
+.DS_Store
+node_modules
+npm-debug.log
+public/bundle.js
+public/bundle.css
+compiler.jar
+tiny-lr.pid
+coverage
+dist
+.env
+styleguide
+.css.tmp.md
+*.log

app/components/Deposit/deposit.css

@@ -0,0 +1,13 @@
+
+.input {
+	width: 5em;
+}
+
+.button {
+	background-color: var(--brus-green);
+	color: #000;
+}
+.button:hover {
+	background-color: var(--brus-green-dark);
+	transition: background-color var(--transition-short);
+}

app/components/Deposit/index.js

@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+
+import styles from './deposit.css'
+
+export default class Deposit extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      onDeposit: this.props.onDeposit
+    }
+
+    this.handleDeposit = this.handleDeposit.bind(this);
+  }
+
+  handleDeposit(e){
+    e.preventDefault();
+    this.state.onDeposit(parseInt(this.depositAmount.value));
+  }
+
+  render() {
+    return (
+      <form role="form" onSubmit={this.handleDeposit}>
+        <input type="number"
+          min="0"
+          ref={ref => (this.depositAmount = ref)}
+          className={styles.input}/>
+        <button type="submit" className={styles.button}>Deposit</button>
+      </form>
+    );
+  }
+}

app/components/Header/Logo.js

@@ -0,0 +1,11 @@
+import React, {Component} from 'react';
+
+import styles from './logo.css'
+
+export default class Logo extends Component {
+  render() {
+    return (
+      <img className={styles.logo} src="/webkom.png" />
+    );
+  }
+}

app/components/Header/index.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import Logo from './Logo'
+
+import styles from './style.css'
+
+
+export default class Header extends Component {
+  render() {
+    return (
+      <div className={styles.header}>
+        <Logo />
+        <h1>Brusliste for Webkom</h1>
+      </div>
+    );
+  }
+}

app/components/Header/logo.css

@@ -0,0 +1,5 @@
+.logo {
+  width: 6em;
+  height: 6em;
+  margin: 1em;
+}

app/components/Header/style.css

@@ -0,0 +1,12 @@
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+
+}
+.header h1{
+	font-weight: normal;
+	font-size: 3em;
+}

app/components/TransactionList/Transaction.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {calculateBalance, getValueClass} from '../../utils/utils.js';
+
+import styles from './transaction.css'
+
+
+export default class Transaction extends Component {
+  render(){
+    return (
+      <tr>
+        <td>{this.props.data.date.toString()}</td>
+        <td className={getValueClass(this.props.data.value)}>
+          {this.props.data.value},-
+        </td>
+        {this.props.admin && <td className={styles.delete}>
+          <span onClick={e => (this.props.onDeleteTransaction(this.props.id))}>X</span>
+        </td>}
+      </tr>
+    );
+  }
+}

app/components/TransactionList/index.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {calculateBalance, getValueClass} from '../../utils/utils.js';
+import Transaction from './Transaction'
+
+import styles from './style.css'
+
+const ADMIN = true;//tmp
+
+
+export default class TransactionList extends Component {
+  constructor(props){
+    super(props)
+
+    this.state = {
+      transactions:this.props.transactions
+    };
+
+    this.handleDeleteTransaction = this.handleDeleteTransaction.bind(this);
+  }
+
+
+  handleDeleteTransaction(id){
+    console.log("Deleted transaction:");
+    console.log(this.state.transactions[id]);
+    const t = this.state.transactions;
+    t.splice(id, 1);
+    this.setState({transactions:t})
+  }
+
+  render() {
+    let i = 0;
+    return (
+      <table className={styles.table}>
+        <thead>
+          <tr>
+              <th>Date</th>
+              <th className={getValueClass(0)}>Transaction</th>
+              {ADMIN && <th className={styles.delete}>Delete</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {this.state.transactions.map(t => (<Transaction key={i} id={i++} data={t}
+            onDeleteTransaction={this.handleDeleteTransaction} admin={ADMIN}/>))}
+        </tbody>
+      </table>
+    );
+  }
+
+}

app/components/TransactionList/style.css

@@ -0,0 +1,13 @@
+
+.delete {
+	text-align: right;
+}
+
+.table {
+  border-collapse: collapse;
+  margin: auto;
+}
+
+.table td:first-child, .table th:first-child {
+	width: 100%;
+}

app/components/TransactionList/transaction.css

@@ -0,0 +1,13 @@
+
+.delete{
+	text-align: center;
+}
+.delete span {
+	color: var(--abakus-red);
+}
+
+.delete span:hover{
+	font-weight: bold;
+	color: var(--abakus-red-dark);
+	cursor: pointer;
+}

app/components/UserList/AddUser.js

@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {addUser} from '../../../testData';
+
+import styles from './adduser.css'
+
+export default class AddUser extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {};
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e){
+    e.preventDefault();
+
+    if (!this.state.name)
+      return;
+
+    this.state.balance = this.state.balance || 0;
+
+    //addUser(this.state.name, this.state.balance);
+    console.log(`Submit new user ${this.state.name}
+      with initial balance ${this.state.balance}`);
+  }
+  handleChange(e){
+    const name = e.target.name;
+    const value = e.target.value;
+    this.setState({[name]:value});
+  }
+
+  render() {
+    return (
+      <div className={styles.div}>
+        <h2>Add user</h2>
+        <form role='form' onSubmit={this.handleSubmit}>
+          <input name="name" type='text'
+            value={this.state.name || ""}
+            onChange={this.handleChange}
+            placeholder='Name' />
+          <input name="balance" type='number'
+            value={this.state.balance || ""}
+            onChange={this.handleChange}
+            placeholder='Balance' className={styles.balance} />
+          <button type='submit' className={styles.button}>
+            Add
+          </button>
+        </form>
+      </div>
+    );
+  }
+}

app/components/UserList/User.js

@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {getValueClass} from '../../utils/utils';
+import Deposit from '../Deposit'
+
+import styles from './user.css'
+
+const SODA_PRICE = 18;
+
+
+export default class User extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {name:props.name, balance:parseInt(props.balance)};
+
+    this.handleBuySoda = this.handleBuySoda.bind(this);
+    this.handleDeposit = this.handleDeposit.bind(this);
+  }
+  handleBuySoda(e){//Husk setstate oppdaterer neste render
+    const newBalance = this.state.balance - SODA_PRICE;
+    this.setState({balance:newBalance});
+    console.log(`User ${this.state.name} bought a soda for ${SODA_PRICE},-
+      new balace ${newBalance}`);
+  }
+  handleDeposit(amount){
+    //e.preventDefault()
+    if (!amount ||  amount < 0)
+      return;
+
+    const newBalance = this.state.balance + amount;
+
+    this.setState({balance:newBalance});
+    console.log(`User ${this.state.name} deposited ${amount},
+      new balance: ${newBalance}`);
+
+  }
+  render() {
+    return (
+      <tr className={styles.row}>
+        <td><a href={"/user/"+this.props.userId}>{this.state.name}</a></td>
+        <td className={getValueClass(this.state.balance)}>
+          {this.state.balance},-
+        </td>
+        <td>
+          <button className={styles.withraw}
+            onClick={this.handleBuySoda}>Buy soda</button>
+        </td>
+        <td>
+          <Deposit onDeposit={this.handleDeposit} />
+        </td>
+      </tr>
+    );
+  }
+}

app/components/UserList/UserList.js

@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import User from './User';
+import {getValueClass} from '../../utils/utils';
+
+import styles from './userlist.css'
+
+export default class UserList extends Component {
+
+  constructor(props){
+    super(props);
+
+    this.state = {users:props.users};
+
+    this.state.balance = this.getTotalBalance();
+
+  }
+
+  getTotalBalance(){
+    return this.state.users.reduce((sum, u) => (sum + parseInt(u.balance)), 0);
+  }
+
+  handleUserChange(i){
+
+  }
+
+  render() {
+    return (
+      <div>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th className={getValueClass(0)}>Balance</th>
+              <th>Buy</th>
+              <th>Deposit</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.state.users.map(u => (
+              <User key={u.id} userId={u.id}
+              name={u.name} balance={u.balance} />))}
+            <tr>
+              <td>Total balance</td>
+              <td className={getValueClass(this.state.balance)}>
+                {this.state.balance},-
+                </td>
+              <td></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}