diff --git a/public/data/class/example/christina_juliana.svg b/public/data/class/example/christina_juliana.svg index 9e2188e..fdfba22 100644 --- a/public/data/class/example/christina_juliana.svg +++ b/public/data/class/example/christina_juliana.svg @@ -1,36 +1,2 @@ - - - - - - image/svg+xml - - - - - - - - - + + \ No newline at end of file diff --git a/public/data/class/example/irmingrad_eckhard.svg b/public/data/class/example/irmingrad_eckhard.svg index 9e2188e..fdfba22 100644 --- a/public/data/class/example/irmingrad_eckhard.svg +++ b/public/data/class/example/irmingrad_eckhard.svg @@ -1,36 +1,2 @@ - - - - - - image/svg+xml - - - - - - - - - + + \ No newline at end of file diff --git a/public/data/class/example/nele_mechthild.svg b/public/data/class/example/nele_mechthild.svg index 9e2188e..fdfba22 100644 --- a/public/data/class/example/nele_mechthild.svg +++ b/public/data/class/example/nele_mechthild.svg @@ -1,36 +1,2 @@ - - - - - - image/svg+xml - - - - - - - - - + + \ No newline at end of file diff --git a/public/data/class/example/stanislav_teun.svg b/public/data/class/example/stanislav_teun.svg index 9e2188e..fdfba22 100644 --- a/public/data/class/example/stanislav_teun.svg +++ b/public/data/class/example/stanislav_teun.svg @@ -1,36 +1,2 @@ - - - - - - image/svg+xml - - - - - - - - - + + \ No newline at end of file diff --git a/public/data/class/example/user.json b/public/data/class/example/user.json index 843e381..4c071a8 100644 --- a/public/data/class/example/user.json +++ b/public/data/class/example/user.json @@ -1 +1 @@ -{"user":[["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"]]} \ No newline at end of file +{"user":[["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"],["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"],["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"],["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"],["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"]]} \ No newline at end of file diff --git a/public/data/class/student.svg b/public/data/class/student.svg index 9e2188e..fdfba22 100644 --- a/public/data/class/student.svg +++ b/public/data/class/student.svg @@ -1,36 +1,2 @@ - - - - - - image/svg+xml - - - - - - - - - + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 797765e..d78471f 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Random User diff --git a/src/jsx/main.jsx b/src/jsx/main.jsx index 9649fa8..3d385ac 100644 --- a/src/jsx/main.jsx +++ b/src/jsx/main.jsx @@ -17,13 +17,20 @@ export class Main extends React.Component{ prank:30, prank_i:0, - prank_delay:100 + 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)=>{ @@ -92,12 +99,66 @@ export class Main extends React.Component{ },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=i || tmp_map['grp_'+grp].length100){ + 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 (
- {this.state.classes.map((cl,i)=> @@ -105,15 +166,29 @@ export class Main extends React.Component{
- +
+
+ +
+
+
+
+ Gruppen aus {this.setState({grp_member:e.target.value})}}/> Personen. +
+
+ +
{this.state.stud_html}
+
) } diff --git a/src/jsx/ui/student.jsx b/src/jsx/ui/student.jsx index 709a27b..4a4e22c 100644 --- a/src/jsx/ui/student.jsx +++ b/src/jsx/ui/student.jsx @@ -11,7 +11,8 @@ export class Student extends React.Component{ cl:props.cl, img_url:'data/class/'+props.cl+'/'+props.username[0]+'.'+props.username[1], num:props.i, - dis:"" + dis:"", + group:"" } this.onErr = this.onErr.bind(this); @@ -37,10 +38,14 @@ export class Student extends React.Component{ disappear(){ this.setState({dis:"disappear"}); } + setGroup(grp_id){ + this.setState({group:grp_id}); + } render(){ var c = "user chosen_"+this.state.num+' '+this.state.dis; return (
+
{this.state.group}
{this.state.username}
diff --git a/src_less/grp_gui.less b/src_less/grp_gui.less new file mode 100644 index 0000000..237261a --- /dev/null +++ b/src_less/grp_gui.less @@ -0,0 +1,23 @@ +#grp_gui{ + background-color: #f4f5f6; + line-height: 50px; + display: flex; + border: #e0e0e0 1px solid; + + &.invi{ + height: 0; + opacity: 0; + } + &.vi{ + height: auto; + opacity: 1; + transition: 500ms all; + } + button{ + height: 40px; + border: 1px solid #0c81f5; + background: #0c81f5; + color: #FFF; + } + +} diff --git a/src_less/main.less b/src_less/main.less index 5430435..2c11e86 100644 --- a/src_less/main.less +++ b/src_less/main.less @@ -92,6 +92,7 @@ html,body{ margin: 5px; padding: 5px; transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms; + position: relative; &.disappear{ opacity: 0.09; transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms; @@ -100,9 +101,24 @@ html,body{ opacity: 1; transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms; } + .group{ + display: block; + position: absolute; + right: 5px; + padding: 5px; + border: 1px solid #56a1ec; + color: #FFF; + background: #0c81f5; + } .user_img{ + width: 200px; + height: 200px; + text-align: center; + line-height: 200px; img{ - width:200px; + max-width: 100%; + max-height: 100%; + vertical-align: middle; } } .username{ @@ -111,4 +127,5 @@ html,body{ width: 200px; } } -} \ No newline at end of file +} +@import './grp_gui.less'; \ No newline at end of file