iset3/TVJR
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

commit avant reprise

Browse Source
This commit is contained in:
adriy
2018-12-12 16:25:12 +01:00
commit 7a642a45f4
95 changed files with 33957 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
views/TV.ejs Executable file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Page TV</title>
<style>
.heading { color: black; }
</style>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function () {
var socket = io();
socket.on('Communication', function(msg){
var CommunicationJSON = JSON.parse(msg);
console.debug(CommunicationJSON)
CommunicationJSON.ListeCom.forEach(function(Communication){
switch (Communication.level) {
case "1":
$("#lvl1").append('<li class="caption center-align" data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</li>')
break;
case "2":
$("#lvl2").append('<li class="caption center-align" data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</li>')
break;
case "3":
$("#lvl3").append('<li class="caption center-align" data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</li>')
break;
default:
}
})
});
<% if(typeof zone != 'undefined') { %>
socket.emit("JoinZone", "<%= zone %>");
<% } %>
$("#btnJoin").click(function(){
socket.close().connect();
socket.emit("JoinZone", $("#zone").val());
})
});
</script>
</head>
<body>
<!--<div class="row">-->
<div class="slider">
<ul class="slides" id="lvl1">
</ul>
</div>
<div class="slider" >
<ul class="slides" id="lvl2">
</ul>
</div>
<div class="slider" >
<ul class="slides" id="lvl3">
</ul>
</div>
<!-- Section slider pour M3-->
<!--</div>-->
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// Slider
$(document).ready(function(){
$('.slider').slider({indicators: false})
});
</script>
<script>
<% if(typeof pub != 'undefined') {
for(var i=0;i<pub.length;i++){ %>
var x = "<%= pub[i].Type%>";
console.debug(x);
<%
switch (pub[i].Type) {
case 1: %>
$("#lvl1").append('<li class="caption center-align" data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></li>')
<%break;
case 2: %>
$("#lvl2").append('<li class="caption center-align" data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></li>')
<%break;
case 3: %>
$("#lvl3").append('<li class="caption center-align" data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></li>')
<%break;%>
<% } %>
<% } %>
var x = "<%= pub.length%>";
console.debug(x);
<% } %>
</script>
</body>
</html>

97
views/TV_old.ejs Normal file
View File

@@ -0,0 +1,97 @@
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; text-align: center;}
body { font: 13px Helvetica, Arial; }
#lvl3 {height: 20%;background-color: red; color:yellow; padding: 3px; position: fixed; bottom: 0; width: 100%; }
#lvl2 {height: 30%;}
#lvl1 {height: 50%;}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function () {
var socket = io();
socket.on('Communication', function(msg){
var CommunicationJSON = JSON.parse(msg);
console.debug(CommunicationJSON)
CommunicationJSON.ListeCom.forEach(function(Communication){
switch (Communication.level) {
case "1":
$("#lvl1").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
break;
case "2":
$("#lvl2").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
break;
case "3":
$("#lvl3").html('<div data-idPub="'+Communication.IDPub+'\">'+Communication.html+'</div>')
break;
default:
}
})
});
<% if(typeof zone != 'undefined') { %>
socket.emit("JoinZone", "<%= zone %>");
<% } %>
$("#btnJoin").click(function(){
socket.close().connect();
socket.emit("JoinZone", $("#zone").val());
})
});
</script>
</head>
<body>
<% if(typeof zone == 'undefined') { %>
<input type="text" id="zone" /><button id="btnJoin">Joindre</button>
<% } %>
<table>
<tr><td id="lvl1"></td></tr>
<tr><td id="lvl2"></td></tr>
<tr><td id="lvl3"></td></tr>
</table>
<script>
<% if(typeof pub != 'undefined') {
for(var i=0;i<pub.length;i++){ %>
var x = "<%= pub[i].Type%>";
console.debug(x);
<%
switch (pub[i].Type) {
case 1: %>
$("#lvl1").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
<%break;
case 2: %>
$("#lvl2").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
<%break;
case 3: %>
$("#lvl3").html('<div data-idPub="<%=pub[i].ID_Com%>"\><%=pub[i].Texte%></div>')
<%break;%>
<% } %>
<% } %>
var x = "<%= pub.length%>";
console.debug(x);
<% } %>
</script>
</body>
</html>

