Skip to content

Commit 835e448

Browse files
sitsofecodesitsofecode
committed
modification page source et Dashboard
1 parent 7819774 commit 835e448

File tree

9 files changed

+166
-54
lines changed

9 files changed

+166
-54
lines changed

‎src/App.css

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1-
.white-content {
2-
background: #e4e4e4;
3-
}
1+
2+
.fadeIn {
3+
animation: 0.7s fadeIn forwards;
4+
}
5+
6+
.fadeOut {
7+
animation: 0.2s fadeOut forwards;
8+
}
9+
10+
@keyframes fadeIn {
11+
from {
12+
opacity: 0;
13+
transform: translate(-20px, 0);
14+
}
15+
to {
16+
opacity: 1;
17+
transform: translate(0px, 0px);
18+
}
19+
}
20+
21+
@keyframes fadeOut {
22+
from {
23+
opacity: 1;
24+
transform: translate(0px, 0px);
25+
}
26+
to {
27+
transform: translate(-20px, 0);
28+
opacity: 0;
29+
}
30+
}

‎src/App.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React, { useState } from 'react';
22
import Layout from './components/Layout';
3-
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
3+
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider , } from 'react-router-dom';
44
import Comparatif from './pages/Comparatif';
55
import Source from './pages/Source';
66
import Dashboard from './pages/Dashboard';
77
import Setting from './pages/Setting';
8+
import './App.css';
89

910

