forked from vergnet/site-accueil-insa
les maps
This commit is contained in:
Guillaume Joffre
parent
c0a5f12777
commit
ac14795c8a
10 changed files with 561 additions and 439 deletions
|
|
@ -2,16 +2,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 90vw;
|
||||
aspect-ratio: 1220/710;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
max-width: 800px;
|
||||
|
|
@ -25,8 +15,74 @@ section {
|
|||
padding: 50px;
|
||||
}
|
||||
|
||||
#maps {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 5vh auto auto;
|
||||
width: 90vw;
|
||||
min-height: 50vh;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
iframe {
|
||||
#maps {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*iframe {
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 90vw;
|
||||
aspect-ratio: 1220/710;
|
||||
border: 0;
|
||||
}*/
|
||||
|
||||
|
||||
.change-map-button {
|
||||
cursor: pointer;
|
||||
border: solid 2px #c49621;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.animated {
|
||||
background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
|
||||
background-size: auto auto;
|
||||
background-clip: border-box;
|
||||
background-size: 200% auto;
|
||||
color: #fff;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textclip 2s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes textclip {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.change-map-button:after {
|
||||
content: "2D";
|
||||
}
|
||||
|
||||
body.flat .change-map-button:after {
|
||||
content: "3D";
|
||||
}
|
||||
|
||||
body.flat #map3d {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#map2d {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.flat #map2d {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<?php
|
||||
$selector = ['gymnase', 'bib', 'ru', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
|
||||
|
||||
$selector = ['gymnase', 'ru_bib', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
|
||||
|
||||
|
||||
//attention, les éléments sont dans l'ordre
|
||||
$title = [
|
||||
'Le gymnase',
|
||||
'bib\'insa et cafet',
|
||||
'le ru',
|
||||
'ru, bib\'insa et cafet',
|
||||
'Le CSH',
|
||||
'Le bâtiment des TPs',
|
||||
'Le STPI, amphi Riquet et amphi Vinci',
|
||||
|
|
@ -33,8 +33,7 @@ $title = [
|
|||
|
||||
$desc = [
|
||||
'Parce qu\'à l\'INSA on fait aussi du sport.',
|
||||
'Ton repère si tu aimes le travail de groupe.\n<br><br>\nEt juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.',
|
||||
'Sympa, convivial, grand avant 12h13.',
|
||||
'Le RU: Sympa, convivial, grand avant 12h13.<br><br>La Bib: Ton repère si tu aimes le travail de groupe.<br><br>Et juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.',
|
||||
'LE bâtiment avec TOUTES tes matières préférées : en plus de l\'anglais et des autres langues enseignées à l\'INSA, on t\'y parle aussi d\'Expression, de Gestion, de Philo, de PPI...youpi !',
|
||||
'Nom bizarre pour un bâtiment mais tu y iras seulement pour les TP d\'Electrocinétique et d\'Optique\n',
|
||||
'Le bâtiment des salles de cours classiques, avec son bureau des stages, son administration des premières années, et...ses sous-sols.\n\nY\'a aussi l\'amphi Vinci (et ses 300 places, souvent occupées en même temps sauf étonnamment en gestion) et l\'amphi Riquet (pour Pierre-Paul, celui qui a initié la construction du canal, il est plus petit mais plus convivial).',
|
||||
|
|
@ -61,16 +60,19 @@ $desc = [
|
|||
|
||||
|
||||
|
||||
//c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard <- moi) utilisait inutilement une base de donnée
|
||||
//c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard & Guillaume Joffre (shameless promotion)) utilisait inutilement une base de donnée
|
||||
|
||||
if (isset($_GET['function'])) {
|
||||
if (htmlspecialchars($_GET['function']) == "get_map_info")
|
||||
$_POST = json_decode(file_get_contents('php://input'), true);
|
||||
|
||||
if (isset($_POST["function"])) {
|
||||
if (htmlspecialchars($_POST['function']) == "get_map_info")
|
||||
get_map_info();
|
||||
elseif (htmlspecialchars($_GET['function']) == "get_map_selectors")
|
||||
elseif (htmlspecialchars($_POST['function']) == "get_map_selectors")
|
||||
get_map_selectors();
|
||||
}
|
||||
|
||||
function get_map_selectors() {
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
global $selector;
|
||||
|
|
@ -85,9 +87,9 @@ function get_map_selectors() {
|
|||
}
|
||||
|
||||
function get_map_info() {
|
||||
if (isset($_GET['selector'])) {
|
||||
if (isset($_POST['selector'])) {
|
||||
|
||||
$select = htmlspecialchars($_GET['selector']);
|
||||
$select = htmlspecialchars($_POST['selector']);
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
|
|
@ -109,3 +111,7 @@ function show_error() {
|
|||
echo "Échec : ";
|
||||
var_dump($_GET);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
38
assets/map/alert.js
Normal file
38
assets/map/alert.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
function CustomAlert(){
|
||||
this.alert = function(message,title){
|
||||
document.body.innerHTML = document.body.innerHTML + '<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>';
|
||||
|
||||
let dialogoverlay = document.getElementById('dialogoverlay');
|
||||
let dialogbox = document.getElementById('dialogbox');
|
||||
|
||||
let winH = window.innerHeight;
|
||||
dialogoverlay.style.height = winH+"px";
|
||||
|
||||
dialogbox.style.top = "100px";
|
||||
|
||||
dialogoverlay.style.display = "block";
|
||||
dialogbox.style.display = "block";
|
||||
|
||||
document.getElementById('dialogboxhead').style.display = 'block';
|
||||
|
||||
if(typeof title === 'undefined') {
|
||||
document.getElementById('dialogboxhead').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('dialogboxhead').innerHTML = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> '+ title;
|
||||
}
|
||||
document.getElementById('dialogboxbody').innerHTML = message;
|
||||
document.getElementById('dialogboxfoot').innerHTML = '<button class="pure-material-button-contained active" onclick="customAlert.ok()">OK</button>';
|
||||
}
|
||||
|
||||
this.ok = function(){
|
||||
document.getElementById('dialogbox').style.display = "none";
|
||||
document.getElementById('dialogoverlay').style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
let customAlert = new CustomAlert();
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
<?php
|
||||
//ce fichier doit être inclut dans une page html avec un iframe de telle sorte à ce que tout les liens dans les js soient OK.
|
||||
require_once 'ajax.php';
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map loading */
|
||||
#loading-screen {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
/*top: 0; */
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
background-color: #000000;
|
||||
opacity: 1;
|
||||
transition: 1s opacity;
|
||||
}
|
||||
|
||||
#loading-screen.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 40vh;
|
||||
height: 40vh;
|
||||
margin: -20vh 0 0 -20vh;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #9370DB;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #BA55D3;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
.loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FF00FF;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#map_section {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
margin-top: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function enable3DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
var map = document.querySelector('#maps #map');
|
||||
|
||||
map3d.classList.add("hidden");
|
||||
map.classList.add("hidden");
|
||||
map3d.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function enable2DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
var map = document.querySelector('#maps #map');
|
||||
map.classList.add("hidden");
|
||||
map3d.classList.add("hidden");
|
||||
map.classList.remove("hidden");
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="map_section">
|
||||
<div id="maps_button">
|
||||
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
|
||||
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
|
||||
</div>
|
||||
|
||||
<section id="loading-screen">
|
||||
<div class="loader"></div>
|
||||
</section>
|
||||
|
||||
<div id="maps" class="">
|
||||
<script src="script_map3d.js" type="module"></script>
|
||||
|
||||
<div id="map" class="hidden">
|
||||
<?php echo file_get_contents("map2d.svg"); ?>
|
||||
<canvas id="canvasID"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="script_map2d.js"></script>
|
||||
</section>
|
||||
9
assets/map/map2D.php
Normal file
9
assets/map/map2D.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?php
|
||||
|
||||
require_once 'ajax.php';
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<?php echo file_get_contents("assets/map/map2d.svg"); ?>
|
||||
<script type="text/javascript" src="assets/map/script_map2d.js"></script>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
preserveAspectRatio="xMinYMin meet"
|
||||
viewBox="0 0 600 800"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
id="map2d"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="map.svg">
|
||||
<metadata
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 565 KiB After Width: | Height: | Size: 565 KiB |
105
assets/map/map3D.php
Normal file
105
assets/map/map3D.php
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<?php
|
||||
|
||||
|
||||
|
||||
require_once 'ajax.php';
|
||||
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
#loading-screen {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
/*top: 0; */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: 1s opacity;
|
||||
}
|
||||
|
||||
#loading-screen.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 40vh;
|
||||
height: 40vh;
|
||||
margin: -20vh 0 0 -20vh;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #9370DB;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #BA55D3;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
.loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FF00FF;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div id="loading-screen">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<script src="assets/map/script_map3d.js" type="module"></script>
|
||||
|
|
@ -2,47 +2,64 @@
|
|||
let hoverColor = "#e9b82f";
|
||||
let normalColor = "#efbd95";
|
||||
|
||||
var rep2 = "";
|
||||
const rep2 = "assets/map";
|
||||
|
||||
function get_name(id){
|
||||
return id.replace("map-", "");
|
||||
}
|
||||
|
||||
function clicked(elem) {
|
||||
$.alert({
|
||||
title: 'Chargement...',
|
||||
content: function () {
|
||||
let self = this;
|
||||
let object = {
|
||||
|
||||
|
||||
let payload = {
|
||||
"function": 'get_map_info',
|
||||
'selector': get_name(elem.id),
|
||||
};
|
||||
return $.ajax({
|
||||
url: rep2+'ajax.php',
|
||||
data: object,
|
||||
method: 'get'
|
||||
}).done(function (data) {
|
||||
if (data.length > 0) {
|
||||
self.setTitle(data[0]['title']);
|
||||
self.setContent(data[0]['description']);
|
||||
} else {
|
||||
self.setTitle('Erreur');
|
||||
self.setContent('Une erreur est survenue')
|
||||
|
||||
function doChecks(response) {
|
||||
if (!response.ok) {
|
||||
throw Error(response.statusText);
|
||||
}
|
||||
}).fail(function(){
|
||||
self.setContent('Something went wrong.');
|
||||
});
|
||||
},
|
||||
return response;
|
||||
}
|
||||
|
||||
function readIt(response) {
|
||||
return response.json()
|
||||
}
|
||||
|
||||
fetch(rep2 + '/' + 'ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
}).then(doChecks).then(readIt).then((data) => {
|
||||
if (data.length > 0) {
|
||||
Swal.fire({
|
||||
title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
|
||||
html: data[0]['description']
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: "Erreur",
|
||||
html: "Une erreur est survenue",
|
||||
timer: 3000,
|
||||
timerProgressBar: true
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function hover_in(elem){
|
||||
$(elem).css({
|
||||
"fill": hoverColor,
|
||||
'cursor': 'pointer',
|
||||
});
|
||||
const css = elem.style
|
||||
|
||||
css.fill = hoverColor
|
||||
css.cursor = "pointer"
|
||||
}
|
||||
|
||||
function hover_out(elem){
|
||||
$(elem).css("fill", normalColor);
|
||||
elem.style.fill = normalColor
|
||||
}
|
||||
|
|
@ -3,7 +3,10 @@
|
|||
* Code : Ronan Bonnet
|
||||
*
|
||||
*/
|
||||
var rep = "";
|
||||
|
||||
|
||||
/** repository containing this script and the map3D.glb **/
|
||||
var rep = "./assets/map";
|
||||
|
||||
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
|
||||
|
||||
|
|
@ -25,6 +28,7 @@ render();
|
|||
|
||||
var height, width;
|
||||
|
||||
|
||||
/**
|
||||
* Initializes the 3D plan
|
||||
* Creates and loads every needed things
|
||||
|
|
@ -35,13 +39,15 @@ function init() {
|
|||
//
|
||||
// Creates HTML
|
||||
//
|
||||
var maps = document.getElementById("maps");
|
||||
|
||||
container = document.createElement('div');
|
||||
container.id = 'map3d';
|
||||
|
||||
height = document.querySelector('#maps').clientHeight;
|
||||
width = document.querySelector('#maps').clientWidth;
|
||||
var svg = document.querySelector('#maps #map');
|
||||
document.querySelector('#maps').insertBefore(container, svg);
|
||||
height = maps.clientHeight;
|
||||
width = maps.clientWidth;
|
||||
|
||||
maps.appendChild(container);
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -86,7 +92,7 @@ function init() {
|
|||
//
|
||||
var loader = new GLTFLoader(loadingManager);
|
||||
|
||||
loader.load(rep+'map3D.glb', function(gltf) {
|
||||
loader.load(rep + '/' + 'map3D.glb', function(gltf) {
|
||||
var object = gltf.scene;
|
||||
gltf.scene.scale.set( 2, 2, 2 );
|
||||
gltf.scene.position.x = 0; //Position (x = right+ left-)
|
||||
|
|
@ -96,7 +102,6 @@ function init() {
|
|||
scene.add(gltf.scene);
|
||||
|
||||
render();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -153,24 +158,34 @@ function init() {
|
|||
|
||||
}
|
||||
|
||||
function doChecks(response) {
|
||||
if (!response.ok) {
|
||||
throw Error(response.statusText);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
function readIt(response) {
|
||||
return response.json()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all the selectors (buildings identifiers)
|
||||
* @returns Array with all the selectors
|
||||
*/
|
||||
function getSelectors() {
|
||||
let info = {};
|
||||
let object = {
|
||||
"function": 'get_map_selectors',
|
||||
'info': info,
|
||||
}
|
||||
return $.ajax({
|
||||
url: rep+'ajax.php',
|
||||
data: object,
|
||||
method: 'get',
|
||||
success: function(data){
|
||||
|
||||
const payload = {
|
||||
"function": 'get_map_selectors'
|
||||
}
|
||||
});
|
||||
|
||||
return fetch(rep + '/' + 'ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
}).then(doChecks).then(readIt)
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -191,60 +206,60 @@ function handleClickOnBuilding(x,y) {
|
|||
if (intersects.length > 0) {
|
||||
|
||||
var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on
|
||||
|
||||
console.debug(selector)
|
||||
// Wait for getSelectors() to be done
|
||||
// If we do not wait, everything will be executed before checking what is inside the database
|
||||
$.when(getSelectors().done(function(data) {
|
||||
getSelectors().then((data) => {
|
||||
if (data.map(x => x.selector).includes(selector)){
|
||||
// Use the same thing as the one for the 2D map
|
||||
$.alert({
|
||||
title: 'Chargement...',
|
||||
content: function () {
|
||||
let self = this;
|
||||
let object = {
|
||||
|
||||
let payload = {
|
||||
"function": 'get_map_info',
|
||||
'selector': selector,
|
||||
};
|
||||
return $.ajax({
|
||||
url: rep+'ajax.php',
|
||||
data: object,
|
||||
method: 'get'
|
||||
}).done(function (data) {
|
||||
|
||||
fetch(rep + '/' + 'ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
}).then(doChecks).then(readIt).then((data) => {
|
||||
if (data.length > 0) {
|
||||
self.setTitle(data[0]['title']);
|
||||
self.setContent(data[0]['description']);
|
||||
Swal.fire({
|
||||
title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
|
||||
html: data[0]['description']
|
||||
})
|
||||
} else {
|
||||
self.setTitle('Erreur');
|
||||
self.setContent('Une erreur est survenue')
|
||||
return;
|
||||
Swal.fire({
|
||||
title: "Erreur",
|
||||
html: "Une erreur est survenue",
|
||||
timer: 3000,
|
||||
timerProgressBar: true
|
||||
})
|
||||
}
|
||||
}).fail(function(){
|
||||
self.setContent('Something went wrong.');
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
}));
|
||||
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the position where the user clicked (mouse) on a building and process it
|
||||
*/
|
||||
function onClick() {
|
||||
function onClick(e) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
height = document.querySelector('#maps').clientHeight;
|
||||
width = document.querySelector('#maps').clientWidth;
|
||||
e.preventDefault();
|
||||
|
||||
//height = document.querySelector('#maps').clientHeight;
|
||||
//width = document.querySelector('#maps').clientWidth;
|
||||
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
|
||||
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
|
||||
mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
|
||||
mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
|
||||
handleClickOnBuilding(mouse.x, mouse.y);
|
||||
|
||||
}
|
||||
|
|
@ -252,11 +267,11 @@ function onClick() {
|
|||
/**
|
||||
* Get the position where the user clicked (smartphone) on a building and process it
|
||||
*/
|
||||
function onTouchEnd() {
|
||||
function onTouchEnd(e) {
|
||||
var clientX, clientY;
|
||||
|
||||
clientX = event.changedTouches[0].clientX;
|
||||
clientY = event.changedTouches[0].clientY;
|
||||
clientX = e.changedTouches[0].clientX;
|
||||
clientY = e.changedTouches[0].clientY;
|
||||
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
|
||||
|
|
@ -270,22 +285,22 @@ function onTouchEnd() {
|
|||
* Process something when the user moved the mouse over a building
|
||||
* @todo add text over the building
|
||||
*/
|
||||
function onMouseOver() {
|
||||
function onMouseOver(e) {
|
||||
|
||||
event.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
height = document.querySelector('#maps').clientHeight;
|
||||
width = document.querySelector('#maps').clientWidth;
|
||||
|
||||
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
|
||||
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
|
||||
mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
|
||||
mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
|
||||
|
||||
createTextOverBuilding(mouse.x,mouse.y)
|
||||
|
||||
}
|
||||
|
||||
|
||||
function createTextOverBuilding(x,y) {
|
||||
mouse.x = x;
|
||||
mouse.y = y;
|
||||
|
|
@ -300,10 +315,7 @@ function createTextOverBuilding(x,y) {
|
|||
console.log(intersects);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function makeLabelCanvas(baseWidth, size, name) {
|
||||
|
|
@ -352,8 +364,11 @@ function makeLabelCanvas(baseWidth, size, name) {
|
|||
*/
|
||||
function onWindowResize() {
|
||||
|
||||
height = document.querySelector('#main-content .inner').clientHeight;
|
||||
width = document.querySelector('#main-content .inner').clientWidth;
|
||||
var maps = document.getElementById("maps");
|
||||
|
||||
height = maps.clientHeight;
|
||||
width = maps.clientWidth;
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
|
|
|
|||
39
map.php
39
map.php
|
|
@ -2,20 +2,35 @@
|
|||
ob_start(); // Start reading html
|
||||
//header('Location: construction.php');
|
||||
?>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<main id ="reference">
|
||||
|
||||
<div class="box-jaune">
|
||||
<span class="corners corners-top"></span>
|
||||
<span class="corners corners-bottom"></span>
|
||||
|
||||
<div class="title">Carte de l'INSA</div>
|
||||
<div class="title">Carte de l'INSA - <span class="change-map-button animated" id="change-map-button">version : </span></div>
|
||||
|
||||
<span class="circles circles-top"></span>
|
||||
<span class="circles circles-bottom"></span>
|
||||
</div>
|
||||
|
||||
<iframe id="iframe-map" src="assets/map/iframe_map.php"></iframe>
|
||||
|
||||
|
||||
<div id="maps">
|
||||
|
||||
<!-- content will be included in #map3d -->
|
||||
<?php include('assets/map/map3D.php') ?>
|
||||
|
||||
<!-- content wil be in #map2d -->
|
||||
<?php include('assets/map/map2D.php') ?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Note -->
|
||||
<section>
|
||||
|
||||
<p>
|
||||
|
|
@ -23,20 +38,30 @@ ob_start(); // Start reading html
|
|||
ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
|
||||
</p>
|
||||
<p>
|
||||
Par exemple, GM 212, c'est au GM, deuxième étage.
|
||||
<br>
|
||||
Par exemple, GM 212, c'est au GM, deuxième étage.<br>
|
||||
Et si t'as Amphi 108, c'est au premier étage du STPI (c'est ton département et c'est là où il y a les amphis).
|
||||
</p>
|
||||
|
||||
<p id="hint">
|
||||
Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street
|
||||
Map</a>.
|
||||
Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street Map</a>.
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- needed for showing custom alert, JE FERAI UN TRUC MAISON PLUS TARD TKT -->
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<!--- Switch between 2D and 3d maps --->
|
||||
<script defer>
|
||||
const Thatbutton = document.getElementById("change-map-button");
|
||||
Thatbutton.addEventListener("click", (e) => {
|
||||
document.body.classList.toggle("flat");
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<?php
|
||||
$infopage = ["", "Plan", ob_get_clean(), "", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
|
||||
include("structure/template.php");
|
||||
|
|
|
|||
Loading…
Reference in a new issue