Add number of things feature
Benjamin Renard

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">&times;</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