Benjamin Renard commited on 2017-09-17 17:43:57
Showing 3 changed files, with 109 additions and 48 deletions.
... | ... |
@@ -373,33 +373,46 @@ on_valid_add_thing_modal=function (e) { |
373 | 373 |
if (scase) { |
374 | 374 |
var cat=scase.cats.byName(modal.data('cat')); |
375 | 375 |
if (cat) { |
376 |
+ var things=[]; |
|
376 | 377 |
var labels=[]; |
377 | 378 |
var error=false; |
379 |
+ var add_thing_nbs=$('input.add_thing_nb'); |
|
378 | 380 |
$('input.add_thing_label').each(function(idx,input) { |
379 |
- var val=$(input).val(); |
|
380 |
- if (val && val!='') { |
|
381 |
- if (labels.indexOf(val)>-1) { |
|
381 |
+ var label=$(input).val(); |
|
382 |
+ if (label && label!='') { |
|
383 |
+ if (labels.indexOf(label)>-1) { |
|
382 | 384 |
alert("Deux élements ne peuvent porter le même nom !"); |
383 | 385 |
error=true; |
384 | 386 |
return; |
385 | 387 |
} |
386 |
- if (cat.byLabel(val)) { |
|
387 |
- alert("L'élément '"+val+"' existe déjà !"); |
|
388 |
+ if (cat.byLabel(label)) { |
|
389 |
+ alert("L'élément '"+label+"' existe déjà !"); |
|
388 | 390 |
error=true; |
389 | 391 |
return; |
390 | 392 |
} |
391 |
- labels.push(val); |
|
393 |
+ var nb=1; |
|
394 |
+ if (add_thing_nbs[idx]) { |
|
395 |
+ nb=parseInt($(add_thing_nbs[idx]).val()); |
|
396 |
+ if (!nb || nb==0) { |
|
397 |
+ nb=1; |
|
398 |
+ } |
|
399 |
+ } |
|
400 |
+ things.push({ |
|
401 |
+ 'label': label, |
|
402 |
+ 'nb': nb |
|
403 |
+ }); |
|
404 |
+ labels.push(label); |
|
392 | 405 |
} |
393 | 406 |
}); |
394 | 407 |
if (error) { |
395 | 408 |
return; |
396 | 409 |
} |
397 |
- if (labels.length==0) { |
|
410 |
+ if (things.length==0) { |
|
398 | 411 |
alert("Vous devez saisir au moins un nom d'élément !"); |
399 | 412 |
return; |
400 | 413 |
} |
401 |
- for (idx in labels) { |
|
402 |
- cat.newThing(labels[idx]); |
|
414 |
+ for (idx in things) { |
|
415 |
+ cat.newThing(things[idx]['label'], things[idx]['nb']); |
|
403 | 416 |
} |
404 | 417 |
scases.save(); |
405 | 418 |
show_scase(scase,cat.name); |
... | ... |
@@ -409,8 +422,9 @@ on_valid_add_thing_modal=function (e) { |
409 | 422 |
} |
410 | 423 |
|
411 | 424 |
on_show_add_thing_modal=function () { |
412 |
- $('input.add_thing_label_other').parent().remove(); |
|
425 |
+ $('.add_thing_other').remove(); |
|
413 | 426 |
$('input.add_thing_label').val(''); |
427 |
+ $('input.add_thing_nb').val(''); |
|
414 | 428 |
$('input.add_thing_label').first().focus(); |
415 | 429 |
} |
416 | 430 |
|
... | ... |
@@ -420,37 +434,46 @@ on_close_add_thing_modal=function () { |
420 | 434 |
|
421 | 435 |
on_add_thing_label_focus=function(event) { |
422 | 436 |
if ($('input.add_thing_label').last()[0] == event.target) { |
423 |
- var new_input_group=$('<div class="form-group"></div>'); |
|
424 |
- var new_input=$('<input type="text" class="form-control add_thing_label add_thing_label_other" class="form-control" placeholder="Encore un ?"/>'); |
|
425 |
- new_input_group.append(new_input); |
|
426 |
- new_input.bind('focus', on_add_thing_label_focus); |
|
437 |
+ var new_input_group=$('<div class="form-group add_thing_other"></div>'); |
|
438 |
+ var new_input_label=$('<input type="text" class="form-control add_thing_label" placeholder="Encore un ?"/>'); |
|
439 |
+ var new_input_nb=$('<input type="number" class="form-control add_thing_nb" placeholder="Nb"/>'); |
|
440 |
+ new_input_group.append(new_input_label); |
|
441 |
+ new_input_group.append(' '); |
|
442 |
+ new_input_group.append(new_input_nb); |
|
443 |
+ new_input_label.bind('focus', on_add_thing_label_focus); |
|
427 | 444 |
$(event.target).parent().after(new_input_group); |
428 | 445 |
} |
429 | 446 |
} |
430 | 447 |
|
431 | 448 |
|
432 | 449 |
/*********************** |
433 |
- * Rename thing |
|
450 |
+ * Edit thing |
|
434 | 451 |
**********************/ |
435 |
-on_rename_thing_btn_click=function(event) { |
|
452 |
+on_edit_thing_btn_click=function(event) { |
|
436 | 453 |
navbar_collapse_hide(); |
437 |
- $('#rename_thing_modal').data('cat',event.data.cat.name); |
|
438 |
- $('#rename_thing_modal').data('thing',event.data.thing.label); |
|
439 |
- $('#rename_thing_label')[0].value=event.data.thing.label; |
|
440 |
- $('#rename_thing_modal').modal('show'); |
|
454 |
+ $('#edit_thing_modal').data('cat',event.data.cat.name); |
|
455 |
+ $('#edit_thing_modal').data('thing',event.data.thing.label); |
|
456 |
+ $('#edit_thing_label').val(event.data.thing.label); |
|
457 |
+ $('#edit_thing_nb').val(event.data.thing.nb); |
|
458 |
+ $('#edit_thing_modal').modal('show'); |
|
441 | 459 |
} |
442 | 460 |
|
443 |
-on_valid_rename_thing_modal=function (e) { |
|
461 |
+on_valid_edit_thing_modal=function (e) { |
|
444 | 462 |
e.preventDefault(); |
445 |
- var label=$('#rename_thing_label')[0].value; |
|
463 |
+ var label=$('#edit_thing_label').val(); |
|
446 | 464 |
if (label=='') { |
447 | 465 |
alert("Vous devez saisir le nouveau nom de l'élément !"); |
448 | 466 |
return; |
449 | 467 |
} |
468 |
+ var nb=parseInt($('#edit_thing_nb').val()); |
|
469 |
+ if (!nb || nb==0) { |
|
470 |
+ nb=1; |
|
471 |
+ } |
|
450 | 472 |
var scase=scases.byName($('#cats').data('scase')); |
451 | 473 |
if (scase) { |
452 |
- var cat=scase.cats.byName($('#rename_thing_modal').data('cat')); |
|
474 |
+ var cat=scase.cats.byName($('#edit_thing_modal').data('cat')); |
|
453 | 475 |
if (cat) { |
476 |
+ if (label!=$('#edit_thing_modal').data('thing')) { |
|
454 | 477 |
var namesake=cat.byLabel(label); |
455 | 478 |
if (namesake) { |
456 | 479 |
if (namesake.removed) { |
... | ... |
@@ -461,22 +484,27 @@ on_valid_rename_thing_modal=function (e) { |
461 | 484 |
} |
462 | 485 |
return; |
463 | 486 |
} |
464 |
- var thing=cat.renameThing($('#rename_thing_modal').data('thing'),label); |
|
487 |
+ var thing=cat.renameThing($('#edit_thing_modal').data('thing'),label); |
|
488 |
+ } |
|
489 |
+ else { |
|
490 |
+ var thing=cat.byLabel(label); |
|
491 |
+ } |
|
465 | 492 |
if (thing) { |
493 |
+ thing.setNb(nb); |
|
466 | 494 |
scases.save(); |
467 | 495 |
show_scase(scase,cat.name); |
468 | 496 |
} |
469 | 497 |
} |
470 | 498 |
} |
471 |
- $('#rename_thing_modal').modal('hide'); |
|
499 |
+ $('#edit_thing_modal').modal('hide'); |
|
472 | 500 |
} |
473 | 501 |
|
474 |
-on_show_rename_thing_modal=function () { |
|
475 |
- $('#rename_thing_label').focus(); |
|
502 |
+on_show_edit_thing_modal=function () { |
|
503 |
+ $('#edit_thing_label').focus(); |
|
476 | 504 |
} |
477 | 505 |
|
478 |
-on_close_rename_thing_modal=function () { |
|
479 |
- $('#rename_thing_modal form')[0].reset(); |
|
506 |
+on_close_edit_thing_modal=function () { |
|
507 |
+ $('#edit_thing_modal form')[0].reset(); |
|
480 | 508 |
} |
481 | 509 |
|
482 | 510 |
/*********************** |
... | ... |
@@ -557,6 +585,9 @@ show_cat=function(cat,displayed) { |
557 | 585 |
continue; |
558 | 586 |
} |
559 | 587 |
var li=$('<li class="list-group-item" data-label="'+cat.things[idx].label+'">'+cat.things[idx].label+'</li>'); |
588 |
+ if (cat.things[idx].nb>1) { |
|
589 |
+ li.append(' <em>('+cat.things[idx].nb+')</em>'); |
|
590 |
+ } |
|
560 | 591 |
if (cat.things[idx].checked) { |
561 | 592 |
li.addClass('done'); |
562 | 593 |
} |
... | ... |
@@ -568,9 +599,9 @@ show_cat=function(cat,displayed) { |
568 | 599 |
delete_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_delete_thing_btn_click); |
569 | 600 |
li_actions.append(delete_el_btn); |
570 | 601 |
|
571 |
- var rename_el_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-edit"></button>'); |
|
572 |
- rename_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_rename_thing_btn_click); |
|
573 |
- li_actions.append(rename_el_btn); |
|
602 |
+ var edit_el_btn=$('<button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-edit"></button>'); |
|
603 |
+ edit_el_btn.bind('click',{'cat': cat,'thing': cat.things[idx]},on_edit_thing_btn_click); |
|
604 |
+ li_actions.append(edit_el_btn); |
|
574 | 605 |
|
575 | 606 |
li.append(li_actions); |
576 | 607 |
|
... | ... |
@@ -895,10 +926,10 @@ $( document ).ready( function() { |
895 | 926 |
$("#add_thing_modal").on('hidden.bs.modal',on_close_add_thing_modal); |
896 | 927 |
$("#add_thing_modal form").bind('submit',on_valid_add_thing_modal); |
897 | 928 |
|
898 |
- $('#rename_thing_submit').bind('click',on_valid_rename_thing_modal); |
|
899 |
- $("#rename_thing_modal").on('shown.bs.modal',on_show_rename_thing_modal); |
|
900 |
- $("#rename_thing_modal").on('hidden.bs.modal',on_close_rename_thing_modal); |
|
901 |
- $("#rename_thing_modal form").bind('submit',on_valid_rename_thing_modal); |
|
929 |
+ $('#edit_thing_submit').bind('click',on_valid_edit_thing_modal); |
|
930 |
+ $("#edit_thing_modal").on('shown.bs.modal',on_show_edit_thing_modal); |
|
931 |
+ $("#edit_thing_modal").on('hidden.bs.modal',on_close_edit_thing_modal); |
|
932 |
+ $("#edit_thing_modal form").bind('submit',on_valid_edit_thing_modal); |
|
902 | 933 |
|
903 | 934 |
$('#app-name').bind('click', show_scases); |
904 | 935 |
|
... | ... |
@@ -8,11 +8,19 @@ function SCaseList() { |
8 | 8 |
'Vacances': { |
9 | 9 |
'Papier': { |
10 | 10 |
'color': '#f00', |
11 |
- 'things': ['Papier blanc', 'Stylo', "Carte d'identité"] |
|
11 |
+ 'things': [ |
|
12 |
+ {'label': 'Papier blanc', 'nb': 1 }, |
|
13 |
+ {'label': 'Stylo', 'nb': 3 }, |
|
14 |
+ {'label': "Carte d'identité", 'nb': 1 }, |
|
15 |
+ ] |
|
12 | 16 |
}, |
13 | 17 |
'Multimédia' : { |
14 | 18 |
'color': '#0f0', |
15 |
- 'things': ['Montre', 'Chargeur montre', "PC portable"] |
|
19 |
+ 'things': [ |
|
20 |
+ {'label': 'Montre', 'nb': 1 }, |
|
21 |
+ {'label': 'Chargeur montre', 'nb': 1 }, |
|
22 |
+ {'label': 'PC portable', 'nb': 1 }, |
|
23 |
+ ] |
|
16 | 24 |
} |
17 | 25 |
} |
18 | 26 |
}; |
... | ... |
@@ -21,7 +29,7 @@ function SCaseList() { |
21 | 29 |
for (catName in exampleData[scaseName]) { |
22 | 30 |
var cat=scase.cats.newCat(catName); |
23 | 31 |
for (idx in exampleData[scaseName][catName].things) { |
24 |
- cat.newThing(exampleData[scaseName][catName].things[idx]); |
|
32 |
+ cat.newThing(exampleData[scaseName][catName].things[idx]['label'],exampleData[scaseName][catName].things[idx]['nb']); |
|
25 | 33 |
} |
26 | 34 |
} |
27 | 35 |
} |
... | ... |
@@ -468,18 +476,19 @@ function Cat(uuid,name,color,data) { |
468 | 476 |
}; |
469 | 477 |
} |
470 | 478 |
|
471 |
- this.newThing=function(label) { |
|
479 |
+ this.newThing=function(label,nb) { |
|
472 | 480 |
if (this.byLabel(label)) { |
473 | 481 |
var thing=this.byLabel(label); |
474 | 482 |
if (thing.removed) { |
475 | 483 |
thing.restore(); |
476 | 484 |
thing.setChecked(false); |
485 |
+ thing.setNb(nb); |
|
477 | 486 |
return true; |
478 | 487 |
} |
479 | 488 |
} |
480 | 489 |
else { |
481 | 490 |
var uuid=generate_uuid(); |
482 |
- this.things[uuid]=new Thing(uuid,label); |
|
491 |
+ this.things[uuid]=new Thing(uuid,label,nb); |
|
483 | 492 |
return true; |
484 | 493 |
} |
485 | 494 |
return false; |
... | ... |
@@ -541,10 +550,11 @@ function Cat(uuid,name,color,data) { |
541 | 550 |
|
542 | 551 |
} |
543 | 552 |
|
544 |
-function Thing(uuid,label,checked) { |
|
553 |
+function Thing(uuid,label,nb,checked) { |
|
545 | 554 |
this.uuid=uuid||generate_uuid(); |
546 | 555 |
this.lastChange=new Date().getTime(); |
547 | 556 |
this.label=label; |
557 |
+ this.nb=nb || 1; |
|
548 | 558 |
this.checked=checked; |
549 | 559 |
this.removed=false; |
550 | 560 |
|
... | ... |
@@ -552,6 +562,7 @@ function Thing(uuid,label,checked) { |
552 | 562 |
this.uuid=data.uuid||generate_uuid(); |
553 | 563 |
this.lastChange=data.lastChange||new Date().getTime(); |
554 | 564 |
this.label=decodeURIComponent(data.label), |
565 |
+ this.nb=data.nb||1; |
|
555 | 566 |
this.checked=data.checked; |
556 | 567 |
this.removed=data.removed||false; |
557 | 568 |
} |
... | ... |
@@ -561,11 +572,17 @@ function Thing(uuid,label,checked) { |
561 | 572 |
'uuid': this.uuid, |
562 | 573 |
'lastChange': this.lastChange, |
563 | 574 |
'label': encodeURIComponent(this.label), |
575 |
+ 'nb': this.nb, |
|
564 | 576 |
'checked': this.checked, |
565 | 577 |
'removed': this.removed, |
566 | 578 |
}; |
567 | 579 |
} |
568 | 580 |
|
581 |
+ this.setNb=function(nb) { |
|
582 |
+ this.nb=nb; |
|
583 |
+ this.lastChange=new Date().getTime(); |
|
584 |
+ } |
|
585 |
+ |
|
569 | 586 |
this.setChecked=function(value) { |
570 | 587 |
this.checked=value; |
571 | 588 |
this.lastChange=new Date().getTime(); |
... | ... |
@@ -51,6 +51,16 @@ div.panel-heading, li.list-group-item, a { |
51 | 51 |
.scase-name { |
52 | 52 |
font-size: 1.5em; |
53 | 53 |
} |
54 |
+ |
|
55 |
+.add_thing_label, #edit_thing_label { |
|
56 |
+ width: 80%; |
|
57 |
+ display: inline-block; |
|
58 |
+} |
|
59 |
+ |
|
60 |
+.add_thing_nb, #edit_thing_nb { |
|
61 |
+ width: 18%; |
|
62 |
+ display: inline-block; |
|
63 |
+} |
|
54 | 64 |
</style> |
55 | 65 |
|
56 | 66 |
<body> |
... | ... |
@@ -214,10 +224,12 @@ div.panel-heading, li.list-group-item, a { |
214 | 224 |
<div class="modal-body"> |
215 | 225 |
<form role="form"> |
216 | 226 |
<div class="form-group"> |
217 |
- <input type='text' class='form-control add_thing_label' class="form-control" placeholder="Nom de l'élément"/> |
|
227 |
+ <input type='text' class='form-control add_thing_label' placeholder="Nom de l'élément"/> |
|
228 |
+ <input type='number' class='form-control add_thing_nb' placeholder="Nb"/> |
|
218 | 229 |
</div> |
219 | 230 |
<div class="form-group"> |
220 |
- <input type='text' class='form-control add_thing_label' class="form-control" placeholder="Un autre ?"/> |
|
231 |
+ <input type='text' class='form-control add_thing_label' placeholder="Un autre ?"/> |
|
232 |
+ <input type='number' class='form-control add_thing_nb' placeholder="Nb"/> |
|
221 | 233 |
</div> |
222 | 234 |
</form> |
223 | 235 |
</div> |
... | ... |
@@ -229,23 +241,24 @@ div.panel-heading, li.list-group-item, a { |
229 | 241 |
</div><!-- /.modal-dialog --> |
230 | 242 |
</div> |
231 | 243 |
|
232 |
-<div class="modal" id="rename_thing_modal" tabindex="-1" role="dialog" aria-labelledby="renameThingModal" aria-hidden="true"> |
|
244 |
+<div class="modal" id="edit_thing_modal" tabindex="-1" role="dialog" aria-labelledby="editThingModal" aria-hidden="true"> |
|
233 | 245 |
<div class="modal-dialog"> |
234 | 246 |
<div class="modal-content"> |
235 | 247 |
<div class="modal-header"> |
236 | 248 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
237 |
- <h4 class="modal-title">Renommer un élément</h4> |
|
249 |
+ <h4 class="modal-title">Modifier un élément</h4> |
|
238 | 250 |
</div> |
239 | 251 |
<div class="modal-body"> |
240 | 252 |
<form class="form-horizontal" role="form"> |
241 | 253 |
<div class="form-group"> |
242 |
- <input type='text' id='rename_thing_label' class="form-control" placeholder="Nouveau nom de l'élément"/> |
|
254 |
+ <input type='text' id='edit_thing_label' class="form-control" placeholder="Nouveau nom de l'élément"/> |
|
255 |
+ <input type='number' id='edit_thing_nb' class="form-control" placeholder="Nb"/> |
|
243 | 256 |
</div> |
244 | 257 |
</form> |
245 | 258 |
</div> |
246 | 259 |
<div class="modal-footer"> |
247 | 260 |
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button> |
248 |
- <button type="button" class="btn btn-primary" id='rename_thing_submit'>Renommer</button> |
|
261 |
+ <button type="button" class="btn btn-primary" id='edit_thing_submit'>Modifier</button> |
|
249 | 262 |
</div> |
250 | 263 |
</div><!-- /.modal-content --> |
251 | 264 |
</div><!-- /.modal-dialog --> |
252 | 265 |