Initial commit
This commit is contained in:
155
Source/NewGroup.js
Normal file
155
Source/NewGroup.js
Normal file
@@ -0,0 +1,155 @@
|
||||
import React from "react";
|
||||
import Store from "./interface/Store";
|
||||
import * as Act from "./interface/Actions";
|
||||
import addE from "./Images/addE.png"
|
||||
import addD from "./Images/addD.png"
|
||||
import del from "./Images/minus.png"
|
||||
|
||||
export default class NewGroup extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = { usrs: Store.getUsers(), grpnme: '', team: [], coin: 1, usrinx: -1, msg: '' }
|
||||
this.getUsers = this.getUsers.bind(this)
|
||||
this.color = ['grey', 'red', 'green', 'blue']
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
Store.on("users", this.getUsers)
|
||||
Act.apiCall('service', 'USRLST', {});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Store.removeListener("users", this.getUsers)
|
||||
}
|
||||
|
||||
getUsers() {
|
||||
this.setState({ usrs: Store.getUsers(), usrinx: 0 })
|
||||
}
|
||||
|
||||
addUser() {
|
||||
let pers = this.state.usrs[this.state.usrinx]
|
||||
let team = this.state.team
|
||||
team.push({ tag: pers.tag, nme: pers.desc, coin: this.state.coin })
|
||||
this.setState({ team: team })
|
||||
}
|
||||
|
||||
newGroup() {
|
||||
Act.apiCall('service', 'GRPNEW', {
|
||||
desc: this.state.grpnme,
|
||||
group: this.state.team
|
||||
});
|
||||
this.setState({ grpnme: '', team: [], usrinx: 0 })
|
||||
}
|
||||
|
||||
teamOff(inx, e) {
|
||||
let tm = this.state.team
|
||||
tm.splice(inx, 1)
|
||||
this.setState({ team: tm })
|
||||
}
|
||||
|
||||
check(me) {
|
||||
let msg = []
|
||||
let i = this.state.team.length
|
||||
if (i === 0) return ['create group']
|
||||
let cn = [...new Set(this.state.team.map((ent) => ent.coin))];
|
||||
let nm = [...new Set(this.state.team.map((ent) => ent.tag))];
|
||||
|
||||
if (this.state.grpnme.length < 4)
|
||||
msg.push('group name required')
|
||||
|
||||
if (nm.indexOf(me) === -1)
|
||||
msg.push('must be in list')
|
||||
|
||||
if ([1, 5, 7, 9, 11].indexOf(i) > -1)
|
||||
msg.push('uneven players')
|
||||
|
||||
if (i !== nm.length)
|
||||
msg.push('duplicate player')
|
||||
|
||||
if (i === 2 && cn.length !== 2)
|
||||
msg.push('different tokens')
|
||||
|
||||
if (i > 2 && i % cn.length !== 0)
|
||||
msg.push('token mismatch')
|
||||
|
||||
return msg
|
||||
}
|
||||
|
||||
render() {
|
||||
let me = ''
|
||||
let usrlst = this.state.usrs.map((u, i) => {
|
||||
if (u.me === 1) me = u.tag
|
||||
return <option value={i}>{u.desc}</option>
|
||||
})
|
||||
|
||||
let team = this.state.team
|
||||
? this.state.team.map((d, i) => {
|
||||
return <div className="flexRow flexSpace">
|
||||
<div style={{
|
||||
fontFamily: "Roboto", fontSize: "12px",
|
||||
fontWeight: (d.me === 1 ? "bold" : "normal")
|
||||
}}>{d.nme}</div>
|
||||
<div className="flexRow">
|
||||
<div className="cirsml" style={{ backgroundColor: this.color[d.coin], marginRight: "2px" }}></div>
|
||||
<img src={del} onClick={this.teamOff.bind(this, i)} style={{ width: "12px" }} />
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
: <div>no memebers</div>
|
||||
|
||||
let msg = this.check(me);
|
||||
|
||||
return (
|
||||
<div className="flexRow flexPad">
|
||||
<div className="flexCol flexPad" style={{ height: "162px" }}>
|
||||
<div className="box" style={{ marginTop: "5px" }} >
|
||||
<div className="boxHdr">group name</div>
|
||||
<input type="text" value={this.state.grpnme} style={{ width: "174px" }}
|
||||
placeholder="...enter something here"
|
||||
onChange={(e) => this.setState({ grpnme: e.target.value })} />
|
||||
</div>
|
||||
<div className="box">
|
||||
<div className="flexRow flexSpace" style={{ borderBottom: '1px solid grey' }}>
|
||||
<div className="flexCol">
|
||||
<select value={this.state.usrinx} style={{ width: "156px" }}
|
||||
onChange={(e) => this.setState({ usrinx: e.target.value })}>
|
||||
{usrlst}
|
||||
</select>
|
||||
<div className="flexRow flexSpace flexAlign" style={{ height: "20px" }}>
|
||||
<div style={{ fontFamily: "Roboto", fontSize: "12px" }}>select token</div>
|
||||
<div className={this.state.coin === 1 ? "circle" : "cirsml"}
|
||||
style={{ backgroundColor: "red" }}
|
||||
onClick={() => this.setState({ coin: 1 })}></div>
|
||||
<div className={this.state.coin === 2 ? "circle" : "cirsml"}
|
||||
style={{ backgroundColor: "green" }}
|
||||
onClick={() => this.setState({ coin: 2 })} ></div>
|
||||
<div className={this.state.coin === 3 ? "circle" : "cirsml"}
|
||||
style={{ backgroundColor: "blue", marginRight: "15px" }}
|
||||
onClick={() => this.setState({ coin: 3 })} ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<img src="addsml.png" onClick={this.addUser.bind(this)} style={{ width: "24px", height: "24px" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flexCol" style={{ overflowY: "scroll", height: "60px" }}>
|
||||
{team}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flexCol">
|
||||
<img src="team.png" style={{ width: "100px" }} />
|
||||
<div className="flexCenter" style={{ marginTop: "7px" }}>
|
||||
{msg.length === 0
|
||||
? <img onClick={this.newGroup.bind(this)} src={addE} />
|
||||
: <img src={addD} />
|
||||
}
|
||||
</div>
|
||||
<div className="flexCol" style={{ fontFamily: "OpenSans", fontSize: "12px" }} >
|
||||
{msg.map((m) => { return <div>{m}</div> })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user