Commit aeb1feb1f1bba0348caece7dcb41d658528abe7c

Add basic notifications for page and menu saving

  Add basic notifications when saving page or menu. Notifications should be
more robust and should also indicate if content has been saved.
  • Diff rendering mode:
  • inline
  • side by side

mouchak/static/css/editor.css

141#addPage {141#addPage {
142 margin: 10px 0 0 200px;142 margin: 10px 0 0 200px;
143}143}
144#notifications {
145 width: 300px;
146 z-index: 100;
147 margin: 5px auto;
148}
144149
145/* ==========================================================================150/* ==========================================================================
146 Helper classes151 Helper classes

mouchak/static/js/editor.js

191 return false;191 return false;
192 },192 },
193 updatePage: function() {193 updatePage: function() {
194 var success_template = _.template($('#success-notif').html());
195 var fail_template = _.template($('#fail-notif').html());
196
194 var name = $('#name').val();197 var name = $('#name').val();
195 var title = $('#title').val();198 var title = $('#title').val();
196 var children = $('#children').val();199 var children = $('#children').val();
……
213 model.set(response.page);213 model.set(response.page);
214 model.id = response.page.id;214 model.id = response.page.id;
215 M.pagelistview.render();215 M.pagelistview.render();
216 $('#notifications').html(success_template({
217 title: 'Saved',
218 msg: ''
219 }));
216 },220 },
217 error: function(model, xhr) {221 error: function(model, xhr) {
218 console.log('failed', model, xhr);222 console.log('failed', model, xhr);
223 $('#notifications').html(fail_template({
224 title: 'Error!',
225 msg: 'Something went wrong, and the page could not be updated'
226 }));
219 }227 }
220 });228 });
221 return false;229 return false;
……
374 this.showMenuOptions(this.model.get('customMenu'));374 this.showMenuOptions(this.model.get('customMenu'));
375 },375 },
376 saveMenu: function() {376 saveMenu: function() {
377 console.log('saving menu..');
377 //console.log('saving menu..');
378 var success_template = _.template($('#success-notif').html());
379 var fail_template = _.template($('#fail-notif').html());
380
378 var bool, html = '', menuOrder = [];381 var bool, html = '', menuOrder = [];
379 if($('#custom-menu').is(":checked")) {382 if($('#custom-menu').is(":checked")) {
380 bool = true;383 bool = true;
……
392 this.model.save({}, {392 this.model.save({}, {
393 success: function(model, response) {393 success: function(model, response) {
394 console.log(model, response);394 console.log(model, response);
395 $('#notifications').html(success_template({
396 title: 'Saved',
397 msg: ''
398 }));
399
395 },400 },
396 error: function(xhr, response) {401 error: function(xhr, response) {
402 $('#notifications').html(fail_template({
403 title: 'Error!',
404 msg: 'Something went wrong, and the page could not be updated'
405 }));
397 }406 }
398 });407 });
399 //alert('end of save menu');408 //alert('end of save menu');

mouchak/templates/editor.html

23 <![endif]-->23 <![endif]-->
2424
25 <div class="container" id="container">25 <div class="container" id="container">
26 <div id="header"> </div>
26 <div id="header"><div id="notifications"></div></div>
27 <div id="content-container"></div>27 <div id="content-container"></div>
28 <div id="footer">28 <div id="footer">
29 </div>29 </div>
……
219 </textarea>219 </textarea>
220 </div>220 </div>
221 </script>221 </script>
222
223 <!-- notification templates -->
224 <script type="text/template" id="success-notif">
225 <div class="alert alert-success">
226 <button type="button" class="close" data-dismiss="alert">&times;</button>
227 <h4> <%= title %> </h4>
228 <%= msg %>
229 </div>
230 </script>
231
232 <script type="text/template" id="fail-notif">
233 <div class="alert alert-error">
234 <button type="button" class="close" data-dismiss="alert">&times;</button>
235 <h4> <%= title %> </h4>
236 <%= msg %>
237 </div>
238 </script>
239
222 </body>240 </body>
223</html>241</html>