Merge branch '2-gruppenmodus-bilder-2' into 'master'

gruppenmodus fix

Closes #2

See merge request theenoro/random-user!4

README.md

@@ -1,8 +1,6 @@
 # Random user
 Online preview: http://theenoro.the-co.de/random-user/
 
-
-
 ## Download
 ### Build yourself
 NodeJS: https://nodejs.org/en/
@@ -19,14 +17,15 @@ lessc src_less/main.less build/main.css
 mv public build
 ```
 ### Latest Artifact
+witout building - just download and put into webfolder.
 https://gitlab.thee.moe/theenoro/random-user/-/jobs/artifacts/master/download?job=pages
 
 ## Usage
 ### Get it running
 Just use a simple webserver, if you want to use the rescan.php then you need php-cli or something like apache/nginx with the php module.
 ### Create new Classes / Usergroups w/o rescan.php
-1. create in `build/data/class` a new folder for a new group of users
-2. modify the `classes.json` in `build/data/class` and add in the array your ne folder name
+1. create in `public/data/class` a new folder for a new group of users
+2. modify the `classes.json` in `public/data/class` and add in the array your ne folder name
 3. create in your new folder a file with the name 'user.json' and a structure like 
 ```json
 {"user":[
@@ -37,6 +36,7 @@ Just use a simple webserver, if you want to use the rescan.php then you need php
 
 ```
 ### Create new Classes / Usergroups w/ rescan.php
-1. create in `build/data/class` a new folder for a new group of users
-2. run in the build folder `php ./rescan.php`, it will generate the `classes.json` and all `user.json` files for you
+1. (for the web rescan)go to public/ and run `chown -R www-data:www-data class` that the user www-data owns the folder and can write files.
+2. create in `public/data/class` a new folder for a new group of users
+3. run in the public folder `php ./rescan.php`, it will generate the `classes.json` and all `user.json` files for you. Or get on your website https://yourdoma.in/rescan.php 
 

package-lock.json

@@ -6630,7 +6630,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6995,7 +6996,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7043,6 +7045,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7081,11 +7084,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         }

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} .user.disappear{opacity: 1 !important; }"});
+
+        }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}>{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>
+        )
+    }
 }

src/jsx/ui/student.jsx

@@ -45,7 +45,7 @@ export class Student extends React.Component{
         var c = "user chosen_"+this.state.num+' '+this.state.dis;
         return (
             <div className={c}>
-                <div className="group">{this.state.group}</div>
+                <div className="group">{this.state.group+1}</div>
                 <div className="user_img"><img src={this.state.img_url} onError={this.onErr} alt=""></img></div>
                 <div className="username">{this.state.username}</div>
             </div>

src_less/grp_gui.less

@@ -20,4 +20,4 @@
         color: #FFF;
     }
 
-}
+}