Add number of things feature
This commit is contained in:
parent
10dc9ff15f
commit
edd395799a
3 changed files with 117 additions and 56 deletions
|
@ -373,33 +373,46 @@ on_valid_add_thing_modal=function (e) {
|
||||||
if (scase) {
|
if (scase) {
|
||||||
var cat=scase.cats.byName(modal.data('cat'));
|
var cat=scase.cats.byName(modal.data('cat'));
|
||||||
if (cat) {
|
if (cat) {
|
||||||
|
var things=[];
|
||||||
var labels=[];
|
var labels=[];
|
||||||
var error=false;
|
var error=false;
|
||||||
|
var add_thing_nbs=$('input.add_thing_nb');
|
||||||
$('input.add_thing_label').each(function(idx,input) {
|
$('input.add_thing_label').each(function(idx,input) {
|
||||||
var val=$(input).val();
|
var label=$(input).val();
|
||||||
if (val && val!='') {
|
if (label && label!='') {
|
||||||
if (labels.indexOf(val)>-1) {
|
if (labels.indexOf(label)>-1) {
|
||||||
alert("Deux élements ne peuvent porter le même nom !");
|
alert("Deux élements ne peuvent porter le même nom !");
|
||||||
error=true;
|
error=true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (cat.byLabel(val)) {
|
if (cat.byLabel(label)) {
|
||||||
alert("L'élément '"+val+"' existe déjà !");
|
alert("L'élément '"+label+"' existe déjà !");
|
||||||
error=true;
|
error=true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
labels.push(val);
|
var nb=1;
|
||||||
|
if (add_thing_nbs[idx]) {
|
||||||
|
nb=parseInt($(add_thing_nbs[idx]).val());
|
||||||
|
if (!nb || nb==0) {
|
||||||
|
nb=1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
things.push({
|
||||||
|
'label': label,
|
||||||
|
'nb': nb
|
||||||
|
});
|
||||||
|
labels.push(label);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (error) {
|
if (error) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (labels.length==0) {
|
if (things.length==0) {
|
||||||
alert("Vous devez saisir au moins un nom d'élément !");
|
alert("Vous devez saisir au moins un nom d'élément !");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
for (idx in labels) {
|
for (idx in things) {
|
||||||
cat.newThing(labels[idx]);
|
cat.newThing(things[idx]['label'], things[idx]['nb']);
|
||||||
}
|
}
|
||||||
scases.save();
|
scases.save();
|
||||||
show_scase(scase,cat.name);
|
show_scase(scase,cat.name);
|
||||||
|
@ -409,8 +422,9 @@ on_valid_add_thing_modal=function (e) {
|
||||||
}
|
}
|
||||||
|
|
||||||
on_show_add_thing_modal=function () {
|
on_show_add_thing_modal=function () {
|
||||||
$('input.add_thing_label_other').parent().remove();
|
$('.add_thing_other').remove();
|
||||||
$('input.add_thing_label').val('');
|
$('input.add_thing_label').val('');
|
||||||
|
$('input.add_thing_nb').val('');
|
||||||
$('input.add_thing_label').first().focus();
|
$('input.add_thing_label').first().focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -420,37 +434,46 @@ on_close_add_thing_modal=function () {
|
||||||
|
|
||||||
on_add_thing_label_focus=function(event) {
|
on_add_thing_label_focus=function(event) {
|
||||||
if ($('input.add_thing_label').last()[0] == event.target) {
|
if ($('input.add_thing_label').last()[0] == event.target) {
|
||||||
var new_input_group=$('<div class="form-group"></div>');
|
var new_input_group=$('<div class="form-group add_thing_other"></div>');
|
||||||
var new_input=$('<input type="text" class="form-control add_thing_label add_thing_label_other" class="form-control" placeholder="Encore un ?"/>');
|
var new_input_label=$('<input type="text" class="form-control add_thing_label" placeholder="Encore un ?"/>');
|
||||||
new_input_group.append(new_input);
|
var new_input_nb=$('<input type="number" class="form-control add_thing_nb" placeholder="Nb"/>');
|
||||||
new_input.bind('focus', on_add_thing_label_focus);
|
new_input_group.append(new_input_label);
|
||||||
|
new_input_group.append(' ');
|
||||||
|
new_input_group.append(new_input_nb);
|
||||||
|
new_input_label.bind('focus', on_add_thing_label_focus);
|
||||||
$(event.target).parent().after(new_input_group);
|
$(event.target).parent().after(new_input_group);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/***********************
|
/***********************
|
||||||
* Rename thing
|
* Edit thing
|
||||||
**********************/
|
**********************/
|
||||||
on_rename_thing_btn_click=function(event) {
|
on_edit_thing_btn_click=function(event) {
|
||||||
navbar_collapse_hide();
|
navbar_collapse_hide();
|
||||||
$('#rename_thing_modal').data('cat',event.data.cat.name);
|
$('#edit_thing_modal').data('cat',event.data.cat.name);
|
||||||
$('#rename_thing_modal').data('thing',event.data.thing.label);
|
$('#edit_thing_modal').data('thing',event.data.thing.label);
|
||||||
$('#rename_thing_label')[0].value=event.data.thing.label;
|
$('#edit_thing_label').val(event.data.thing.label);
|
||||||
$('#rename_thing_modal').modal('show');
|
$('#edit_thing_nb').val(event.data.thing.nb);
|
||||||
|
$('#edit_thing_modal').modal('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
on_valid_rename_thing_modal=function (e) {
|
on_valid_edit_thing_modal=function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var label=$('#rename_thing_label')[0].value;
|
var label=$('#edit_thing_label').val();
|
||||||
if (label=='') {
|
if (label=='') {
|
||||||
alert("Vous devez saisir le nouveau nom de l'élément !");
|
alert("Vous devez saisir le nouveau nom de l'élément !");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
var nb=parseInt($('#edit_thing_nb').val());
|
||||||
|
if (!nb || nb==0) {
|
||||||
|
nb=1;
|
||||||
|
}
|
||||||
var scase=scases.byName($('#cats').data('scase'));
|
var scase=scases.byName($('#cats').data('scase'));
|
||||||
if (scase) {
|
if (scase) {
|
||||||
var cat=scase.cats.byName($('#rename_thing_modal').data('cat'));
|
var cat=scase.cats.byName($('#edit_thing_modal').data('cat'));
|
||||||
if (cat) {
|
if (cat) {
|
||||||
|
if (label!=$('#edit_thing_modal').data('thing')) {
|
||||||
var namesake=cat.byLabel(label);
|
var namesake=cat.byLabel(label);
|
||||||
if (namesake) {
|
if (namesake) {
|
||||||
if (namesake.removed) {
|
if (namesake.removed) {
|
||||||
|
@ -461,22 +484,27 @@ on_valid_rename_thing_modal=function (e) {
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var thing=cat.renameThing($('#rename_thing_modal').data('thing'),label);
|
var thing=cat.renameThing($('#edit_thing_modal').data('thing'),label);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var thing=cat.byLabel(label);
|
||||||
|
}
|
||||||
if (thing) {
|
if (thing) {
|
||||||
|
thing.setNb(nb);
|
||||||
scases.save();
|
scases.save();
|
||||||
show_scase(scase,cat.name);
|
show_scase(scase,cat.name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$('#rename_thing_modal').modal('hide');
|
$('#edit_thing_modal').modal('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
on_show_rename_thing_modal=function () {
|
on_show_edit_thing_modal=function () {
|
||||||
$('#rename_thing_label').focus();
|
$('#edit_thing_label').focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
on_close_rename_thing_modal=function () {
|
on_close_edit_thing_modal=function () {
|
||||||
$('#rename_thing_modal form')[0].reset();
|
$('#edit_thing_modal form')[0].reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
/***********************
|
/***********************
|
||||||
|
@ -557,6 +585,9 @@ show_cat=function(cat,displayed) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
var li=$('<li class="list-group-item" data-label="'+cat.things[idx].label+'">'+cat.things[idx].label+'</li>');
|
var li=$('<li class="list-group-item" data-label="'+cat.things[idx].label+'">'+cat.things[idx].label+'</li>');
|
||||||
|
if (cat.things[idx].nb>1) {
|
||||||
|
li.append(' <em>('+cat.things[idx].nb+')</em>');
|
||||||
|
}
|
||||||
if (cat.things[idx].checked) {
|
if (cat.things[idx].checked) {
|
||||||
li.addClass('done');
|
li.addClass('done');
|
||||||
}
|
}
|
||||||
|
@ -568,9 +599,9 @@ show_cat=function(cat,displayed) {
|
||||||
delete_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_delete_thing_btn_click);
|
delete_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_delete_thing_btn_click);
|
||||||
li_actions.append(delete_el_btn);
|
li_actions.append(delete_el_btn);
|
||||||
|
|
||||||
var rename_el_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-edit"></button>');
|
var edit_el_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-edit"></button>');
|
||||||
rename_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_rename_thing_btn_click);
|
edit_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_edit_thing_btn_click);
|
||||||
li_actions.append(rename_el_btn);
|
li_actions.append(edit_el_btn);
|
||||||
|
|
||||||
li.append(li_actions);
|
li.append(li_actions);
|
||||||
|
|
||||||
|
@ -895,10 +926,10 @@ $( document ).ready( function() {
|
||||||
$("#add_thing_modal").on('hidden.bs.modal',on_close_add_thing_modal);
|
$("#add_thing_modal").on('hidden.bs.modal',on_close_add_thing_modal);
|
||||||
$("#add_thing_modal form").bind('submit',on_valid_add_thing_modal);
|
$("#add_thing_modal form").bind('submit',on_valid_add_thing_modal);
|
||||||
|
|
||||||
$('#rename_thing_submit').bind('click',on_valid_rename_thing_modal);
|
$('#edit_thing_submit').bind('click',on_valid_edit_thing_modal);
|
||||||
$("#rename_thing_modal").on('shown.bs.modal',on_show_rename_thing_modal);
|
$("#edit_thing_modal").on('shown.bs.modal',on_show_edit_thing_modal);
|
||||||
$("#rename_thing_modal").on('hidden.bs.modal',on_close_rename_thing_modal);
|
$("#edit_thing_modal").on('hidden.bs.modal',on_close_edit_thing_modal);
|
||||||
$("#rename_thing_modal form").bind('submit',on_valid_rename_thing_modal);
|
$("#edit_thing_modal form").bind('submit',on_valid_edit_thing_modal);
|
||||||
|
|
||||||
$('#app-name').bind('click', show_scases);
|
$('#app-name').bind('click', show_scases);
|
||||||
|
|
||||||
|
|
|
@ -8,11 +8,19 @@ function SCaseList() {
|
||||||
'Vacances': {
|
'Vacances': {
|
||||||
'Papier': {
|
'Papier': {
|
||||||
'color': '#f00',
|
'color': '#f00',
|
||||||
'things': ['Papier blanc', 'Stylo', "Carte d'identité"]
|
'things': [
|
||||||
|
{'label': 'Papier blanc', 'nb': 1 },
|
||||||
|
{'label': 'Stylo', 'nb': 3 },
|
||||||
|
{'label': "Carte d'identité", 'nb': 1 },
|
||||||
|
]
|
||||||
},
|
},
|
||||||
'Multimédia' : {
|
'Multimédia' : {
|
||||||
'color': '#0f0',
|
'color': '#0f0',
|
||||||
'things': ['Montre', 'Chargeur montre', "PC portable"]
|
'things': [
|
||||||
|
{'label': 'Montre', 'nb': 1 },
|
||||||
|
{'label': 'Chargeur montre', 'nb': 1 },
|
||||||
|
{'label': 'PC portable', 'nb': 1 },
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -21,7 +29,7 @@ function SCaseList() {
|
||||||
for (catName in exampleData[scaseName]) {
|
for (catName in exampleData[scaseName]) {
|
||||||
var cat=scase.cats.newCat(catName);
|
var cat=scase.cats.newCat(catName);
|
||||||
for (idx in exampleData[scaseName][catName].things) {
|
for (idx in exampleData[scaseName][catName].things) {
|
||||||
cat.newThing(exampleData[scaseName][catName].things[idx]);
|
cat.newThing(exampleData[scaseName][catName].things[idx]['label'],exampleData[scaseName][catName].things[idx]['nb']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -468,18 +476,19 @@ function Cat(uuid,name,color,data) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
this.newThing=function(label) {
|
this.newThing=function(label,nb) {
|
||||||
if (this.byLabel(label)) {
|
if (this.byLabel(label)) {
|
||||||
var thing=this.byLabel(label);
|
var thing=this.byLabel(label);
|
||||||
if (thing.removed) {
|
if (thing.removed) {
|
||||||
thing.restore();
|
thing.restore();
|
||||||
thing.setChecked(false);
|
thing.setChecked(false);
|
||||||
|
thing.setNb(nb);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
var uuid=generate_uuid();
|
var uuid=generate_uuid();
|
||||||
this.things[uuid]=new Thing(uuid,label);
|
this.things[uuid]=new Thing(uuid,label,nb);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
@ -541,10 +550,11 @@ function Cat(uuid,name,color,data) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function Thing(uuid,label,checked) {
|
function Thing(uuid,label,nb,checked) {
|
||||||
this.uuid=uuid||generate_uuid();
|
this.uuid=uuid||generate_uuid();
|
||||||
this.lastChange=new Date().getTime();
|
this.lastChange=new Date().getTime();
|
||||||
this.label=label;
|
this.label=label;
|
||||||
|
this.nb=nb || 1;
|
||||||
this.checked=checked;
|
this.checked=checked;
|
||||||
this.removed=false;
|
this.removed=false;
|
||||||
|
|
||||||
|
@ -552,6 +562,7 @@ function Thing(uuid,label,checked) {
|
||||||
this.uuid=data.uuid||generate_uuid();
|
this.uuid=data.uuid||generate_uuid();
|
||||||
this.lastChange=data.lastChange||new Date().getTime();
|
this.lastChange=data.lastChange||new Date().getTime();
|
||||||
this.label=decodeURIComponent(data.label),
|
this.label=decodeURIComponent(data.label),
|
||||||
|
this.nb=data.nb||1;
|
||||||
this.checked=data.checked;
|
this.checked=data.checked;
|
||||||
this.removed=data.removed||false;
|
this.removed=data.removed||false;
|
||||||
}
|
}
|
||||||
|
@ -561,11 +572,17 @@ function Thing(uuid,label,checked) {
|
||||||
'uuid': this.uuid,
|
'uuid': this.uuid,
|
||||||
'lastChange': this.lastChange,
|
'lastChange': this.lastChange,
|
||||||
'label': encodeURIComponent(this.label),
|
'label': encodeURIComponent(this.label),
|
||||||
|
'nb': this.nb,
|
||||||
'checked': this.checked,
|
'checked': this.checked,
|
||||||
'removed': this.removed,
|
'removed': this.removed,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setNb=function(nb) {
|
||||||
|
this.nb=nb;
|
||||||
|
this.lastChange=new Date().getTime();
|
||||||
|
}
|
||||||
|
|
||||||
this.setChecked=function(value) {
|
this.setChecked=function(value) {
|
||||||
this.checked=value;
|
this.checked=value;
|
||||||
this.lastChange=new Date().getTime();
|
this.lastChange=new Date().getTime();
|
||||||
|
|
|
@ -51,6 +51,16 @@ div.panel-heading, li.list-group-item, a {
|
||||||
.scase-name {
|
.scase-name {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.add_thing_label, #edit_thing_label {
|
||||||
|
width: 80%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_thing_nb, #edit_thing_nb {
|
||||||
|
width: 18%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -214,10 +224,12 @@ div.panel-heading, li.list-group-item, a {
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form role="form">
|
<form role="form">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type='text' class='form-control add_thing_label' class="form-control" placeholder="Nom de l'élément"/>
|
<input type='text' class='form-control add_thing_label' placeholder="Nom de l'élément"/>
|
||||||
|
<input type='number' class='form-control add_thing_nb' placeholder="Nb"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type='text' class='form-control add_thing_label' class="form-control" placeholder="Un autre ?"/>
|
<input type='text' class='form-control add_thing_label' placeholder="Un autre ?"/>
|
||||||
|
<input type='number' class='form-control add_thing_nb' placeholder="Nb"/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -229,23 +241,24 @@ div.panel-heading, li.list-group-item, a {
|
||||||
</div><!-- /.modal-dialog -->
|
</div><!-- /.modal-dialog -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal" id="rename_thing_modal" tabindex="-1" role="dialog" aria-labelledby="renameThingModal" aria-hidden="true">
|
<div class="modal" id="edit_thing_modal" tabindex="-1" role="dialog" aria-labelledby="editThingModal" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h4 class="modal-title">Renommer un élément</h4>
|
<h4 class="modal-title">Modifier un élément</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="form-horizontal" role="form">
|
<form class="form-horizontal" role="form">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type='text' id='rename_thing_label' class="form-control" placeholder="Nouveau nom de l'élément"/>
|
<input type='text' id='edit_thing_label' class="form-control" placeholder="Nouveau nom de l'élément"/>
|
||||||
|
<input type='number' id='edit_thing_nb' class="form-control" placeholder="Nb"/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
|
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
|
||||||
<button type="button" class="btn btn-primary" id='rename_thing_submit'>Renommer</button>
|
<button type="button" class="btn btn-primary" id='edit_thing_submit'>Modifier</button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.modal-content -->
|
</div><!-- /.modal-content -->
|
||||||
</div><!-- /.modal-dialog -->
|
</div><!-- /.modal-dialog -->
|
||||||
|
|
Loading…
Reference in a new issue