1011
function App() {
11-
// const [theme, setTheme] = useState('light')
1212

1313
const router = createBrowserRouter(createRoutesFromElements(
14-
<Route path='/' element={<Layout />}>
14+
<Route path='/' element={<Layout />} >
1515
<Route index element={<Dashboard />} />
1616
<Route path='comparatif' element={<Comparatif />} />
1717
<Route path='source' element={<Source />} />

‎src/components/Header.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ function Header(props) {
1111

1212

1313
return (
14-
<div className='h-16 flex lg:block justify-between w-full p-5 bg-headerLightSliderColo dark:bg-headerSliderDarkColor shadow-lg'>
14+
<div className='h-16 flex lg:block justify-between w-full p-5 bg-headerLightSliderColo dark:bg-headerSliderDarkColor '>
1515
<div className=' lg:hidden '>
16-
<AiOutlineMenu/>
16+
<AiOutlineMenu />
1717
</div>
1818
<div className='flex justify-end space-x-5 text-xl'>
1919
<button onClick={props.toggleDarkMode} className='dark:text-gray-400'> { localStorage.getItem('theme') !== 'dark' ? <MdSunny /> : <MdBrightness3 className='text-violet-700'/>} </button>

‎src/components/Layout.js

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
11
import React, { useEffect, useState } from 'react'
2-
import { Outlet } from 'react-router-dom'
2+
import { Outlet, useLocation } from 'react-router-dom'
33
import Header from './Header'
44
import Sidebar from './Sidebar'
55
function Layout() {
6-
const [darkMode, setDarkMode] = useState(true)
7-
const [theme, setTheme] = useState('dark')
8-
6+
const [darkMode, setDarkMode] = useState(true);
7+
const [theme, setTheme] = useState('dark');
8+
// change theme in local storage
99
const toggleDarkMode = () => {
1010
setDarkMode(prevState => !prevState);
1111
if (localStorage.getItem('theme') === "light") {
1212
setTheme('dark');
1313
localStorage.setItem('theme', 'dark');
1414
} else {
15-
setTheme('light')
16-
localStorage.setItem('theme', 'light')
15+
setTheme('light');
16+
localStorage.setItem('theme', 'light');
1717
}
1818
}
19-
19+
// verify if we have item for the theme in localstorage
2020
useEffect(() => {
2121
if (localStorage.getItem('theme') === null) {
22-
localStorage.setItem('theme', 'light')
22+
localStorage.setItem('theme', 'light');
2323
}
2424
}, [])
25-
25+
// change theme according to localstorage theme
2626
useEffect(() => {
2727
const html = document.querySelector('html');
2828
if (localStorage.getItem('theme') === 'dark') {
29-
html.classList.add('dark')
30-
setTheme('dark')
29+
html.classList.add('dark');
30+
setTheme('dark');
3131
} else {
32-
html.classList.remove('dark')
33-
setTheme('light')
32+
html.classList.remove('dark');
33+
setTheme('light');
34+
}
35+
}, [theme]);
36+
37+
// trying transition of page
38+
const location = useLocation();
39+
const [displayLocation, setDisplayLocation] = useState(location);
40+
const [transitionClass, setTransitionClass] = useState("fadeIn");
41+
useEffect(() => {
42+
if (location !== displayLocation) {
43+
setTransitionClass("fadeOut");
3444
}
35-
}, [theme])
45+
}, [location, displayLocation]);
3646

37-
// const darkTeme = "" ;
3847
return (
3948
<div className='flex h-screen overflow-hidden '>
4049
<Sidebar />
4150
<div className='w-full '>
4251
<Header darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
43-
<div className='h-full bg-lightColor dark:bg-DarkColor dark:text-gray-200 overflow-scroll'>
52+
<div className={`h-full bg-lightColor dark:bg-DarkColor dark:text-gray-200 overflow-scroll ${transitionClass}`} onAnimationEnd={() => {
53+
if (transitionClass === "fadeOut") {
54+
setTransitionClass("fadeIn");
55+
setDisplayLocation(location);
56+
}
57+
}}>
4458
<Outlet />
4559
</div>
4660
</div>

‎src/components/Sidebar.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ function Sidebar() {
66
const linkIconClass = " mx-4 text-xl"
77

88
const activeStyle = {
9-
// borderLeft: "solid #fff ",
10-
// color: "#fff"
11-
color: localStorage.getItem('theme') === 'dark' ? "#ffffff" : "#000000"
9+
borderLeft: "solid #7C3AED 5 px ",
10+
borderRdius: "20px",
11+
padding: "10px",
12+
// color: "#fff",
13+
color: localStorage.getItem('theme') === 'dark' ? "#ffffff" : "#000000",
14+
transitionDuration: " 1s"
1215
}
1316

1417

@@ -40,7 +43,7 @@ function Sidebar() {
4043
const link = Link.map((items, index) => {
4144

4245
return (
43-
<li key={index} className='py-3 px-0'>
46+
<li key={index} className='py-3 px-0 flex h-15'>
4447
<NavLink to={items.route} end
4548
style={({ isActive }) => isActive ? activeStyle : null}>
4649
<span className='flex'> {items.icon}<span>{items.Title}</span></span>

‎src/pages/Comparatif.jsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function Comparatif() {
2828
const table = data.map((items) => {
2929
return (
3030
<tr key={items.id} className=' text-left tracking-wide border-b dark:border-gray-700'>
31-
<td className="px-4 py-3"> <input type='checkbox'/></td>
31+
<td className="px-4 py-3"> <input type='checkbox' /></td>
3232
<td className="px-4 py-3">{items.nom}</td>
3333
<td className="px-4 py-3">{items.tension}</td>
3434
<td className="px-4 py-3">{items.intensite}</td>
@@ -39,7 +39,7 @@ function Comparatif() {
3939

4040
const temperature = data.map((items) => {
4141
return (
42-
<div key={items.id} className='m-2 p-3 rounded-lg shadow-xs bg-headerSliderLightColor dark:bg-headerSliderDarkColor'>
42+
<div key={items.id} className='m-2 w-full p-3 rounded-lg shadow-xs bg-headerSliderLightColor dark:bg-headerSliderDarkColor'>
4343
<h1 className='text-sm mb-2 font-bold dark:text-lightColor '>{items.nom}</h1>
4444
<Temperature value={items.temperarure} />
4545
</div>
@@ -51,9 +51,7 @@ function Comparatif() {
5151
<div className='m-5 mr-10 w-full mb-8 overflow-hidden rounded-lg shadow-xs bg-headerSliderLightColor dark:bg-headerSliderDarkColor'>
5252
<table className=' w-full whitespace-no-wrap'>
5353
<thead>
54-
<tr
55-
className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800"
56-
>
54+
<tr className="text-xs rounded-lgfont-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
5755
<th></th>
5856
<th className="px-4 py-3">Phase</th>
5957
<th className="px-4 py-3">Tension</th>

‎src/pages/Dashboard.jsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import Chart from "react-apexcharts";
33

44

@@ -56,17 +56,26 @@ function Dashboard() {
5656
},
5757
stroke: {
5858
curve: 'smooth',
59-
}
59+
}
6060
},
61-
series: data,
61+
series: [],
6262
}
6363
);
6464

65+
// essaie numero ?? mise a jours des graph en fonction des checked
66+
useEffect(() => {
67+
const checkedData = data
68+
.filter(item => item.checked)
69+
.map(item => ({ name: item.name, data: item.data }));
70+
71+
setChart(prevState => ({ ...prevState, series: checkedData }));
72+
}, [data]);
73+
6574
const updateChecked = (index) => {
6675
console.log(index)
6776
setData(
6877
data.map((item, currentIndex) =>
69-
currentIndex === index ? { ...item, checked: !item.checked, data: item.checked && [] } : item,
78+
currentIndex === index ? { ...item, checked: !item.checked } : item,
7079
));
7180
}
7281
console.log(data)
@@ -91,7 +100,7 @@ function Dashboard() {
91100
/>
92101
<div className='flex space-x-5'>
93102
{list}
94-
</div>
103+
</div>
95104
</div>
96105
<div className='rounded-lg p-4 bg-headerSliderLightColor dark:bg-headerSliderDarkColor '>
97106
<Chart

‎src/pages/Setting.jsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@ import React from 'react'
22

33
function Setting() {
44
return (
5-
<div>Setting</div>
5+
<div className='p-6 mb-10'>
6+
<h1 className='text-xl font-bold dark:text-lightColor '>Setting</h1>
7+
<div className=''>
8+
<div>
9+
<form>
10+
11+
</form>
12+
</div>
13+
</div>
14+
</div>
615
)
716
}
817

‎src/pages/Source.jsx

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,82 @@
11
import React, { useEffect, useState } from 'react'
22

33
function Source() {
4+
const tableBorder = " p-5"
5+
const switchButton = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-green-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-violet-600"
46
const [sourceAlimentation, setSourceAlimentation] = useState('sbee');
5-
useEffect(()=>{
6-
const groupe = document.getElementById("groupe")
7-
const sbee = document.getElementById("sbee")
8-
if(sourceAlimentation==='groupe'){
9-
groupe.classList.add('bg-violet-600');
10-
sbee.classList.remove('bg-violet-600')
11-
12-
}else{
13-
sbee.classList.add('bg-violet-600')
14-
groupe.classList.remove('bg-violet-600')
7+
useEffect(() => {
8+
if (sourceAlimentation === 'groupe') {
9+
setEnabledGroupe(true);
10+
setEnabledSBEE(false)
11+
} else {
12+
setEnabledGroupe(false);
13+
setEnabledSBEE(true)
1514

1615
}
17-
})
16+
}, [sourceAlimentation])
17+
const [enabledSBEE, setEnabledSBEE] = useState(false);
18+
const [enabledGroupe, setEnabledGroupe] = useState(false);
1819

1920
return (
2021
<div className='p-6 mb-10'>
2122
<h1 className='text-xl font-bold dark:text-lightColor '>Source</h1>
2223
<div className='mt-5'>
2324
<p> Source d'alimentation </p>
24-
<div className='flex justify-center p-4 mt-10'>
25-
<div className='p-0 border flex rounded-xl'>
26-
<div className=' rounded-xl p-4 w-24 text-center' id="groupe">GROUPE</div>
27-
<div className=' p-4 rounded-xl w-24 text-center' id="sbee"> SBEE</div>
25+
<div className=' p-4 mt-10 '>
26+
<div className='overflow-hidden rounded-lg shadow-xs bg-headerSliderLightColor dark:bg-headerSliderDarkColor'>
27+
<table className='table-auto w-full rounded-lg'>
28+
<thead >
29+
<tr className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
30+
<th className={tableBorder}> Source d'alimentation</th>
31+
<th className={tableBorder}> État </th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
<tr>
36+
<td className={tableBorder}> Groupe</td>
37+
<td className={tableBorder}>
38+
<div className="flex">
39+
<label class="inline-flex relative items-center mr-5 cursor-pointer">
40+
<input
41+
type="checkbox"
42+
className="sr-only peer"
43+
checked={enabledGroupe}
44+
readOnly
45+
/>
46+
<div
47+
className={switchButton}
48+
></div>
49+
<span className="ml-2 text-sm font-medium dark:textlightColor">
50+
{enabledGroupe ? "ON" : "OFF"}
51+
</span>
52+
</label>
53+
</div>
54+
</td>
55+
</tr>
56+
<tr>
57+
<td className={tableBorder}>SBEE</td>
58+
<td className={tableBorder}>
59+
<div className="flex">
60+
<label class="inline-flex relative items-center mr-5 cursor-pointer">
61+
<input
62+
type="checkbox"
63+
className="sr-only peer"
64+
checked={enabledSBEE}
65+
readOnly
66+
/>
67+
<div
68+
className="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-green-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-violet-600"
69+
></div>
70+
<span className="ml-2 text-sm font-medium dark:textlightColor">
71+
{enabledSBEE ? "ON" : "OFF"}
72+
</span>
73+
</label>
74+
</div>
75+
</td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
2880
</div>
2981
</div>
3082
</div>

0 commit comments

Comments
 (0)