Une première version de l'application.
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
svg-pan-zoom.min.js
|
||||
tinycolor-min.js
|
||||
5
Makefile
Normal file
@ -0,0 +1,5 @@
|
||||
svg-pan-zoom.min.js:
|
||||
wget https://raw.githubusercontent.com/bumbu/svg-pan-zoom/master/dist/svg-pan-zoom.min.js
|
||||
|
||||
tinycolor.min.js:
|
||||
wget https://raw.githubusercontent.com/bgrins/TinyColor/master/dist/tinycolor-min.js
|
||||
BIN
PhotosPlans/et-1.jpg
Executable file
|
After Width: | Height: | Size: 376 KiB |
BIN
PhotosPlans/et0.jpg
Executable file
|
After Width: | Height: | Size: 1014 KiB |
BIN
PhotosPlans/et1.jpg
Executable file
|
After Width: | Height: | Size: 646 KiB |
BIN
PhotosPlans/et2.jpg
Executable file
|
After Width: | Height: | Size: 434 KiB |
BIN
PhotosPlans/et3.jpg
Executable file
|
After Width: | Height: | Size: 333 KiB |
BIN
PhotosPlans/et4.jpg
Executable file
|
After Width: | Height: | Size: 484 KiB |
523
et2.svg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
2060
et3.svg
Normal file
|
After Width: | Height: | Size: 310 KiB |
9064
et4.svg
Normal file
|
After Width: | Height: | Size: 680 KiB |
50
sallesQuery.php
Normal file
@ -0,0 +1,50 @@
|
||||
<?php
|
||||
|
||||
// Connection à la BDD:
|
||||
try {
|
||||
$conn = new PDO("mysql:host=localhost;dbname=savrillo", savrillo, "BHTvo0JfS");
|
||||
// set the PDO error mode to exception
|
||||
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
} catch(PDOException $e) {
|
||||
echo "Connection failed: " . $e->getMessage();
|
||||
}
|
||||
|
||||
|
||||
if($_GET["salle"] != NULL) {
|
||||
|
||||
$idSalle = $_GET["salle"];
|
||||
|
||||
$aliaz = array();
|
||||
|
||||
$stmt = $conn->prepare("SELECT nom FROM salleAlias WHERE salleID=?");
|
||||
$stmt->execute([$idSalle]);
|
||||
$resA = $stmt->fetchAll();
|
||||
|
||||
for($i=0;$i<count($resA);$i++)
|
||||
$aliaz[$i] = $resA[$i]['nom'];
|
||||
|
||||
$locataires = array();
|
||||
|
||||
$stmt = $conn->prepare("SELECT personne FROM locataire WHERE salle=?");
|
||||
$stmt->execute([$idSalle]);
|
||||
$resP = $stmt->fetchAll();
|
||||
|
||||
for($i=0;$i<count($resP);$i++)
|
||||
$locataires[$i] = $resP[$i]['nom'];
|
||||
|
||||
|
||||
$stmt = $conn->prepare("SELECT id, nom, description FROM salles WHERE id=?");
|
||||
$stmt->execute([$idSalle]);
|
||||
$resS = $stmt->fetchAll();
|
||||
|
||||
|
||||
if(count($resS)==0){
|
||||
echo "404";
|
||||
}else {
|
||||
$out = array("id" => $resS[0]["id"], "nom" => $resS[0]["nom"], "description" => $resS[0]["description"], "aliaz" => $aliaz, "locataires" => $locataires);
|
||||
echo (json_encode($out));
|
||||
}
|
||||
|
||||
}else {
|
||||
echo "Je ne connais pas cette commande ...";
|
||||
}
|
||||
121
viewer.html
Normal file
@ -0,0 +1,121 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>perdu.html</title>
|
||||
<style>
|
||||
|
||||
#selectedSalleInfos {
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript" src="./svg-pan-zoom.min.js"></script>
|
||||
<script type="text/javascript" src="./tinycolor.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function httpGetAsync(theUrl, callback)
|
||||
{
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function() {
|
||||
if (xmlHttp.readyState == 4)
|
||||
callback(xmlHttp.responseText, xmlHttp.status);
|
||||
}
|
||||
xmlHttp.open("GET", theUrl, true);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
|
||||
function initSvgSupport() {
|
||||
|
||||
var plan = document.getElementById('plan');
|
||||
|
||||
svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
|
||||
|
||||
var salles = plan.contentDocument.getElementsByClassName('svg-salle');
|
||||
var outputDiv = document.getElementById('selectedSalleInfos');
|
||||
|
||||
console.log(salles.length);
|
||||
|
||||
function selectSalle(e) {
|
||||
if(document.lastSelectedSalle != null) {
|
||||
document.lastSelectedSalle.style.fill = document.lastSelectedSalleFColor;
|
||||
document.lastSelectedSalle.style.fill_opacity = document.lastSelectedSalleFOpacity;
|
||||
}
|
||||
|
||||
document.lastSelectedSalle = e.target;
|
||||
|
||||
httpGetAsync("https://perso.ens-lyon.fr/samy.avrillon/sallesQuery.php?salle="+e.target.id.substring("path-salle-".length),function (s,errcode){
|
||||
try{
|
||||
ss = JSON.parse(s)
|
||||
if(document.lastSelectedSalle.id==("path-salle-"+ss["id"])){
|
||||
if(errcode==200){
|
||||
outputDiv.innerHTML = s;
|
||||
}else
|
||||
outputDiv.innerHTML = "Erreur lors de l'appel à l'interface php: ERREUR "+errcode;
|
||||
}
|
||||
} catch(err){console.error("Les données récupéréés de cette salle ne sont pas valides.");console.error(err)}
|
||||
}
|
||||
);
|
||||
|
||||
document.lastSelectedSalleFColor = e.target.style.fill
|
||||
document.lastSelectedSalleFOpacity = e.target.style.fill_opacity
|
||||
|
||||
|
||||
e.target.style.fill = tinycolor(e.target.style.fill).saturate(100).brighten(50).toHexString();
|
||||
}
|
||||
|
||||
for (var i = 0; i < salles.length; i++) {
|
||||
salles[i].addEventListener('click', selectSalle);
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<form>
|
||||
<label for="selector_site_M"> Site </label>
|
||||
<input type="radio" name="site" value="M" id=selector_site_M" selected="true">Monod</input>
|
||||
<input type="radio" name="site" value="D" id=selector_site_D">Descartes</input>
|
||||
|
|
||||
<label for="selector_batiment">Bâtiment : </label>
|
||||
<select name="batiment" id="selector_batiment">
|
||||
<option value="GN4">MGN1</option>
|
||||
</select>
|
||||
|
|
||||
<label for="selector_etage">Étage : </label>
|
||||
<select name="etage" id="selector_etage">
|
||||
<option value="-1">Sous-sol</option>
|
||||
<option value="0">Rez-de chaussée</option>
|
||||
<option value="1">Premier étage</option>
|
||||
<option value="1+">Premier étage plus</option>
|
||||
<option value="2">Deuxième étage</option>
|
||||
<option value="3">Troisième étage</option>
|
||||
<option value="4">Quatrième étage</option>
|
||||
</select>
|
||||
|
||||
</form>
|
||||
|
||||
<br/>
|
||||
|
||||
<object type="image/svg+xml"
|
||||
data="https://perso.ens-lyon.fr/samy.avrillon/et3.svg"
|
||||
id="plan"
|
||||
onload="initSvgSupport()">
|
||||
|
||||
Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
|
||||
|
||||
</object>
|
||||
|
||||
<form>
|
||||
<input name="searchString" type="text"/>
|
||||
</form>
|
||||
<div id="selectedSalleInfos">
|
||||
Il faut que vous sélectionnez une salle.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||