ldc-groupe/content/themes/ldc/contact_template.php
Vincent BRIDIER 134507db43 - Backup DEV
- Add DotEnv
- Fix Bato
- Etc..
2020-05-04 15:59:02 +02:00

1463 lines
74 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
/**
* Template Name: Contact Template
* @package WordPress
*/
//Get societes from class to display the map.
$societes = CSociete::get_all_societe_to_js();
$societes = str_replace('"this.pinOn.orgPin"','this.pinOn.orgPin',$societes);
$societes = str_replace('"this.pinOn.redPin"','this.pinOn.redPin',$societes);
$societes = str_replace('"this.pinOn.bluePin"','this.pinOn.bluePin',$societes);
$societes = str_replace('"this.pinOn.purplePin"','this.pinOn.purplePin',$societes);
$societes = str_replace('"this.pinOn.greenPin"','this.pinOn.greenPin',$societes);
$societes = str_replace('"this.pinOn.multiPin"','this.pinOn.multiPin',$societes);
//Traitement du formulaire de contact.
if( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == "message_conso"){
$taille_maxi = 3145728; // MAX_FILE_SIZE = 3Mo
$validExtensions = array('.jpg', '.jpeg', '.png','.pdf');
$rnd = rand(1, 100);
$pj = array();
$upload_dir = wp_upload_dir();
$pjFolder = WP_CONTENT_DIR.'/'."pj/" ;
$civilite = htmlspecialchars($_POST['msg_civilite']);
$nom = htmlspecialchars($_POST['msg_nom']);
$prenom = htmlspecialchars($_POST['msg_prenom']);
$email = htmlspecialchars($_POST['msg_email']);
$telephone = htmlspecialchars($_POST['msg_telephone']);
$adresse = htmlspecialchars($_POST['msg_adresse']);
$cp = htmlspecialchars($_POST['msg_cp']);
$ville = htmlspecialchars($_POST['msg_ville']);
$type = htmlspecialchars($_POST['msg_contacttype']);
$message = htmlspecialchars($_POST['msg_message']);
//if(isset($_POST['g-recaptcha-response'])){
$key = "6LdCuTQUAAAAALJ_1ZSa46Bd2TTCWi186yy2w09C";
$secret = "6LdCuTQUAAAAALjD2gh_Aqos348_bRQEtBiDIy82";
if(isset($_SERVER["HTTP_X_FORWARDED_FOR"]) && $_SERVER["HTTP_X_FORWARDED_FOR"] != ""){
if (strpos($_SERVER['HTTP_X_FORWARDED_FOR'], ',')) {
$explode = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
$remoteip = trim($explode[0]);
}else{
$remoteip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}
}else{
$remoteip = $_SERVER["REMOTE_ADDR"];
}
// $response = $_POST['g-recaptcha-response'];
// $api_url = "https://www.google.com/recaptcha/api/siteverify?secret=". $secret. "&response=" . $response. "&remoteip=" . $remoteip ;
// $decode = json_decode(file_get_contents($api_url), true);
//if ($decode['success'] == true) {
if($nom != "" && $prenom != "" && $email != "" && $adresse != "" && $cp !="" && $ville !=""){
$nonce = $_POST['token'];
if ( ! wp_verify_nonce( $nonce, 'contact-nonce' ) ){
$errorMsg = "Une erreur est survenue, merci de recommencer.";
} else {
//------ Envoi Mail aux contacts Passerelle
$bodyMail = "<html><head></head><body>";
$bodyMail .= "Bonjour,<br/>";
$bodyMail .= "Un nouveau message consommateur a été renseigné : <br/>";
$bodyMail .= "Civilité :".$civilite."<br/>";
$bodyMail .= "Nom :".$nom."<br/>";
$bodyMail .= "Prénom :".$prenom."<br/>";
$bodyMail .= "Email :".$email."<br/>";
$bodyMail .= "Tél :".$telephone."<br/>";
$bodyMail .= "Adresse :".$adresse."<br/>";
$bodyMail .= "Code Postal :".$cp."<br/>";
$bodyMail .= "Ville :".$ville."<br/><br/>";
$bodyMail .= "Type de Message :".$tt."<br/><br/>";
$bodyMail .= "Message :<br/>".$message."<br/>";
$bodyMail .= "</body></html>";
$subject = "Nouveau message du site SBV";
//wp_mail(array(CONTACT_MAIL), $subject, $bodyMail, "", $pj);
$postarr = array(
'post_title' => $nom." ".$prenom." ".date("d/m/Y"),
'post_status' => 'publish',
'post_type' => 'message',
);
$messageId = wp_insert_post( $postarr);
if($messageId){
update_field('field_5e57a09acdacf', $civilite, $messageId);
update_field('field_5e57a087cdacd', $nom, $messageId);
update_field('field_5e57a095cdace', $prenom, $messageId);
update_field('field_5e57a0a9cdad0', $adresse, $messageId);
update_field('field_5e57a0afcdad1', $cp, $messageId);
update_field('field_5e57a0b8cdad2', $ville, $messageId);
update_field('field_5e57a0becdad3', $email, $messageId);
update_field('field_5e57a0c3cdad4', $telephone, $messageId);
update_field('field_5e57a0d9cdad5', $message, $messageId); // mettre field key sinon get_field ne marche pas après un insert_post
wp_set_object_terms( $messageId, $type, 'type' );
// ---- envoi mail de confirmation ?
}
$envoiDone = true;
}
} else {
$errorMsg = "Merci de compléter tous les champs du formulaire.";
}
// } else {
// $errorMsg = "Merci de valider la captcha en bas du formulaire.";
// }
// } else {
// $errorMsg = "Merci de valider la captcha en bas du formulaire.";
// }
}
//getFinancialData();
global $wpdb;
$stock_data = $wpdb->get_results(
"
SELECT *
FROM wp_financialdata
WHERE name = 'stock'"
);
$stock = json_decode($stock_data[0]->data);
$stock_object = (array) $stock[0];
$capitalisation = number_format($stock_object['market_cap'] / 1000000000, 2)." Md";
get_header(); ?>
<main id="main">
<div class="container">
<ul class="breadcrumbs">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Accueil">Accueil</a></li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<div class="container">
<h3 class="heading-decoration heading-contact">
<span class="text">
Nous contacter
</span>
</h3>
</div>
<!---- POC CONTACT Reponse par le backoffice ------>
<section class="text-content formSbv">
<div class="container">
<?php if(isset($envoiDone) && $envoiDone){ ?>
<div id='msgSent'>
<p>Votre message a bien été envoyé.</p>
<p>Nous y répondrons dès que possible</p>
<p>Merci et à bientot</p>
</div>
<?php } else { ?>
<form method="post" action='<?php bloginfo('url'); ?>/contactez-nous/' name="serviceconsoform" class="ninja-forms-all-fields-wrap">
<p class="required_field" style="padding:10px 0; width:100%; text-align:right;">* Champs obligatoire</p>
<div id="error-msg" class="error-msg" style="display:none;"><ul></ul></div>
<p class="text"><strong>Coordonnées :</strong></p>
<p class="entree civi">
<select name="msg_civilite" id="msg_civilite">
<option value="Civilite" disabled selected>Civilité*</option>
<option value="Mr">Mr</option>
<option value="Mme">Mme</option>
</select>
</p>
<p class="entree">
<input type="text" id="msg_nom" name="msg_nom" placeholder="Nom*">
<input type="text" id="msg_prenom" name="msg_prenom" placeholder="Prénom*">
</p>
<p class="entree">
<input type="text" id="msg_adresse" name="msg_adresse" placeholder="Adresse*">
<input type="email" id="msg_email" name="msg_email" placeholder="Adresse mail*">
</p>
<p class="entree">
<input type="text" id="msg_cp" name="msg_cp" placeholder="Code Postal*">
<input type="text" id="msg_ville" name="msg_ville" placeholder="Ville*">
</p>
<p class="entree">
<input type="text" id="msg_telephone" name="msg_telephone" placeholder="Téléphone" maxlength="20">
</p>
<hr>
<p class="entree">
<p class="text"><strong>Votre question concerne :</strong></p>
<select name="msg_contacttype" id="msg_contacttype">
<option value="" selected disabled>Sélectionnez une demande</option>
<option value="nous-rejoindre-collaborateur">Nous rejoindre en tant que collaborateur</option>
<option value="nous-rejoindre-eleveur">Nous rejoindre en tant qu’éleveur</option>
<option value="export">L'export</option>
<option value="demande-client">Une demande en tant que client / détaillant / distributeur</option>
<option value="finance">La finance</option>
<option value="engagements">Nos engagements</option>
<option value="information-generale">Une autre information générale</option>
<option value="presse">Une demande presse</option>
</select>
</p>
<p class="entree">
<textarea id="msg_message" name="msg_message" maxlength="1500" placeholder='Message'></textarea>
</p>
<input type="hidden" name="token" value="<?php echo wp_create_nonce( 'contact-nonce' ); ?>">
<input type="hidden" name="action" value="message_conso">
<p class="submit-p">
<input type="submit" value="Envoyer">
</p>
</form>
<?php } ?>
</div>
</section>
<!---- POC BOURSE ------>
<style>
.financial {
width:80%;
border-radius:10px;
border: 1px solid grey;
background-color:#FFF;
padding:20px;
margin: 50px auto;
}
.financial h1 {
margin-top:0;
font-size:36px;
}
.financial h3 {
margin:0;
line-height: 0.5em;
}
.financial .footer-financial {
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}
.financial .footer-financial p {
margin:0;
width:48%;
display:flex;
justify-content:space-between;
}
.financial .footer-financial p span {
color:#888888;
}
.financial .buttons {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content : space-around;
margin-top:20px;
border-bottom:1px solid #CCCCCC;
}
.financial .buttons .butt {
padding: 10px;
cursor:pointer;
}
.financial .buttons .butt:hover{
border-bottom:2px solid #e51c20;
}
.financial .buttons .butt.active {
border-bottom:2px solid #e51c20;
}
</style>
<section class="financial">
<div class="heading-financial">
<h1>Financial Data : <?php echo $stock_object['name'] ?></h1>
<h3><?php echo $stock_object['price'] ?> <span style="font-size:18px; font-weight:normal;"><?php echo $stock_object['currency'] ?></span>
<?php if(strpos($stock_object['day_change'], '-') === false){ ?>
<span style='color:green;font-size:20px; font-weight:normal;'><?php echo $stock_object['day_change'] ?>€ (<?php echo $stock_object['change_pct'] ?> %)</span>
<?php } else { ?>
<span style='color:red;font-size:20px; font-weight:normal;'><?php echo $stock_object['day_change'] ?>€ (<?php echo $stock_object['change_pct'] ?> %)</span>
<?php } ?>
<br/>
<span style="font-size:18px; font-weight:normal;"><?php echo date("d/m/Y h:i:s") ?></span>
</h3>
</div>
<div class="buttons">
<div class="butt" data-period='intraday'>1 Jour</div>
<div class="butt active" data-period='5'>5 Jour</div>
<div class="butt" data-period='30'>1 mois</div>
<div class="butt" data-period='182'>6 mois</div>
<div class="butt" data-period='YTD'>Année en cours</div>
<div class="butt" data-period='365'>1 an</div>
<div class="butt" data-period='1825'>5 ans</div>
<div class="butt" data-period='all'>Max.</div>
</div>
<canvas id="myChart" height="150"></canvas>
<div class="footer-financial">
<p>Ouverture : <span><?php echo $stock_object['price_open'] ?></span></p>
<p>Rend. Div. : <span><?php echo $stock_object['price_open'] ?></span></p>
<p>+ Haut : <span><?php echo $stock_object['day_high'] ?></span></p>
<p>Cours Clôt. : <span><?php echo $stock_object['close_yesterday'] ?></span></p>
<p>+ Bas : <span><?php echo $stock_object['day_low'] ?></span></p>
<p>Max 52 sem. : <span><?php echo $stock_object['52_week_high'] ?></span></p>
<p>Capitalisation : <span><?php echo $capitalisation ?></span></p>
<p>Min 52 sem. : <span><?php echo $stock_object['52_week_low'] ?></span></p>
<p>Cours/bén. : <span><?php echo $stock_object['pe'] ?></span></p>
</div>
</section>
<!---- POC Alerte Mail JOBS ------>
<?php
// Récupération des datas pour les selects
global $wpdb;
$poles_data = $wpdb->get_results(
"
SELECT *
FROM wp_recruiterdata
WHERE name != 'data'"
);
foreach ($poles_data as $item) {
switch ($item->name) {
case 'poles':
$poles = json_decode($item->data);
break;
case 'metiers':
$metiers = json_decode($item->data);
break;
case 'types':
$types = json_decode($item->data);
break;
case 'temps':
$temps = json_decode($item->data);
break;
}
}
?>
<section>
<style>
#formAlert {
display:flex;
flex-direction: column;
width:70%;
margin: 0 auto;
}
#formAlert h1 {
margin-top:0;
font-size:36px;
}
#formAlert select, #formAlert input {
margin:10px;
padding:10px 15px;
width:100%;
}
</style>
<div id="formAlert">
<h1>Inscription alerte aux offres d'emploi</h1>
<select name="poles" id="poles">
<option value="all">Tous les pôles</option>
<?php foreach ($poles as $key => $pole) { ?>
<option value="<?php echo $key; ?>"><?php echo $pole ?></option>
<?php } ?>
</select>
<select name="metiers" id="metiers">
<option value="all">Tous les métiers</option>
<?php foreach ($metiers as $key => $metier) { ?>
<option value="<?php echo $key; ?>"><?php echo $metier ?></option>
<?php } ?>
</select>
<select name="types" id="types">
<option value="all">Tous types de contrat</option>
<?php foreach ($types as $key => $type) { ?>
<option value="<?php echo $key; ?>"><?php echo $type ?></option>
<?php } ?>
</select>
<select name="temps" id="temps">
<option value="all">Tous les temps de travail</option>
<?php foreach ($temps as $key => $temp) { ?>
<option value="<?php echo $key; ?>"><?php echo $temp ?></option>
<?php } ?>
</select>
<input type="email" name="email" id="email" placeholder="Votre Email">
<input type="submit" id="submitEmail" value="Envoyer">
</div>
</section>
<!---- POC Google map implantations ------>
<style>
#implantation-wap {
height:700px;
}
.wrapperMap h2 {
font-size:1em;
margin:0;
}
.wrapperMap hr {
margin: 5px 0;
}
.map_section .wrapperMap {
position: absolute;
bottom:100%;
}
.map_section .wrapperMap #map {
position: relative;
width: 100%;
min-height: 650px; }
.map_section .wrapperMap .ctrl {
position: relative;
background-color: white;
padding: 10px;
width: 350px;
float:left; }
.map_section .wrapperMap .ctrl p {
display: flex;
align-items:center;
width: 50%;
float: left; }
.map_section .wrapperMap .ctrl p .ckeckPin {
-webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75);
position: relative;
display: inline-block;
height: 30px;
width: 30px; }
.map_section .wrapperMap .ctrl p .ckeckPin.blue:before {
background-color: #557AD8; }
.map_section .wrapperMap .ctrl p .ckeckPin.orange:before {
background-color: #E3932E; }
.map_section .wrapperMap .ctrl p .ckeckPin.red:before {
background-color: #DC2034; }
.map_section .wrapperMap .ctrl p .ckeckPin.purple:before {
background-color: #C96391; }
.map_section .wrapperMap .ctrl p .ckeckPin.green:before {
background-color: #03841e; }
.map_section .wrapperMap .ctrl p .ckeckPin:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60%;
height: 60%; }
.map_section .wrapperMap .ctrl p .ckeckPin.unckeck:before {
background-color: transparent; }
.map_section .wrapperMap .ctrl p span {
margin-left: 10px;
padding-top: 3px;
display: inline-block; }
.map_section .wrapperSociete {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: 100%;
right:210%;
}
.map_section .wrapperSociete #blocSociete {
opacity: 0;
display: none;
position: relative;
margin-left: 20px;
background-color: #FFF;
width: 450px;
padding: 20px;
border-bottom: 5px solid #DC2034;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
z-index: 3; }
.map_section .wrapperSociete #blocSociete.blue {
border-bottom: 5px solid #557AD8; }
.map_section .wrapperSociete #blocSociete.blue h1, .map_section .wrapperSociete #blocSociete.blue a {
color: #557AD8; }
.map_section .wrapperSociete #blocSociete.red {
border-bottom: 5px solid #DC2034; }
.map_section .wrapperSociete #blocSociete.red h1, .map_section .wrapperSociete #blocSociete.red a {
color: #DC2034; }
.map_section .wrapperSociete #blocSociete.purple {
border-bottom: 5px solid #C96391; }
.map_section .wrapperSociete #blocSociete.purple h1, .map_section .wrapperSociete #blocSociete.purple a {
color: #C96391; }
.map_section .wrapperSociete #blocSociete.orange {
border-bottom: 5px solid #E3932E; }
.map_section .wrapperSociete #blocSociete.orange h1, .map_section .wrapperSociete #blocSociete.orange a {
color: #E3932E; }
.map_section .wrapperSociete #blocSociete.green {
border-bottom: 5px solid #03841e; }
.map_section .wrapperSociete #blocSociete.green h1, .map_section .wrapperSociete #blocSociete.green a {
color: #03841e; }
.map_section .wrapperSociete #blocSociete .close {
position: absolute;
cursor: pointer;
top: 10px;
right: 10px; }
.map_section .wrapperSociete header img {
max-height: 82px;
width: auto;
float: left;
margin-right: 14px; }
.map_section .wrapperSociete p {
color: #949494; }
.map_section .wrapperSociete b {
font-weight: normal;
color: #222222; }
.map_section .wrapperLegende {
max-width: 1200px;
margin-left: auto;
margin-right: auto; }
.map_section .wrapperLegende .txtLegende {
background-color: #92c0d3;
position: absolute;
z-index: 3;
width: 385px;
top: 50px;
padding: 30px;
border-radius: 15px; }
.map_section .wrapperLegende .txtLegende h1 {
color: #ffffff;
text-transform: uppercase;
margin-bottom: 10px;
font-size:1em;
}
.map_section .wrapperLegende .txtLegende p {
color: #ffffff;
font-style: italic;
padding-right: 80px; }
.map_section .wrapperLegende .txtLegende p i {
font-size: 42px;
float: left;
margin-right: 13px;
margin-top: 3px; }
#blocSociete hr {
margin: 5px 0;
}
#blocSociete h1 {
font-size: 1em;
margin:0;
}
.map-implantation .implantation-container {
position: absolute;
bottom: 0;
right: 1.2%;
z-index: 13;
font-size:2em;
}
#map_anchor {
height:140px;
width:350px;
float:right;
position:relative;
}
</style>
<section style="position:relative;">
<div id="implantation-wap" class="google-map"></div>
<div id="map_anchor" class="map_section">
<div class="wrapperMap">
<div class="ctrl">
<h2>Filtrer les implantations</h2>
<hr>
<p><i class="ckeckPin blue" ></i><span>Amont</span></p>
<p><i class="ckeckPin orange" ></i><span>Traiteur</span></p>
<p><i class="ckeckPin red" ></i><span>Volaille</span></p>
<p><i class="ckeckPin purple" ></i><span>Internationnal</span></p>
<p><i class="ckeckPin green" ></i><span>Plateformes</span></p>
</div>
</div>
<div class="wrapperSociete">
<div id="blocSociete">
<i class="fas fa-times close"></i>
<header>
<img class="logoSociete" src="" alt="">
<div class="info">
<h1 class="titre"></h1>
<p class="filiere"><span></span></p>
<p class="responsable"><b>Responsable : </b><span></span></p>
</div>
</header>
<hr>
<p class="effectif"><b>Effectifs : </b><span></span> salariés</p>
<div class="adresse"><b>Adresse : </b><div></div></div>
<p class="contact"><b>Contact : </b><span></span></p>
</div>
</div>
</div>
</section>
<!------ POC Graphique ------->
<style>
.module {
width: 400px;
padding: 20px;
background-color: #FFF;
margin-bottom: 20px;
margin-left: 100px; }
h1 {
font-family: 'Barlow';
font-size: 1.3em;
text-align: center; }
.graphique {
width: 230px;
height: 230px;
border: 1px solid #CCC;
border-radius: 50%;
position: relative;
margin: 50px auto;
margin-top:100px; }
.graphique li {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Barlow';
border-radius: 50%;
border: 2px dotted #AAA;
position: absolute;
top: 50%;
left: 50%;
background-color: #FFF; }
.graphique li.p-1 {
width: calc(calc(200px * 1) / 100 + 34px);
height: calc(calc(200px * 1) / 100 + 34px);
font-size: calc(calc(calc(200px * 1) / 100 + 34px) * 0.3); }
.graphique li.p-2 {
width: calc(calc(200px * 2) / 100 + 34px);
height: calc(calc(200px * 2) / 100 + 34px);
font-size: calc(calc(calc(200px * 2) / 100 + 34px) * 0.3); }
.graphique li.p-3 {
width: calc(calc(200px * 3) / 100 + 34px);
height: calc(calc(200px * 3) / 100 + 34px);
font-size: calc(calc(calc(200px * 3) / 100 + 34px) * 0.3); }
.graphique li.p-4 {
width: calc(calc(200px * 4) / 100 + 34px);
height: calc(calc(200px * 4) / 100 + 34px);
font-size: calc(calc(calc(200px * 4) / 100 + 34px) * 0.3); }
.graphique li.p-5 {
width: calc(calc(200px * 5) / 100 + 34px);
height: calc(calc(200px * 5) / 100 + 34px);
font-size: calc(calc(calc(200px * 5) / 100 + 34px) * 0.3); }
.graphique li.p-6 {
width: calc(calc(200px * 6) / 100 + 34px);
height: calc(calc(200px * 6) / 100 + 34px);
font-size: calc(calc(calc(200px * 6) / 100 + 34px) * 0.3); }
.graphique li.p-7 {
width: calc(calc(200px * 7) / 100 + 34px);
height: calc(calc(200px * 7) / 100 + 34px);
font-size: calc(calc(calc(200px * 7) / 100 + 34px) * 0.3); }
.graphique li.p-8 {
width: calc(calc(200px * 8) / 100 + 34px);
height: calc(calc(200px * 8) / 100 + 34px);
font-size: calc(calc(calc(200px * 8) / 100 + 34px) * 0.3); }
.graphique li.p-9 {
width: calc(calc(200px * 9) / 100 + 34px);
height: calc(calc(200px * 9) / 100 + 34px);
font-size: calc(calc(calc(200px * 9) / 100 + 34px) * 0.3); }
.graphique li.p-10 {
width: calc(calc(200px * 10) / 100 + 34px);
height: calc(calc(200px * 10) / 100 + 34px);
font-size: calc(calc(calc(200px * 10) / 100 + 34px) * 0.3); }
.graphique li.p-11 {
width: calc(calc(200px * 11) / 100 + 34px);
height: calc(calc(200px * 11) / 100 + 34px);
font-size: calc(calc(calc(200px * 11) / 100 + 34px) * 0.3); }
.graphique li.p-12 {
width: calc(calc(200px * 12) / 100 + 34px);
height: calc(calc(200px * 12) / 100 + 34px);
font-size: calc(calc(calc(200px * 12) / 100 + 34px) * 0.3); }
.graphique li.p-13 {
width: calc(calc(200px * 13) / 100 + 34px);
height: calc(calc(200px * 13) / 100 + 34px);
font-size: calc(calc(calc(200px * 13) / 100 + 34px) * 0.3); }
.graphique li.p-14 {
width: calc(calc(200px * 14) / 100 + 34px);
height: calc(calc(200px * 14) / 100 + 34px);
font-size: calc(calc(calc(200px * 14) / 100 + 34px) * 0.3); }
.graphique li.p-15 {
width: calc(calc(200px * 15) / 100 + 34px);
height: calc(calc(200px * 15) / 100 + 34px);
font-size: calc(calc(calc(200px * 15) / 100 + 34px) * 0.3); }
.graphique li.p-16 {
width: calc(calc(200px * 16) / 100 + 34px);
height: calc(calc(200px * 16) / 100 + 34px);
font-size: calc(calc(calc(200px * 16) / 100 + 34px) * 0.3); }
.graphique li.p-17 {
width: calc(calc(200px * 17) / 100 + 34px);
height: calc(calc(200px * 17) / 100 + 34px);
font-size: calc(calc(calc(200px * 17) / 100 + 34px) * 0.3); }
.graphique li.p-18 {
width: calc(calc(200px * 18) / 100 + 34px);
height: calc(calc(200px * 18) / 100 + 34px);
font-size: calc(calc(calc(200px * 18) / 100 + 34px) * 0.3); }
.graphique li.p-19 {
width: calc(calc(200px * 19) / 100 + 34px);
height: calc(calc(200px * 19) / 100 + 34px);
font-size: calc(calc(calc(200px * 19) / 100 + 34px) * 0.3); }
.graphique li.p-20 {
width: calc(calc(200px * 20) / 100 + 34px);
height: calc(calc(200px * 20) / 100 + 34px);
font-size: calc(calc(calc(200px * 20) / 100 + 34px) * 0.3); }
.graphique li.p-21 {
width: calc(calc(200px * 21) / 100 + 34px);
height: calc(calc(200px * 21) / 100 + 34px);
font-size: calc(calc(calc(200px * 21) / 100 + 34px) * 0.3); }
.graphique li.p-22 {
width: calc(calc(200px * 22) / 100 + 34px);
height: calc(calc(200px * 22) / 100 + 34px);
font-size: calc(calc(calc(200px * 22) / 100 + 34px) * 0.3); }
.graphique li.p-23 {
width: calc(calc(200px * 23) / 100 + 34px);
height: calc(calc(200px * 23) / 100 + 34px);
font-size: calc(calc(calc(200px * 23) / 100 + 34px) * 0.3); }
.graphique li.p-24 {
width: calc(calc(200px * 24) / 100 + 34px);
height: calc(calc(200px * 24) / 100 + 34px);
font-size: calc(calc(calc(200px * 24) / 100 + 34px) * 0.3); }
.graphique li.p-25 {
width: calc(calc(200px * 25) / 100 + 34px);
height: calc(calc(200px * 25) / 100 + 34px);
font-size: calc(calc(calc(200px * 25) / 100 + 34px) * 0.3); }
.graphique li.p-26 {
width: calc(calc(200px * 26) / 100 + 34px);
height: calc(calc(200px * 26) / 100 + 34px);
font-size: calc(calc(calc(200px * 26) / 100 + 34px) * 0.3); }
.graphique li.p-27 {
width: calc(calc(200px * 27) / 100 + 34px);
height: calc(calc(200px * 27) / 100 + 34px);
font-size: calc(calc(calc(200px * 27) / 100 + 34px) * 0.3); }
.graphique li.p-28 {
width: calc(calc(200px * 28) / 100 + 34px);
height: calc(calc(200px * 28) / 100 + 34px);
font-size: calc(calc(calc(200px * 28) / 100 + 34px) * 0.3); }
.graphique li.p-29 {
width: calc(calc(200px * 29) / 100 + 34px);
height: calc(calc(200px * 29) / 100 + 34px);
font-size: calc(calc(calc(200px * 29) / 100 + 34px) * 0.3); }
.graphique li.p-30 {
width: calc(calc(200px * 30) / 100 + 34px);
height: calc(calc(200px * 30) / 100 + 34px);
font-size: calc(calc(calc(200px * 30) / 100 + 34px) * 0.3); }
.graphique li.p-31 {
width: calc(calc(200px * 31) / 100 + 34px);
height: calc(calc(200px * 31) / 100 + 34px);
font-size: calc(calc(calc(200px * 31) / 100 + 34px) * 0.3); }
.graphique li.p-32 {
width: calc(calc(200px * 32) / 100 + 34px);
height: calc(calc(200px * 32) / 100 + 34px);
font-size: calc(calc(calc(200px * 32) / 100 + 34px) * 0.3); }
.graphique li.p-33 {
width: calc(calc(200px * 33) / 100 + 34px);
height: calc(calc(200px * 33) / 100 + 34px);
font-size: calc(calc(calc(200px * 33) / 100 + 34px) * 0.3); }
.graphique li.p-34 {
width: calc(calc(200px * 34) / 100 + 34px);
height: calc(calc(200px * 34) / 100 + 34px);
font-size: calc(calc(calc(200px * 34) / 100 + 34px) * 0.3); }
.graphique li.p-35 {
width: calc(calc(200px * 35) / 100 + 34px);
height: calc(calc(200px * 35) / 100 + 34px);
font-size: calc(calc(calc(200px * 35) / 100 + 34px) * 0.3); }
.graphique li.p-36 {
width: calc(calc(200px * 36) / 100 + 34px);
height: calc(calc(200px * 36) / 100 + 34px);
font-size: calc(calc(calc(200px * 36) / 100 + 34px) * 0.3); }
.graphique li.p-37 {
width: calc(calc(200px * 37) / 100 + 34px);
height: calc(calc(200px * 37) / 100 + 34px);
font-size: calc(calc(calc(200px * 37) / 100 + 34px) * 0.3); }
.graphique li.p-38 {
width: calc(calc(200px * 38) / 100 + 34px);
height: calc(calc(200px * 38) / 100 + 34px);
font-size: calc(calc(calc(200px * 38) / 100 + 34px) * 0.3); }
.graphique li.p-39 {
width: calc(calc(200px * 39) / 100 + 34px);
height: calc(calc(200px * 39) / 100 + 34px);
font-size: calc(calc(calc(200px * 39) / 100 + 34px) * 0.3); }
.graphique li.p-40 {
width: calc(calc(200px * 40) / 100 + 34px);
height: calc(calc(200px * 40) / 100 + 34px);
font-size: calc(calc(calc(200px * 40) / 100 + 34px) * 0.3); }
.graphique li.p-41 {
width: calc(calc(200px * 41) / 100 + 34px);
height: calc(calc(200px * 41) / 100 + 34px);
font-size: calc(calc(calc(200px * 41) / 100 + 34px) * 0.3); }
.graphique li.p-42 {
width: calc(calc(200px * 42) / 100 + 34px);
height: calc(calc(200px * 42) / 100 + 34px);
font-size: calc(calc(calc(200px * 42) / 100 + 34px) * 0.3); }
.graphique li.p-43 {
width: calc(calc(200px * 43) / 100 + 34px);
height: calc(calc(200px * 43) / 100 + 34px);
font-size: calc(calc(calc(200px * 43) / 100 + 34px) * 0.3); }
.graphique li.p-44 {
width: calc(calc(200px * 44) / 100 + 34px);
height: calc(calc(200px * 44) / 100 + 34px);
font-size: calc(calc(calc(200px * 44) / 100 + 34px) * 0.3); }
.graphique li.p-45 {
width: calc(calc(200px * 45) / 100 + 34px);
height: calc(calc(200px * 45) / 100 + 34px);
font-size: calc(calc(calc(200px * 45) / 100 + 34px) * 0.3); }
.graphique li.p-46 {
width: calc(calc(200px * 46) / 100 + 34px);
height: calc(calc(200px * 46) / 100 + 34px);
font-size: calc(calc(calc(200px * 46) / 100 + 34px) * 0.3); }
.graphique li.p-47 {
width: calc(calc(200px * 47) / 100 + 34px);
height: calc(calc(200px * 47) / 100 + 34px);
font-size: calc(calc(calc(200px * 47) / 100 + 34px) * 0.3); }
.graphique li.p-48 {
width: calc(calc(200px * 48) / 100 + 34px);
height: calc(calc(200px * 48) / 100 + 34px);
font-size: calc(calc(calc(200px * 48) / 100 + 34px) * 0.3); }
.graphique li.p-49 {
width: calc(calc(200px * 49) / 100 + 34px);
height: calc(calc(200px * 49) / 100 + 34px);
font-size: calc(calc(calc(200px * 49) / 100 + 34px) * 0.3); }
.graphique li.p-50 {
width: calc(calc(200px * 50) / 100 + 34px);
height: calc(calc(200px * 50) / 100 + 34px);
font-size: calc(calc(calc(200px * 50) / 100 + 34px) * 0.3); }
.graphique li.p-51 {
width: calc(calc(200px * 51) / 100 + 34px);
height: calc(calc(200px * 51) / 100 + 34px);
font-size: calc(calc(calc(200px * 51) / 100 + 34px) * 0.3); }
.graphique li.p-52 {
width: calc(calc(200px * 52) / 100 + 34px);
height: calc(calc(200px * 52) / 100 + 34px);
font-size: calc(calc(calc(200px * 52) / 100 + 34px) * 0.3); }
.graphique li.p-53 {
width: calc(calc(200px * 53) / 100 + 34px);
height: calc(calc(200px * 53) / 100 + 34px);
font-size: calc(calc(calc(200px * 53) / 100 + 34px) * 0.3); }
.graphique li.p-54 {
width: calc(calc(200px * 54) / 100 + 34px);
height: calc(calc(200px * 54) / 100 + 34px);
font-size: calc(calc(calc(200px * 54) / 100 + 34px) * 0.3); }
.graphique li.p-55 {
width: calc(calc(200px * 55) / 100 + 34px);
height: calc(calc(200px * 55) / 100 + 34px);
font-size: calc(calc(calc(200px * 55) / 100 + 34px) * 0.3); }
.graphique li.p-56 {
width: calc(calc(200px * 56) / 100 + 34px);
height: calc(calc(200px * 56) / 100 + 34px);
font-size: calc(calc(calc(200px * 56) / 100 + 34px) * 0.3); }
.graphique li.p-57 {
width: calc(calc(200px * 57) / 100 + 34px);
height: calc(calc(200px * 57) / 100 + 34px);
font-size: calc(calc(calc(200px * 57) / 100 + 34px) * 0.3); }
.graphique li.p-58 {
width: calc(calc(200px * 58) / 100 + 34px);
height: calc(calc(200px * 58) / 100 + 34px);
font-size: calc(calc(calc(200px * 58) / 100 + 34px) * 0.3); }
.graphique li.p-59 {
width: calc(calc(200px * 59) / 100 + 34px);
height: calc(calc(200px * 59) / 100 + 34px);
font-size: calc(calc(calc(200px * 59) / 100 + 34px) * 0.3); }
.graphique li.p-60 {
width: calc(calc(200px * 60) / 100 + 34px);
height: calc(calc(200px * 60) / 100 + 34px);
font-size: calc(calc(calc(200px * 60) / 100 + 34px) * 0.3); }
.graphique li.p-61 {
width: calc(calc(200px * 61) / 100 + 34px);
height: calc(calc(200px * 61) / 100 + 34px);
font-size: calc(calc(calc(200px * 61) / 100 + 34px) * 0.3); }
.graphique li.p-62 {
width: calc(calc(200px * 62) / 100 + 34px);
height: calc(calc(200px * 62) / 100 + 34px);
font-size: calc(calc(calc(200px * 62) / 100 + 34px) * 0.3); }
.graphique li.p-63 {
width: calc(calc(200px * 63) / 100 + 34px);
height: calc(calc(200px * 63) / 100 + 34px);
font-size: calc(calc(calc(200px * 63) / 100 + 34px) * 0.3); }
.graphique li.p-64 {
width: calc(calc(200px * 64) / 100 + 34px);
height: calc(calc(200px * 64) / 100 + 34px);
font-size: calc(calc(calc(200px * 64) / 100 + 34px) * 0.3); }
.graphique li.p-65 {
width: calc(calc(200px * 65) / 100 + 34px);
height: calc(calc(200px * 65) / 100 + 34px);
font-size: calc(calc(calc(200px * 65) / 100 + 34px) * 0.3); }
.graphique li.p-66 {
width: calc(calc(200px * 66) / 100 + 34px);
height: calc(calc(200px * 66) / 100 + 34px);
font-size: calc(calc(calc(200px * 66) / 100 + 34px) * 0.3); }
.graphique li.p-67 {
width: calc(calc(200px * 67) / 100 + 34px);
height: calc(calc(200px * 67) / 100 + 34px);
font-size: calc(calc(calc(200px * 67) / 100 + 34px) * 0.3); }
.graphique li.p-68 {
width: calc(calc(200px * 68) / 100 + 34px);
height: calc(calc(200px * 68) / 100 + 34px);
font-size: calc(calc(calc(200px * 68) / 100 + 34px) * 0.3); }
.graphique li.p-69 {
width: calc(calc(200px * 69) / 100 + 34px);
height: calc(calc(200px * 69) / 100 + 34px);
font-size: calc(calc(calc(200px * 69) / 100 + 34px) * 0.3); }
.graphique li.p-70 {
width: calc(calc(200px * 70) / 100 + 34px);
height: calc(calc(200px * 70) / 100 + 34px);
font-size: calc(calc(calc(200px * 70) / 100 + 34px) * 0.3); }
.graphique li.p-71 {
width: calc(calc(200px * 71) / 100 + 34px);
height: calc(calc(200px * 71) / 100 + 34px);
font-size: calc(calc(calc(200px * 71) / 100 + 34px) * 0.3); }
.graphique li.p-72 {
width: calc(calc(200px * 72) / 100 + 34px);
height: calc(calc(200px * 72) / 100 + 34px);
font-size: calc(calc(calc(200px * 72) / 100 + 34px) * 0.3); }
.graphique li.p-73 {
width: calc(calc(200px * 73) / 100 + 34px);
height: calc(calc(200px * 73) / 100 + 34px);
font-size: calc(calc(calc(200px * 73) / 100 + 34px) * 0.3); }
.graphique li.p-74 {
width: calc(calc(200px * 74) / 100 + 34px);
height: calc(calc(200px * 74) / 100 + 34px);
font-size: calc(calc(calc(200px * 74) / 100 + 34px) * 0.3); }
.graphique li.p-75 {
width: calc(calc(200px * 75) / 100 + 34px);
height: calc(calc(200px * 75) / 100 + 34px);
font-size: calc(calc(calc(200px * 75) / 100 + 34px) * 0.3); }
.graphique li.p-76 {
width: calc(calc(200px * 76) / 100 + 34px);
height: calc(calc(200px * 76) / 100 + 34px);
font-size: calc(calc(calc(200px * 76) / 100 + 34px) * 0.3); }
.graphique li.p-77 {
width: calc(calc(200px * 77) / 100 + 34px);
height: calc(calc(200px * 77) / 100 + 34px);
font-size: calc(calc(calc(200px * 77) / 100 + 34px) * 0.3); }
.graphique li.p-78 {
width: calc(calc(200px * 78) / 100 + 34px);
height: calc(calc(200px * 78) / 100 + 34px);
font-size: calc(calc(calc(200px * 78) / 100 + 34px) * 0.3); }
.graphique li.p-79 {
width: calc(calc(200px * 79) / 100 + 34px);
height: calc(calc(200px * 79) / 100 + 34px);
font-size: calc(calc(calc(200px * 79) / 100 + 34px) * 0.3); }
.graphique li.p-80 {
width: calc(calc(200px * 80) / 100 + 34px);
height: calc(calc(200px * 80) / 100 + 34px);
font-size: calc(calc(calc(200px * 80) / 100 + 34px) * 0.3); }
.graphique li.p-81 {
width: calc(calc(200px * 81) / 100 + 34px);
height: calc(calc(200px * 81) / 100 + 34px);
font-size: calc(calc(calc(200px * 81) / 100 + 34px) * 0.3); }
.graphique li.p-82 {
width: calc(calc(200px * 82) / 100 + 34px);
height: calc(calc(200px * 82) / 100 + 34px);
font-size: calc(calc(calc(200px * 82) / 100 + 34px) * 0.3); }
.graphique li.p-83 {
width: calc(calc(200px * 83) / 100 + 34px);
height: calc(calc(200px * 83) / 100 + 34px);
font-size: calc(calc(calc(200px * 83) / 100 + 34px) * 0.3); }
.graphique li.p-84 {
width: calc(calc(200px * 84) / 100 + 34px);
height: calc(calc(200px * 84) / 100 + 34px);
font-size: calc(calc(calc(200px * 84) / 100 + 34px) * 0.3); }
.graphique li.p-85 {
width: calc(calc(200px * 85) / 100 + 34px);
height: calc(calc(200px * 85) / 100 + 34px);
font-size: calc(calc(calc(200px * 85) / 100 + 34px) * 0.3); }
.graphique li.p-86 {
width: calc(calc(200px * 86) / 100 + 34px);
height: calc(calc(200px * 86) / 100 + 34px);
font-size: calc(calc(calc(200px * 86) / 100 + 34px) * 0.3); }
.graphique li.p-87 {
width: calc(calc(200px * 87) / 100 + 34px);
height: calc(calc(200px * 87) / 100 + 34px);
font-size: calc(calc(calc(200px * 87) / 100 + 34px) * 0.3); }
.graphique li.p-88 {
width: calc(calc(200px * 88) / 100 + 34px);
height: calc(calc(200px * 88) / 100 + 34px);
font-size: calc(calc(calc(200px * 88) / 100 + 34px) * 0.3); }
.graphique li.p-89 {
width: calc(calc(200px * 89) / 100 + 34px);
height: calc(calc(200px * 89) / 100 + 34px);
font-size: calc(calc(calc(200px * 89) / 100 + 34px) * 0.3); }
.graphique li.p-90 {
width: calc(calc(200px * 90) / 100 + 34px);
height: calc(calc(200px * 90) / 100 + 34px);
font-size: calc(calc(calc(200px * 90) / 100 + 34px) * 0.3); }
.graphique li.p-91 {
width: calc(calc(200px * 91) / 100 + 34px);
height: calc(calc(200px * 91) / 100 + 34px);
font-size: calc(calc(calc(200px * 91) / 100 + 34px) * 0.3); }
.graphique li.p-92 {
width: calc(calc(200px * 92) / 100 + 34px);
height: calc(calc(200px * 92) / 100 + 34px);
font-size: calc(calc(calc(200px * 92) / 100 + 34px) * 0.3); }
.graphique li.p-93 {
width: calc(calc(200px * 93) / 100 + 34px);
height: calc(calc(200px * 93) / 100 + 34px);
font-size: calc(calc(calc(200px * 93) / 100 + 34px) * 0.3); }
.graphique li.p-94 {
width: calc(calc(200px * 94) / 100 + 34px);
height: calc(calc(200px * 94) / 100 + 34px);
font-size: calc(calc(calc(200px * 94) / 100 + 34px) * 0.3); }
.graphique li.p-95 {
width: calc(calc(200px * 95) / 100 + 34px);
height: calc(calc(200px * 95) / 100 + 34px);
font-size: calc(calc(calc(200px * 95) / 100 + 34px) * 0.3); }
.graphique li.p-96 {
width: calc(calc(200px * 96) / 100 + 34px);
height: calc(calc(200px * 96) / 100 + 34px);
font-size: calc(calc(calc(200px * 96) / 100 + 34px) * 0.3); }
.graphique li.p-97 {
width: calc(calc(200px * 97) / 100 + 34px);
height: calc(calc(200px * 97) / 100 + 34px);
font-size: calc(calc(calc(200px * 97) / 100 + 34px) * 0.3); }
.graphique li.p-98 {
width: calc(calc(200px * 98) / 100 + 34px);
height: calc(calc(200px * 98) / 100 + 34px);
font-size: calc(calc(calc(200px * 98) / 100 + 34px) * 0.3); }
.graphique li.p-99 {
width: calc(calc(200px * 99) / 100 + 34px);
height: calc(calc(200px * 99) / 100 + 34px);
font-size: calc(calc(calc(200px * 99) / 100 + 34px) * 0.3); }
.graphique li.p-100 {
width: calc(calc(200px * 100) / 100 + 34px);
height: calc(calc(200px * 100) / 100 + 34px);
font-size: calc(calc(calc(200px * 100) / 100 + 34px) * 0.3); }
.graphique li.vol-fr {
border-color: #d01419; }
.graphique li.amont {
border-color: #5675b9; }
.graphique li.inter {
border-color: #c86492; }
.graphique li.exp-vol {
border-color: #7c7e7e; }
.graphique li.traiteur {
border-color: #e19327; }
.legend {
margin-top: 40px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap; }
.legend li {
margin-top: 5px;
list-style: none;
font-family: 'Barlow';
display: inline-flex;
align-items: center;
flex-wrap: wrap; }
.legend li span {
display: block;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 50%;
border: 2px dotted #AAA; }
.legend li span.vol-fr {
border-color: #d01419; }
.legend li span.amont {
border-color: #5675b9; }
.legend li span.inter {
border-color: #c86492; }
.legend li span.exp-vol {
border-color: #7c7e7e; }
.legend li span.traiteur {
border-color: #e19327; }
.module {
width:50%;
}
</style>
<section>
<div class="module">
<h1>Répartition du chiffre d'affaires 2018/2019</h1>
<div class="graphique">
<!---------- Pour rendre les valeurs administrables, il faut changer la valeur du data-percent et la class p-* (arrondi) en plus du texte ----------->
<li class="p-15 traiteur" data-percent="15">15 %</li>
<li class="p-10 exp-vol" data-percent='10'>10,4 %</li>
<li class="p-9 inter" data-percent="9">8,6 %</li>
<li class="p-6 amont" data-percent="6">6,4 %</li>
<li class="p-60 vol-fr" data-percent="60">59,6 %</li>
</div>
<div class="legend">
<li> <span class="traiteur"></span> Pôle Traiteur</li>
<li> <span class="exp-vol"></span> Export Volaille</li>
<li> <span class="vol-fr"></span> Volaille France</li>
<li> <span class="amont"></span> Amont</li>
<li> <span class="inter"></span> International (hors export)</li>
</div>
</div>
</section>
</div>
</main>
<?php get_footer(); ?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRVb8ZvIpeTqQwUNkCezM2FnlND8Iygqw"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
<script>
var url_theme = '<?php echo get_template_directory_uri(); ?>/';
var styles = [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.man_made","elementType":"labels.text.fill","stylers":[{"lightness":"0"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"lightness":"-63"}]},{"featureType":"road.arterial","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#92c0d3"}]}];
var center; //centre de la carte
var zoom;
var map; //la carte
var oms;
var allMarkers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('implantation-wap'), {
center: center,
zoom: zoom,
//disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
scrollwheel: false,
draggable : true,
styles: styles
});
oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nearbyDistance: 50,
circleSpiralSwitchover: Infinity,
circleFootSeparation : 50,
circleStartAngle : 3.14 / 6,
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
map.setZoom(zoom);
});
}
/* Gestion du zoom de la carte selon la largeur du viewport */
$(window).resize(function() {
if(window.matchMedia("(min-width: 769px)").matches){
center = {lat: 47.121, lng: -4.675392};
zoom = 6;
google.maps.event.trigger(map, "resize");
} else {
zoom = 5;
center = {lat: 49.132846, lng: 1.625977};
google.maps.event.trigger(map, "resize");
}
});
this.pinOn = {
'redPin' : url_theme + 'assets/images/red-pin.png',
'bluePin' : url_theme + 'assets/images/blue-pin.png',
'orgPin' : url_theme + 'assets/images/org-pin.png',
'purplePin' : url_theme + 'assets/images/purple-pin.png',
'multiPin' : url_theme + 'assets/images/mulit-pin.png',
'greenPin' : url_theme + 'assets/images/green-pin.png'
};
console.log(this.pinOn);
this.myAddress = <?php echo $societes;?>,
style = [
{ "hue": "#8800ff" },
{ "saturation": -95 },
{ "visibility": "on" }
];
console.log(myAddress);
if(window.matchMedia("(min-width: 769px)").matches){
center = {lat: 46.121, lng: -4.675392};
zoom = 6;
google.maps.event.trigger(map, "resize");
} else {
zoom = 5;
center = {lat: 49.132846, lng: 1.625977};
google.maps.event.trigger(map, "resize");
}
function loadContent(societe){
if(societe.data.imgLogo != ""){
$('#blocSociete .logoSociete').attr('src', societe.data.imgLogo);
$('#blocSociete .logoSociete').show();
}else{$('#blocSociete .logoSociete').hide();}
if(societe.data.society != ""){
$('#blocSociete .titre').html( societe.data.society);
$('#blocSociete .titre').show();
}else{$('#blocSociete .titre').hide();}
if(societe.data.filiere != ""){
$('#blocSociete .filiere span').html( societe.data.filiere);
$('#blocSociete .filiere').show();
}else{$('#blocSociete .filiere').hide();}
if(societe.data.responsable != ""){
$('#blocSociete .responsable span').html( societe.data.responsable);
$('#blocSociete .responsable').show();
}else{$('#blocSociete .responsable').hide();}
$('#blocSociete').removeClass();
if(societe.tag[0] != ""){
$('#blocSociete').addClass(societe.tag[0]);
}
if(societe.data.effective != ""){
$('#blocSociete .effectif span').html( societe.data.effective);
$('#blocSociete .effectif').show();
}else{$('#blocSociete .effectif').hide();}
if(societe.data.address1 != ""){
$('#blocSociete .adresse div').html( societe.data.address1);
$('#blocSociete .adresse').show();
}else{$('#blocSociete .adresse').hide();}
if(societe.data.contact != ""){
$('#blocSociete .contact span').html( societe.data.contact);
$('#blocSociete .contact').show();
}else{$('#blocSociete .contact').hide();}
if(societe.url != ""){
$('#blocSociete .url a').attr('href', societe.url);
$('#blocSociete .url a').html(societe.url);
$('#blocSociete .url').show();
}else{$('#blocSociete .url').hide();}
}
// ---- Gestion des clicks sur les filtres
$(".ckeckPin").click(function(event) {
event.preventDefault();
$(this).toggleClass('unckeck');
$.each(allMarkers, function (index, mark) {
if($("."+mark.tag).hasClass('unckeck')) {
mark.setVisible(false);
}else{
mark.setVisible(true);
}
});
});
$(document).ready(function() {
////////// POC ALERTE JOB///////////////
//Fonction lorsque l'on enregistre un mail pour les alertes
$('#submitEmail').on('click', function(e){
e.preventDefault();
var poles = $('#poles').val();
var metiers = $('#metiers').val();
var types = $('#types').val();
var temps = $('#temps').val();
var email = $('#email').val();
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
$.ajax({
url: ajaxurl,
type: 'POST',
dataType : 'json',
data: {
'action' : 'registerMailJobAlert',
'poles': poles,
'metiers': metiers,
'types': types,
'temps': temps,
'email': email,
},
success: function (result){
if(result == "ok"){
alert('email enregistré !');
$('#poles').val('all');
$('#metiers').val('all');
$('#types').val('all');
$('#temps').val('all');
$('#email').val('');
}
}
});
} else {
alert('email invalide');
}
})
////////// POC BOURSE///////////////
var mixedChart;
// Changement de périod sur le graphique de la bourse
$('.butt').on('click', function(e){
var element = $(this);
$('.butt').each(function(){
$(this).removeClass('active');
})
element.addClass('active');
var period = element.attr('data-period');
createGraph(period);
})
//Fonction qui génère le graphique en fonction de la période
function createGraph(period) {
$.ajax({
url: ajaxurl,
type: 'POST',
dataType : 'json',
data: {
'action' : 'getGraphData',
'period': period
},
success: function (result){
console.log(result);
try {
mixedChart.destroy();
} catch (error) {}
var ctx = document.getElementById("myChart").getContext('2d');
mixedChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Cours LDC',
data: result.values,
type: 'line',
yAxisID: 'values',
backgroundColor: 'rgba(255, 192, 192, 0)',
borderColor: 'rgba(229,28,32,1)',
datalabels: {
display:false,
color: '#000',
backgroundColor: 'rgba(229,28,32,1)',
borderRadius : 5,
font: {
size : '18',
lineHeight : 1,
weight: 'bold',
}
}
}],
labels: result.dates
},
options: {
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
aspectRatio : 2.5,
maintainAspectRatio: true,
responsive:true,
elements: {
line: {
tension: 0
},
point:{
radius: 0
}
},
layout: {
padding: {
top: 30,
bottom: 30
}
},
legend: {
display:false,
position: 'bottom',
labels:{
fontSize : 16
}
},
scales : {
xAxes:[{
scaleLabel: {
display: true,
labelString: 'Jour',
fontSize : 14
},
ticks: {
//beginAtZero: false,
fontSize : 14
}
}],
yAxes:[{
id: 'values',
display: true,
scaleLabel: {
display: true,
labelString: '€',
fontSize : 16
},
ticks: {
beginAtZero: false,
fontSize : 16
}
}]
},
}
});
}
})
}
//Init du graph de la bourse sur 5j
createGraph(5);
initMap();
$.each(myAddress, function (index, societe) {
var mark = new google.maps.Marker({
position: {
lat: parseFloat(societe.lat),
lng: parseFloat(societe.lng)
},
icon: societe.options.icon,
animation: google.maps.Animation.DROP,
tag: societe.tag[0]
});
oms.addMarker(mark);
mark.addListener('spider_click', function() {
if(window.matchMedia("(min-width: 769px)").matches){
if($('#blocSociete').css('opacity') == 0){
loadContent(societe);
$('div#blocSociete').show();
$('div#blocSociete').animate({opacity: "1"}, 200);
} else {
$('div#blocSociete').animate({opacity: "0"}, 200, function(){loadContent(societe);});
$('div#blocSociete').animate({opacity: "1"}, 200);
}
} else {
$('#blocSociete').css('opacity',1);
if($('#blocSociete').is(":visible")){
$('#blocSociete').slideUp(400, function(){loadContent(societe);});
$('#blocSociete').slideDown(400);
} else {
loadContent(societe);
$('#blocSociete').slideDown(400);
}
}
});
allMarkers.push(mark);
});
////////////////////////POC GRAPHIQUE
var count = $('.graphique li').length;
console.log(count);
var rot = 0;
var rot2 = 0;
$('.graphique li').each(function(index, element){
var percent = $(this).attr('data-percent');
var angle = (360 * percent)/100;
rot = rot + angle;
rot2 = rot - (angle/2);
var height = (200 * percent)/100 + 34;
var margin = height / 2;
$(this).attr('style', 'transform : rotate('+rot2+'deg) translate(115px) rotate(-'+rot2+'deg); margin:-'+margin+'px;')
})
});
</script>