Gitlab CSE Unil

Commit 390eb464 authored by Julien Furrer's avatar Julien Furrer
Browse files

Ajouté feedback état enregistrement

parent 2f14822f
......@@ -21,6 +21,7 @@
define([
"jquery",
"underscore",
"paper",
"signals",
......@@ -28,7 +29,7 @@ define([
"adim/config",
"adim/view"
],
function ($, paper, Signal, Config, view) {
function ($, _, paper, Signal, Config, view) {
// ----- Locale variables -----------------------------
// var user = config.user.name;
......@@ -41,7 +42,9 @@ function ($, paper, Signal, Config, view) {
loadingError: new Signal(),
annotationAdded: new Signal(),
annotationSaved: new Signal(),
annotationRemoved: new Signal()
annotationRemoved: new Signal(),
annotationsSavedStatusChanged: new Signal()
};
var _autoSave = false;
......@@ -79,7 +82,29 @@ function ($, paper, Signal, Config, view) {
url += annotId + '/';
}
$.ajax({
return $.ajax({
url: url,
type: method,
dataType: 'json',
data: annotJson
})
.done(function(data, status, jqXHR) {
if (jqXHR.status === 201) {
_events.annotationAdded.dispatch(data);
}
else if (jqXHR.status === 200) {
_events.annotationSaved.dispatch(data);
}
})
.fail(function(jqXHR) {
_events.loadingError.dispatch({
msg: "Erreur lors de l'enregistrement d'une annotation",
jqXHR: jqXHR
});
});
/* $.ajax({
url: url,
type: method,
dataType: 'json',
......@@ -97,7 +122,7 @@ function ($, paper, Signal, Config, view) {
msg: "Erreur lors de l'enregistrement d'une annotation"
});
}
});
});*/
}
......@@ -119,8 +144,17 @@ function ($, paper, Signal, Config, view) {
function _saveAnnotations(annotations) {
var savedStates = [], nbAnnot = annotations.length;
function updateStates(state, a) {
savedStates.push(state);
if (savedStates.length === nbAnnot) {
_events.annotationsSavedStatusChanged.dispatch({status:_.every(savedStates) ? 'saved' : 'error'});
}
}
for (var a = 0, annot; annot = annotations[a]; a++) {
_saveAnnotation(annot.id, annot.itemStr, annot.prop, annot.index);
_saveAnnotation(annot.id, annot.itemStr, annot.prop, annot.index)
.done((function(a){ return function(){ updateStates(true, a); } })(annot.id))
.fail((function(a){ return function(){ updateStates(false, a); } })(annot.id));
}
}
......@@ -228,7 +262,7 @@ function ($, paper, Signal, Config, view) {
saveAnnotations : function(items, force) {
if (!_autoSave && !force)
return false;
_events.annotationsSavedStatusChanged.dispatch({status:'dirty'});
var annotations = view.getAnnotationsSerialized(items);
_saveAnnotations(annotations);
return true;
......
......@@ -157,6 +157,14 @@ function ($, paper, Signal, config, view, io, tools, attributes, ui, Users, them
sendThumbnail();
}
});
io.events.annotationsSavedStatusChanged.add(function(data){
console.log("save state", data.status);
});
io.events.loadingError.add(function(options){
console.error("io::loadingError", options);
});
}
initSignalRouting();
......
......@@ -546,6 +546,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
});
})();
//
// Annotable Event handler
// ------------------------
......@@ -567,6 +568,58 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
});
//
// Annotations Staved Status feedback
// ----------------------------------
(function(mainNavBar){
var tooltipOpts = {
placement: 'bottom',
delay: { "show": 750, "hide": 50 }
},
statErrEl = mainNavBar.find(".annot-stat.annot-stat-error"),
errPopAck = -1, errPopTimeout = 5000, errPopShown = false;
mainNavBar.find(".annot-saved-status").find("[data-toggle=tooltip]").tooltip(tooltipOpts);
io.events.annotationsSavedStatusChanged.add(function(data){
$(".annot-saved-status")
.removeClass("stat-saved stat-dirty stat-error")
.addClass("stat-" + (data.status || 'error') );
if (data.status === 'error') {
if ((Date.now() - errPopAck) > errPopTimeout) {
if (! errPopShown) {
statErrEl
.popover({trigger: 'manual'})
.on('shown.bs.popover', function () {
statErrEl.tooltip('destroy');
mainNavBar.find(".annot-saved-status").find('.popover')
.on('click', function (){ statErrEl.popover('destroy') });
errPopShown = true;
})
.on('hidden.bs.popover', function () {
statErrEl
.tooltip(tooltipOpts)
.off('click');
errPopAck = Date.now();
errPopShown = false;
})
.popover('show')
;
}
}
else {
errPopAck = Date.now();
}
} else if (data.status === 'saved') {
errPopAck = -1;
}
});
})(_mainNavBar);
// Export: attach handlers to buttons
$("#btn-export-image-png").on('click', function(evt) { evt.preventDefault(); _export('png'); });
$("#btn-export-image-svg").on('click', function(evt) { evt.preventDefault(); _export('svg'); });
......
......@@ -293,6 +293,32 @@ body {
#main-navbar .dropdown-menu .dropdown-header {
color: #aaaaaa;
}
#main-navbar .annot-saved-status .annot-stat {
display: none;
cursor: default;
padding-bottom: 3px;
}
#main-navbar .annot-saved-status.stat-saved .annot-stat-saved {
display: inline-block;
}
#main-navbar .annot-saved-status.stat-dirty .annot-stat-saving {
display: inline-block;
}
#main-navbar .annot-saved-status.stat-error .annot-stat-error {
display: inline-block;
}
#main-navbar .annot-saved-status .popover {
cursor: default;
transition: opacity 0.15s linear 0s, top 0.25s cubic-bezier(0.33, 3, 1, 0.5) 0.05s;
}
#main-navbar .annot-saved-status .popover-title {
color: #a94442;
background-color: #f2dede;
}
#main-navbar .annot-saved-status .popover-content {
color: #a94442;
width: 276px;
}
.navbar-separator {
background-color: rgba(255, 255, 255, 0.1);
margin: 0 15px;
......
......@@ -209,6 +209,32 @@ html, body {
}
}
.annot-saved-status {
.annot-stat { display: none; cursor: default; padding-bottom: 3px; }
&.stat-saved {
.annot-stat-saved { display: inline-block; }
}
&.stat-dirty {
.annot-stat-saving { display: inline-block; }
}
&.stat-error {
.annot-stat-error { display: inline-block; }
}
.popover {
cursor: default;
//transition: opacity 0.15s linear 0s, top 0.25s linear 0.05s;
transition: opacity 0.15s linear 0s, top 0.25s cubic-bezier(0.33, 3, 1, 0.5) 0.05s;
}
.popover-title {
color: @state-danger-text;
background-color: @state-danger-bg; }
.popover-content {
color: @state-danger-text;
width: @popover-max-width;
}
}
}
.navbar-separator {
......
......@@ -15,7 +15,16 @@
{% endblock navbar_content %}
{% block navbar_right_content %}
<li>
<li class="navbar-text annot-saved-status" style="margin-left: 0; color: rgba(192, 192, 192, 0.5);">
<span class="annot-stat annot-stat-saved glyphicon glyphicon-saved" title="Annotations&nbsp;enregistrées"
data-toggle="tooltip" data-placement="bottom"></span>
<span class="annot-stat annot-stat-saving glyphicon glyphicon-save text-info" title="Enregistrement en&nbsp;cours..."
data-toggle="tooltip" data-placement="bottom"></span>
<span class="annot-stat annot-stat-error glyphicon glyphicon-alert text-danger" title="Erreur d'enregistrement&nbsp;!"
data-toggle="tooltip" data-placement="bottom" data-html="true"
data-content="Une erreur est survenue lors de l'enregistrement. Certaines annotations n'ont pas pu être sauvegardées."></span>
</li>
<li style="border-left: 1px solid rgba(255, 255, 255, 0.1); margin-right: -15px">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-download-alt"></span>
Exporter <span class="caret"></span>
......
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