Add Categories management

2014-07-19 20:06:57 +02:00 · 2014-07-19 20:06:57 +02:00 · e358209d67
commit e358209d67
parent e0c313cfe9
3 changed files with 123 additions and 8 deletions
--- a/inc/myco.js
+++ b/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');
 }
--- a/inc/myco_objects.js
+++ b/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,
    };
  }
--- a/index.html
+++ b/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>