diff --git a/o.gitlab-ci.yml b/o.gitlab-ci.yml new file mode 100644 index 0000000..2f5250f --- /dev/null +++ b/o.gitlab-ci.yml @@ -0,0 +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: + - master # Only run on master branch \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d19f275..5ce03b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2759,11 +2759,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2776,15 +2778,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2887,7 +2892,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2897,6 +2903,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2909,17 +2916,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2936,6 +2946,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3008,7 +3019,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3018,6 +3030,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3123,6 +3136,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3279,6 +3293,11 @@ "wrap-ansi": "^2.0.0" } }, + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=" + }, "clone-deep": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", @@ -5899,6 +5918,12 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==" }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "optional": true + }, "immer": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz", @@ -7580,6 +7605,45 @@ "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz", "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==" }, + "less": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz", + "integrity": "sha512-31CmtPEZraNUtuUREYjSqRkeETFdyEHSEPAGq4erDlUXtda7pzNmctdljdIagSb589d/qXGWiiP31R5JVf+v0w==", + "requires": { + "clone": "^2.1.2", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "mime": "^1.4.1", + "mkdirp": "^0.5.0", + "promise": "^7.1.1", + "request": "^2.83.0", + "source-map": "~0.6.0" + }, + "dependencies": { + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "optional": true + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "optional": true, + "requires": { + "asap": "~2.0.3" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true + } + } + }, "leven": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", diff --git a/package.json b/package.json index 68943cc..528e561 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "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" @@ -12,7 +13,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "less":"less-watch-compiler ./src_less ./public/ main.less" + "less": "less-watch-compiler ./src_less ./public/ main.less" }, "eslintConfig": { "extends": "react-app" diff --git a/public/test.css b/public/test.css new file mode 100644 index 0000000..d4d0696 --- /dev/null +++ b/public/test.css @@ -0,0 +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; + } + } +} \ No newline at end of file diff --git a/src/jsx/main.jsx b/src/jsx/main.jsx index 0399092..29e3051 100644 --- a/src/jsx/main.jsx +++ b/src/jsx/main.jsx @@ -3,6 +3,7 @@ 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){ @@ -11,15 +12,19 @@ export class Main extends React.Component{ classes :['1'], selected:"-", students:[], - stud_html:[] + stud_html:[], + choose:1 } this.selCh = this.selCh.bind(this); + this.changeChoosen = this.changeChoosen.bind(this); + this.choose = this.choose.bind(this); var me = this; Classes.load_Classes((data)=>{ me.setState({classes:data.classes}); }); + } selCh(e){ console.log(e.target.value); @@ -28,7 +33,9 @@ export class Main extends React.Component{ 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() @@ -37,19 +44,47 @@ export class Main extends React.Component{ 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}) + } + choose(){ + var me = this; + var c = []; + for(var i = 0;i
- +
+ +
+
+ +
+
+ +
{this.state.stud_html} diff --git a/src/jsx/static/user.jsx b/src/jsx/static/user.jsx new file mode 100644 index 0000000..f65b295 --- /dev/null +++ b/src/jsx/static/user.jsx @@ -0,0 +1,3 @@ +export class User{ + static user_arr = []; +} \ No newline at end of file diff --git a/src/jsx/ui/student.jsx b/src/jsx/ui/student.jsx index 7ef08d8..869e309 100644 --- a/src/jsx/ui/student.jsx +++ b/src/jsx/ui/student.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import {User} from './../static/user'; + export class Student extends React.Component{ constructor(props){ super(props); @@ -8,10 +10,14 @@ export class Student extends React.Component{ name:props.username, cl:props.cl, img_url:'/data/class/'+props.cl+'/'+props.username+'.svg', - num:props.i + 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('_'); @@ -24,8 +30,11 @@ export class Student extends React.Component{ var url = '/data/class/student.svg'; this.setState({img_url:url}); } + disappear(){ + this.setState({dis:"disappear"}); + } render(){ - var c = "user chosen_"+this.state.num; + var c = "user chosen_"+this.state.num+' '+this.state.dis; return (
diff --git a/src_less/main.less b/src_less/main.less index d4d0696..f079373 100644 --- a/src_less/main.less +++ b/src_less/main.less @@ -10,6 +10,7 @@ html,body{ background-color:#353b48; height:50px; line-height: 50px; + display:flex; select{ height: 42px; border: 0; @@ -25,6 +26,9 @@ html,body{ border: 1px solid #454545; margin: 5px; padding: 5px; + &.disappear{ + opacity: 0; + } .user_img{ img{ width:200px;