the-old-stuff/random-user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0.1.5

Browse Source
This commit is contained in:
Luca J
2019-06-09 02:36:32 +02:00
parent ebcb0c5dde
commit ac87de7e1c
31 changed files with 13817 additions and 13459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,2 +1,2 @@
# Random user
# Random user

74
bash_scripts/generate.sh
View File

@@ -1,38 +1,38 @@
#!/bin/bash
# relative or absolute path where the classes are
path=../public/data/class/*
# image filetype needs to be the same
file_type=*.jpg
# REGEX
reg='(.*)class\/([0\-9A\-z_]*)\/([0\-9A\-z_]*)\.jpg'
#reg='class\/([0\-9A\-z_]*)'
for i in $path
do
if [ -d "$i" ]; then
#echo "$i"
json_file=$i/user.json
printf '{\n"user":[\n'>$json_file
for j in $i/*
do
if [[ $j == ${file_type} ]]; then
if [[ $j =~ ${reg} ]]; then
echo "${BASH_REMATCH[3]}"
printf '"'>>$json_file
printf ${BASH_REMATCH[3]}>>$json_file
printf '",\n'>>$json_file
else
echo "TEST2"
echo $j
fi
fi
done
cat $json_file | rev | cut -c 3- | rev
fi
#!/bin/bash
# relative or absolute path where the classes are
path=../public/data/class/*
# image filetype needs to be the same
file_type=*.jpg
# REGEX
reg='(.*)class\/([0\-9A\-z_]*)\/([0\-9A\-z_]*)\.jpg'
#reg='class\/([0\-9A\-z_]*)'
for i in $path
do
if [ -d "$i" ]; then
#echo "$i"
json_file=$i/user.json
printf '{\n"user":[\n'>$json_file
for j in $i/*
do
if [[ $j == ${file_type} ]]; then
if [[ $j =~ ${reg} ]]; then
echo "${BASH_REMATCH[3]}"
printf '"'>>$json_file
printf ${BASH_REMATCH[3]}>>$json_file
printf '",\n'>>$json_file
else
echo "TEST2"
echo $j
fi
fi
done
cat $json_file | rev | cut -c 3- | rev
fi
done

58
o.gitlab-ci.yml
View File

@@ -1,30 +1,30 @@
# Using the node alpine image to build the React app
image: node:alpine
# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
# Cache node modules - speeds up future builds
#cache:
# paths:
# - node_modules
# Name the stages involved in the pipeline
stages:
- deploy
# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
stage: deploy
script:
- npm install # Install all dependencies
- npm run build --prod # Build for prod
- cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
- mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
- mv build public # Move build files to public dir for Gitlab Pages
artifacts:
paths:
- public # The built files for Gitlab Pages to serve
only:
# Using the node alpine image to build the React app
image: node:alpine
# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
# Cache node modules - speeds up future builds
#cache:
# paths:
# - node_modules
# Name the stages involved in the pipeline
stages:
- deploy
# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
stage: deploy
script:
- npm install # Install all dependencies
- npm run build --prod # Build for prod
- cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
- mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
- mv build public # Move build files to public dir for Gitlab Pages
artifacts:
paths:
- public # The built files for Gitlab Pages to serve
only:
- master # Only run on master branch

25469
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

66
package.json
View File

@@ -1,33 +1,33 @@
{
"name": "random-user",
"version": "0.1.0",
"private": true,
"dependencies": {
"less": "^3.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"less": "less-watch-compiler ./src_less ./public/ main.less"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
{
"name": "random-user",
"version": "0.1.0",
"private": true,
"dependencies": {
"less": "^3.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"less": "less-watch-compiler ./src_less ./public/ main.less"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

6
public/data/class/classes.json
View File

@@ -1,5 +1 @@
{
"classes":[
"example"
]
}
{"classes":["example"]}

36
public/data/class/example/christina_juliana.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

36
public/data/class/example/irmingrad_eckhard.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

36
public/data/class/example/nele_mechthild.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

36
public/data/class/example/stanislav_teun.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

27
public/data/class/example/user.json
View File

@@ -1,26 +1 @@
{
"user": [
"stanislav_teun",
"christina_juliana",
"nele_mechthild",
"hans-guenther_Patrick",
"irmingrad_eckhard",
"felix_leonore",
"ruediger_gregor",
"kai_tanja",
"hans_judit",
"susann_laurenz",
"mathis_raphaela",
"stanislav_teun",
"christina_juliana",
"nele_mechthild",
"hans-guenther_Patrick",
"irmingrad_eckhard",
"felix_leonore",
"ruediger_gregor",
"kai_tanja",
"hans_judit",
"susann_laurenz",
"mathis_raphaela"
]
}
{"user":[["christina_juliana","svg"],["irmingrad_eckhard","svg"],["nele_mechthild","svg"],["stanislav_teun","svg"],["test","jpg"]]}

77
public/data/class/student.svg
View File

@@ -1,41 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="body-bg-flat"
style="stroke: none; fill: rgb(255, 255, 255)"
fill-rule="nonzero"
d="M 111.000000,504.000000 C 111.000000,504.000000 100.698120,413.688873 189.440002,403.613342 C 189.440002,403.613342 227.413330,403.613342 227.413330,403.613342 C 227.413330,403.613342 227.413330,386.119995 227.413330,386.119995 C 227.413330,386.119995 254.125000,397.593323 281.173340,387.399994 C 281.173340,387.399994 282.026672,403.613342 282.026672,403.613342 C 282.026672,403.613342 326.399994,403.613342 326.399994,403.613342 C 326.399994,403.613342 403.673462,411.327606 399.000000,504.000000 C 399.000000,504.000000 111.000000,504.000000 111.000000,504.000000 Z" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg5401"
height="512"
width="512">
<metadata
id="metadata5438">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs5436" />
<path
id="glasses"
style="stroke: none; fill: rgb(59, 68, 79)"
fill-rule="evenodd"
d="M 348.939911,228.879608 C 348.362732,233.809509 347.855652,239.842255 346.789673,245.235870 C 343.602081,261.364380 329.743378,276.307343 306.079590,278.009949 C 282.415833,279.712555 262.275787,267.799591 261.095551,251.401581 C 260.895447,248.621277 260.360138,245.501251 259.949341,242.467896 C 256.600494,240.611298 253.148895,240.607056 249.594574,242.455261 C 249.179474,245.557281 248.623993,248.759369 248.419128,251.606171 C 247.235199,268.058533 227.031647,280.010986 203.293243,278.302734 C 179.554840,276.594482 165.652435,261.602020 162.454773,245.420044 C 161.385437,240.008545 160.876770,233.955811 160.297760,229.009552 C 160.297760,229.009552 156.809448,228.758514 156.809448,228.758514 C 156.809448,228.758514 157.299438,221.949463 157.299438,221.949463 C 157.299438,221.949463 158.150574,222.010712 158.150574,222.010712 C 158.150574,222.010712 179.739105,223.564270 179.739105,223.564270 C 179.739105,223.564270 197.962189,224.875641 197.962189,224.875641 C 197.962189,224.875641 216.219147,226.189423 216.219147,226.189423 C 216.219147,226.189423 244.655823,228.235779 244.655823,228.235779 C 246.617004,228.483826 247.921082,229.324921 248.760895,230.580536 C 252.844788,232.368225 256.811005,232.375366 260.659515,230.601654 C 261.491730,229.265259 262.813354,228.365540 264.847015,228.108368 C 264.847015,228.108368 293.194305,226.068787 293.194305,226.068787 C 293.194305,226.068787 311.393890,224.759338 311.393890,224.759338 C 311.393890,224.759338 329.559692,223.452301 329.559692,223.452301 C 329.559692,223.452301 351.080353,221.903870 351.080353,221.903870 C 351.080353,221.903870 351.928802,221.842834 351.928802,221.842834 C 351.928802,221.842834 352.417267,228.629395 352.417267,228.629395 C 352.417267,228.629395 348.939911,228.879608 348.939911,228.879608 Z M 237.019867,236.237274 C 237.019867,236.237274 181.288300,232.226746 181.288300,232.226746 C 173.999054,231.598328 171.415344,239.789520 170.966095,246.032532 C 170.018951,259.194397 184.684265,270.974823 203.721985,272.344818 C 222.759705,273.714783 238.960663,264.155579 239.907806,250.993683 C 240.357056,244.750702 242.396210,240.895111 237.019867,236.237274 Z M 338.305115,245.846344 C 337.857269,239.623962 335.281677,231.459808 328.015350,232.086151 C 328.015350,232.086151 272.458984,236.083435 272.458984,236.083435 C 267.099548,240.725922 269.132294,244.568726 269.580109,250.791107 C 270.524292,263.909515 286.674316,273.437164 305.652191,272.071686 C 324.630066,270.706238 339.249298,258.964722 338.305115,245.846344 Z" />
<path
id="Shape 7"
style="stroke: none; fill: rgb(59, 67, 79)"
fill-rule="nonzero"
d="M 163.016968,261.106659 C 163.016968,261.106659 174.886597,209.110748 185.215393,194.888000 C 195.544189,180.665253 204.482269,177.263428 209.121399,176.828369 C 213.760529,176.393341 250.293213,187.192657 300.476440,174.821716 C 300.476440,174.821716 320.263580,174.032013 328.651367,193.884705 C 328.651367,193.884705 346.335724,225.522369 349.142212,257.093414 C 349.142212,257.093414 352.557343,257.093414 352.557343,257.093414 C 352.557343,257.093414 359.794525,201.750519 356.826324,168.801849 C 353.858032,135.853210 310.721863,119.639526 310.721863,119.639526 C 310.721863,119.639526 320.113495,112.616302 320.113495,112.616302 C 320.113495,112.616302 298.186890,105.838074 289.377228,109.606415 C 289.377228,109.606415 296.207489,95.559998 296.207489,95.559998 C 296.207489,95.559998 251.957397,95.648193 227.050873,115.626251 C 227.050873,115.626251 227.904663,105.593109 227.904663,105.593109 C 227.904663,105.593109 140.114838,119.055573 158.748047,259.100037 C 158.748047,259.100037 163.016968,261.106659 163.016968,261.106659 Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

78
public/index.html
View File

@@ -1,39 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
<title>React App</title>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
<title>React App</title>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

94
public/main.css Normal file
View File

@@ -0,0 +1,94 @@
.App {
border: #e0e0e0 1px solid;
margin: 24px;
}
* {
box-sizing: border-box;
font-family: Open Sans, Arial, sans-serif;
}
html,
body {
margin: 0;
color: rgba(0, 0, 0, 0.87);
background-color: #f9f9f9;
}
.nav {
background-color: #f4f5f6;
height: 52px;
line-height: 50px;
display: flex;
border: #e0e0e0 1px solid;
}
.nav .select-wrapper {
position: relative;
width: 200px;
}
.nav .select-wrapper::before {
color: #0c81f5;
font-size: 20px;
pointer-events: none;
position: absolute;
right: 15px;
top: 10px;
}
.nav select {
background: #f4f5f6;
border: none;
border: 1px #0c81f5 solid;
color: #0c81f5;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
height: 40px;
outline: none;
padding-left: 10px;
width: 100%;
}
.nav select option {
color: #0c81f5;
}
.nav select::-ms-expand {
display: none;
}
.nav select:focus::-ms-value {
background-color: transparent;
}
.nav input[type=number] {
height: 40px;
border: 1px solid #0c81f5;
background: none;
color: #0c81f5;
padding: 0px 5px;
}
.nav button {
height: 40px;
border: 1px solid #0c81f5;
background: #0c81f5;
color: #FFF;
}
.studentList {
display: flex;
flex-wrap: wrap;
}
.studentList .user {
border: 1px solid #454545;
margin: 5px;
padding: 5px;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.studentList .user.disappear {
opacity: 0.09;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.studentList .user.appear {
opacity: 1;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.studentList .user .user_img img {
width: 200px;
}
.studentList .user .username {
text-align: center;
display: inline-block;
width: 200px;
}

30
public/manifest.json
View File

@@ -1,15 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

70
public/rescan.php Normal file
View File

@@ -0,0 +1,70 @@
<?php
define("DIR","./data/class/");
define("REG",'/([0-9A-z_, ]*).(?:jpg|svg|png|jpeg)/m');
class Scanner{
private $rc = array('classes'=>[]);
private $classes = null;
private $rcwu = array('classes'=>[]);
function __construct(){
$this->classes = scandir(DIR);
foreach ($this->classes as $key => $value) {
switch($value){
case '.':
case '..':
case 'classes.json':
case 'student.svg':
break;
default:
$this->scanClass($value);
break;
}
}
$this->writeFiles();
}
function scanClass($d){
$sd = DIR.$d;
$users_of_class = scandir($sd);
$this->rc['classes'][]=$d;
$ruoc = [];
foreach ($users_of_class as $i => $user) {
if(preg_match_all(REG, $user, $matches, PREG_SET_ORDER, 0)){
// delete the last 4 chars
$ruoc[] = array(substr($user, 0, -4),substr($user,strlen($user)-3));
}
}
$this->rcwu['classes'][$d]=$ruoc;
}
function writeFiles(){
/**
* WRITE classes.json FILE
*/
$fp = fopen(DIR.'classes.json', 'w');
fwrite($fp, json_encode($this->rc));
fclose($fp);
/**
* WRITE FOR EACH CLASS
*/
foreach ($this->rcwu['classes'] as $key => $value) {
$fp = fopen(DIR.$key.'/user.json', 'w');
fwrite($fp, json_encode(array('user'=>$this->rcwu['classes'][$key])));
fclose($fp);
}
}
}
$s = new Scanner();

78
public/test.css
View File

@@ -1,40 +1,40 @@
@bg-color:#FFF;
*{
box-sizing: border-box;
}
html,body{
margin:0;
}
.nav{
background-color:#353b48;
height:50px;
line-height: 50px;
select{
height: 42px;
border: 0;
outline:0;
min-width: 200px;
}
}
.studentList{
display: flex;
flex-wrap: wrap;
.user{
border: 1px solid #454545;
margin: 5px;
padding: 5px;
.user_img{
img{
width:200px;
height:200px;
}
}
.username{
text-align: center;
display: inline-block;
width: 200px;
}
}
@bg-color:#FFF;
*{
box-sizing: border-box;
}
html,body{
margin:0;
}
.nav{
background-color:#353b48;
height:50px;
line-height: 50px;
select{
height: 42px;
border: 0;
outline:0;
min-width: 200px;
}
}
.studentList{
display: flex;
flex-wrap: wrap;
.user{
border: 1px solid #454545;
margin: 5px;
padding: 5px;
.user_img{
img{
width:200px;
height:200px;
}
}
.username{
text-align: center;
display: inline-block;
width: 200px;
}
}
}

66
src/App.css
View File

@@ -1,33 +1,33 @@
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

24
src/App.js
View File

@@ -1,12 +1,12 @@
import React from 'react';
import { Main } from './jsx/main';
function App() {
return (
<div className="App">
<Main/>
</div>
);
}
export default App;
import React from 'react';
import { Main } from './jsx/main';
function App() {
return (
<div className="App">
<Main/>
</div>
);
}
export default App;

18
src/App.test.js
View File

@@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

26
src/index.css
View File

@@ -1,13 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

22
src/index.js
View File

@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

14
src/jsx/class/class_loader.jsx
View File

@@ -1,8 +1,8 @@
export class Classes{
static class_list = [];
static load_Classes(cb){
fetch('data/class/classes.json')
.then(response => response.json())
.then(data => cb(data));
}
export class Classes{
static class_list = [];
static load_Classes(cb){
fetch('data/class/classes.json')
.then(response => response.json())
.then(data => cb(data));
}
}

14
src/jsx/class/students_loader.jsx
View File

@@ -1,8 +1,8 @@
export class Students_loader{
static loadStudents(cl,cb){
fetch('data/class/'+cl+'/user.json')
.then(response => response.json())
.then(data => cb(data));
}
export class Students_loader{
static loadStudents(cl,cb){
fetch('data/class/'+cl+'/user.json')
.then(response => response.json())
.then(data => cb(data));
}
}

237
src/jsx/main.jsx
View File

@@ -1,119 +1,120 @@
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
}
this.selCh = this.selCh.bind(this);
this.changeChoosen = this.changeChoosen.bind(this);
this.choose = this.choose.bind(this);
this.chooseInit = this.chooseInit.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 = [];
data.user.map((cl,i)=>
ht.push(<Student username={cl} cl={this.state.selected} 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)
}
render(){
return (
<div>
<div className="nav">
<div>
<select onChange={this.selCh} value={this.state.selected}>
<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}/>
</div>
<div>
<button onClick={this.chooseInit}>Auswählen</button>
</div>
</div>
<div className="studentList">
{this.state.stud_html}
</div>
</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
}
this.selCh = this.selCh.bind(this);
this.changeChoosen = this.changeChoosen.bind(this);
this.choose = this.choose.bind(this);
this.chooseInit = this.chooseInit.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)
}
render(){
return (
<div>
<div className="nav">
<div>
<select className="select-wrapper" onChange={this.selCh} value={this.state.selected}>
<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}/>
</div>
<div>
<button onClick={this.chooseInit}>Auswählen</button>
</div>
</div>
<div className="studentList">
{this.state.stud_html}
</div>
</div>
)
}
}

