Rework on data structure to add uuid as objects identifier and add lastChange metadata to each objects

public_html/inc/lib/uuid.js

@@ -0,0 +1,6 @@
+generate_uuid=function() {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+		var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+		return v.toString(16);
+	});
+}

public_html/inc/main.js

@@ -280,7 +280,7 @@ on_li_click=function(event) {
     if (cat) {
       var thing=cat.byLabel(li.data('label'));
       if (thing) {
-        thing.checked=li.hasClass('done');
+        thing.setChecked(li.hasClass('done'));
         scases.save();
       }
       show_scase(scase,cat.name);
@@ -315,7 +315,7 @@ on_valid_add_thing_modal=function (e) {
         alert("Cet élément existe déjà !");
         return;
       }
-      cat.things.push(new Thing(label,false));
+      cat.newThing(label);
       scases.save();
       show_scase(scase,cat.name);
     }
@@ -405,15 +405,13 @@ show_cat=function(cat,displayed) {
   var panel_title=$('<h4 class="panel-title">'+cat.name+' </h4>');
   panel_title.bind('click',on_title_click);
 
-
+  var stats=cat.stats();
-  var count=cat.count();
-  var countDone=cat.countDone();
   var tag=$('<span class="count-tag pull-right"></span>');
-  if (count==countDone) {
+  if (stats.things==stats.done) {
     tag.append($('<span class="label label-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></span>'));
   }
   else {
-    tag.append($('<span class="badge">'+countDone+' / '+count+'</span>'));
+    tag.append($('<span class="badge">'+stats.done+' / '+stats.things+'</span>'));
   }
 
   var delete_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-trash"></button>');

public_html/inc/mysc_objects.js

@@ -1,62 +1,39 @@
-exampleData={
+
-  'lastChange': 0,
+
-  'scases': {
-    0: {
-      'name': 'Vacances',
-      'cats': {
-        'lastChange': 0,
-        'cats': {
-          0: {
-            'name': 'Papier',
-            'color': '#f00',
-            'things': [
-              {
-                'label': 'Papier blanc',
-                'checked': false
-              },
-              {
-                'label': 'Stylo',
-                'checked': true
-              },
-              {
-                'label': "Carte d'identité",
-                'checked': false
-              }
-            ]
-          },
-          1: {
-            'name': 'Multimédia',
-            'color': '#0f0',
-            'things': [
-              {
-                'label': 'Montre',
-                'checked': false
-              },
-              {
-                'label': 'Chargeur montre',
-                'checked': true
-              },
-              {
-                'label': "PC",
-                'checked': false
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-};
 function SCaseList() {
   lastChange=0;
 
+  this.importExampleData=function() {
+    var exampleData={
+      'Vacances': {
+        'Papier': {
+          'color': '#f00',
+          'things': ['Papier blanc', 'Stylo', "Carte d'identité"]
+        },
+        'Multimédia' : {
+          'color': '#0f0',
+          'things': ['Montre', 'Chargeur montre', "PC portable"]
+        }
+      }
+    };
+    for (scaseName in exampleData) {
+      var scase=this.newSCase(scaseName);
+      for (catName in exampleData[scaseName]) {
+        var cat=scase.cats.newCat(catName);
+        for (idx in exampleData[scaseName][catName].things) {
+          cat.newThing(exampleData[scaseName][catName].things[idx]);
+        }
+      }
+    }
+  }
+
   this.loadFromLocalStorage=function() {
     if (jQuery.type(localStorage.scases)!='undefined') {
       try {
         var data=JSON.parse(localStorage.scases);
         this.lastChange=data.lastChange;
         for (el in data.scases) {
-          this[el]=new SCase(false,data.scases[el]);
+          this[el]=new SCase(false,false,data.scases[el]);
         }
       }
       catch(e) {
@@ -75,10 +52,13 @@ function SCaseList() {
     }
     else {
       myconfirm("<h2>Bienvenu !</h2><p>Souhaitez-vous charger les données d'exemple ?</p>",
-        function(data) {
+        function(scases) {
-          localStorage.scases=JSON.stringify(exampleData);
+          scases.importExampleData();
-          location.reload();
+          scases.save();
-        }
+          show_scases();
+        },
+        false,
+        this
       );
     }
   }
@@ -101,7 +81,7 @@ function SCaseList() {
     }
     this.lastChange=data.lastChange;
     for (el in data.scases) {
-      this[el]=new SCase(false,data.scases[el]);
+      this[el]=new SCase(false,false,data.scases[el]);
     }
     return true;
   }
@@ -155,9 +135,10 @@ function SCaseList() {
   }
 
   this.newSCase=function(name) {
-    if (!this.isSCase(this[name])) {
+    if (!this.byName(this[name])) {
-      this[name]=new SCase(name);
+      var uuid=uuid||generate_uuid();
-      return this[name];
+      this[uuid]=new SCase(uuid,name);
+      return this[uuid];
     }
     return false;
   }
@@ -166,6 +147,7 @@ function SCaseList() {
     var scase=this.byName(name);
     if (scase && !this.byName(newname)) {
       scase.name=newname;
+      scase.lastChange=new Date().getTime();
       return scase;
     }
     return false;
@@ -174,9 +156,12 @@ function SCaseList() {
   this.copySCase=function(name,newname) {
     var orig_scase=this.byName(name);
     if (this.isSCase(orig_scase) && !this.byName(newname)) {
-      this[newname]=new SCase(false,orig_scase.export());
+      var uuid=uuid||generate_uuid();
-      this[newname].name=newname;
+      this[uuid]=new SCase(false,false,orig_scase.export());
-      return this[newname];
+      this[uuid].uuid=uuid;
+      this[uuid].lastChange=new Date().getTime();
+      this[uuid].name=newname;
+      return this[uuid];
     }
     return false;
   }
@@ -191,16 +176,30 @@ function SCaseList() {
   }
 }
 
-function SCase(name,data) {
+function SCase(uuid,name,data) {
+  this.uuid=uuid||generate_uuid();
   this.name=name;
   this.cats=new CatList();
+  this.lastChange=new Date().getTime();
 
   this.isSCase=function() {
     return true;
   }
 
+  this.import=function(data) {
+    this.uuid=data.uuid || generate_uuid();
+    this.lastChange=data.lastChange || new Date().getTime();
+    this.name=decodeURIComponent(data.name);
+    if (jQuery.type(data.cats) == 'object') {
+      this.cats=new CatList(data.cats);
+    }
+    return true;
+  }
+
   this.export=function() {
     return {
+      'uuid': this.uuid,
+      'lastChange': this.lastChange,
       'name': encodeURIComponent(this.name),
       'cats': this.cats.export()
     };
@@ -243,6 +242,7 @@ function SCase(name,data) {
         }
       }
     });
+    this.lastChange=new Date().getTime();
     return true;
   }
 
@@ -251,10 +251,7 @@ function SCase(name,data) {
    */
   if (jQuery.type(data)=='object') {
     try {
-      this.name=decodeURIComponent(data.name);
+      this.import(data);
-      if (jQuery.type(data.cats) == 'object') {
-        this.cats=new CatList(data.cats);
-      }
     }
     catch (e) {
       console.log(e);
@@ -266,15 +263,10 @@ function SCase(name,data) {
 
 
 function CatList(data) {
-  lastChange=0;
-  
   this.export=function() {
-    return {
+    return this.each(function(idx,cat) {
-      'lastChange': this.lastChange,
-      'cats': this.each(function(idx,cat) {
       return cat.export();
-      })
+    });
-    };
   }
 
   this.import=function(data) {
@@ -283,9 +275,8 @@ function CatList(data) {
         delete this[el];
       }
     }
-    this.lastChange=data.lastChange;
+    for (el in data) {
-    for (el in data.cats) {
+      this[el]=new Cat(el,false,false,data[el]);
-      this[el]=new Cat(el,false,data.cats[el]);
     }
     return true;
   }
@@ -326,8 +317,9 @@ function CatList(data) {
 
   this.newCat=function(name) {
     if (!this.isCat(this[name])) {
-      this[name]=new Cat(name);
+      var uuid=uuid||generate_uuid();
-      return this[name];
+      this[uuid]=new Cat(uuid,name);
+      return this[uuid];
     }
     return false;
   }
@@ -336,6 +328,7 @@ function CatList(data) {
     var cat=this.byName(name);
     if (cat && !this.byName(newname)) {
       cat.name=newname;
+      cat.lastChange=new Date().getTime();
       return cat;
     }
     return false;
@@ -368,34 +361,45 @@ function CatList(data) {
 
 }
 
-function Cat(name,color,data) {
+function Cat(uuid,name,color,data) {
+  this.uuid=generate_uuid();
+  this.lastChange=new Date().getTime();
   this.name=name;
   this.color=color || '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
-  this.things=[];
+  this.things={};
 
   this.isCat=function() {
     return true;
   }
 
+  this.import=function(data) {
+    this.uuid=data.uuid || generate_uuid();
+    this.lastChange=data.lastChange||new Date().getTime();
+    this.name=decodeURIComponent(data.name);
+    this.color=data.color;
+    if (jQuery.type(data.things) == 'object') {
+      for (tuuid in data.things) {
+        this.things[tuuid]=new Thing(tuuid);
+        this.things[tuuid].import(data.things[tuuid]);
+      }
+    }
+    return true;
+  }
+
   this.export=function() {
-    var things=[];
+    var things={};
-    for (idx in this.things) {
+    for (tuuid in this.things) {
-      things.push(this.things[idx].export());
+      things[tuuid]=this.things[tuuid].export();
     }
     return {
+      'uuid': this.uuid,
+      'lastChange': this.lastChange,
       'name': encodeURIComponent(this.name),
       'color': this.color,
       'things': things
     };
   }
 
-  this.importThing=function(data) {
-    return new Thing(
-      decodeURIComponent(data.label),
-      data.checked
-    );
-  }
-
   this.byLabel=function(label) {
     for (idx in this.things) {
       if (label==this.things[idx].label) {
@@ -406,23 +410,38 @@ function Cat(name,color,data) {
   }
 
   this.count=function() {
-    return this.things.length;
+    return keys(this.things).length;
   }
 
-  this.countDone=function() {
+  this.stats=function() {
     var count=0;
+    var done=0;
     for (idx in this.things) {
       if (this.things[idx].checked) {
+        done+=1;
+      }
       count+=1;
     }
+    return {
+      'things': count,
+      'done': done
+    };
   }
-    return count;
+
+  this.newThing=function(label) {
+    if (!this.byLabel(label)) {
+      var uuid=generate_uuid();
+      this.things[uuid]=new Thing(uuid,label);
+      return true;
+    }
+    return false;
   }
 
   this.renameThing=function(label,newlabel) {
     var thing=this.byLabel(label);
     if (thing && !this.byLabel(newlabel)) {
       thing.label=newlabel;
+      thing.lastChange=new Date().getTime();
       return thing;
     }
     return false;
@@ -443,13 +462,7 @@ function Cat(name,color,data) {
    */
   if (jQuery.type(data)=='object') {
     try {
-      this.name=decodeURIComponent(data.name);
+      this.import(data);
-      this.color=data.color;
-      if (jQuery.type(data.things) == 'array') {
-        for (idx in data.things) {
-          this.things.push(this.importThing(data.things[idx]));
-        }
-      }
     }
     catch (e) {
       console.log(e);
@@ -459,13 +472,30 @@ function Cat(name,color,data) {
 
 }
 
-function Thing(label,checked) {
+function Thing(uuid,label,checked) {
+  this.uuid=uuid||generate_uuid();
+  this.lastChange=new Date().getTime();
   this.label=label;
   this.checked=checked;
+
+  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.export=function() {
     return {
+      'uuid': this.uuid,
+      'lastChange': this.lastChange,
       'label': encodeURIComponent(this.label),
       'checked': this.checked
     };
   }
+
+  this.setChecked=function(value) {
+    this.checked=value;
+    this.lastChange=new Date().getTime();
+  }
 }

public_html/index.html

@@ -284,6 +284,7 @@ div.panel-heading, li.list-group-item, a {
 
 </script>
 
+<script src="inc/lib/uuid.js"></script>
 <script src="inc/mydialog.js"></script>
 <script src="inc/mysc_objects.js"></script>
 <script src="inc/main.js"></script>