59
views/_index2.ejs Normal file
View File

@@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="static/script.js"></script>
<!--<script src="node_modules/trumbowyg/dist/trumbowyg.min.js"></script>
<link rel="stylesheet" href="node_modules/trumbowyg/dist/ui/trumbowyg.min.css">-->
<script>
/* $(document).ready(function() {
$('.com').summernote();
});*/
</script>
</head>
<body>
Zone cible <input id="zone">
<form action="">
<input type="hidden" class="lvl" value="1" />
Lvl 1 : <textarea class="com" name="editordata"></textarea><button>Send</button>
</form>
<form action="">
<input type="hidden" class="lvl" value="2" />
Lvl 2:<textarea class="com" name="editordata"></textarea><button>Send</button>
</form>
<form action="">
<input type="hidden" class="lvl" value="3" />
Lvl 3:<textarea class="com" name="editordata"></textarea><button>Send</button>
</form>
<button id="SendAll">Envoyer Tout</button><br/>
<iframe src="https://nodejs.adriy.be/mapsTest" style="width:100%;height:800px;"></iframe>
<script>
$('.com').tuiEditor({
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '300px'
});
</script>
</body>
</html>

95
views/_mapsTest.ejs Executable file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<script>
if (location.protocol != 'https:')
{
location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
}
</script>
<title>User-Editable Shapes</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="/static/Leaflet.Editable.js"></script>
<style>
#map { height: 500px; width: 80%}
</style>
</head>
<body>
<table><tr><td id="map">
</td><td><h1>Zone :</h1>
<table id="ListZone"><tr><th>Nom</th><th>Coo</th></tr>
<% for(var i = 0;i<data.length;i++){ %>
<tr><td><%= data[i].Nom %></td><td>#N<%=data[i].Nord %>#S<%=data[i].Sud %>#O<%=data[i].Ouest %>#E<%=data[i].Est %></td></tr>
<% } %>
</table>
Nom Zone : <input type="text" id="nomZone">
<button id="btnAddZone">Ajouter une zone</button>
</td></tr>
</table>
<script>
L.Popup = L.Popup.extend({
getEvents: function () {
var events = L.DivOverlay.prototype.getEvents.call(this);
if ('closeOnClick' in this.options ? this.options.closeOnClick : this._map.options.closePopupOnClick) {
//events.preclick = this._close;
}
if (this.options.keepInView) {
events.moveend = this._adjustPan;
}
return events;
},
});
var lstRect = new Array();
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map',{editable: true}).setView(center, 6);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
L.marker(center);
map.locate({setView: true, maxZoom: 15});
$("#btnAddZone").click(function(){
if($(this).html() == "Ajouter une zone"){
lstRect.push(map.editTools.startRectangle());
console.debug(lstRect);
lstRect[lstRect.length-1].enableEdit();
$(this).html("Confirmer");
}
else {
$(this).html("Ajouter une zone");
lstRect[lstRect.length-1].disableEdit();
lstRect[lstRect.length-1].bindTooltip($("#nomZone").val(),{permanent: true, direction:"center"});
var bounds = lstRect[lstRect.length-1].getBounds();
$('#ListZone tr:last').after('<tr><td>'+$("#nomZone").val()+'</td><td>w'+bounds.getWest()+';s'+bounds.getSouth()+';e'+bounds.getEast()
+';n'+bounds.getNorth()+'</td></tr>');
$.post( "/addZone", { N: bounds.getNorth(), S: bounds.getSouth(), E:bounds.getEast(), O:bounds.getWest(), Name:$("#nomZone").val() } );
}
});
<% for(var i = 0;i<data.length;i++){ %>
lstRect.push(L.rectangle([[<%=data[i].Nord %>,<%=data[i].Ouest %>],[<%=data[i].Sud %>,<%=data[i].Est %>]]));
lstRect[lstRect.length-1].addTo(map);
lstRect[lstRect.length-1].bindTooltip("<%= data[i].Nom %>",{permanent: true, direction:"center"}).addTo(map);
<% } %>
</script>
</body>
</html>

123
views/index.ejs Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<!--Importing CSS frameworks-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link rel="shortcut icon" type="image/x-icon" href="./static/Icons/h0.png" />
<link rel="stylesheet" type="text/css" href="./static/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Background shapes Don't care about them! :D -->
<div id="water-shape">
<img src="./static/Shapes/water-shape.svg">
</div>
<div id="circle-shape">
<img src="./static/Shapes/circle-shape.svg">
</div>
<div id="curve-shape">
<img src="./static/Shapes/curve1-shape.svg">
</div>
<div id="curve-two-shape">
<img src="./static/Shapes/curve2-shape.svg">
</div>
<div id="triangle-shape">
<img src="./static/Shapes/triangle-shape.svg">
</div>
<!--End of background shapes-->
<!--This is the beginning of the navigation you dont have to care about it too :D -->
<div class="container">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo left">Pub</a>
<ul class="right">
<li><a class="btn-floating btn-small waves-effect waves-light purple darken-3"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
<!--The End of the naviation-->
<!-- this is the interesting part-->
<div class="container">
<div id="body" class="row">
<div class="col m12 s12">
<div class="row">
<!-- this is the combo-box! :) -->
<div class="input-field col m12 s12">
<select id="zone">
<option value="" disabled selected>Choose you location</option>
<% for(var i = 0;i<zone.length;i++){ %>
<option value="<%= zone[i].ID_Zone %>"><%= zone[i].Nom %></option>
<% } %>
</select>
<label>Location</label>
</div>
<div class="input-field col m12 s12">
<select id="level">
<option value="" disabled selected>Choose you level</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Level</label>
</div>
<!--The end of the combo box-->
</div>
<div class="row">
<!--Link to the map page to add a new map-->
<div class=" col s12 center">
<a href="/map">Click here to add a new Location</a>
</div>
<!--End of the map link-->
</div>
<div class="row">
<div class="col s12">
<!--This is the call of the summernote-->
<div id="summernote" class="">Write your publication here!</div>
<!--End of the summernote-->
</div>
</div>
<div class="row">
<div class="col s12 center-btn">
<!--This is the upload button-->
<a href="#" class="btn white-text waves-effect purple darken-3 center bordered" id="send">Upload</a>
<!--This is the End of the upload button-->
</div>
</div>
</div>
</div>
</div>
<!--The end of the interesting part :( -->
<!--The footer-->
<footer>
</footer>
<!-- Importing Javascript frameworks-->
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script type="text/javascript" src="./static/Js/index.js"></script>
</body>
</html>

142
views/login.ejs Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
$(function(){
$( "input[name='repassword']" ).on('input', function(){
if($( "input[name='password']" ).val() != $( "input[name='repassword']" ).val())
$( "input[name='repassword']" ).css('color', 'red');
else
$( "input[name='repassword']" ).css('color', '');
})
});
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form" action="/register" method="post">
<input type="text" placeholder="name" name="username"/>
<input type="password" placeholder="password" name="password"/>
<input type="password" placeholder="repassword" name="repassword" class="repassword"/>
<button>create</button>
<p class="message">Already registered? <a href="#" onclick="$('.login-form').show();$('.register-form').hide();">Sign In</a></p>
</form>
<form class="login-form" action="/login" method="post">
<input type="text" placeholder="username" name="username"/>
<input type="password" placeholder="password" name="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#" onclick="$('.login-form').hide();$('.register-form').show();">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>

139
views/map.ejs Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<script>
if (location.protocol != 'https:')
{
location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
}
</script>
<!--Importing CSS frameworks-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link rel="shortcut icon" type="image/x-icon" href="/static/Icons/h0.png" />
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Background shapes Don't care about them! :D -->
<div id="water-shape">
<img src="/static/Shapes/water-shape.svg">
</div>
<div id="circle-shape">
<img src="/static/Shapes/circle-shape.svg">
</div>
<div id="curve-two-shape">
<img src="/static/Shapes/curve2-shape.svg">
</div>
<div id="triangle-shape">
<img src="/static/Shapes/triangle-shape.svg">
</div>
<!--End of background shapes-->
<!--This is the beginning of the navigation you dont have to care about it too :D -->
<div class="container">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo-map left">Pub</a>
<ul class="right">
<li><a class="btn-floating btn-small waves-effect waves-light purple darken-3"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
<!--The End of the naviation-->
<div class="container">
<div class="row ">
<div class="col m4 s12 purple darken-3">
<!--Map from leafletjs-->
<div id="mapid"></div>
<!--End of Map from leafletjs-->
</div>
</div>
<div class="row">
<!--This is the add button-->
<div class="input-field col m6 s12 center-btn">
<input placeholder="Placeholder" id="nomZone" type="text" class="validate">
<label for="nomZone">Nom Zone </label>
<a href="#" class="btn white-text purple darken-3 center bordered" id="btnAddZone">Add</a>
</div>
<!--This is the End of the add button-->
</div>
</div>
<!-- Importing Javascript frameworks-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script type="text/javascript" src="/static/Js/map.js"></script>
<script src="/static/Leaflet.Editable.js"></script>
<script>
L.Popup = L.Popup.extend({
getEvents: function () {
var events = L.DivOverlay.prototype.getEvents.call(this);
if ('closeOnClick' in this.options ? this.options.closeOnClick : this._map.options.closePopupOnClick) {
//events.preclick = this._close;
}
if (this.options.keepInView) {
events.moveend = this._adjustPan;
}
return events;
},
});
var lstRect = new Array();
var map = L.map('mapid',{editable: true});
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
map.locate({setView: true, maxZoom: 15});
<% /*ajout des rectangle*/ %>
<% for(var i = 0;i<zone.length;i++){ %>
lstRect.push(L.rectangle([[<%=zone[i].Nord %>,<%=zone[i].Ouest %>],[<%=zone[i].Sud %>,<%=zone[i].Est %>]]));
lstRect[lstRect.length-1].addTo(map);
lstRect[lstRect.length-1].bindTooltip("<%= zone[i].Nom %>",{permanent: true, direction:"auto"}).addTo(map);
<% } %>
$("#btnAddZone").click(function(){
if($("#btnAddZone").html() == "Add"){
lstRect.push(map.editTools.startRectangle());
console.debug(lstRect);
lstRect[lstRect.length-1].enableEdit();
$(this).html("Confirmer");
} else if($("#btnAddZone").html() == "Confirmer"){
$(this).html("Add");
lstRect[lstRect.length-1].disableEdit();
lstRect[lstRect.length-1].bindTooltip($("#nomZone").val(),{permanent: true, direction:"auto"});
var bounds = lstRect[lstRect.length-1].getBounds();
$('#ListZone tr:last').after('<tr><td>'+$("#nomZone").val()+'</td><td>w'+bounds.getWest()+';s'+bounds.getSouth()+';e'+bounds.getEast()
+';n'+bounds.getNorth()+'</td></tr>');
$.post( "/addZone", { N: bounds.getNorth(), S: bounds.getSouth(), E:bounds.getEast(), O:bounds.getWest(), Name:$("#nomZone").val() } );
}
});
</script>
</body>
</html>