4
src/jsx/static/user.jsx
View File

@@ -1,3 +1,3 @@
export class User{
static user_arr = [];
export class User{
static user_arr = [];
}

95
src/jsx/ui/student.jsx
View File

@@ -1,48 +1,49 @@
import React from 'react';
import {User} from './../static/user';
export class Student extends React.Component{
constructor(props){
super(props);
this.state = {
username:this.camelize(props.username),
name:props.username,
cl:props.cl,
img_url:'data/class/'+props.cl+'/'+props.username+'.svg',
num:props.i,
dis:""
}
this.onErr = this.onErr.bind(this);
this.disappear = this.disappear.bind(this);
User.user_arr.push(this);
}
camelize(str) {
var x = str.split('_');
for(var i in x){
x[i] = x[i].charAt(0).toUpperCase() + x[i].slice(1);
}
return x.join(' ');
}
onErr(){
var url = 'data/class/student.svg';
this.setState({img_url:url});
}
appear(){
this.setState({dis:""});
}
disappear(){
this.setState({dis:"disappear"});
}
render(){
var c = "user chosen_"+this.state.num+' '+this.state.dis;
return (
<div className={c}>
<div className="user_img"><img src={this.state.img_url} onError={this.onErr} alt=""></img></div>
<div className="username">{this.state.username}</div>
</div>
);
}
import React from 'react';
import {User} from './../static/user';
export class Student extends React.Component{
constructor(props){
super(props);
this.state = {
username:this.camelize(props.username[0]),
name:props.username[0],
cl:props.cl,
img_url:'data/class/'+props.cl+'/'+props.username[0]+'.'+props.username[1],
num:props.i,
dis:""
}
this.onErr = this.onErr.bind(this);
this.disappear = this.disappear.bind(this);
User.user_arr.push(this);
}
camelize(str) {
/*var x = str.split('_');
for(var i in x){
x[i] = x[i].charAt(0).toUpperCase() + x[i].slice(1);
}
return x.join(' ');*/
return str;
}
onErr(){
var url = 'data/class/student.svg';
this.setState({img_url:url});
}
appear(){
this.setState({dis:""});
}
disappear(){
this.setState({dis:"disappear"});
}
render(){
var c = "user chosen_"+this.state.num+' '+this.state.dis;
return (
<div className={c}>
<div className="user_img"><img src={this.state.img_url} onError={this.onErr} alt=""></img></div>
<div className="username">{this.state.username}</div>
</div>
);
}
}

14
src/logo.svg
View File

@@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

270
src/serviceWorker.js
View File

@@ -1,135 +1,135 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

161
src_less/main.less
View File

@@ -1,50 +1,113 @@
@bg-color:#FFF;
*{
box-sizing: border-box;
}
html,body{
margin:0;
}
.nav{
background-color:#353b48;
height:50px;
line-height: 50px;
display:flex;
select{
height: 42px;
border: 0;
outline:0;
min-width: 200px;
}
}
.studentList{
display: flex;
flex-wrap: wrap;
.user{
border: 1px solid #454545;
margin: 5px;
padding: 5px;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
&.disappear{
opacity: 0.09;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
&.appear{
opacity: 1;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.user_img{
img{
width:200px;
height:200px;
}
}
.username{
text-align: center;
display: inline-block;
width: 200px;
}
}
@bg-color:#FFF;
@bg-color-dm:#DDD;
@bg-color-dm-nav:darken(@bg-color-dm,10%);
@btn-bgcolor:#0c81f5;
@btn-color:#FFF;
.App{
border: #e0e0e0 1px solid;
margin:24px;
}
*{
box-sizing: border-box;
font-family: Open Sans,Arial,sans-serif;
}
html,body{
margin:0;
color:rgba(0,0,0,.87);
background-color:#f9f9f9;
}
.nav{
background-color:#f4f5f6;
height:52px;
line-height: 50px;
display:flex;
border: #e0e0e0 1px solid;
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper::before {
color: @btn-bgcolor;
font-size: 20px;
pointer-events: none;
position: absolute;
right: 15px;
top: 10px;
}
select {
background: #f4f5f6;
border: none;
border: 1px @btn-bgcolor solid;
color: @btn-bgcolor;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
height: 40px;
outline: none;
padding-left: 10px;
width: 100%;
}
select option {
color: @btn-bgcolor;
}
select::-ms-expand {
display: none;
}
select:focus::-ms-value {
background-color: transparent;
}
input[type=number]{
height: 40px;
border: 1px solid @btn-bgcolor;
background: none;
color: @btn-bgcolor;
padding: 0px 5px;
}
button{
height: 40px;
border: 1px solid @btn-bgcolor;
background: @btn-bgcolor;
color: @btn-color;
}
}
.studentList{
display: flex;
flex-wrap: wrap;
.user{
border: 1px solid #454545;
margin: 5px;
padding: 5px;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
&.disappear{
opacity: 0.09;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
&.appear{
opacity: 1;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.user_img{
img{
width:200px;
}
}
.username{
text-align: center;
display: inline-block;
width: 200px;
}
}
}

36
test/random.js
View File

@@ -1,18 +1,18 @@
var users = 10;
var needed = 5;
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);
pushed = true;
}
} while (pushed == false);
}
var users = 10;
var needed = 5;
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);
pushed = true;
}
} while (pushed == false);
}