Compare commits
6 Commits
developmen
...
2-gruppenm
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2fc95b9682 | ||
|
|
771b1558b7 | ||
|
|
bcf8fc8acf | ||
|
|
6a929b51be | ||
|
|
735b20580f | ||
|
|
c2e209db2f |
12
README.md
12
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
|
||||
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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}>{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