Result page layout

package-lock.json

@@ -980,6 +980,11 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
       "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.9.0.tgz",
+      "integrity": "sha512-g795BBEzM/Hq2SYNPm/NQTIp3IWd4eXSH0ds87Na2jnrAUFX3wkyZAI4Gwj9DOaWMuz2/01i8oWI7P7T/XLkhg=="
+    },
     "@fortawesome/fontawesome-svg-core": {
       "version": "1.2.19",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/react-fontawesome": "^0.1.4",

src/components/views/Result.js

@@ -1,18 +1,105 @@
 import React, {Component} from "react";
+import {Container,Row,Col,Collapse,  Card, CardHeader, CardBody} from "reactstrap";
 
 class Result extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
-        }
+            candidates:[],
+            title:null,
+            nbMentions:0,
+            colSizeCandidateLg:4,
+            colSizeCandidateMd:6,
+            colSizeCandidateXs:12,
+            colSizeMentionLg:1,
+            colSizeMentionMd:1,
+            colSizeMentionXs:1,
+            collapseGraphics:false,
+            collapseProfiles:false
+
+        };
+
+    }
+
+    componentDidMount() {
+        //todo fetch data from API
+        let fetchedData={
+            title:"Merci d'évaluer les candidats suivants",
+            candidates:[
+                {id:0, label:"Mme ABCD", mention: 2, profil: [20,20,20,10,10,20,0]},
+                {id:2, label:"M. EFGH",  mention: 3, profil: [0,20,20,10,10,30,10]},
+                {id:3, label:"M. IJKL",  mention: 4, profil: [0,0,20,25,15,20,20]},
+                {id:4, label:"M. MNOP",  mention: 4, profil: [0,0,15,15,30,10,30]}
+                ],//ordered by result
+            nbMentions:7,
+        };
+        let data={
+            title:fetchedData.title,
+            candidates:fetchedData.candidates,
+            nbMentions:fetchedData.nbMentions,
+            colSizeCandidateLg:0,
+            colSizeCandidateMd:0,
+            colSizeCandidateXs:0,
+            colSizeMentionLg:Math.floor((12-this.state.colSizeCandidateLg)/fetchedData.nbMentions),
+            colSizeMentionMd:Math.floor((12-this.state.colSizeCandidateMd)/fetchedData.nbMentions),
+            colSizeMentionXs:Math.floor((12-this.state.colSizeCandidateXs)/fetchedData.nbMentions),
+        };
+        data.colSizeCandidateLg=((12-data.colSizeMentionLg*data.nbMentions)>0)?(12-data.colSizeMentionLg*data.nbMentions):12;
+        data.colSizeCandidateMd=((12-data.colSizeMentionMd*data.nbMentions)>0)?(12-data.colSizeMentionMd*data.nbMentions):12;
+        data.colSizeCandidateXs=((12-data.colSizeMentionXs*data.nbMentions)>0)?(12-data.colSizeMentionXs*data.nbMentions):12;
+        this.setState(data);
     }
 
+
+   toggleGraphics = () => {
+        this.setState(state => ({ collapseGraphics: !state.collapseGraphics }));
+    };
+
+   toggleProfiles = () => {
+        this.setState(state => ({ collapseProfiles: !state.collapseProfiles }));
+    };
+
     render(){
         return(
-            <div >
-               <h1>View : RESULT</h1>
-            </div>
+            <Container>
+                <Row>
+                    <Col xs="12"><h1>{this.state.title}</h1></Col>
+                </Row>
+
+                <Row className="mt-5">
+                    <Col><h1>Résultat du vote :</h1>
+                    <div>TODO CLASSEMENT </div>
+                    </Col>
+                </Row>
+
+                <Row className="mt-5">
+                    <Col>
+                        <Card className="bg-light text-primary">
+                            <CardHeader className="pointer" onClick={this.toggleGraphics}>
+                                <h4 className={"m-0 panel-title "+(this.state.collapseGraphics?"collapsed":"")}>Graphiques</h4>
+                            </CardHeader>
+                            <Collapse isOpen={this.state.collapseGraphics}>
+                                <CardBody> TODO GRAPHIQUES </CardBody>
+                            </Collapse>
+                        </Card>
+                    </Col>
+                </Row>
+                <Row className="mt-1">
+                    <Col>
+                        <Card className="bg-light text-primary">
+                            <CardHeader className="pointer" onClick={this.toggleProfiles}>
+                                <h4 className={"m-0 panel-title "+(this.state.collapseProfiles?"collapsed":"")}>Profils de mérites</h4>
+                            </CardHeader>
+                            <Collapse isOpen={this.state.collapseProfiles}>
+                                <CardBody> TODO TABLEAU </CardBody>
+                            </Collapse>
+                        </Card>
+                    </Col>
+                </Row>
+
+
+            </Container>
         )
     }
 }

src/scss/_app.scss

@@ -275,3 +275,16 @@ li.sortable{
 
 }
 
+
+
+
+/** collapse chevron **/
+.panel-title:after {
+  content:'+';
+  float:right;
+  font-size:28px;
+  font-weight:900;
+}
+.panel-title.collapsed:after {
+  content:'-';
+}

src/scss/config.scss

@@ -9,6 +9,11 @@ $mv-dark-color: #333;
 $body-bg: #000000;
 $body-color: $mv-light-color;
 
+
+
+
+
+
 $theme-colors: (
         "primary": $mv-blue-color,
         "secondary": $mv-red-color,