1463 lines
74 KiB
PHP
1463 lines
74 KiB
PHP
<?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>
|
||
|