Add trash feature on scase, category and thing

public_html/inc/main.js

@@ -33,8 +33,14 @@ on_valid_add_scase_modal=function (e) {
     alert("Vous devez saisir le nom de la valise !");
     return;
   }
-  if (scases.byName(name)) {
+  var nameshake=scases.byName(name);
+  if (nameshake) {
+    if (nameshake.removed) {
+      alert("Une valise de ce nom existe dans la corbeille !");
+    }
+    else {
       alert("Cette valise existe déjà !");
+    }
     return;
   }
   var scase=scases.newSCase(name);
@@ -70,8 +76,14 @@ on_valid_rename_scase_modal=function (e) {
     return;
   }
   if ($('#cats').data('scase')!=name) {
-    if (scases.byName(name)) {
+    var nameshake=scases.byName(name);
-      alert("Cette valise existe déjà !");
+    if (nameshake) {
+      if (nameshake.removed) {
+        alert("Une valise portant ce nom existe dans la corbeille !");
+      }
+      else {
+        alert("Une valise portant ce nom existe déjà !");
+      }
       return;
     }
 
@@ -110,8 +122,14 @@ on_valid_copy_scase_modal=function (e) {
     alert("Vous devez saisir le nom de la nouvelle valise !");
     return;
   }
-  if (scases.byName(name)) {
+  var nameshake=scases.byName(name);
-    alert("Cette valise existe déjà !");
+  if (nameshake) {
+    if (nameshake.removed) {
+      alert("Une valise portant ce nom existe dans la corbeille !");
+    }
+    else {
+      alert("Une valise portant ce nom existe déjà !");
+    }
     return;
   }
   var scase=scases.copySCase($('#cats').data('scase'),name);
@@ -164,6 +182,28 @@ on_delete_scase_btn_click=function(event) {
   }
 }
 
+on_restore_scase_btn_click=function(event) {
+  navbar_collapse_hide();
+  var scase=event.data.scase;
+  if (scase) {
+    myconfirm('Voulez-vous vraiment restaurer la valise '+scase.name+' ?',
+    function(data) {
+      scase.restore();
+      scases.save();
+      show_scases();
+    });
+  }
+}
+
+on_scase_trash_btn_click=function(event) {
+  event.preventDefault();
+  navbar_collapse_hide();
+  var scase=scases.byName($('#cats').data('scase'));
+  if (scase) {
+    show_scase_trash(scase);
+  }
+}
+
 /***********************
  * Add cat
  **********************/
@@ -181,8 +221,14 @@ on_valid_add_cat_modal=function (e) {
   }
   var scase=scases.byName($('#cats').data('scase'));
   if (scase) {
-    if (scase.cats.byName(name)) {
+    var nameshake=scase.cats.byName(name);
-      alert("Cette catégorie existe déjà !");
+    if (nameshake) {
+      if (nameshake.removed) {
+        alert("Une catégorie portant ce nom existe dans la corbeille !");
+      }
+      else {
+        alert("Une catégorie portant ce nom existe déjà !");
+      }
       return;
     }
     var cat=scase.cats.newCat(name);
@@ -222,7 +268,13 @@ on_valid_rename_cat_modal=function (e) {
   var scase=scases.byName($('#cats').data('scase'));
   if (scase) {
     if (scase.cats.byName(name)) {
+      var namesake=scase.cats.byName(name);
+      if (namesake.removed) {
+        alert("Une catégorie de se nom existe dans la corbeille !");
+      }
+      else {
         alert("Cette catégorie existe déjà !");
+      }
       return;
     }
     var cat=scase.cats.renameCat($('#rename_cat_modal').data('cat'),name);
@@ -259,6 +311,20 @@ on_delete_cat_btn_click=function(event) {
   }
 }
 
+on_restore_cat_btn_click=function(event) {
+  navbar_collapse_hide();
+  var scase=scases.byName($('#cats').data('scase'));
+  if (scase) {
+    var cat=event.data.cat.name;
+    myconfirm('Voulez-vous vraiment restaure la catégorie '+cat+' ?',
+    function(data) {
+      scase.cats.restoreCat(cat);
+      scases.save();
+      show_scase(scase);
+    });
+  }
+}
+
 /************************
  * Check/Uncheck thing
  ***********************/
@@ -385,8 +451,14 @@ on_valid_rename_thing_modal=function (e) {
   if (scase) {
     var cat=scase.cats.byName($('#rename_thing_modal').data('cat'));
     if (cat) {
-      if (cat.byLabel(label)) {
+      var namesake=cat.byLabel(label);
+      if (namesake) {
+        if (namesake.removed) {
+          alert("Un élément de ce nom existe dans la corbeille !");
+        }
+        else {
           alert("Un élément de ce nom existe déjà !");
+        }
         return;
       }
       var thing=cat.renameThing($('#rename_thing_modal').data('thing'),label);
@@ -427,6 +499,23 @@ on_delete_thing_btn_click=function(event) {
   }
 }
 
+on_restore_thing_btn_click=function(event) {
+  navbar_collapse_hide();
+  var scase=scases.byName($('#cats').data('scase'));
+  if (scase) {
+    var cat=scase.cats.byName(event.data.cat.name);
+    if (cat) {
+      var thing=event.data.thing.label;
+      myconfirm("Voulez-vous vraiment restaurer l'élément "+thing+" ?",
+      function(data) {
+        cat.restoreThing(thing);
+        scases.save();
+        show_scase(scase,cat.name);
+      });
+    }
+  }
+}
+
 /********************
  * Show one scase
  *******************/
@@ -464,6 +553,9 @@ show_cat=function(cat,displayed) {
   }
   var ul=$('<ul class="list-group" data-cat="'+cat.name+'"></ul>');
   for (idx in cat.things) {
+    if (cat.things[idx].removed) {
+      continue;
+    }
     var li=$('<li class="list-group-item" data-label="'+cat.things[idx].label+'">'+cat.things[idx].label+'</li>');
     if (cat.things[idx].checked) {
       li.addClass('done');
@@ -495,6 +587,9 @@ show_cat=function(cat,displayed) {
 show_scase=function(scase,display_cat) {
   clear_page('<h3><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> '+scase.name+'</h3><div class="panel-group" id="cats" role="tablist" aria-multiselectable="true" data-scase="'+scase.name+'"></div>');
   scase.cats.each(function(idx,cat) {
+    if (cat.removed) {
+      return;
+    }
     show_cat(cat,(cat.name==display_cat));
   });
   show_menu('scase');
@@ -506,12 +601,99 @@ on_back_to_scases_btn_click=function(e) {
   show_scases();
 }
 
+/********************
+ * Show scase trash
+ *******************/
+show_scase_trash=function(scase,display_cat) {
+  clear_page('<h3><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>'+scase.name+' : Corbeille <button class="btn btn-default btn-xs" id="back_btn"><span class="glyphicon glyphicon-arrow-left"></button></h3><div class="panel-group" id="cats" role="tablist" aria-multiselectable="true" data-scase="'+scase.name+'"></div>');
+
+  $('#content h3 #back_btn').bind('click', {'scase': scase}, function(event) {
+    show_scase(event.data.scase);
+  });
+
+  scase.cats.each(function(idx,cat) {
+    show_cat_trash(cat,(cat.name==display_cat));
+  });
+  if ($('#cats .panel').length==0) {
+    $('#content').append('<p class="center">La corbeille est vide.</p>');
+  }
+  show_menu('scase');
+}
+
+show_cat_trash=function(cat,displayed) {
+  var panel=$('<div class="panel panel-default"></div>');
+  var panel_heading=$('<div class="panel-heading" role="tab"></div>');
+  var panel_title=$('<h4 class="panel-title">'+cat.name+' </h4>');
+
+  var tag=$('<span class="count-tag pull-right"></span>');
+
+  panel_title.append(tag);
+
+
+  panel_heading.append(panel_title);
+  panel.append(panel_heading);
+
+
+  if (cat.removed) {
+    var stats=cat.stats();
+    tag.append($('<span class="badge">'+stats.things+'</span>'));
+
+    var restore_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-ok"></button>');
+    restore_btn.bind('click',{'cat': cat},on_restore_cat_btn_click);
+    tag.append(restore_btn);
+  }
+  else {
+    var deleted_things=[];
+    for (idx in cat.things) {
+      if (cat.things[idx].removed) {
+        deleted_things.push(cat.things[idx]);
+      }
+    }
+    if (deleted_things.length==0) {
+      return true;
+    }
+    panel_title.bind('click',on_title_click);
+    tag.append($('<span class="badge">'+deleted_things.length+'</span>'));
+
+    var panel_collapse=$('<div class="panel-collapse collapse" role="tabpanel"></div>');
+    if (displayed) {
+      panel_collapse.addClass('in');
+    }
+    var ul=$('<ul class="list-group" data-cat="'+cat.name+'"></ul>');
+    for (idx in deleted_things) {
+      var li=$('<li class="list-group-item" data-label="'+deleted_things[idx].label+'">'+deleted_things[idx].label+'</li>');
+      var li_actions=$('<span class="actions pull-right"></span>');
+
+      var restore_el_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-ok"></button>');
+      restore_el_btn.bind('click',{'cat': cat,'thing': deleted_things[idx]},on_restore_thing_btn_click);
+      li_actions.append(restore_el_btn);
+
+      li.append(li_actions);
+
+      ul.append(li);
+    }
+    panel_collapse.append(ul);
+    panel.append(panel_collapse);
+  }
+
+  $('#cats').append(panel);
+}
+
+on_back_to_scase_btn_click=function(e) {
+  e.preventDefault();
+  navbar_collapse_hide();
+  show_scase(e.data.scase);
+}
+
 /********************
  * Show scases
  *******************/
 show_scases=function() {
   clear_page('<h3>Vos valises</h3><ul class="list-group" id="scases"></ul>');
   scases.each(function(idx,scase) {
+    if (scase.removed) {
+      return;
+    }
     var stats=scase.stats();
     var tag='<span class="count-tag pull-right">';
     if (stats.things==stats.done) {
@@ -535,6 +717,37 @@ on_scase_click=function(event) {
   show_scase(scase);
 }
 
+/********************
+ * Show scases trash
+ *******************/
+show_scases_trash=function() {
+  clear_page('<h3>Corbeille <button class="btn btn-default btn-xs" id="back_btn"><span class="glyphicon glyphicon-arrow-left"></button></h3><ul class="list-group" id="scases"></ul>');
+  $('#content h3 #back_btn').bind('click', function(event) {
+    show_scases();
+  });
+
+  scases.each(function(idx,scase) {
+    if (!scase.removed) {
+      return;
+    }
+    var stats=scase.stats();
+    var tags=$('<span class="count-tag pull-right"></span>');
+    tags.append('<span class="badge">'+stats.things+'</span>');
+
+    var restore_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-ok"></button>');
+    restore_btn.bind('click',{'scase': scase},on_restore_scase_btn_click);
+    tags.append(restore_btn);
+
+    var li=$('<li class="list-group-item" data-name="'+scase.name+'"><span class="scase-name"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> '+scase.name+'</span></li>');
+    li.append(tags);
+    $('#scases').append(li);
+  });
+  if ($('#scases li').length==0) {
+    $('#content').append('<p class="center">Aucune valise dans la corbeille.</p>');
+  }
+  show_menu('scases');
+}
+
 clear_page=function(new_content) {
   if (new_content) {
     $('#content').html(new_content);
@@ -645,6 +858,8 @@ $( document ).ready( function() {
   $("#add_scase_modal").on('hidden.bs.modal',on_close_add_scase_modal);
   $("#add_scase_modal form").bind('submit',on_valid_add_scase_modal);
 
+  $('#scases_trash_btn').bind('click',show_scases_trash);
+
   $('#rename_scase_btn').bind('click',on_rename_scase_btn_click);
   $('#rename_scase_submit').bind('click',on_valid_rename_scase_modal);
   $("#rename_scase_modal").on('shown.bs.modal',on_show_rename_scase_modal);
@@ -659,6 +874,7 @@ $( document ).ready( function() {
 
   $('#reset_scase_btn').bind('click',on_reset_scase_btn_click);
   $('#delete_scase_btn').bind('click',on_delete_scase_btn_click);
+  $('#scase_trash_btn').bind('click',on_scase_trash_btn_click);
 
   $('#add_cat_btn').bind('click',on_add_cat_btn_click);
   $('#add_cat_submit').bind('click',on_valid_add_cat_modal);

public_html/inc/mysc_objects.js

@@ -127,7 +127,7 @@ function SCaseList() {
   this.removeSCase=function(name) {
     for (el in this) {
       if (this.isSCase(this[el]) && this[el].name==name) {
-        delete this[el];
+        this[el].remove();
         return true;
       }
     }
@@ -135,7 +135,15 @@ function SCaseList() {
   }
 
   this.newSCase=function(name) {
-    if (!this.byName(this[name])) {
+    if (this.byName(this[name])) {
+      var scase=this.byName(name);
+      if (scase.removed) {
+        scase.restore();
+        return true;
+      }
+
+    }
+    else {
       var uuid=uuid||generate_uuid();
       this[uuid]=new SCase(uuid,name);
       return this[uuid];
@@ -181,6 +189,7 @@ function SCase(uuid,name,data) {
   this.name=name;
   this.cats=new CatList();
   this.lastChange=new Date().getTime();
+  this.removed=false;
 
   this.isSCase=function() {
     return true;
@@ -190,6 +199,7 @@ function SCase(uuid,name,data) {
     this.uuid=data.uuid || generate_uuid();
     this.lastChange=data.lastChange || new Date().getTime();
     this.name=decodeURIComponent(data.name);
+    this.removed=data.removed||false;
     if (jQuery.type(data.cats) == 'object') {
       this.cats=new CatList(data.cats);
     }
@@ -201,6 +211,7 @@ function SCase(uuid,name,data) {
       'uuid': this.uuid,
       'lastChange': this.lastChange,
       'name': encodeURIComponent(this.name),
+      'removed': this.removed,
       'cats': this.cats.export()
     };
   }
@@ -246,6 +257,16 @@ function SCase(uuid,name,data) {
     return true;
   }
 
+  this.remove=function() {
+    this.removed=true;
+    this.lastChange=new Date().getTime();
+  }
+
+  this.restore=function() {
+    this.removed=false;
+    this.lastChange=new Date().getTime();
+  }
+
   /*
    * Contructor
    */
@@ -316,7 +337,14 @@ function CatList(data) {
   }
 
   this.newCat=function(name) {
-    if (!this.isCat(this[name])) {
+    if (this.byName(name)) {
+      var cat=this.byName(name);
+      if (cat.removed) {
+        cat.restore();
+        return true;
+      }
+    }
+    else {
       var uuid=uuid||generate_uuid();
       this[uuid]=new Cat(uuid,name);
       return this[uuid];
@@ -337,13 +365,22 @@ function CatList(data) {
   this.removeCat=function(name) {
     for (el in this) {
       if (this.isCat(this[el]) && this[el].name==name) {
-        delete this[el];
+        this[el].remove();
         return true;
       }
     }
     return false;
   }
 
+  this.restoreCat=function(name) {
+    for (el in this) {
+      if (this.isCat(this[el]) && this[el].name==name && this[el].removed) {
+        this[el].restore();
+        return true;
+      }
+    }
+    return false;
+  }
 
 
   /*
@@ -367,6 +404,7 @@ function Cat(uuid,name,color,data) {
   this.name=name;
   this.color=color || '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
   this.things={};
+  this.removed=false;
 
   this.isCat=function() {
     return true;
@@ -377,6 +415,7 @@ function Cat(uuid,name,color,data) {
     this.lastChange=data.lastChange||new Date().getTime();
     this.name=decodeURIComponent(data.name);
     this.color=data.color;
+    this.removed=data.removed||false;
     if (jQuery.type(data.things) == 'object') {
       for (tuuid in data.things) {
         this.things[tuuid]=new Thing(tuuid);
@@ -396,6 +435,7 @@ function Cat(uuid,name,color,data) {
       'lastChange': this.lastChange,
       'name': encodeURIComponent(this.name),
       'color': this.color,
+      'removed': this.removed,
       'things': things
     };
   }
@@ -429,7 +469,15 @@ function Cat(uuid,name,color,data) {
   }
 
   this.newThing=function(label) {
-    if (!this.byLabel(label)) {
+    if (this.byLabel(label)) {
+      var thing=this.byLabel(label);
+      if (thing.removed) {
+        thing.restore();
+        thing.setChecked(false);
+        return true;
+      }
+    }
+    else {
       var uuid=generate_uuid();
       this.things[uuid]=new Thing(uuid,label);
       return true;
@@ -450,13 +498,34 @@ function Cat(uuid,name,color,data) {
   this.removeThing=function(label) {
     for (idx in this.things) {
       if (this.things[idx].label==label) {
-        delete this.things[idx];
+        this.things[idx].remove();
         return true;
       }
     }
     return false;
   }
 
+  this.restoreThing=function(label) {
+    for (idx in this.things) {
+      if (this.things[idx].label==label && this.things[idx].removed) {
+        this.things[idx].restore();
+        return true;
+      }
+    }
+    return false;
+  }
+
+  this.remove=function() {
+    this.removed=true;
+    this.lastChange=new Date().getTime();
+  }
+
+  this.restore=function() {
+    this.removed=false;
+    this.lastChange=new Date().getTime();
+  }
+
+
   /*
    * Contructor
    */
@@ -477,12 +546,14 @@ function Thing(uuid,label,checked) {
   this.lastChange=new Date().getTime();
   this.label=label;
   this.checked=checked;
+  this.removed=false;
 
   this.import=function(data) {
     this.uuid=data.uuid||generate_uuid();
     this.lastChange=data.lastChange||new Date().getTime();
     this.label=decodeURIComponent(data.label),
     this.checked=data.checked;
+    this.removed=data.removed||false;
   }
 
   this.export=function() {
@@ -490,7 +561,8 @@ function Thing(uuid,label,checked) {
       'uuid': this.uuid,
       'lastChange': this.lastChange,
       'label': encodeURIComponent(this.label),
-      'checked': this.checked
+      'checked': this.checked,
+      'removed': this.removed,
     };
   }
 
@@ -498,4 +570,14 @@ function Thing(uuid,label,checked) {
     this.checked=value;
     this.lastChange=new Date().getTime();
   }
+
+  this.remove=function() {
+    this.removed=true;
+    this.lastChange=new Date().getTime();
+  }
+
+  this.restore=function() {
+    this.removed=false;
+    this.lastChange=new Date().getTime();
+  }
 }

public_html/index.html

@@ -68,6 +68,7 @@ div.panel-heading, li.list-group-item, a {
 	<div class="collapse navbar-collapse" id="navbar-top-collapse">
           <ul class="nav navbar-nav navbar-right">
             <li class="menu menu-scases"><a href="#add_scase" id="add_scase_btn"><span class="glyphicon glyphicon-plus-sign"></span> Ajouter une valise</a></li>
+            <li class="menu menu-scases"><a href="#scases_trash" id="scases_trash_btn"><span class="glyphicon glyphicon-trash"></span> Voir la corbeille</a></li>
             <li class="menu menu-scase"><a href="#scases" id="back_to_scases"><span class="glyphicon glyphicon-briefcase"></span> Liste des valises</a></li>
             <li class="menu menu-scase dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-tag'></span> Gérer la valise <b class="caret"></b></a>
@@ -78,6 +79,8 @@ div.panel-heading, li.list-group-item, a {
                 <li><a href="#copy_scase" id="copy_scase_btn"><span class="glyphicon glyphicon-duplicate"></span> Copier la valise</a></li>
                 <li><a href="#reset_scase" id="reset_scase_btn"><span class="glyphicon glyphicon-cog"></span> Réinitialiser la valise</a></li>
                 <li><a href="#delete_scase" id="delete_scase_btn"><span class="glyphicon glyphicon-trash"></span> Supprimer la valise</a></li>
+                <li class="divider"></li>
+                <li><a href="#scase_trash" id="scase_trash_btn"><span class="glyphicon glyphicon-trash"></span> Voir la corbeille de la valise</a></li>
               </ul>
             </li>
             <li><a id='clear_local_data'><span class='glyphicon glyphicon-trash'></span> Purger les données locales</a></li>