diff --git a/front/package.json b/front/package.json index 5cc981fb7a5ec7df0c1294a9970821fe832bcb80..cbf87b5b0cf12a4ab5860a1ae078de5655da21ac 100644 --- a/front/package.json +++ b/front/package.json @@ -2,10 +2,12 @@ "name": "front", "version": "0.1.0", "private": true, + "proxy": "http://localhost:8000/", "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "3.0.0" + "react-scripts": "3.0.0", + "semantic-ui-react": "^0.86.0" }, "scripts": { "start": "react-scripts start", diff --git a/front/public/index.html b/front/public/index.html index dd1ccfd4cd30a29aaa08b295d99be29cdeb29cf9..cb36a26d972176e27db4fe6c1473c50c55c6d532 100644 --- a/front/public/index.html +++ b/front/public/index.html @@ -3,6 +3,10 @@ <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> + <link + rel="stylesheet" + href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" +/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <!-- diff --git a/front/src/App.css b/front/src/App.css index b41d297cab1db5532b0b0688a9d6219b865fc908..c2273e5adcaa5dabdeaf404cae9a3b0af32bed09 100644 --- a/front/src/App.css +++ b/front/src/App.css @@ -9,14 +9,12 @@ } .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 { diff --git a/front/src/App.js b/front/src/App.js index ce9cbd2946d6962cfc19d65c8cb91757d8f4d4c6..0869940ce0b8d384f954f7fd2878bec8b0fc7bea 100644 --- a/front/src/App.js +++ b/front/src/App.js @@ -1,24 +1,11 @@ import React from 'react'; -import logo from './logo.svg'; +import ToucanTable from './ToucanTable' import './App.css'; function App() { return ( <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> + <ToucanTable></ToucanTable> </div> ); } diff --git a/front/src/ToucanLine.js b/front/src/ToucanLine.js new file mode 100644 index 0000000000000000000000000000000000000000..2d764339da530654d89d19317c2c028763a5e00d --- /dev/null +++ b/front/src/ToucanLine.js @@ -0,0 +1,41 @@ +import React, {Component} from 'react' +import {Table, Image, Button} from 'semantic-ui-react' + +class ToucanLine extends Component { + mois = ["janvier", "février", "mars", "avril", "mai", "juin","juillet","août","septembre","octobre","novembre","décembre"] + date(time){ + const dateObject = new Date(time) + const year = dateObject.getFullYear(); + const month = dateObject.getMonth(); + const day = dateObject.getDay(); + return (`${day+1}/${month+1}/${year}`) + } + + render(){ + return ( + <Table.Row> + <Table.Cell > + {console.log(this.props.toucan["_id"])} + <a href={`http://localhost:8000/toucan/pdf/${this.props.toucan["_id"]}`}> + <img + src={`/toucan/img/${this.props.toucan["_id"]}`} + style={{width: "50px"}} + alt="cover" + /> + </a> + </Table.Cell> + <Table.Cell > + {this.props.toucan.title} + </Table.Cell> + <Table.Cell > + {this.date(this.props.toucan.date)} + </Table.Cell> + <Table.Cell style={{width:"fit-content"}}> + <Button negative icon="cancel"/> + </Table.Cell> + </Table.Row> + ) + } +} + +export default ToucanLine \ No newline at end of file diff --git a/front/src/ToucanTable.js b/front/src/ToucanTable.js new file mode 100644 index 0000000000000000000000000000000000000000..22357718db1096885980b0fcbaa98bbbbd0f625a --- /dev/null +++ b/front/src/ToucanTable.js @@ -0,0 +1,42 @@ +import React, {Component} from 'react' +import {Table} from 'semantic-ui-react' +import ToucanLine from './ToucanLine' + +class ToucanTable extends Component{ + constructor(){ + super(); + this.state = { + toucans: [], + } + } + + componentDidMount(){ + fetch('/toucan/toucans') + .then(result => { + result.json() + .then(toucans => { + this.setState({toucans}) + }) + }) + } + + render() { + return( + <Table celled padded collapsing size="small" textAlign="center"> + <Table.Header> + <Table.Row> + <Table.HeaderCell>Cover</Table.HeaderCell> + <Table.HeaderCell>Thème</Table.HeaderCell> + <Table.HeaderCell>Date</Table.HeaderCell> + <Table.HeaderCell>Supprimer</Table.HeaderCell> + </Table.Row> + </Table.Header> + {this.state.toucans.map(toucan => { + return <ToucanLine key={toucan["_id"]} toucan={toucan}/> + })} + </Table> + ) + } +} + +export default ToucanTable \ No newline at end of file diff --git a/front/yarn.lock b/front/yarn.lock index c0eaca4cb96b3c653a937b9cc481de16776b2ccd..0ebf7493ffb4414c03d0e2603edcd6f466f440a2 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -782,7 +782,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.4.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d" integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg== @@ -1021,6 +1021,14 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@semantic-ui-react/event-stack@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz#aadbe4a28b0dd7703c5f451640d0fefe66dd9208" + integrity sha512-WHtU9wutZByZtFZxzj4BVEk+rvWldZpZhRcyv6d84+XLSolm83zLHYJLTACGuSl6Xa/xpgVXquvm9GyMudkJYg== + dependencies: + exenv "^1.2.2" + prop-types "^15.6.2" + "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -2345,6 +2353,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.6: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-css@4.2.x: version "4.2.1" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17" @@ -3650,6 +3663,11 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -5663,6 +5681,11 @@ jsx-ast-utils@^2.0.1: dependencies: array-includes "^3.0.3" +keyboard-key@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.0.4.tgz#52d8fa07b7e17757072aa22a67fb4ae85e4c46b0" + integrity sha512-my04dE6BCwPpwoe4KYKfPxWiwgDYQOHrVmtzn1CfzmoEsGG/ef4oZGaXCzi1+iFhG7CN5JkOuxmei5OABY8/ag== + killable@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892" @@ -7832,7 +7855,7 @@ react-dev-utils@^9.0.0: strip-ansi "5.2.0" text-table "0.2.0" -react-dom@16.8.6: +react-dom@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== @@ -7847,7 +7870,7 @@ react-error-overlay@^5.1.5: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.5.tgz#884530fd055476c764eaa8ab13b8ecf1f57bbf2c" integrity sha512-O9JRum1Zq/qCPFH5qVEvDDrVun8Jv9vbHtZXCR1EuRj9sKg1xJTlHxBzU6AkCzpvxRLuiY4OKImy3cDLQ+UTdg== -react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== @@ -7910,7 +7933,7 @@ react-scripts@3.0.0: optionalDependencies: fsevents "2.0.6" -react@16.8.6: +react@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== @@ -8370,6 +8393,20 @@ selfsigned@^1.9.1: dependencies: node-forge "0.7.5" +semantic-ui-react@^0.86.0: + version "0.86.0" + resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.86.0.tgz#f3c6a27250f2e9e07a975d0a3399ffd3a48861b5" + integrity sha512-t/psK15zX9bEaezpRDwoXAZovp+I083SgsicAnMig/mxqaRI2FHZpr/G+lfzizrTpmYjgi4/Th6/QAol8pa7JQ== + dependencies: + "@babel/runtime" "^7.1.2" + "@semantic-ui-react/event-stack" "^3.1.0" + classnames "^2.2.6" + keyboard-key "^1.0.4" + lodash "^4.17.11" + prop-types "^15.6.2" + react-is "^16.7.0" + shallowequal "^1.1.0" + "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b" @@ -8494,6 +8531,11 @@ shallow-clone@^1.0.0: kind-of "^5.0.0" mixin-object "^2.0.1" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"