Add Categories management

inc/myco.js

@@ -103,7 +103,8 @@ view_home=function() {
           sum+=value;
           diff='<td class="positive">+'+value.toFixed(2)+' €</td>';
         }
-        tbody.html(tbody.html()+'<tr><td><a class="group-link" data-uuid="'+g+'">'+balances[g].name+'</a></td>'+diff+'</tr>');
+        menu='<div class="btn-group" data-grp="'+g+'"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></button><ul class="dropdown-menu"><li><a class="home_grp_cat_btn"><span class="glyphicon glyphicon-th-list"></span> Catégories</a></li></ul></div>';
+        tbody.html(tbody.html()+'<tr><td><a class="group-link" data-uuid="'+g+'">'+balances[g].name+'</a></td>'+diff+'<td>'+menu+'</td></tr>');
       }
     }
     $('#view-home #mybalances a.group-link').bind('click',function(e) {
@@ -112,6 +113,9 @@ view_home=function() {
         view_group(groups[g]);
       }
     });
+    $('a.home_grp_cat_btn').each(function(idx,a) {
+      $(a).bind('click',on_home_grp_cat_btn_click);
+    });
     if (sum<0) {
       $('#view-home #mybalances #total-value').html('<span class="negative">'+sum.toFixed(2)+' €</span>');
     }
@@ -126,6 +130,20 @@ view_home=function() {
   view_part('#view-home');
 }
 
+on_home_grp_cat_btn_click=function(e) {
+  grp_id=$(e.target).parents('div.btn-group').data('grp');
+  grp=groups[grp_id];
+  console.log(grp.getCategories());
+  ul=$('#grp_cat_modal ul');
+  html="";
+  cats=grp.getCategories();
+  for(cid in cats) {
+    html+="<li><span class='cat-color' style='background-color: "+cats[cid]['color']+"'></span> "+cats[cid]['name']+"</li>";
+  }
+  ul.html(html);
+  $('#grp_cat_modal').modal('show');
+}
+
 /****************
  * View group
  ****************/
@@ -172,8 +190,13 @@ show_contributions=function(group,contributor_email) {
   else {
     sum=0;
     for (idx in contributions) {
+      var cat='';
+      console.log(contributions[idx].categorie);
+      if (contributions[idx].categorie && jQuery.type(group.categories[contributions[idx].categorie])) {
+		cat='<br/><span class="categorie"><span class="cat-color" style="background-color: '+group.categories[contributions[idx].categorie]['color']+'"></span> '+group.categories[contributions[idx].categorie]['name']+"</span>";
+	  }
       col_actions='<td><div class="btn-group" data-uuid="'+contributions[idx].uuid+'"><button type="button" class="btn btn-default contribution_edit_btn"><span class="glyphicon glyphicon-edit"></span></button><button type="button" class="btn btn-default contribution_delete_btn"><span class="glyphicon glyphicon-trash"></span></button></div></td>';
-      tbody.append('<tr><td>'+contributions[idx].getTitle()+'</td><td>'+contributions[idx].cost.toFixed(2)+' €<br/><span class="date">'+moment(contributions[idx].date).format('DD/MM/YYYY')+'</span></td>'+col_actions+'</tr>');
+      tbody.append('<tr><td>'+contributions[idx].getTitle()+cat+'</td><td>'+contributions[idx].cost.toFixed(2)+' €<br/><span class="date">'+moment(contributions[idx].date).format('DD/MM/YYYY')+'</span></td>'+col_actions+'</tr>');
       sum+=contributions[idx].cost;
     }
     total.html(sum.toFixed(2)+' €');
@@ -370,6 +393,13 @@ on_confirm_del_contributor=function(contributor) {
 on_show_add_contribution_modal=function(e) {
   $('#add_contribution_modal #add_contribution_contributor_email').html($('#view-group #contributor').html());
   $('#add_contribution_modal #add_contribution_contributor_email')[0].value=$('#view-group #contributor')[0].value;
+  gid=$('#add_contribution_modal').data('group-uuid');
+  group=groups[gid];
+  cats="<option value=''>Non définie</option>";
+  for (u in group.categories) {
+	cats+="<option value='"+u+"'>"+group.categories[u]['name']+"</option>";
+  }
+  $('#add_contribution_modal #add_contribution_categorie').html(cats);
   $('#add_contribution_modal #add_contribution_title').focus();
 }
 
@@ -428,12 +458,18 @@ on_valid_add_contribution_modal=function(e) {
     date=new Date();
   }
   
+  var cat=$('#add_contribution_categorie')[0].value;
+  if (cat != '' && !jQuery.type(group.categories[cat])) {
+	alert('Categorie incorrect');
+	return;
+  }
+  
   if($('#add_contribution_modal #edit_uuid')[0].value=='-1') {
-    group.addContribution(new Contribution(contributor,cost,title,date));
+    group.addContribution(new Contribution(contributor,cost,title,date,cat));
   }
   else {
     contribution_uuid=$('#add_contribution_modal #edit_uuid')[0].value;
-    group.updateContribution(contribution_uuid,new Contribution(contributor,cost,title,date));
+    group.updateContribution(contribution_uuid,new Contribution(contributor,cost,title,date,cat));
   }
   show_contributions(group,contributor_email);
   $('#add_contribution_modal').modal('hide');
@@ -469,6 +505,9 @@ on_contribution_edit_btn_click=function(e) {
   $('#add_contribution_modal #add_contribution_title')[0].value=contribution.getTitle();
   $('#add_contribution_modal #add_contribution_cost')[0].value=contribution.cost;
   $('#add_contribution_modal #add_contribution_date')[0].value=moment(contribution.date).format('DD/MM/YYYY');
+  if (contribution.categorie) {
+	$('#add_contribution_modal #add_contribution_categorie')[0].value=contribution.categorie;
+  }
   $('#add_contribution_modal #edit_uuid')[0].value=contribution_uuid;
   $('#add_contribution_modal').modal('show');
 }

inc/myco_objects.js

@@ -121,7 +121,7 @@ function Group(uuid,name,data) {
   this.deletedContributors={};
   this.contributions={};
   this.deletedContributions={};
-
+  this.categories={};
 
   this.isGroup=function() {
     return true;
@@ -142,7 +142,8 @@ function Group(uuid,name,data) {
       'contributors': contributors,
       'deletedContributors': this.deletedContributors,
       'contributions': contributions,
-      'deletedContributions': this.deletedContributions
+      'deletedContributions': this.deletedContributions,
+      'categories': this.categories
     };
   }
 
@@ -239,6 +240,7 @@ function Group(uuid,name,data) {
           this.deletedContributions[uuid].cost,
           decodeURIComponent(this.deletedContributions[uuid].title),
           this.deletedContributions[uuid].date,
+          this.deletedContributions[uuid].categorie,
           uuid,
           this.deletedContributions[uuid].lastChange
         ));
@@ -292,6 +294,7 @@ function Group(uuid,name,data) {
       data.cost,
       decodeURIComponent(data.title),
       data.date,
+      data.categorie,
       data.uuid,
       data.lastChange
     );
@@ -336,6 +339,13 @@ function Group(uuid,name,data) {
     };
   }
 
+  /*
+   * Categories
+   */
+  this.getCategories=function() {
+    return this.categories;
+  }
+
   /*
    * Contructor
    */
@@ -363,6 +373,32 @@ function Group(uuid,name,data) {
           this.deletedContributions[uuid]=data.deletedContributions[uuid];
         }
       }
+      if (jQuery.type(data.categories) == 'object') {
+        for (cid in data.categories) {
+          if (jQuery.type(data.categories[cid]['color'])!='string') {
+            data.categories[cid]['color']='#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
+          }
+          this.categories[cid]=data.categories[cid];
+        }
+      }
+      else {
+		categories= {
+          'Alimentation': '#1f83db',
+          'Restaurant': '#f07305',
+          'Loisir': '#d413ce',
+          'Transport': '#13d413',
+          'Vacances': '#e9fa00',
+          'Maison': '#e9fa00',
+          'Rembourssement': '#8a8b8c',
+          'Cadeau': '#a700fa'
+        };
+        for (c in categories) {
+		  this.categories[generate_uuid()]={
+	        'name': c,
+	        'color': categories[c]
+		  };	
+	    }
+      }
     }
     catch (e) {
       alert('Une erreur est survenue en chargeant le groupe '+this.name+' depuis le cache');
@@ -381,7 +417,7 @@ function Contributor(name,email) {
   }
 }
 
