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