Ela_Front/src/components/Header.js

456 lines
15 KiB
JavaScript

import React, { useState, useEffect } from 'react';
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { confirmAlert } from 'react-confirm-alert'; // Import
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { useCookies } from "react-cookie";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';
const Header = () => {
const history = useHistory();
const stored_user = getCookie('tokenmysych');
const stored_part = getCookie('tokenmysypart');
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart'], { path: '/' });
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const [ProduitMenu, setproduitMenu] = React.useState(null);
const [AvisMenu, setavisMenu] = React.useState(null);
const [CategorieMenu, setCategorieMenu] = React.useState(null);
const PartnerMenu_Close = () => {
setPartnerMenu(null);
};
const AccountMenu_Close = () => {
setAccountMenu(null);
};
const ProduitMenu_Close = () => {
setproduitMenu(null);
};
const CategorieMenu_Close = () => {
setCategorieMenu(null);
};
const handleCategorieMenu = (event) => {
setCategorieMenu(event.currentTarget);
};
const handlePartnerMenu = (event) => {
setPartnerMenu(event.currentTarget);
};
const handleAccountMenu = (event) => {
setAccountMenu(event.currentTarget);
};
const handleProduitMenu = (event) => {
setproduitMenu(event.currentTarget);
};
const handleClose_Account = () => {
alert(" my account");
setAccountMenu(null);
};
const handleAccountConnexion = () => {
setAccountMenu(null);
history.push("/Connexion")
};
const handleMyAccount = () => {
setAccountMenu(null);
history.push("/mysy-user-account")
};
const handleClassCategorie = (e) => {
setCategorieMenu(null);
var mymetier = "";
mymetier = e.target.id
//alert(" cours de : " + mymetier);
history.push("/Recherche_new_v2/0/" + mymetier);
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
const handleProduitService = () => {
setproduitMenu(null);
history.push("/Produits-Services/")
};
const handleAvis = () => {
setavisMenu(null);
history.push("/Recherche-Article-formation")
};
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Oui',
onClick: () => user_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
const stored_cookie = getCookie('tokenmysypart');
var acces_right_token_name = stored_cookie + "_uar";
setpartCookie("tokenmysypart", "", { path: '/' });
setpartCookie(acces_right_token_name, "", { path: '/' });
removeCookie(acces_right_token_name, { path: '/' });
}
setsomeoneconnected("0");
setDialog_1_open(false);
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
//alert(" partner connected OK");
}
}, []);
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
const handleMyPartnerAccount = () => {
setAccountMenu(null);
history.push("/Partner")
};
function handleAccountConnexion_v2() {
if (String(userconnected) === String("1")) {
handleMyAccount();
}
else if (String(partnerconnected) === String("1")) {
handleMyPartnerAccount();
}
}
function publiecatalogue() {
history.push("/Partner", { mysy_arg: 'partner' });
}
const handleBlogMenu = (event) => {
history.push("/Recherche-Article-formation")
};
const handleQuisommesNousMenu = (event) => {
history.push("/QuiSommesNous")
};
const [Dialog_1_message, setDialog_1_message] = React.useState(false);
const [Dialog_1_open, setDialog_1_open] = React.useState(false);
function Dialog_1_handle_change_participant_session(message) {
setDialog_1_message(message);
setDialog_1_open(true);
}
const Dialog_1_handleClose = () => {
//alert(" Utiliser le bouton 'fermer' ");
//setOpen(false);
};
const Dialog_1_handleClose_buton = () => {
setDialog_1_open(false);
};
return (
<div className="header">
<Dialog
open={Dialog_1_open}
onClose={Dialog_1_handleClose}
className="displaypartnersession"
>
<DialogTitle>MySy Information</DialogTitle>
<DialogContent className="DialogContent_width">
<DialogContentText>
Confirmez la deconnexion
</DialogContentText>
</DialogContent>
<DialogActions>
<div className="div_row">
<div className="div_row_gauche">
<Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'center' }}>
<Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
</div>
</div>
</DialogActions>
</Dialog>
<Menu
keepMounted
anchorEl={PartnerMenu}
onClose={PartnerMenu_Close}
open={Boolean(PartnerMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
<MenuItem onClick={part_logout} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={AccountMenu}
onClose={AccountMenu_Close}
open={Boolean(AccountMenu)}
style={{ "top": "2rem" }}
> <MenuItem onClick={handleMyAccount} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Mon Compte</MenuItem>
<MenuItem onClick={handleAccountConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Connexion</MenuItem>
<MenuItem onClick={handleAccountCreation} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
<MenuItem onClick={user_logout} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={ProduitMenu}
onClose={ProduitMenu_Close}
open={Boolean(ProduitMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleProduitService} className="mymenu_item">
<button className='bton_menu'> Nos produits & Services </button>
</MenuItem>
<MenuItem onClick={handleAvis} className="mymenu_item">
<button className='bton_menu'>Le blog </button>
</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={CategorieMenu}
onClose={CategorieMenu_Close}
open={Boolean(CategorieMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="IT" >Informatique</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="vente" > Commerce</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="RH" > Ressources Humaines</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="marketing" >Marketting</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="graphisme" >Graphisme</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="management" >Management</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item">
<button className='bton_menu' id="dev_perso" >Dev. Personnel </button>
</MenuItem>
</Menu>
<div className="header_div_row2">
<div className="header_div_row_bas">
<div className="header_div_001">
<div className="header_div_002">
<h1 className="header_h1_transparent">Connexion MySy Training Technogy </h1>
<div className="vvv" >
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive header_img_logo22" src={logowhite} alt="MySy Training Technology" /> </a>
</div>
<div className="header_menuPrincipal_left" onClick={handleCategorieMenu}>
Les formations
</div>
</div>
<div className="header_div_003">
<h1 className="header_h1_transparent">Connexion MySy Training Technogy </h1>
<div className="header_menuPrincipal_bton" >
<div style={{ "textAlign": "left" }}>
{String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
style={{ "width": "25%" }} /> Connexion
</button>}
{String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={(e) => setDialog_1_open(true)}> Deconnexion <img src={connect_green}
style={{ "width": "25%" }} />
</button>}
</div>
</div>
{String(someoneconnected) === String("1") && <div className="header_menuPrincipal" onClick={handleAccountConnexion_v2}>
Mon Compte
</div>}
{String(someoneconnected) !== String("1") && <div className="header_menuPrincipal" onClick={handleAccountCreation}>
S'inscrire
</div>}
<div className="header_menuPrincipal" onClick={handleProduitMenu}>
Nos Services
</div>
<div className="header_menuPrincipal" onClick={handleQuisommesNousMenu}>
Qui Sommes nous?
</div>
{/* <div className="header_menuPrincipal" onClick={handleBlogMenu}>
Le blog
</div> */}
<div className="header_menuPrincipal" onClick={publiecatalogue}
style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}>
publier mes formations
</div>
</div>
</div>
<div className="header_text_head">
<hr className="header_div_004" />
<font style={{ "color": "#81BC3A", "fontWeight": "bold" }}>Recherche </font> de Formations & Tutoriels
</div>
</div>
</div>
</div>
)
}
export default Header;