-function Contribution(contributor,cost,title,date,uuid,lastChange) {
+function Contribution(contributor,cost,title,date,cat,uuid,lastChange) {
   this.contributor=contributor;
   this.cost=cost;
   this.title=title;
@@ -390,6 +426,7 @@ function Contribution(contributor,cost,title,date,uuid,lastChange) {
   }
   this.date=date;
   this.uuid=uuid || generate_uuid();
+  this.categorie=cat;
   this.lastChange=lastChange || new Date().getTime();
   this.export=function() {
     return {
@@ -398,6 +435,7 @@ function Contribution(contributor,cost,title,date,uuid,lastChange) {
       'cost': this.cost,
       'title': encodeURIComponent(this.title),
       'date': this.date.getTime(),
+      'categorie': this.categorie,
       'lastChange': this.lastChange,
     };
   }

index.html

@@ -55,11 +55,22 @@ body{
   text-transform: capitalize;
 }
 
-#view-group span.date {
+#view-group span.date, #view-group span.categorie {
   color: #999;
   font-size: 0.8em;
   font-style: italic;
 }
+
+span.cat-color {
+  width: 0.8em;
+  height: 0.8em;
+  display: inline-block;
+}
+
+#grp_cat_modal ul {
+  list-style-type: none;
+  padding: 0;
+}
 </style>
   <body>
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
@@ -103,6 +114,7 @@ body{
       <tr>
         <th>Groupe</th>
         <th>Balance</th>
+        <th>&nbsp;</th>
       </tr>
     </thead>
     <tbody></tbody>
@@ -110,6 +122,7 @@ body{
       <tr>
         <td id='total-label'>Total :</td>
         <td id='total-value'></td>
+        <td>&nbsp;</td>
       </tr>
     </tfoot>
   </table>
@@ -392,6 +405,12 @@ body{
               <span class="input-group-addon">€</span>
             </div>
           </div>
+          <div class="form-group">
+            <div class="input-group">
+              <span class="input-group-addon">Catégorie </span>
+              <select id='add_contribution_categorie' class="form-control"></select>
+            </div>
+          </div>
           <div class="form-group">
             <div class="input-group">
               <span class="input-group-addon">Date</span>
@@ -515,6 +534,7 @@ body{
           </div>
         </div>
       </form>
+      </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
       </div>
@@ -522,6 +542,24 @@ body{
   </div><!-- /.modal-dialog -->
 </div>
 
+<div class="modal fade" id="grp_cat_modal" tabindex="-1" role="dialog" aria-labelledby="grpCatModal" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Catégories</h4>
+      </div>
+      <div class="modal-body">
+        <ul id='grp_cat_list'></ul>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div>
+
+
 </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="inc/lib/jquery-1.10.2.min.js"></script>