Aktualisieren src/jsx/main.jsx
This commit is contained in:
Luca Jäntsch
388
src/jsx/main.jsx
388
src/jsx/main.jsx
@@ -1,195 +1,195 @@
|
||||
import React from 'react';
|
||||
|
||||
import {Classes} from './class/class_loader';
|
||||
import {Students_loader} from './class/students_loader';
|
||||
import { Student } from './ui/student';
|
||||
import { User } from './static/user';
|
||||
|
||||
export class Main extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
classes :['1'],
|
||||
selected:"-",
|
||||
students:[],
|
||||
stud_html:[],
|
||||
choose:1,
|
||||
|
||||
prank:30,
|
||||
prank_i:0,
|
||||
prank_delay:100,
|
||||
|
||||
|
||||
grp_gui:"invi",
|
||||
grp_member:2,
|
||||
css:".group{opacity:0}"
|
||||
}
|
||||
|
||||
this.selCh = this.selCh.bind(this);
|
||||
this.changeChoosen = this.changeChoosen.bind(this);
|
||||
this.choose = this.choose.bind(this);
|
||||
this.chooseInit = this.chooseInit.bind(this);
|
||||
this.openGrpGui = this.openGrpGui.bind(this);
|
||||
this.chooseGroups = this.chooseGroups.bind(this);
|
||||
|
||||
var me = this;
|
||||
Classes.load_Classes((data)=>{
|
||||
me.setState({classes:data.classes});
|
||||
});
|
||||
|
||||
}
|
||||
selCh(e){
|
||||
console.log(e.target.value);
|
||||
var v = e.target.value;
|
||||
var me = this;
|
||||
if(v!=='-'){
|
||||
Students_loader.loadStudents(e.target.value,(data)=>{
|
||||
console.log(data)
|
||||
User.user_arr = [];
|
||||
me.setState({students:[],stud_html:[]});
|
||||
|
||||
var ht = [];
|
||||
console.log(v)
|
||||
data.user.map((cl,i)=>
|
||||
ht.push(<Student username={cl} cl={v} i={i}></Student>)
|
||||
)
|
||||
console.log(ht[0])
|
||||
me.setState({students:data.user,selected:v,stud_html:ht})
|
||||
})
|
||||
}else{
|
||||
User.user_arr = [];
|
||||
me.setState({students:[],selected:v,stud_html:[]})
|
||||
}
|
||||
}
|
||||
changeChoosen(e){
|
||||
this.setState({choose:e.target.value})
|
||||
}
|
||||
chooseInit(){
|
||||
this.setState({prank_i:0})
|
||||
this.choose();
|
||||
}
|
||||
choose(){
|
||||
for(var g in User.user_arr){
|
||||
User.user_arr[g].appear();
|
||||
}
|
||||
var me = this;
|
||||
//var c = [];
|
||||
var users = User.user_arr.length;
|
||||
var needed = User.user_arr.length-this.state.choose;
|
||||
|
||||
var already_picked = [];
|
||||
|
||||
for(var i = 0;i<needed;i++){
|
||||
var pushed = false;
|
||||
do {
|
||||
var x = Math.floor(Math.random()*users);
|
||||
if(already_picked.indexOf(x)===-1){
|
||||
already_picked.push(x);
|
||||
console.log(x);
|
||||
User.user_arr[x].disappear();
|
||||
pushed = true;
|
||||
}
|
||||
} while (pushed === false);
|
||||
}
|
||||
setTimeout(function(){
|
||||
if(me.state.prank > me.state.prank_i){
|
||||
me.setState({prank_i:me.state.prank_i+1})
|
||||
me.choose();
|
||||
}
|
||||
|
||||
},me.state.prank_delay)
|
||||
}
|
||||
|
||||
openGrpGui(){
|
||||
if(this.state.grp_gui==='invi'){
|
||||
this.setState({grp_gui:'vi',"css":".group{opacity:1}"});
|
||||
|
||||
}else{
|
||||
this.setState({grp_gui:'invi',"css":".group{opacity:0}"});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* CHOOSE GROUPS
|
||||
*/
|
||||
chooseGroups(){
|
||||
var tmp_map = {}
|
||||
var mk_groups = Math.floor(this.state.students.length/this.state.grp_member);
|
||||
var fill = this.state.students.length%this.state.grp_member;
|
||||
|
||||
for(var z = 0;z<mk_groups;z++){
|
||||
tmp_map["grp_"+z] = [];
|
||||
}
|
||||
|
||||
for(var i = 0; i<this.state.students.length;i++){
|
||||
var grp = Math.floor(Math.random()*mk_groups);
|
||||
if(this.state.students.length-1-fill>=i || tmp_map['grp_'+grp].length<mk_groups){
|
||||
console.log("TEST")
|
||||
var g = false;
|
||||
var y = 0;
|
||||
while(g==false){
|
||||
grp = Math.floor(Math.random()*mk_groups);
|
||||
if(tmp_map['grp_'+grp].length<this.state.grp_member){
|
||||
g=true;
|
||||
}
|
||||
if(y>100){
|
||||
console.log("ESC");
|
||||
break;
|
||||
}
|
||||
y++;
|
||||
}
|
||||
}else{
|
||||
console.log("FILL")
|
||||
}
|
||||
User.user_arr[i].setGroup(grp)
|
||||
tmp_map["grp_"+grp].push( User.user_arr[i]);
|
||||
|
||||
}
|
||||
|
||||
|
||||
console.log("INFO");
|
||||
console.log(tmp_map)
|
||||
console.log("REST " +fill);
|
||||
console.log(Math.floor(this.state.students.length/this.state.grp_member));
|
||||
console.log("INFO END")
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<div className="nav">
|
||||
<div>
|
||||
<select className="select-wrapper" onChange={this.selCh} value={this.state.selected} title="Gruppe auswählen">
|
||||
<option value="-">-</option>
|
||||
{this.state.classes.map((cl,i)=>
|
||||
<option value={cl.toLowerCase()}>{cl.toUpperCase()}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" min="1" value={this.state.choose} onChange={this.changeChoosen} title="Anzahl an zu wählenden Personen"/>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.chooseInit}>Auswählen</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.openGrpGui} title="Öffnet den Gruppenmodus">Gruppenmodus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="grp_gui" className={this.state.grp_gui}>
|
||||
<div>
|
||||
Gruppen aus <input type="number" min="2" value={this.state.grp_member} onChange={(e)=>{this.setState({grp_member:e.target.value})}}/> Personen.
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.chooseGroups} title="BETA feature">Gruppen bilden</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="studentList">
|
||||
{this.state.stud_html}
|
||||
</div>
|
||||
<style>
|
||||
{this.state.css}
|
||||
</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import React from 'react';
|
||||
|
||||
import {Classes} from './class/class_loader';
|
||||
import {Students_loader} from './class/students_loader';
|
||||
import { Student } from './ui/student';
|
||||
import { User } from './static/user';
|
||||
|
||||
export class Main extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
classes :['1'],
|
||||
selected:"-",
|
||||
students:[],
|
||||
stud_html:[],
|
||||
choose:1,
|
||||
|
||||
prank:30,
|
||||
prank_i:0,
|
||||
prank_delay:100,
|
||||
|
||||
|
||||
grp_gui:"invi",
|
||||
grp_member:2,
|
||||
css:".group{opacity:0}"
|
||||
}
|
||||
|
||||
this.selCh = this.selCh.bind(this);
|
||||
this.changeChoosen = this.changeChoosen.bind(this);
|
||||
this.choose = this.choose.bind(this);
|
||||
this.chooseInit = this.chooseInit.bind(this);
|
||||
this.openGrpGui = this.openGrpGui.bind(this);
|
||||
this.chooseGroups = this.chooseGroups.bind(this);
|
||||
|
||||
var me = this;
|
||||
Classes.load_Classes((data)=>{
|
||||
me.setState({classes:data.classes});
|
||||
});
|
||||
|
||||
}
|
||||
selCh(e){
|
||||
console.log(e.target.value);
|
||||
var v = e.target.value;
|
||||
var me = this;
|
||||
if(v!=='-'){
|
||||
Students_loader.loadStudents(e.target.value,(data)=>{
|
||||
console.log(data)
|
||||
User.user_arr = [];
|
||||
me.setState({students:[],stud_html:[]});
|
||||
|
||||
var ht = [];
|
||||
console.log(v)
|
||||
data.user.map((cl,i)=>
|
||||
ht.push(<Student username={cl} cl={v} i={i}></Student>)
|
||||
)
|
||||
console.log(ht[0])
|
||||
me.setState({students:data.user,selected:v,stud_html:ht})
|
||||
})
|
||||
}else{
|
||||
User.user_arr = [];
|
||||
me.setState({students:[],selected:v,stud_html:[]})
|
||||
}
|
||||
}
|
||||
changeChoosen(e){
|
||||
this.setState({choose:e.target.value})
|
||||
}
|
||||
chooseInit(){
|
||||
this.setState({prank_i:0})
|
||||
this.choose();
|
||||
}
|
||||
choose(){
|
||||
for(var g in User.user_arr){
|
||||
User.user_arr[g].appear();
|
||||
}
|
||||
var me = this;
|
||||
//var c = [];
|
||||
var users = User.user_arr.length;
|
||||
var needed = User.user_arr.length-this.state.choose;
|
||||
|
||||
var already_picked = [];
|
||||
|
||||
for(var i = 0;i<needed;i++){
|
||||
var pushed = false;
|
||||
do {
|
||||
var x = Math.floor(Math.random()*users);
|
||||
if(already_picked.indexOf(x)===-1){
|
||||
already_picked.push(x);
|
||||
console.log(x);
|
||||
User.user_arr[x].disappear();
|
||||
pushed = true;
|
||||
}
|
||||
} while (pushed === false);
|
||||
}
|
||||
setTimeout(function(){
|
||||
if(me.state.prank > me.state.prank_i){
|
||||
me.setState({prank_i:me.state.prank_i+1})
|
||||
me.choose();
|
||||
}
|
||||
|
||||
},me.state.prank_delay)
|
||||
}
|
||||
|
||||
openGrpGui(){
|
||||
if(this.state.grp_gui==='invi'){
|
||||
this.setState({grp_gui:'vi',"css":".group{opacity:1}"});
|
||||
|
||||
}else{
|
||||
this.setState({grp_gui:'invi',"css":".group{opacity:0}"});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* CHOOSE GROUPS
|
||||
*/
|
||||
chooseGroups(){
|
||||
var tmp_map = {}
|
||||
var mk_groups = Math.floor(this.state.students.length/this.state.grp_member);
|
||||
var fill = this.state.students.length%this.state.grp_member;
|
||||
|
||||
for(var z = 0;z<mk_groups;z++){
|
||||
tmp_map["grp_"+z] = [];
|
||||
}
|
||||
|
||||
for(var i = 0; i<this.state.students.length;i++){
|
||||
var grp = Math.floor(Math.random()*mk_groups);
|
||||
if(this.state.students.length-1-fill>=i || tmp_map['grp_'+grp].length<mk_groups){
|
||||
console.log("TEST")
|
||||
var g = false;
|
||||
var y = 0;
|
||||
while(g===false){
|
||||
grp = Math.floor(Math.random()*mk_groups);
|
||||
if(tmp_map['grp_'+grp].length<this.state.grp_member){
|
||||
g=true;
|
||||
}
|
||||
if(y>100){
|
||||
console.log("ESC");
|
||||
break;
|
||||
}
|
||||
y++;
|
||||
}
|
||||
}else{
|
||||
console.log("FILL")
|
||||
}
|
||||
User.user_arr[i].setGroup(grp)
|
||||
tmp_map["grp_"+grp].push( User.user_arr[i]);
|
||||
|
||||
}
|
||||
|
||||
|
||||
console.log("INFO");
|
||||
console.log(tmp_map)
|
||||
console.log("REST " +fill);
|
||||
console.log(Math.floor(this.state.students.length/this.state.grp_member));
|
||||
console.log("INFO END")
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<div className="nav">
|
||||
<div>
|
||||
<select className="select-wrapper" onChange={this.selCh} value={this.state.selected} title="Gruppe auswählen">
|
||||
<option value="-">-</option>
|
||||
{this.state.classes.map((cl,i)=>
|
||||
<option value={cl.toLowerCase()}>{cl.toUpperCase()}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" min="1" value={this.state.choose} onChange={this.changeChoosen} title="Anzahl an zu wählenden Personen"/>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.chooseInit}>Auswählen</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.openGrpGui} title="Öffnet den Gruppenmodus">Gruppenmodus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="grp_gui" className={this.state.grp_gui}>
|
||||
<div>
|
||||
Gruppen aus <input type="number" min="2" value={this.state.grp_member} onChange={(e)=>{this.setState({grp_member:e.target.value})}}/> Personen.
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={this.chooseGroups} title="BETA feature">Gruppen bilden</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="studentList">
|
||||
{this.state.stud_html}
|
||||
</div>
|
||||
<style>
|
||||
{this.state.css}
|
||||
</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user