Replace categories modal by view with categories management
This commit is contained in:
parent
709d231147
commit
2a50bbbd20
3 changed files with 125 additions and 45 deletions
91
inc/myco.js
91
inc/myco.js
|
@ -103,8 +103,7 @@ view_home=function() {
|
|||
sum+=value;
|
||||
diff='<td class="positive">+'+value.toFixed(2)+' €</td>';
|
||||
}
|
||||
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>');
|
||||
tbody.html(tbody.html()+'<tr><td><a class="group-link" data-uuid="'+g+'">'+balances[g].name+'</a></td>'+diff+'</tr>');
|
||||
}
|
||||
}
|
||||
$('#view-home #mybalances a.group-link').bind('click',function(e) {
|
||||
|
@ -130,18 +129,6 @@ 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];
|
||||
ul=$('#grp_cat_modal ul');
|
||||
html="";
|
||||
for(cid in grp.getSortedCategories()) {
|
||||
html+="<li><span class='cat-color' style='background-color: "+grp.categories[cid]['color']+"'></span> "+grp.categories[cid]['name']+"</li>";
|
||||
}
|
||||
ul.html(html);
|
||||
$('#grp_cat_modal').modal('show');
|
||||
}
|
||||
|
||||
/****************
|
||||
* View group
|
||||
****************/
|
||||
|
@ -207,6 +194,77 @@ show_contributions=function(group,contributor_email) {
|
|||
$('.contribution_edit_btn').bind('click',on_contribution_edit_btn_click);
|
||||
}
|
||||
|
||||
on_categories_group_btn_click=function(e) {
|
||||
group=groups[$('#view-group').data('uuid')];
|
||||
$('#view-group-categories').data('group-uuid',$('#view-group').data('uuid'));
|
||||
refresh_group_categories(group);
|
||||
view_part('#view-group-categories');
|
||||
}
|
||||
|
||||
refresh_group_categories=function(group) {
|
||||
ul=$('#view-group-categories ul');
|
||||
html="";
|
||||
for(cid in group.getSortedCategories()) {
|
||||
html+="<li data-uuid='"+cid+"'><span class='cat-color' style='background-color: "+group.categories[cid]['color']+"'></span> "+group.categories[cid]['name']+"</li>";
|
||||
}
|
||||
ul.html(html);
|
||||
$('#view-group-categories ul li').bind('click',on_categories_group_cat_click);
|
||||
}
|
||||
|
||||
on_categories_group_cat_click=function(e) {
|
||||
li=$(e.target);
|
||||
if (li.prop("tagName")!='LI') {
|
||||
return true;
|
||||
}
|
||||
cid=li.data('uuid');
|
||||
group=groups[$('#view-group-categories').data('group-uuid')];
|
||||
cat=group.categories[cid];
|
||||
li.html("<span class='cat-color' style='background-color: "+cat['color']+"'></span> "+
|
||||
"<input type='text' value=\""+cat.name+"\"/> "+
|
||||
"<button class='btn btn-default btn-xs cat_edit'><span class='glyphicon glyphicon-ok'></span></button>"+
|
||||
"<button class='btn btn-default btn-xs cat_delete'><span class='glyphicon glyphicon-trash'></span></button>");
|
||||
li.children('button.cat_edit').bind('click',{'li': li,'group': group,'cid': cid},on_categories_group_cat_edit_valid_btn_click);
|
||||
li.children('button.cat_delete').bind('click',{'li': li,'group': group,'cid': cid},on_categories_group_cat_delete_btn_click);
|
||||
}
|
||||
|
||||
on_categories_group_cat_edit_valid_btn_click=function(e) {
|
||||
name=e.data.li.children('input:first').val();
|
||||
cat=e.data.group.categories[e.data.cid];
|
||||
e.data.group.updateCategory(e.data.cid,new Category(name,cat.color));
|
||||
groups.save();
|
||||
refresh_group_categories(e.data.group);
|
||||
}
|
||||
|
||||
on_categories_group_cat_delete_btn_click=function(e) {
|
||||
e.data.group.deleteCategory(e.data.cid);
|
||||
groups.save();
|
||||
refresh_group_categories(e.data.group);
|
||||
}
|
||||
|
||||
on_categories_go_back_group_btn_click=function(e) {
|
||||
view_group(groups[$('#view-group-categories').data('group-uuid')]);
|
||||
}
|
||||
|
||||
on_categories_group_add_btn_click=function(e) {
|
||||
name=$('#add_category input')[0].value;
|
||||
|
||||
if (jQuery.type(name)!='string' || name=='') {
|
||||
return;
|
||||
}
|
||||
group_uuid=$('#view-group-categories').data('group-uuid');
|
||||
group=groups[group_uuid];
|
||||
|
||||
if (group.getCategoryByName(name,true)) {
|
||||
alert('Cette catégorie existe déjà');
|
||||
}
|
||||
else {
|
||||
group.addCategory(new Category(name));
|
||||
$('#add_category input')[0].value='';
|
||||
refresh_group_categories(group);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************************
|
||||
* Trash
|
||||
*****************************/
|
||||
|
@ -856,8 +914,13 @@ $( document ).ready( function() {
|
|||
$("#view-group-trash #go-back-group").bind('click',on_go_back_group_btn_click);
|
||||
$("#view-group-trash-contributors #go-back-group").bind('click',on_go_back_group_trash_contributors_btn_click);
|
||||
|
||||
$('#categories_group_btn').bind('click',on_categories_group_btn_click);
|
||||
$('#trash_group_btn').bind('click',on_trash_group_btn_click);
|
||||
$('#remove_group_btn').bind('click',on_remove_group_btn_click);
|
||||
|
||||
$('#view-group-categories span.input-group-addon').bind('click',on_categories_group_add_btn_click);
|
||||
$("#view-group-categories button.go-back-group").bind('click',on_categories_go_back_group_btn_click);
|
||||
|
||||
view_home();
|
||||
pleaseWaitHide();
|
||||
} );
|
||||
|
|
|
@ -352,21 +352,39 @@ function Group(uuid,name,data) {
|
|||
|
||||
this.deleteCategory=function(uuid,time) {
|
||||
this.categories[uuid].lastChange=time || new Date().getTime();
|
||||
this.deletedCategory[uuid]=this.categories[uuid].export();
|
||||
this.deletedCategories[uuid]=this.categories[uuid].export();
|
||||
delete this.categories[uuid];
|
||||
}
|
||||
|
||||
this.restoreCategory=function(uuid) {
|
||||
this.deletedCategory[uuid].lastChange=new Date().getTime();
|
||||
this.categories[uuid]=this.importCategory(this.deletedCategory[uuid]);
|
||||
delete this.deletedCategory[uuid];
|
||||
this.deletedCategories[uuid].lastChange=new Date().getTime();
|
||||
this.categories[uuid]=this.importCategory(this.deletedCategories[uuid]);
|
||||
delete this.deletedCategories[uuid];
|
||||
}
|
||||
|
||||
this.getCategoryByName=function(name,approx) {
|
||||
if(approx) {
|
||||
name=String(name).replace(/^\s+|\s+$/g, '').toLowerCase();
|
||||
}
|
||||
for (uuid in this.categories) {
|
||||
if (approx) {
|
||||
if (String(this.categories[uuid].name).replace(/^\s+|\s+$/g, '').toLowerCase()==name) {
|
||||
return this.categories[uuid];
|
||||
}
|
||||
}
|
||||
else if(this.categories[uuid].name==name) {
|
||||
return this.categories[uuid]
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
this.importCategory=function(data) {
|
||||
return new Category(
|
||||
decodeURIComponent(data.name),
|
||||
data.color,
|
||||
data.lastChange
|
||||
data.lastChange,
|
||||
data.uuid
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -452,14 +470,13 @@ function Group(uuid,name,data) {
|
|||
this.deletedContributions[uuid]=data.deletedContributions[uuid];
|
||||
}
|
||||
}
|
||||
console.log(data.categories);
|
||||
if (jQuery.type(data.categories) == 'object') {
|
||||
for (uuid in data.categories) {
|
||||
this.categories[uuid]=this.importCategory(data.categories[uuid]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
categories= {
|
||||
categories= {
|
||||
'Alimentation': '#1f83db',
|
||||
'Restaurant': '#f07305',
|
||||
'Loisir': '#d413ce',
|
||||
|
@ -470,8 +487,8 @@ function Group(uuid,name,data) {
|
|||
'Cadeau': '#a700fa'
|
||||
};
|
||||
for (c in categories) {
|
||||
this.categories[generate_uuid()]=new Category(c,categories[c]);
|
||||
}
|
||||
this.categories[generate_uuid()]=new Category(c,categories[c]);
|
||||
}
|
||||
}
|
||||
if (jQuery.type(data.deletedCategories) == 'object') {
|
||||
for (uuid in data.deletedCategories) {
|
||||
|
@ -497,15 +514,17 @@ function Contributor(name,email) {
|
|||
}
|
||||
}
|
||||
|
||||
function Category(name,color,lastChange) {
|
||||
function Category(name,color,lastChange,uuid) {
|
||||
this.name=name;
|
||||
this.color=color || '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
|
||||
this.lastChange=lastChange || new Date().getTime();
|
||||
this.uuid=uuid || generate_uuid();
|
||||
this.export=function() {
|
||||
return {
|
||||
'name': encodeURIComponent(this.name),
|
||||
'color': this.color,
|
||||
'lastChange': this.lastChange
|
||||
'lastChange': this.lastChange,
|
||||
'uuid': this.uuid
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
38
index.html
38
index.html
|
@ -67,7 +67,7 @@ span.cat-color {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#grp_cat_modal ul {
|
||||
#view-group-categories ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -132,6 +132,10 @@ span.cat-color {
|
|||
.group-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav a, #mybalances a, #add_category span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
|
@ -175,7 +179,6 @@ span.cat-color {
|
|||
<tr>
|
||||
<th>Groupe</th>
|
||||
<th>Balance</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
|
@ -183,7 +186,6 @@ span.cat-color {
|
|||
<tr>
|
||||
<td id='total-label'>Total :</td>
|
||||
<td id='total-value'></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
@ -256,6 +258,7 @@ span.cat-color {
|
|||
</div>
|
||||
<div class="collapse navbar-collapse" id="bottom-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a id='categories_group_btn'><span class='glyphicon glyphicon-th-list'></span> Catégories</span></a></li>
|
||||
<li><a id='trash_group_btn'><span class='glyphicon glyphicon-trash'></span> Corbeille</span></a></li>
|
||||
<li><a id='remove_group_btn'><span class='glyphicon glyphicon-floppy-remove'></span> Supprimer le groupe</span></a></li>
|
||||
</ul>
|
||||
|
@ -309,6 +312,18 @@ span.cat-color {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div id='view-group-categories' class='part row'>
|
||||
<h1>Catégories <button type="button" class="btn btn-default go-back-group"><span class="glyphicon glyphicon-arrow-left"> Retour</span></button></h1>
|
||||
<div class='col-xs-6'>
|
||||
<ul>
|
||||
</ul>
|
||||
<div id="add_category" class='input-group'>
|
||||
<input type='text' class="form-control" placeholder='nom'/>
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="add_group_modal" tabindex="-1" role="dialog" aria-labelledby="addGroupModal" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
@ -615,23 +630,6 @@ span.cat-color {
|
|||
</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">×</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) -->
|
||||
|
|
Loading…
Reference in a new issue