Changed chart display, in order to add another chart. Changed remove item confirmation dialog to bootstrap modal.

src/html/index.html

@@ -35,9 +35,15 @@
 
           <div class="content" style="margin-top: 116px; margin-bottom: 41px">
 
-            <div id="message-placeholder"></div>
+            <div class="container-fluid">
+              <div class="span8">
+                <div id="chart-placeholder" data-bind="chart: $root.entriesChart"></div>
+              </div>
 
-            <div id="chart-placeholder" data-bind="chart: $root.entriesChart"></div>
+              <div class="span4"></div>
+            </div>
+
+            <div id="message-placeholder"></div>
 
             <a class="btn btn-primary" data-bind="click: $root.add" href="#" title="Add entry"><i class="icon-plus"></i>&nbsp;Ajouter une entr&eacute;e</a>
 
@@ -62,6 +68,19 @@
       </div>
     </div>
 
+    <div id="remove-confirm" class="modal hide fade">
+      <div class="modal-header">
+        <h3>Confirmer la suppression</h3>
+      </div>
+      <div class="modal-body">
+        <p>Confirmez-vous la suppression de cette entr&eacute;e ?</p>
+      </div>
+      <div class="modal-footer">
+        <a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Non</a>
+        <a href="#" class="btn" data-bind="click: confirmRemove">Oui</a>
+      </div>
+    </div>
+
     <script id="itemsTmpl" type="text/html">
       <tr data-bind="css: { 'error': sold() < 0 }">
         <td data-bind="date: value_date"></td>

src/html/js/entries.js

@@ -40,6 +40,7 @@ var ListViewModel = function() {
 
     self.selectedItem = ko.observable();
     self.savedItem = ko.observable();
+    self.itemToRemove = ko.observable();
 
     self.entriesChart = ko.computed(function() {
       var entries = self.entries().slice().reverse();
@@ -250,17 +251,24 @@ var ListViewModel = function() {
 
     self.remove = function (item) {
       if (item.id()) {
-        if (confirm('Are you sure you wish to delete this item?')) {
+        self.itemToRemove(item);
-          $.post("api/entry.php", {action: "remove_entry", entry:item}).success(function (result) {
+        $('#remove-confirm').modal();
-            self.selectedItem(null);
-            self.loadAccounts();
-          });
-        }
       } else {
         self.entries.remove(item);
       }
     };
 
+    self.confirmRemove = function() {
+      var item = self.itemToRemove();
+
+      $.post("api/entry.php", {action: "remove_entry", entry:item}).success(function (result) {
+        self.loadAccounts();
+      }).complete(function (result) {
+        self.itemToRemove(null);
+        $('#remove-confirm').modal('hide');
+      });
+    };
+
     self.selectMonth = function(month) {
       if(month) {
         self.month(month);
@@ -383,9 +391,6 @@ ko.bindingHandlers.chart = {
         $.jqplot(element.id, chartValues, {
             axes:{
               xaxis:{
-                //autoscale: true,
-                //min: firstDate.toString(),
-                //max: lastDate.toString(),
                 renderer:$.jqplot.DateAxisRenderer,
                 tickOptions: {formatString: "%F"}
               },