mirror of
https://gitlab.aliens-lyon.fr/savrillo/gpens.git
synced 2026-03-18 01:51:04 +01:00
Move styles and update index.html
This commit is contained in:
Adrien Vannson
parent
1256c08c8a
commit
ab4b764924
293
index.html
293
index.html
@ -1,159 +1,144 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
<meta charset="UTF-8">
|
|
||||||
|
|
||||||
<title>perdu.html</title>
|
<title>GP(EN)S</title>
|
||||||
<style>
|
<link rel="stylesheet" href="resources/styles.css">
|
||||||
|
</head>
|
||||||
#searchResultInfos {
|
<body>
|
||||||
background-color: #BBBBBB;
|
|
||||||
|
<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 putWaitNetworkScreen()
|
||||||
|
{
|
||||||
|
outputDiv.innerHTML = "Récupération des informations auprès du serveur...";
|
||||||
|
}
|
||||||
|
|
||||||
|
function salleInfosToHtml(salle) {
|
||||||
|
titres = "<h2>"+salle.nom+"</h2>"+((salle.aliaz.length!=0)?(" ou <h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"");
|
||||||
|
locataires = salle.locataires.join(", ");
|
||||||
|
return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
#selectedSalleInfos {
|
document.lastSelectedSalle = e.target;
|
||||||
background-color: #BBBBBB;
|
window.clearTimeout(document.wnsTimeout);
|
||||||
line-height: 150%;
|
document.wnsTimeout = window.setTimeout(putWaitNetworkScreen, 400);
|
||||||
|
|
||||||
|
httpGetAsync("https://perso.ens-lyon.fr/samy.avrillon/gpens/api/salles.php?salle="+e.target.id.substring("path-salle-".length),function (s,errcode){
|
||||||
|
window.clearTimeout(document.wnsTimeout);
|
||||||
|
try{
|
||||||
|
if(s=="404"){
|
||||||
|
outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+document.lastSelectedSalle.id.substring("path-salle-".length);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ss = JSON.parse(s)
|
||||||
|
if(document.lastSelectedSalle.id==("path-salle-"+ss["id"])){
|
||||||
|
if(errcode==200){
|
||||||
|
outputDiv.innerHTML = salleInfosToHtml(ss);
|
||||||
|
}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)}
|
||||||
}
|
}
|
||||||
|
);
|
||||||
#selectedSalleInfos h2 {
|
|
||||||
display: inline;
|
document.lastSelectedSalleFColor = e.target.style.fill
|
||||||
}
|
document.lastSelectedSalleFOpacity = e.target.style.fill_opacity
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
e.target.style.fill = tinycolor(e.target.style.fill).saturate(100).brighten(50).toHexString();
|
||||||
<body>
|
}
|
||||||
|
|
||||||
<script type="text/javascript" src="./svg-pan-zoom.min.js"></script>
|
for (var i = 0; i < salles.length; i++) {
|
||||||
<script type="text/javascript" src="./tinycolor-min.js"></script>
|
salles[i].addEventListener('click', selectSalle);
|
||||||
|
}
|
||||||
<script type="text/javascript">
|
|
||||||
|
}
|
||||||
function httpGetAsync(theUrl, callback)
|
</script>
|
||||||
{
|
|
||||||
var xmlHttp = new XMLHttpRequest();
|
<form>
|
||||||
xmlHttp.onreadystatechange = function() {
|
<label for="selector_site_M"> Site </label>
|
||||||
if (xmlHttp.readyState == 4)
|
<input type="radio" name="site" value="M" id="selector_site_M" checked="true">Monod</input>
|
||||||
callback(xmlHttp.responseText, xmlHttp.status);
|
<input type="radio" name="site" value="D" id="selector_site_D">Descartes</input>
|
||||||
}
|
|
|
||||||
xmlHttp.open("GET", theUrl, true);
|
<label for="selector_batiment">Bâtiment : </label>
|
||||||
xmlHttp.send(null);
|
<select name="batiment" id="selector_batiment">
|
||||||
}
|
<option value="GN4">MGN1</option>
|
||||||
|
</select>
|
||||||
function putWaitNetworkScreen()
|
|
|
||||||
{
|
<label for="selector_etage">Étage : </label>
|
||||||
outputDiv.innerHTML = "Récupération des informations auprès du serveur...";
|
<select name="etage" id="selector_etage">
|
||||||
}
|
<option value="-1">Sous-sol</option>
|
||||||
|
<option value="0">Rez-de chaussée</option>
|
||||||
function salleInfosToHtml(salle) {
|
<option value="1">Premier étage</option>
|
||||||
titres = "<h2>"+salle.nom+"</h2>"+((salle.aliaz.length!=0)?(" ou <h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"");
|
<option value="1+">Premier étage plus</option>
|
||||||
locataires = salle.locataires.join(", ");
|
<option value="2">Deuxième étage</option>
|
||||||
return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
|
<option value="3">Troisième étage</option>
|
||||||
}
|
<option value="4">Quatrième étage</option>
|
||||||
|
</select>
|
||||||
function initSvgSupport() {
|
|
|
||||||
|
<input type="button" value="Vue d'ensemble" id="overviewButton" onclick="overviewButton"/>
|
||||||
var plan = document.getElementById('plan');
|
|
||||||
|
</form>
|
||||||
svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
|
|
||||||
|
<br/>
|
||||||
var salles = plan.contentDocument.getElementsByClassName('svg-salle');
|
|
||||||
var outputDiv = document.getElementById('selectedSalleInfos');
|
<object
|
||||||
|
type="image/svg+xml"
|
||||||
console.log(salles.length);
|
data="https://perso.ens-lyon.fr/samy.avrillon/gpens/maps/M-MGN1-3.svg"
|
||||||
|
id="plan"
|
||||||
function selectSalle(e) {
|
onload="initSvgSupport()"
|
||||||
if(document.lastSelectedSalle != null) {
|
>
|
||||||
document.lastSelectedSalle.style.fill = document.lastSelectedSalleFColor;
|
Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
|
||||||
document.lastSelectedSalle.style.fill_opacity = document.lastSelectedSalleFOpacity;
|
</object>
|
||||||
}
|
|
||||||
|
<div id="selectedSalleInfos">
|
||||||
document.lastSelectedSalle = e.target;
|
Il faut que vous sélectionnez une salle.
|
||||||
window.clearTimeout(document.wnsTimeout);
|
</div>
|
||||||
document.wnsTimeout = window.setTimeout(putWaitNetworkScreen, 400);
|
|
||||||
|
<hr/>
|
||||||
httpGetAsync("https://perso.ens-lyon.fr/samy.avrillon/gpens/api/salles.php?salle="+e.target.id.substring("path-salle-".length),function (s,errcode){
|
|
||||||
window.clearTimeout(document.wnsTimeout);
|
<form>
|
||||||
try{
|
<label for="salleNameSearch">Rechercher par nom de salle : </label> <input name="salleNameSearch" type="text" id="salleNameSearch"/> <input name="salleNameButton" type=button value="Rechercher" onclick="salleNameSearch" />
|
||||||
if(s=="404"){
|
<br/>
|
||||||
outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+document.lastSelectedSalle.id.substring("path-salle-".length);
|
<label for="salleLocSearch">Rechercher par locataire : </label> <input name="salleLocSearch" type="text" id="salleLocSearch"/> <input name="salleLocButton" type=button value="Rechercher" onclick="salleLocSearch" />
|
||||||
return;
|
</form>
|
||||||
}
|
|
||||||
ss = JSON.parse(s)
|
<div id="searchResultInfos">
|
||||||
if(document.lastSelectedSalle.id==("path-salle-"+ss["id"])){
|
Il faut que vous fassiez une recherche.
|
||||||
if(errcode==200){
|
</div>
|
||||||
outputDiv.innerHTML = salleInfosToHtml(ss);
|
|
||||||
}else
|
</body>
|
||||||
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" checked="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>
|
|
||||||
|
|
|
||||||
<input type="button" value="Vue d'ensemble" id="overviewButton" onclick="overviewButton"/>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<object type="image/svg+xml"
|
|
||||||
data="https://perso.ens-lyon.fr/samy.avrillon/gpens/maps/M-MGN1-3.svg"
|
|
||||||
id="plan"
|
|
||||||
onload="initSvgSupport()">
|
|
||||||
|
|
||||||
Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
|
|
||||||
|
|
||||||
</object>
|
|
||||||
|
|
||||||
<div id="selectedSalleInfos">
|
|
||||||
Il faut que vous sélectionnez une salle.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<label for="salleNameSearch">Rechercher par nom de salle : </label> <input name="salleNameSearch" type="text" id="salleNameSearch"/> <input name=salleNameButton" type=button value="Rechercher" onclick="salleNameSearch" />
|
|
||||||
<br/>
|
|
||||||
<label for="salleLocSearch">Rechercher par locataire : </label> <input name="salleLocSearch" type="text" id="salleLocSearch"/> <input name=salleLocButton" type=button value="Rechercher" onclick="salleLocSearch" />
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="searchResultInfos">
|
|
||||||
Il faut que vous fassiez une recherche.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
12
resources/styles.css
Normal file
12
resources/styles.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
#searchResultInfos {
|
||||||
|
background-color: #BBBBBB;
|
||||||
|
}
|
||||||
|
|
||||||
|
#selectedSalleInfos {
|
||||||
|
background-color: #BBBBBB;
|
||||||
|
line-height: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#selectedSalleInfos h2 {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user