Commit bae68be6 authored by Bastien Zigmann's avatar Bastien Zigmann Committed by Vincent Dubois

Affichage du formulaire de signalisation d'erreur plus propre

parent 2719cba8
......@@ -546,22 +546,23 @@ class Geocropping {
return out += '</table></div>';
}
let content = `<div class='popup-info'>
<div class='row valide-element'>`;
if (this.isConnected) {
content += `
<div class="col-xs-12" role="group">
<button type="button" id="btnValidate" data-id="${properties.id}" data-type="${properties.type}" class='btn btn-success col-xs-4'><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
<button data-toggle="button" aria-pressed"false" type="button" id="btnError" class='btn btn-danger col-xs-4'><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<a target="_blank" class='btn btn-warning col-xs-4' role='button' href="https://www.openstreetmap.org/edit?${properties.type}=${properties.id}"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
</div>
<div class='collapse element-signal col-xs-12' id='${properties.id}Signal'>`;
content += `
<div class="col-xs-12" role="group">
<button type="button" id="btnValidate" data-id="${properties.id}" data-type="${properties.type}" class='btn btn-success col-xs-4'><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
<button data-toggle="button" aria-pressed"false" type="button" id="btnError" class='btn btn-danger col-xs-4'><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<button type="button" id="btnSendToOSM" class='btn btn-warning col-xs-4' onclick="window.location.href='https://www.openstreetmap.org/edit?${properties.type}=${properties.id}'"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
<!--<a target="_blank" id="btnSendToOSM" class='btn btn-warning col-xs-4' role='button' href="https://www.openstreetmap.org/edit?${properties.type}=${properties.id}"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>-->
</div>`
content += `<div class='collapse element-signal col-xs-12' id='${properties.id}Signal'>`;
if (tags.fixme && tags.fixme !== "") {
content += `<a style='color:red;' href="https://www.openstreetmap.org/edit?${properties.type}=${properties.id}" target="_blank"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> L'objet a déjà été déclaré comme erronné, raison : "${tags.fixme}"</a>`
}
content +=
`<form onsubmit="return false;" role="form" data-id="${properties.id}" data-type="${properties.type}"></br>
`<form onsubmit="return false;" role="form" data-id="${properties.id}" data-type="${properties.type}">
<h2>Signaler une erreur</h2>
<div class="form-group">
<select name="errorType" id="errorType" class="form-control" required="required">
<option value="" hidden disabled selected>Choisir l'erreur...</option>
......@@ -572,14 +573,15 @@ class Geocropping {
</select>
<textarea name="comment" id="comment" maxlength="255" class="form-control" rows="1" placeholder="Commentaire" style="resize:none; overflow:hidden; display:none;"></textarea>
</div>
<div class='valide-element'>
<label>
<input type="checkbox" id="followChanges"> Je souhaite être notifié de la prochaine mise à jour de cet élément.
</label>
<div class='valide-element checkbox'>
<label><input type="checkbox" id="followChanges"> Je souhaite être notifié de la prochaine mise à jour de cet élément.</label>
</div>
<div align="center">
<input value="Signaler" type="submit" class="btn btn-primary">
<input value="Annuler" type="button" id="btnAnnulation" class="btn btn-primary">
</div>
<input value="Signaler" type="submit" class="btn btn-primary" style="align=center">
</form>
</div>`
</div>`
} else {
content += `
<div class="col-xs-12" role="group">
......@@ -600,8 +602,6 @@ class Geocropping {
popupEvent.popup.setContent(content);
$(popupEvent.popup.getElement()).on("click", (e) => {
if ($('.valide-element').has(e.target).length === 0) {
// Si on a pas cliqué sur sur la zone de validation, on ferme la popup
......@@ -614,17 +614,33 @@ class Geocropping {
////////
// Partie signalisation d'erreur
$('button#btnError', popupEvent.popup.getElement()).on('click', e => {
let $valid = $(`#btnValidate`, popupEvent.popup.getElement());
// let $follow = $(`#followChanges`, popupEvent.popup.getElement());
let $error = $(`#btnError`, popupEvent.popup.getElement());
let $sendTo = $(`#btnSendToOSM`, popupEvent.popup.getElement());
$(`#${feature.properties.id}Signal`, popupEvent.popup.getElement()).toggle(0, updatePopup);
if (typeof(tags.fixme) == "undefined" || tags.fixme === ""){
let disabled = $valid.is(':disabled');
$valid.prop('disabled', !disabled);
$valid.prop('disabled', true);
}
$error.prop('disabled', true);
$sendTo.prop('disabled', true);
});
// Dans le formulaire de signalisation d'erreur, permet de le fermet et de revenir au popup de base
$('#btnAnnulation', popupEvent.popup.getElement()).on('click', e => {
let $valid = $(`#btnValidate`, popupEvent.popup.getElement());
let $sendTo = $(`#btnSendToOSM`, popupEvent.popup.getElement());
let $error = $(`#btnError`, popupEvent.popup.getElement());
$(`#${feature.properties.id}Signal`, popupEvent.popup.getElement()).toggle(0, updatePopup);
if (typeof (tags.fixme) == "undefined" || tags.fixme === "") {
$valid.prop('disabled', false);
}
$sendTo.prop('disabled', false);
$error.prop('disabled', false);
});
/**
* Permet de mettre a jour l'élément et ferme la popup
*
......@@ -641,6 +657,7 @@ class Geocropping {
}
let $errorForm = $(`#${properties.id}Signal form`, popupEvent.popup.getElement());
$errorForm.on('submit', e => {
// Invalider l'élément
......@@ -730,7 +747,7 @@ class Geocropping {
if($('#followChanges').prop('checked',true)){
let req = OauthOsm.apiRequest.GetElementId;
req.params.id = $errorForm.data('id');
this._osm._sendRequest(req).then((data : any) => { this._ajoutFollowUnique(data.node["@attributes"].id, data.node["@attributes"].version); }, () => { });
this._osm._sendRequest(req).then((data : any) => { this._ajoutPreferenceUnique(data.node["@attributes"].id, data.node["@attributes"].version); }, () => { });
}
elementChanged();
// OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
......@@ -1397,8 +1414,8 @@ class Geocropping {
this._osm._sendRequest(req);
}
//Ajout d'une preference
_ajoutFollowUnique(id, version){
//Ajout/mise à jour d'une preference
_ajoutPreferenceUnique(id, version){
let req = OauthOsm.apiRequest.UpdateSingleUserPreference;
req.params.key = id;
req.params.value = version;
......
......@@ -311,5 +311,5 @@ declare class Geocropping {
}): void;
_checkChanges(): void;
_removeChanges(resPref: any, changes: number[]): void;
_ajoutFollowUnique(id: any, version: any): void;
_ajoutPreferenceUnique(id: any, version: any): void;
}
......@@ -42,7 +42,7 @@ if (empty($_SERVER['HTTPS'])) {
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/leaflet-messagebox.css" />
<script src="js/osmtogeojson.js"></script>
<script src="js/leaflet.pattern.js"></script>
<!-- <script src="js/leaflet.pattern.js"></script> -->
<script src="js/fr.js"></script>
<script src="js/OauthOsm.js"></script>
<script src="js/MyNotification.js"></script>
......@@ -92,13 +92,16 @@ if (empty($_SERVER['HTTPS'])) {
<label><input type="checkbox" id="clickPos"> Position au clic</label>
</div>
<!-- Option se trouvant das le menu de droite permettant de se connecter au server dev d'OSM pour ne rien casser sur le vrai. Décommenter pour utiliser -->
<!-- <div class="checkbox">
<!-- <div class="checkbox">
<label><input type="checkbox" id="devMode"> Dev API</label>
</div> -->
</div>
<div class="log">
<a href="guide.html">Mode d'emploi</a>
<a href="https://framagit.org/renaudzigmann/Geocropping">Framagit</a>
<a href="https://framagit.org/renaudzigmann/Geocropping/commits/master">Logs des mises à jour</a>
<hr />
<p>Geocropping - Version alpha</p>
</div>
</div>
</div>
......
......@@ -453,19 +453,20 @@ var Geocropping = (function () {
});
return out += '</table></div>';
};
var content = "<div class='popup-info'>\n <div class='row valide-element'>";
var content = "<div class='popup-info'>\n <div class='row valide-element'>";
if (_this.isConnected) {
content += "\n <div class=\"col-xs-12\" role=\"group\">\n <button type=\"button\" id=\"btnValidate\" data-id=\"" + properties.id + "\" data-type=\"" + properties.type + "\" class='btn btn-success col-xs-4'><span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span></button>\n <button data-toggle=\"button\" aria-pressed\"false\" type=\"button\" id=\"btnError\" class='btn btn-danger col-xs-4'><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span></button>\n <a target=\"_blank\" class='btn btn-warning col-xs-4' role='button' href=\"https://www.openstreetmap.org/edit?" + properties.type + "=" + properties.id + "\"><span class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></span></a>\n </div>\n <div class='collapse element-signal col-xs-12' id='" + properties.id + "Signal'>";
content += "\n <div class=\"col-xs-12\" role=\"group\">\n <button type=\"button\" id=\"btnValidate\" data-id=\"" + properties.id + "\" data-type=\"" + properties.type + "\" class='btn btn-success col-xs-4'><span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span></button>\n <button data-toggle=\"button\" aria-pressed\"false\" type=\"button\" id=\"btnError\" class='btn btn-danger col-xs-4'><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span></button>\n <button type=\"button\" id=\"btnSendToOSM\" class='btn btn-warning col-xs-4' onclick=\"window.location.href='https://www.openstreetmap.org/edit?" + properties.type + "=" + properties.id + "'\"><span class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></span></button>\n <!--<a target=\"_blank\" id=\"btnSendToOSM\" class='btn btn-warning col-xs-4' role='button' href=\"https://www.openstreetmap.org/edit?" + properties.type + "=" + properties.id + "\"><span class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></span></a>-->\n </div>";
content += "<div class='collapse element-signal col-xs-12' id='" + properties.id + "Signal'>";
if (tags.fixme && tags.fixme !== "") {
content += "<a style='color:red;' href=\"https://www.openstreetmap.org/edit?" + properties.type + "=" + properties.id + "\" target=\"_blank\"><span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"></span> L'objet a d\u00E9j\u00E0 \u00E9t\u00E9 d\u00E9clar\u00E9 comme erronn\u00E9, raison : \"" + tags.fixme + "\"</a>";
}
content +=
"<form onsubmit=\"return false;\" role=\"form\" data-id=\"" + properties.id + "\" data-type=\"" + properties.type + "\"></br>\n <div class=\"form-group\">\n <select name=\"errorType\" id=\"errorType\" class=\"form-control\" required=\"required\">\n <option value=\"\" hidden disabled selected>Choisir l'erreur...</option>\n <option value=\"errorPos\">Position incorrecte</option>\n <option value=\"errorExist\">N'existe pas</option>\n <option value=\"errorInfo\">Informations \u00E9ronn\u00E9es</option>\n <option value=\"other\">Autre</option>\n </select>\n <textarea name=\"comment\" id=\"comment\" maxlength=\"255\" class=\"form-control\" rows=\"1\" placeholder=\"Commentaire\" style=\"resize:none; overflow:hidden; display:none;\"></textarea>\n </div>\n <div class='valide-element'>\n <label>\n <input type=\"checkbox\" id=\"followChanges\"> Je souhaite \u00EAtre notifi\u00E9 de la prochaine mise \u00E0 jour de cet \u00E9l\u00E9ment.\n </label>\n </div>\n <input value=\"Signaler\" type=\"submit\" class=\"btn btn-primary\" style=\"align=center\">\n </form>\n </div>";
"<form onsubmit=\"return false;\" role=\"form\" data-id=\"" + properties.id + "\" data-type=\"" + properties.type + "\">\n <h2>Signaler une erreur</h2>\n <div class=\"form-group\">\n <select name=\"errorType\" id=\"errorType\" class=\"form-control\" required=\"required\">\n <option value=\"\" hidden disabled selected>Choisir l'erreur...</option>\n <option value=\"errorPos\">Position incorrecte</option>\n <option value=\"errorExist\">N'existe pas</option>\n <option value=\"errorInfo\">Informations \u00E9ronn\u00E9es</option>\n <option value=\"other\">Autre</option>\n </select>\n <textarea name=\"comment\" id=\"comment\" maxlength=\"255\" class=\"form-control\" rows=\"1\" placeholder=\"Commentaire\" style=\"resize:none; overflow:hidden; display:none;\"></textarea>\n </div>\n <div class='valide-element checkbox'>\n <label><input type=\"checkbox\" id=\"followChanges\"> Je souhaite \u00EAtre notifi\u00E9 de la prochaine mise \u00E0 jour de cet \u00E9l\u00E9ment.</label>\n </div>\n <div align=\"center\">\n <input value=\"Signaler\" type=\"submit\" class=\"btn btn-primary\">\n <input value=\"Annuler\" type=\"button\" id=\"btnAnnulation\" class=\"btn btn-primary\">\n </div>\n </form>\n </div>";
}
else {
content += "\n <div class=\"col-xs-12\" role=\"group\">\n <button class=\"btn btn-info\" id=\"login\">Connexion</button>\n </div>";
}
content += "\n </div>\n <div class='element-info row'>\n <!--div><span class='label label-info'>type</span> " + properties.type + "</div-->\n <!--div><span class='label label-info'>id</span> " + properties.id + "</div-->\n <div class=\"col-xs-12\"><!--span class='label label-info'>tags</span-->" + toTable(properties.tags) + "</div>\n <!--div><span class='label label-info'>relations</span> " + properties.relations.join(', ') + "</div-->\n <!--div><span class='label label-info'>meta</span> " + toTable(properties.meta) + "</div-->\n <!--pre>" + JSON.stringify(properties, null, 4) + "</pre-->\n </div>\n</div>";
content += "\n </div>\n <div class='element-info row'>\n <!--div><span class='label label-info'>type</span> " + properties.type + "</div-->\n <!--div><span class='label label-info'>id</span> " + properties.id + "</div-->\n <div class=\"col-xs-12\"><!--span class='label label-info'>tags</span-->" + toTable(properties.tags) + "</div>\n <!--div><span class='label label-info'>relations</span> " + properties.relations.join(', ') + "</div-->\n <!--div><span class='label label-info'>meta</span> " + toTable(properties.meta) + "</div-->\n <!--pre>" + JSON.stringify(properties, null, 4) + "</pre-->\n </div>\n </div>";
popupEvent.popup.setContent(content);
$(popupEvent.popup.getElement()).on("click", function (e) {
if ($('.valide-element').has(e.target).length === 0) {
......@@ -479,12 +480,26 @@ var Geocropping = (function () {
// Partie signalisation d'erreur
$('button#btnError', popupEvent.popup.getElement()).on('click', function (e) {
var $valid = $("#btnValidate", popupEvent.popup.getElement());
// let $follow = $(`#followChanges`, popupEvent.popup.getElement());
var $error = $("#btnError", popupEvent.popup.getElement());
var $sendTo = $("#btnSendToOSM", popupEvent.popup.getElement());
$("#" + feature.properties.id + "Signal", popupEvent.popup.getElement()).toggle(0, updatePopup);
if (typeof (tags.fixme) == "undefined" || tags.fixme === "") {
var disabled = $valid.is(':disabled');
$valid.prop('disabled', !disabled);
$valid.prop('disabled', true);
}
$error.prop('disabled', true);
$sendTo.prop('disabled', true);
});
// Dans le formulaire de signalisation d'erreur, permet de le fermet et de revenir au popup de base
$('#btnAnnulation', popupEvent.popup.getElement()).on('click', function (e) {
var $valid = $("#btnValidate", popupEvent.popup.getElement());
var $sendTo = $("#btnSendToOSM", popupEvent.popup.getElement());
var $error = $("#btnError", popupEvent.popup.getElement());
$("#" + feature.properties.id + "Signal", popupEvent.popup.getElement()).toggle(0, updatePopup);
if (typeof (tags.fixme) == "undefined" || tags.fixme === "") {
$valid.prop('disabled', false);
}
$sendTo.prop('disabled', false);
$error.prop('disabled', false);
});
/**
* Permet de mettre a jour l'élément et ferme la popup
......@@ -583,7 +598,7 @@ var Geocropping = (function () {
if ($('#followChanges').prop('checked', true)) {
var req_1 = OauthOsm.apiRequest.GetElementId;
req_1.params.id = $errorForm.data('id');
_this._osm._sendRequest(req_1).then(function (data) { _this._ajoutFollowUnique(data.node["@attributes"].id, data.node["@attributes"].version); }, function () { });
_this._osm._sendRequest(req_1).then(function (data) { _this._ajoutPreferenceUnique(data.node["@attributes"].id, data.node["@attributes"].version); }, function () { });
}
elementChanged();
// OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
......@@ -1193,8 +1208,8 @@ var Geocropping = (function () {
req.params.content = JSON.stringify(newPref);
this._osm._sendRequest(req);
};
//Ajout d'une preference
Geocropping.prototype._ajoutFollowUnique = function (id, version) {
//Ajout/mise à jour d'une preference
Geocropping.prototype._ajoutPreferenceUnique = function (id, version) {
var _this = this;
var req = OauthOsm.apiRequest.UpdateSingleUserPreference;
req.params.key = id;
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment