diff --git a/code/interface_admin/components/Avis.jsx b/code/interface_admin/components/Avis.jsx new file mode 100644 index 0000000..771bf33 --- /dev/null +++ b/code/interface_admin/components/Avis.jsx @@ -0,0 +1,56 @@ +import React from 'react' +import { Card, Col, Row, Table } from 'react-bootstrap'; +import { BsPersonFill } from 'react-icons/bs'; +import styles from '../styles/Avis.module.css' + +export default function Avis({ age, sex, text, date, grade, gradeOther }) { + return ( + + Avis + + +

Auteur

+ + + + +

Age : {age}

+

Sexe : {sex}

+

Date de publication : {date}

+ + + +

Notes

+ + + + + + + + + + + + + {gradeOther.map(({ title, grade }) => { + return + + + + })} + +
CritèreNote
Général{grade} / 10
{title}{grade}/10
+ + + + Commentaire + + {text} + + + + + + ) +} diff --git a/code/interface_admin/components/AvisList.jsx b/code/interface_admin/components/AvisList.jsx new file mode 100644 index 0000000..0f13477 --- /dev/null +++ b/code/interface_admin/components/AvisList.jsx @@ -0,0 +1,32 @@ +import { useRouter } from 'next/router'; +import React from 'react' +import { Table } from 'react-bootstrap' +import styles from '../styles/AvisList.module.css' + +export default function AvisList({ avis }) { + const router = useRouter(); + function handleClick(id) { + router.push(`/avis/${id}`); + } + + return ( + + + + + + + + + + {avis.map(({ id, grade, comment, date }) => { + return handleClick(id)} key={id} className={styles.row}> + + + + + })} + +
DateNote globaleCommentaire
{date}{grade} / 10{comment}
+ ) +} diff --git a/code/interface_admin/components/ComparativeBarChart.jsx b/code/interface_admin/components/ComparativeBarChart.jsx index 17e39c9..c2cbd01 100644 --- a/code/interface_admin/components/ComparativeBarChart.jsx +++ b/code/interface_admin/components/ComparativeBarChart.jsx @@ -2,16 +2,16 @@ import React from 'react' import { Bar } from 'react-chartjs-2' import Chart from 'chart.js/auto'; -export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1, title }) { +export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1}) { return ( + ) +} diff --git a/code/interface_admin/pages/avis/avis.js b/code/interface_admin/pages/avis/avis.js deleted file mode 100644 index e69de29..0000000 diff --git a/code/interface_admin/pages/avis/index.js b/code/interface_admin/pages/avis/index.js new file mode 100644 index 0000000..ca8de87 --- /dev/null +++ b/code/interface_admin/pages/avis/index.js @@ -0,0 +1,66 @@ +import React, { useEffect, useState } from 'react' +import { Card, Container, Form, Row, Table } from 'react-bootstrap' +import AvisList from '../../components/AvisList'; +import styles from '../../styles/AvisListPage.module.css' + +export default function AvisListPage() { + const [minGrade, setMinGrade] = useState(0); + const [maxGrade, setMaxGrade] = useState(10); + + useEffect(() => { + if(minGrade > maxGrade) { + setMinGrade(maxGrade); + } + }, [maxGrade]); + useEffect(() => { + if(minGrade > maxGrade) { + setMaxGrade(minGrade); + } + }, [minGrade]) + + const [avis, setAvis] = useState([ + { id: 0, date: "2023-02-11", grade: 10, comment: "lorem ipsum lorem ipsum" }, + { id: 1, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" }, + { id: 2, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" }, + { id: 3, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" } + ]) + + return ( + + + Tous les avis + + +
+ + Types d'avis + + + + + Note +
+
Min : {minGrade}/10
+
+ setMinGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}> + setMaxGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}> +
+
Max : {maxGrade}/10
+
+ +
+ + + + + + + + ) +} diff --git a/code/interface_admin/pages/index.js b/code/interface_admin/pages/index.js index eb03644..69985c8 100644 --- a/code/interface_admin/pages/index.js +++ b/code/interface_admin/pages/index.js @@ -1,14 +1,58 @@ import Head from 'next/head' -import { Inter } from '@next/font/google' import { Card, Container } from 'react-bootstrap' import ComparativeBarChart from '../components/ComparativeBarChart' -import { useState } from 'react' +import { useEffect, useState } from 'react' +import styles from "../styles/Home.module.css" -const inter = Inter({ subsets: ['latin'] }) export default function Home() { - const [datasets, setDatasets] = useState([[1, 2, 3, 4, 5, 6, 7], [7, 6, 5, 4, 3, 2, 1]]); + const [datasets, setDatasets] = useState([ + ]); + const [averages, setAverages] = useState([]); + const [differences, setDifferences] = useState([]); + useEffect(() => { + let newAverages = [] + let newDifferences = [] + for (let i = 0; i < datasets.length; i++) { + newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / datasets[i].current.length + newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length + } + setAverages(newAverages); + setDifferences(newDifferences); + }, [datasets]); + useEffect(() => setDatasets([ + { title: "Nombre d'avis", current: [3, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }, + { title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] } + ]), []); + function dataVisualizer(title, current, previous, average, difference) { + return <> +

{title}

+ + Moyenne + +
+ {Math.round(average*1e2)/1e2} +
+
= 0 ? styles.averagePositive : styles.averageNegative].join(' ')} + > + {(difference >= 0 ? "+" : "-") + Math.round(difference*1e2)/1e2} +
+ + + +
+ + } return ( <> @@ -18,26 +62,11 @@ export default function Home() { - Vos performances de cette semaine + Vos performances cette semaine + + {datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))} +
- - - -
diff --git a/code/interface_admin/styles/Avis.module.css b/code/interface_admin/styles/Avis.module.css new file mode 100644 index 0000000..d72eb57 --- /dev/null +++ b/code/interface_admin/styles/Avis.module.css @@ -0,0 +1,5 @@ +.personIcon { + width: 100%; + height: 100%; + /* font-size: 50px; */ +} \ No newline at end of file diff --git a/code/interface_admin/styles/AvisList.module.css b/code/interface_admin/styles/AvisList.module.css new file mode 100644 index 0000000..9aba201 --- /dev/null +++ b/code/interface_admin/styles/AvisList.module.css @@ -0,0 +1,6 @@ + +/* ==== TABLEAU ==== */ +.row:hover { + cursor: pointer; + background-color: #EEE; +} \ No newline at end of file diff --git a/code/interface_admin/styles/AvisListPage.module.css b/code/interface_admin/styles/AvisListPage.module.css new file mode 100644 index 0000000..cefd7d5 --- /dev/null +++ b/code/interface_admin/styles/AvisListPage.module.css @@ -0,0 +1,57 @@ +/* ==== SLIDER ==== */ +.sliderContainer { + position: relative; + width: 300px; +} + +.sliderContainer > input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + pointer-events: all; + width: 24px; + height: 24px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 0 0 1px #C6C6C6; + cursor: pointer; + z-index: 99; +} + +.sliderContainer > input[type=range]::-moz-range-thumb { + z-index: 99; + pointer-events: all; + width: 24px; + height: 24px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 0 0 1px #C6C6C6; + cursor: pointer; +} + +.sliderContainer > input[type=range]::-webkit-slider-thumb:hover { + background: #f7f7f7; +} + +.sliderContainer >input[type=range]::-webkit-slider-thumb:active { + box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; + -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; +} +.sliderContainer > input[type=range]::-moz-range-thumb:hover { + background: #f7f7f7; +} + +.sliderContainer >input[type=range]::-moz-range-thumb:active { + box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; + -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; +} + +.sliderContainer >input[type="range"] { + -webkit-appearance: none; + appearance: none; + height: 2px; + width: 100%; + position: absolute; + background-color: #C6C6C6; + pointer-events: none; +} + + diff --git a/code/interface_admin/styles/Home.module.css b/code/interface_admin/styles/Home.module.css index 84bd26d..972bb5c 100644 --- a/code/interface_admin/styles/Home.module.css +++ b/code/interface_admin/styles/Home.module.css @@ -1,3 +1,29 @@ -.graphContainer { - padding: 30px 0; +.averageCard { + width: min-content; + margin: 0 auto; + padding: 10px; + text-align: center; + min-width: 300px; +} + +.averageCardBody { + display: flex; + align-items: center; + margin: 0 auto; +} + +.averageMainValue { + font-size: 40px; +} + +.averageSecondaryValue { + font-size: 20px; +} + +.averagePositive { + color: green; +} + +.averageNegative { + color: red; } \ No newline at end of file