Commit 2719cba8 authored by Bastien Zigmann's avatar Bastien Zigmann Committed by Vincent Dubois

Ajout d'une checkbox pour pouvoir suivre un node et être notifié lors de sa prochaine mise à jour

parent ca843d6a
This diff is collapsed.
/// <reference path="typings/tsd.d.ts" />
/// <reference path="myTypings/tsd.d.ts" />
class MyNotification{
class MyNotification {
options = {timeout:4000, position:"bottomleft"};
options = { timeout: 4000, position: "bottomleft" };
notif;
box;
constructor(map:L.Map){
constructor(map: L.Map) {
this.box = (L.control as any).messagebox(this.options).addTo(map);
this.notif = {
ConnectionOK: "Connexion au compte OSM réussie", //DONE
......@@ -20,42 +20,68 @@ class MyNotification{
AutoServerChanged: "Problème de connexion avec le server, changement automatique", //DONE BUT NOT TESTED
ServerChanged: "Changement de server éffectué", //DONE
ClicPositionON: "Arrêt de la geolocalisation, position au clic.", //DONE
ClicPositionOFF: "Reprise de la geolocalisation" //DONE
ClicPositionOFF: "Reprise de la geolocalisation", //DONE
Modification: "Le fonctionnement a changé, nous n'utilisons plus les notes pour déclarer les objets mais le tag FIXME",
AjoutSinglePrefNOK: "Echec de l'ajout de la préférence",
AjoutSinglePrefOK: "Ajout de la préférence éffectué",
ChangementsTrouve: "Les éléments suivants ont été modifiés : "
};
}
ConnectionOK(){
ConnectionOK() {
this.box.show(this.notif.ConnectionOK);
}
ConnectionNOK(){
ConnectionNOK() {
this.box.show(this.notif.ConnectionNOK);
}
DisconnectionOK(){
DisconnectionOK() {
this.box.show(this.notif.DisconnectionOK);
}
DisconnectionNOK(){
DisconnectionNOK() {
this.box.show(this.notif.DisconnectionNOK);
}
ValidatedOK(){
ValidatedOK() {
this.box.show(this.notif.ValidatedOK);
}
ValidatedNOK(){
}
ValidatedNOK() {
this.box.show(this.notif.ValidatedNOK);
}
LocalisationNOK(){
LocalisationNOK() {
this.box.show(this.notif.LocalisationNOK);
}
AutoServerChanged(){
AutoServerChanged() {
this.box.show(this.notif.AutoServerChanged);
}
ServerChanged(){
ServerChanged() {
this.box.show(this.notif.ServerChanged);
}
ClicPositionON(){
ClicPositionON() {
this.box.show(this.notif.ClicPositionON);
}
ClicPositionOFF(){
ClicPositionOFF() {
this.box.show(this.notif.ClicPositionOFF);
}
Modification(){
this.box.options.timeout = 10000;
this.box.show(this.notif.Modification);
this.box.options.timeout = 4000;
}
ChangementsTrouve(changes: string[] | number[]) {
if (changes.length === 0) {}
else {
let text = this.notif.ChangementsTrouve;
for (let i = 0; i < changes.length; i++) {
text += `<a style='color: blue; ' href="https://www.openstreetmap.org/edit?node=${changes[i]}" target="_blank"> ${changes[i]} </a>`;
}
this.box.options.timeout += changes.length * 1000;
this.box.show(text);
this.box.options.timeout = 4000;
}
}
AjoutSinglePrefNOK(){
this.box.show(this.notif.AjoutSinglePrefNOK);
}
AjoutSinglePrefOK(){
this.box.show(this.notif.AjoutSinglePrefOK)
}
}
\ No newline at end of file
This diff is collapsed.
/// <reference path="typings/tsd.d.ts" />
/// <reference path="myTypings/tsd.d.ts" />
/**
* Ouvre le menu de droite si le il est fermé et inversement
*
*/
function toggleRightMenu() {
let actualRight = $('body')[0].offsetWidth - $('.side-nav.fit-right')[0].offsetLeft;
if (actualRight !== 0)
......@@ -9,6 +13,10 @@ function toggleRightMenu() {
openRightMenu();
}
/**
* Ouvre le menu de gauche si le il est fermé et inversement
*
*/
function toggleLeftMenu() {
if ($('.side-nav.fit-left').position().left + $('.side-nav.fit-left').width() !== 0)
closeLeftMenu();
......@@ -16,9 +24,18 @@ function toggleLeftMenu() {
openLeftMenu();
}
/**
* Fermer le menu de gauche
*
*/
function closeLeftMenu() {
openLeftMenu(0);
}
/**
* Ouvre le menu de gauche
*
* @param {number} [width] Largeur du menu
*/
function openLeftMenu(width?: number) {
(width === undefined) && (width = $('.side-nav.fit-left').width());
if (width === 0)
......@@ -29,9 +46,18 @@ function openLeftMenu(width?: number) {
}
$('#mapArea').css('left', width);
}
/**
* Fermer le menu de droite
*
*/
function closeRightMenu() {
openRightMenu(0);
}
/**
* Ouvre le menu de gauche
*
* @param {number} [width] Largeur du menu
*/
function openRightMenu(width?: number) {
(width === undefined) && (width = $('.side-nav.fit-right').width());
if (width === 0)
......@@ -42,17 +68,22 @@ function openRightMenu(width?: number) {
}
$('#mapArea').css('right', width);
}
let geocropping = new Geocropping();
$(document).ready(() => {
let geocropping = new Geocropping();
$(document).ready(() => {
let $geocropping = $(geocropping);
// Ajouter les serveur Overpass dans le menu déroulant
for (var key in geocropping._app_server_interpreter_list) {
$('#urlInterpreter').append(`<option value="${key}">${key}</option>`);
}
}
////////
// EVENTS
// Si le serveur Overpass est changé par Geocropping.ts
$geocropping.on('urlInterpreterUpdated', (e, index) => {
$('#urlInterpreter').val(index);
});
$('#userAction #login').click(() => {
......@@ -62,16 +93,19 @@ $(document).ready(() => {
geocropping.userDisconnect();
});
// Checkbox pour se déplacer sur la carte au clic
$('#menu #clickPos').change(function (e) {
let val = $(this).prop('checked');
geocropping.setClickPosition(val);
val ? geocropping.stopLocateUser() : geocropping.startLocateUser();
}).prop("checked", false);
// Si on utilisait le serveur OSM de dev, le restaurer
let devMode = localLoad('devMode');
if (devMode) {
geocropping._osm._devApi = devMode == "true";
}
// Gerer le checkbox
$('#menu #devMode').change(function (e) {
let val: boolean = $(this).prop('checked');
geocropping.userDisconnect();
......@@ -79,19 +113,26 @@ $(document).ready(() => {
localSave('devMode', '' + val);
}).prop("checked", geocropping._osm._devApi);
// Changement de serveur Overpass via le select
$('#menu #urlInterpreter').change(function (e) {
geocropping._app_server_interpreter_index = this.value;
geocropping.notify.ServerChanged();
});
/**
* Afficher les information nécessaire a la connection
*
*/
let userConnected = () => {
//console.trace('myGeocropping', 'connected');
$('#userAction #login').hide();
$('#userAction #logout').show();
$('.map-menu-item:has(#userImage)').show();
}
/**
* Cacher les information nécessaire a la connection
*
*/
let userDisconnected = () => {
//console.trace('myGeocropping', 'disconnected');
$('#userAction #logout').hide();
$('#userAction #login').show();
......@@ -106,22 +147,22 @@ $(document).ready(() => {
$geocropping.on('userConnected', userConnected);
let updateUserDetails = (e, data) => {
/**
* Mettre a jour les informations de l'utilisateur qui sont affichées
*
* @param {JQueryEventObject} e Event Jquery
* @param {Geocropping.USER} data Données de l'utilisatuer
*/
let updateUserDetails = (e: JQueryEventObject, data: Geocropping.USER) => {
//console.trace('myGeocropping', 'updateUserDetails', e);
$('#userImage').show();
$('#userImage').attr('src', data.img);
$('#userInfo #userName').text(data.display_name);
}
$geocropping.on('userDetailsUpdated', updateUserDetails);
//console.trace('myGeocropping', geocropping.isConnected);
if (geocropping.isConnected) {
//console.trace('myGeocropping', 'test ok', geocropping.getUserDetails());
userConnected();
//updateUserDetails(null, geocropping.getUserDetails());
} else {
userDisconnected();
};
......@@ -130,5 +171,6 @@ $(document).ready(() => {
// pour permettre le redimentionnement après la crétion de la carte leaflet
document.getElementById('mapArea').style.width = "auto";
geocropping.startLocateUser();
});
\ No newline at end of file
......@@ -38,7 +38,6 @@ declare namespace Geocropping {
}
}
declare function osmtogeojson(params);
declare var fields: any;
declare var presets: any;
......
declare function osmAuth(any);
\ No newline at end of file
declare namespace OauthOsm {
interface ApiRequest {
method: string,
url: string,
request: string,
params: IDictionary<any>,
need_connection?: boolean
}
}
\ No newline at end of file
/// <reference path="Geocropping.d.ts" />
/// <reference path="OauthOsm.d.ts" />
/// <reference path="Geocropping.d.ts" />
declare function osmtogeojson(any): any
interface IDictionary<TValue> {
......
......@@ -12,12 +12,10 @@
"declaration": true,
"declarationDir": "./typings",
"sourceMap": true,
"inlineSources": true,
"inlineSources": false,
"listFiles": true
},
"files": [
"Geocropping.ts",
"index.ts",
"OauthOsm.ts"
"include": [
"*.ts"
]
}
\ No newline at end of file
{
"tags":
{
"allowUnknownTags" : true
},
"plugins":[
"plugins/markdown"
,"/usr/lib/node_modules/tsdoc/template/plugins/TSDoc.js"
],
"opts":
{
"template" :"/usr/lib/node_modules/tsdoc/template",
"recurse" :"true"
},
"templates" : {
"cleverLinks" : false,
"monospaceLinks" : false
},
"source":
{
"includePattern": "(\\.d)?\\.ts$"
},
"markdown" : {
"parser" : "gfm",
"hardwrap" : true
},
"tsdoc":{
"source" :"/home/vdubois/devvdubois@web01/OSM/geocropping-dev/.ts/src/",
"destination" :"/home/vdubois/devvdubois@web01/OSM/geocropping-dev/.ts/docs",
"tutorials" :"",
"systemName" : ".ts",
"footer" : "",
"copyright" : ".ts Copyright © 2017 vdubois.",
"outputSourceFiles" : true,
"commentsOnly": true
}
}
/// <reference path="tsd.d.ts" />
/// <reference path="MyNotification.d.ts" />
/// <reference path="../myTypings/tsd.d.ts" />
/// <reference types="leaflet" />
/// <reference types="jquery" />
......@@ -9,64 +8,308 @@
* @class Geocropping
*/
declare class Geocropping {
/** Gestion de la connexion à osm */
/**
* Gestion de la connexion à osm
*
* @type {OauthOsm}
* @memberof Geocropping
*/
_osm: OauthOsm;
/** Leaflet map */
/**
* Leaflet map
*
* @type {L.Map}
* @memberof Geocropping
*/
_map?: L.Map;
/** Osm data user */
/**
* Osm data user
*
* @type {Geocropping.USER}
* @memberof Geocropping
*/
_user: Geocropping.USER;
/**
* Marker indiquant la position de l'utilisateur sur la carte
*
* @type {L.Marker}
* @memberof Geocropping
*/
_userMarker: L.Marker;
/** Groupe de layer des élément affiché */
/**
* Groupe de layer des élément affiché
*
* @type {L.GeoJSON}
* @memberof Geocropping
*/
_geoJSONLayers: L.GeoJSON;
/** Dernière position de l'utilisateur enregistré */
/**
* Dernière position de l'utilisateur enregistré
*
* @type {L.LatLng}
* @memberof Geocropping
*/
_lastUserLocation?: L.LatLng;
/**
* Stoker le nécessaire lié a un élément dans un dictionnaire avec son id (ex: 'node/123456789') comme index
*
* @type {IDictionary<{ layer: L.Layer, note?: any }>}
* @memberof Geocropping
*/
_featureDisplayed: IDictionary<{
layer: L.Layer;
note?: any;
}>;
/**
* Callback du clic sur la carte (stocké pour pouvoir arrêter l'event)
*
* @type {L.EventHandlerFn}
* @memberof Geocropping
*/
__locationFoundClick: L.EventHandlerFn;
/**
* Zoom minimum de la carte
*
* @type {number}
* @memberof Geocropping
*/
_map_minZoom: number;
/**
* Zoom maximum de la carte
*
* @type {number}
* @memberof Geocropping
*/
_map_maxZoom: number;
/** index ofserver url interpreter used*/
_app_server_interpreter_index: string;
/** server url interpreter list*/
/**
* Liste de serveur Overpass
*
* @type {IDictionary<string>}
* @memberof Geocropping
*/
_app_server_interpreter_list: IDictionary<string>;
/** distance of the search (meter) */
/**
* Serveur Overpass utilisé
*
* @type {string}
* @memberof Geocropping
*/
_app_server_interpreter_index: string;
/**
* Distance of the search (meter)
*
* @type {number}
* @memberof Geocropping
*/
_app_distance_search: number;
/** distance to hide feature (meter) */
/**
* Distance to hide feature (meter)
*
* @type {number}
* @memberof Geocropping
*/
_app_distance_hide: number;
/** distance need to search feature between the actual user location and the latest search location (meter) */
/**
* Distance need to search feature between the actual user location and the latest search location (meter)
*
* @type {number}
* @memberof Geocropping
*/
_app_distance_travel_to_search: number;
/** number maximum of feature that can be displayed (-1 limitless) */
/**
* TODO:
* Number maximum of feature that can be displayed (-1 limitless)
*
* @type {number}
* @memberof Geocropping
*/
_app_limit_feature_displayed: number;
/** time to locate user again (ms) */
/**
* Time to locate user again (ms)
*
* @type {number}
* @memberof Geocropping
*/
_app_time_locate_interval: number;
/** True if position on clic is actived */
/**
* True if position on clic is actived
*
* @memberof Geocropping
*/
_app_click_position_actived: boolean;
/**
* Gérer les notification affiché sur la carte
*
* @type {MyNotification}
* @memberof Geocropping
*/
notify: MyNotification;
/**
* Style rouge pour un element sur la carte
*
* @type {L.PathOptions}
* @memberof Geocropping
*/
_style_alert: L.PathOptions;
/**
* Style orange pour un element sur la carte
*
* @type {L.PathOptions}
* @memberof Geocropping
*/
_style_warning: L.PathOptions;
/**
* Style vert pour un element sur la carte
*
* @type {L.PathOptions}
* @memberof Geocropping
*/
_style_ok: L.PathOptions;
/**
* Style bleu pour un element sur la carte
*
* @type {L.PathOptions}
* @memberof Geocropping
*/
_style_selected: L.PathOptions;
/**
* Style noir pour un element sur la carte
*
* @type {L.PathOptions}
* @memberof Geocropping
*/
_style_invalid: L.PathOptions;
/**
* Format d'élément par défaut
*
* @readonly
* @static
* @type {Geocropping.DEFAULT}
* @memberof Geocropping
*/
static readonly DEFAULT: Geocropping.DEFAULT;
/**
* Creates an instance of Geocropping.
* @memberof Geocropping
*/
constructor();
connect(): this;
/**
* Connect l'utilisateur a OSM
*
* @returns {JQueryPromise<{}>}
* @memberof Geocropping
*/
connect(): JQueryPromise<{}>;
/**
* Donnect l'utilisateur a OSM
*
* @returns {JQueryPromise<{}>}
* @memberof Geocropping
*/
userDisconnect(): JQueryPromise<{}>;
/**
* Savoir si l'utilisateur est connecté
*
* @readonly
* @type {boolean}
* @memberof Geocropping
*/
readonly isConnected: boolean;
updateUserDetails(): this;
getUserDetails(): Geocropping.USER;
/**
* Mettre a jour les informations de l'utilisateur a partir de OSM
*
* @returns {JQueryPromise<{}>}
* @memberof Geocropping
*/
updateUserDetails(): JQueryPromise<{}>;
/**
* Récupérer les information de l'utilisateur si existant
*
* @returns {(Geocropping.USER|null)}
* @memberof Geocropping
*/
getUserDetails(): Geocropping.USER | null;
/**
* Savoir si la map est crée
*
* @returns {boolean}
* @memberof Geocropping
*/
isMapCreated(): boolean;
createMap(map: any): boolean;
/**
* Créer la carte leaflet
*
* @param {(string|HTMLElement)} map Element ou id de l'élément où doit être créer la carte
* @returns {boolean}
* @memberof Geocropping
*/
createMap(map: string | HTMLElement): boolean;
/**
* Activer/Désactiver la position au click
*
* @param {Boolean} active
* @memberof Geocropping
*/
setClickPosition(active: Boolean): void;
/**
* Créer ou récupérer la fonction de call back du clic (pour pouvoir arrêter l'event)
*
* @returns {L.EventHandlerFn}
* @memberof Geocropping
*/
_locationFoundClickFunction(): L.EventHandlerFn;
/**
* Démarrer la géolocalisation
*
* @returns {boolean}
* @memberof Geocropping
*/
startLocateUser(): boolean;
/**
* Arrêter la géoliocalisation
*
* @memberof Geocropping
*/
stopLocateUser(): void;
/**
* Définir la position du marker de l'utilisateur et faire la recherche des éléments autour
*
* @param {L.LocationEvent} data
* @param {any} [options] Options de la géolocalisation (pour la relancer)
* @memberof Geocropping
*/
_locationFound(data: L.LocationEvent, options?: any): void;
_locationError(options: any, data: any): void;
/**
* Afficher l'erreur de géolocalisation
*
* @param {L.ErrorEvent} e
* @param {any} [options] Options de la géolocalisation (pour la relancer)
* @memberof Geocropping
*/
_locationError(e: L.ErrorEvent, options?: any): void;
/**
* Rechercher des éléments autour d'une position
*
* @param {L.LatLng} pos Position de la recherche
* @memberof Geocropping
*/
_searchDataAround(pos: L.LatLng): void;
/**
* Récupérer les données des éléments affichés directement sur OSM
*