115 lines
4.4 KiB
JavaScript
115 lines
4.4 KiB
JavaScript
import React from "react";
|
|
import Store from "./interface/Store";
|
|
import * as Act from "./interface/Actions";
|
|
import delImg from "./Images/delete.png";
|
|
import addE from "./Images/addE.png"
|
|
import addD from "./Images/addD.png"
|
|
|
|
export default class NewMatch extends React.Component {
|
|
constructor() {
|
|
super()
|
|
this.state = {
|
|
grplst: Store.getGroups(), grp: -1,
|
|
fndlst: Store.getFriends(), sernme:''
|
|
}
|
|
this.getGroups = this.getGroups.bind(this);
|
|
this.getFriends = this.getFriends.bind(this);
|
|
this.color = ['grey', 'red', 'green', 'blue']
|
|
}
|
|
|
|
componentDidMount() {
|
|
Store.on("groups", this.getGroups)
|
|
Store.on("friends", this.getFriends)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
Store.removeListener("groups", this.getGroups)
|
|
Store.removeListener("friends", this.getFriends)
|
|
}
|
|
|
|
getGroups() {
|
|
this.setState({ grplst: Store.getGroups() })
|
|
}
|
|
|
|
getFriends() {
|
|
this.setState({ fndlst: Store.getFriends() })
|
|
}
|
|
|
|
groupChange(e) {
|
|
if (e.target.value > -1) {
|
|
let tag = this.state.grplst[e.target.value].Tag
|
|
Act.apiCall('service', 'GRFRND', { grp: tag });
|
|
this.setState({ grp: e.target.value })
|
|
} else {
|
|
this.setState({ grp: e.target.value, fndlst: [] })
|
|
}
|
|
}
|
|
|
|
delGroup() {
|
|
let tag = this.state.grplst[this.state.grp].Tag
|
|
Act.apiCall('service', 'GRPDLT', { grp: tag });
|
|
this.setState({ grp: -1, sernme: '', fndlst: [] })
|
|
}
|
|
|
|
newSeries() {
|
|
if (this.state.grp > -1 && this.state.sernme.length > 3) {
|
|
let tag = this.state.grplst[this.state.grp].Tag
|
|
Act.apiCall('service', 'NEWSER', { grp: tag, ser: this.state.sernme });
|
|
this.setState({ grp: -1, sernme: '', fndlst: [] })
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let groups = this.state.grplst.map((g,i) => {
|
|
return <option value={i}>{g.Desc}</option>
|
|
})
|
|
let friends = this.state.fndlst.map((f) => {
|
|
return <div className="flexRow flexSpace" style={{ fontFamily: "Roboto", fontSize: "12px" }}>
|
|
<div style={{ maringLeft: "5px" }}>{f.Desc}</div>
|
|
<div style={{
|
|
marginRight: "5px", width: "14px", height: "14px",
|
|
borderRadius: "7px", backgroundColor: this.color[f.Coin]
|
|
}}></div>
|
|
</div>
|
|
})
|
|
let flag = this.state.grp > -1 && this.state.sernme.length > 3 ? true : false;
|
|
return (
|
|
<div className="flexRow flexPad">
|
|
<div className="flexCol flexPad" style={{ height: "162px" }}>
|
|
<div className="box" style={{ marginTop: "5px" }} >
|
|
<div className="boxHdr">match title</div>
|
|
<input type="text" value={this.state.sernme} style={{ width: "174px" }}
|
|
placeholder="...enter something here"
|
|
onChange={(e) => this.setState({ sernme: e.target.value })} />
|
|
</div>
|
|
<div className="box">
|
|
<div className="flexRow flexSpace" style={{ borderBottom: '1px solid grey' }}>
|
|
<div style={{ width: "18px", height: "18px" }}>
|
|
{
|
|
this.state.grp > -1
|
|
? <img src={delImg} onClick={this.delGroup.bind(this)} />
|
|
: null
|
|
}
|
|
</div>
|
|
<select value={this.state.grp} style={{ width: "160px" }}
|
|
onChange={this.groupChange.bind(this)}>
|
|
<option value='-1'>[please select group]</option>
|
|
{groups}
|
|
</select>
|
|
</div>
|
|
<div className="flexCol" style={{ overflowY: "scroll", height: "80px" }}>
|
|
{friends}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flexCol">
|
|
<img src="match.png" />
|
|
<div className="flexCenter" style={{marginTop: "15px"}}>
|
|
<img onClick={this.newSeries.bind(this)} src={ flag ? addE : addD} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |