Your IP : 216.73.216.65
<style>
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.card {
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: #2563eb;
color: white;
padding: 1rem;
}
.header h1 {
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.error-message {
margin-top: 0.5rem;
background: #1d4ed8;
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.content {
padding: 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
#map {
height: 500px;
border-radius: 0.5rem;
overflow: hidden;
}
.coordinates {
background: #f8fafc;
padding: 1rem;
border-radius: 0.5rem;
}
.coordinates h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: #1e293b;
}
.coordinate-box {
background: white;
padding: 0.75rem;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.coordinate-box p:first-child {
color: #64748b;
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
.coordinate-box p:last-child {
font-family: monospace;
font-size: 1.125rem;
}
@media (max-width: 1000px) {
.content {
grid-template-columns: 1fr;
}
}
</style>
<form enctype="multipart/form-data" method="post" autocomplete="off">
<div class="container1">
<h5 class="btn-lg btn-warning">NOUVEAU SITE DE CONSOMMATION</h5>
<div class="row">
<div class="col-md-6">
<div id="map"></div>
</div>
<div class="col-md-3">
<p>Type de site :
<select name="conso_type" id="type" onchange="updateList1(this.value)" class="form-control" required>
<option value="CC">Site de consommation</option>
<option value="BC">Borne de recharge existante</option>
<option value="BCP">Borne de recharge projet</option>
</select></p>
<div id="bp">
<p>Nombre de bornes à créer :
<select name="nbb" id="nbb" onchange="updateList3(this.value)" class="form-control" required>
<option value="111">une borne en 2x 11kw</option>
<option value="122">une borne en 2x 22kw</option>
<option value="211">deux bornes en 2x 11kw</option>
<option value="222">deux bornes en 2x 22kw</option>
<option value="311">trois bornes en 2x 11kw</option>
<option value="322">trois bornes en 2x 22kw</option>
<option value="411">quatre bornes en 2x 11kw</option>
<option value="422">quatre bornes en 2x 22kw</option>
<option value="511">cinq bornes en 2x 11kw</option>
<option value="522">cinq bornes en 2x 22kw</option>
<option value="611">six bornes en 2x 11kw</option>
<option value="911">Station IRVE complète 9 bornes</option>
</select></p>
</div>
<p> Nom du site : <input class="form-control" type="Text" name="site_nom"/>
<p> Adresse : <input class="form-control" type="Text" name="site_adresse"/>
<p> Num PDL : <input class="form-control" type="Text" name="PDL"/>
<p>Latitude</p>
<p id="lat">-</p>
<p>Longitude</p>
<p id="lng">-</p>
<input type="hidden" id="lng1" name="longitude" value="" />
<input type="hidden" id='lat1' name="latitude" value="" />
<input type="hidden" name="site_type" value="Conso" />
<input type="hidden" name="ID_pmo" value="<?php echo $IDpmo; ?>" />
</div>
<div class="col-md-3">
<div id="raccV">
<p>Type de raccordement :
<select name="racc" id="racc" onchange="updateList2(this.value)" class="form-control" required>
<option value="C5">Basse tension < 36kw / C5</option>
<option value="C4">Basse tension > 36kw et < 250kw / C4</option>
<option value="C3">HTA via courbe profilée < 250kw / C3 </option>
<option value="C2">HTA via courbe mesurée > 250kw / C2</option>
</select></p>
</div>
<div id="raccV1">
<input type="hidden" id="racc" name="racc" value="" />
</div>
<?php
$list1 = $dbco->prepare("SELECT * FROM gest_acc_pmo_abos ORDER BY abo_appel ASC");
$list1->execute();
?>
<p>Type d'abonnement :
<select name="abo" class="form-control" required>
<?php while( $R1 = $list1->fetch(PDO::FETCH_OBJ)){
if($R1->abo_creneau == 1){
echo '<option value="'.$R1->ID_abo.'">'.$R1->abo_appel.' / '.$R1->abo_segment.' / HC '.$R1->abo_hc1_start.' - '.$R1->abo_hc1_stop.' </option>'; }
if($R1->abo_creneau == 2){
echo '<option value="'.$R1->ID_abo.'">'.$R1->abo_appel.' / '.$R1->abo_segment.' / HC '.$R1->abo_hc1_start.' - '.$R1->abo_hc1_stop.' / '.$R1->abo_hc2_start.' - '.$R1->abo_hc2_stop.' </option>'; }
}?>
</select></p>
<div id="ccdl">
<p> Courbe de charge ENEDIS : <input name="CC" type="file" required/><br>
</div>
<button type="button" class="btn btn-secondary btn-lg btn-block" id='valid2' onclick="getValue();">Vérifier</button>
<input class="btn btn-success" type="Submit" name="NSCE" id='valid' value="Enregistrer" /><br>
</div>
</div>
</div>
</form>
<script>
const DEFAULT_LOCATION = { lat: 51, lng: 2 };
let map, marker, latitude, longitude;
function initMap() {
// Fonction pour mettre à jour l'affichage des coordonnées
function updateCoordinates(position) {
document.getElementById('lat').textContent = position.lat.toFixed(6);
document.getElementById('lng').textContent = position.lng.toFixed(6);
latitude = position.lat.toFixed(5);
longitude = position.lng.toFixed(5);
}
// Fonction pour initialiser la carte avec une position
function createMap(position) {
map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: 15,
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{ visibility: "off" }]
}]
});
// Créer le marqueur
marker = new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP
});
// Mettre à jour les coordonnées initiales
updateCoordinates(position);
// Ajouter l'écouteur de clic sur la carte
map.addListener('click', (e) => {
const position = {
lat: e.latLng.lat(),
lng: e.latLng.lng()
};
marker.setPosition(position);
updateCoordinates(position);
});
}
// Tenter d'obtenir la position de l'utilisateur
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
createMap(userLocation);
},
(error) => {
console.error('Erreur de géolocalisation:', error);
const errorContainer = document.getElementById('error-container');
errorContainer.innerHTML = `
<div class="error-message">
Permission de géolocalisation refusée - Utilisation de la position par défaut (51°N, 2°E)
</div>
`;
createMap(DEFAULT_LOCATION);
},
{
timeout: 5000,
enableHighAccuracy: true
}
);
} else {
console.error('La géolocalisation n\'est pas supportée');
createMap(DEFAULT_LOCATION);
}
}
window.initMap = initMap;
document.getElementById("valid").style.display = "none";
document.getElementById("valid2").style.display = "block";
function getValue() {
document.getElementById("lat1").value = latitude;
document.getElementById("lng1").value = longitude;
document.getElementById("valid").style.display = "block";
document.getElementById("valid2").style.display = "none";
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJK0GVBASHQUIFbE3NudYEWFtodD9bM_s&callback=initMap"></script>
<script>
document.getElementById("bp").style.display = "none";
function updateList1(A) {
if (A === "BCP") {
document.getElementById("bp").style.display = "block";
document.getElementById("raccV").style.display = "none";
document.getElementById("ccdl").style.display = "none";
document.getElementById("raccV1").style.display = "block";
} else if (A != "BCP") {
document.getElementById("bp").style.display = "none";
document.getElementById("raccV").style.display = "block";
document.getElementById("ccdl").style.display = "block";
document.getElementById("raccV1").style.display = "none";
}
}
function updateList3(A) {
document.getElementById("raccV").style.display = "none";
if ((A === "111")||(A === "121")||(A === "211")) {
document.getElementById("racc").style.display = "none";
document.getElementById("racc").innerHTML="C5";}
if (A > 211) {
document.getElementById("racc").style.display = "none";
document.getElementById("racc").innerHTML="C4";}
}
</script>