From b5e78e538941875bad9aa577581d218b470e5aeb Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Fri, 10 Jul 2015 11:51:32 +0200
Subject: [PATCH] =?UTF-8?q?Formatting,=20refactoring=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 accountant/frontend/templates/index.html | 152 ++++++++++++++++-------
 1 file changed, 110 insertions(+), 42 deletions(-)

diff --git a/accountant/frontend/templates/index.html b/accountant/frontend/templates/index.html
index 4afac4e..672ed88 100644
--- a/accountant/frontend/templates/index.html
+++ b/accountant/frontend/templates/index.html
@@ -1,3 +1,4 @@
+{# vim: set tw=80 ts=2 sw=2 sts=2: #}
 {#
     This file is part of Accountant.
 
@@ -16,6 +17,7 @@
 #}
 {% extends "layout.html" %}
 {% block body %}
+
 <div ng-controller="EntryController">
 <!-- Chart row -->
 <div class="row">
@@ -32,69 +34,130 @@
     <!-- Head of the table containing column headers and size -->
     <thead>
       <tr>
-        <th style="width: 100px">Date d'op.</th>
+        <th class="col-md-1">Date d'op.</th>
         <th>Libell&eacute; de l'op&eacute;ration</th>
-        <th style="width: 50px">Montant</th>
-        <th style="width: 50px">Solde</th>
-        <th style="width: 100px">Cat&eacute;gorie</th>
-        <th style="width: 80px">Actions</th>
+        <th class="col-md-1">Montant</th>
+        <th class="col-md-1">Solde</th>
+        <th class="col-md-3">Cat&eacute;gorie</th>
+        <th class="col-md-2">Actions</th>
       </tr>
     </thead>
 
     <!-- Body of the table containing the entries -->
     <tbody>
-      <tr id="entry_[[entry.id]]" class="form-inline" ng-class="entryRowClass(entry)" ng-repeat="entry in entries">
-        <td>
-          <small>
-            <input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
-            <span ng-show="isDisplaying(entry)">[[entry.operation_date]]</span>
-          </small>
+      {# The new entry row. #}
+      <tr class="form-inline">
+        <td class="col-md-1">
+          <input type="text" class="form-control input-sm" ng-model="newEntry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
         </td>
         
         <td>
-          <small>
-            <input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.label"/>
-            <span ng-show="isDisplaying(entry)">[[entry.label]]</span>
-          </small>
+          <input type="text" class="form-control input-sm" ng-model="newEntry.label"/>
         </td>
         
-        <td>
-          <small>
-            <input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.value"/>
-            <span ng-show="isDisplaying(entry)">[[entry.value]]</span>
-          </small>
+        <td class="col-md-1">
+          <input type="text" class="form-control input-sm" ng-model="newEntry.value"/>
         </td>
         
-        <td ng-class="entryValueClass(entry.sold)">
-          <small>
-              [[entry.sold]]
-          </small>
+        <td class="col-md-1">
+          <!-- The new entry has no sold. -->
         </td>
 
-        <td>
-          <small>
-              <!--<input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.category" bs-typeahead="categories"/>-->
-            <input ng-show="isEditing(entry)" type="text" class="form-control input-sm" ng-model="entry.category"/>
-            <span ng-show="isDisplaying(entry)">[[entry.category]]</span>
-          </small>
+        <td class="col-md-3">
+            <input type="text" class="form-control input-sm" ng-model="newEntry.category"/>
         </td>
 
-        <td>
-          <div class="btn-group" ng-show="isEditing(entry)">
-            <button type="button" class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
-              <span ng-class="iconSaveClass(entry)"></span>
+        <td class="col-md-2">
+          <div class="btn-group">
+            <button type="button" class="btn btn-xs btn-success"
+              ng-click="createEntry(newEntry)" title="Save">
+              <span class="fa fa-plus"></span>
             </button>
 
-            <button type="button" class="btn btn-xs btn-default" ng-click="cancelEditEntry(entry)" title="Cancel">
-              <span ng-class="iconCancelClass(entry)"></span>
+            <button type="button" class="btn btn-xs btn-default"
+              ng-click="resetNewEntry()" title="Cancel">
+              <span class="fa fa-times"></span>
             </button>
 
-            <button type="button" class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
+            <button type="button" class="btn btn-xs btn-default"
+              ng-click="newEntry.pointed=!newEntry.pointed"
+              ng-class="{active: newEntry.pointed}" title="point">
               <span class="fa fa-check"></span>
             </button>
           </div>
+        </td>
+      </tr>
 
-          <div class="btn-group" ng-show="isDisplaying(entry) && isSaved(entry)">
+      {# Row for an editing entry. #}
+      <tr id="entry_[[entry.id]]" class="form-inline"
+        ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries"
+        ng-if="isEditing(entry)">
+        <td class="col-md-1">
+          <input type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
+        </td>
+        
+        <td>
+          <input type="text" class="form-control input-sm" ng-model="entry.label"/>
+        </td>
+        
+        <td class="col-md-1 col-xs-1">
+          <input type="text" class="form-control input-sm" ng-model="entry.value"/>
+        </td>
+        
+        <td class="col-md-1" ng-class="entryValueClass(entry.sold)">
+          <small>[[entry.sold]]</small>
+        </td>
+
+        <td class="col-md-3">
+            <input type="text" class="form-control input-sm" ng-model="entry.category"/>
+        </td>
+
+        <td class="col-md-2">
+          <div class="btn-group">
+            <button type="button" class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
+              <span class="fa fa-floppy-o"></span>
+            </button>
+
+            <button type="button" class="btn btn-xs btn-default" ng-click="cancelEditEntry(entry)" title="Cancel">
+              <span class="fa fa-times"></span>
+            </button>
+
+            <button type="button" class="btn btn-xs btn-default"
+              ng-click="pointEntry(entry)"
+              ng-class="{active: entry.pointed}" title="point">
+              <span class="fa fa-check"></span>
+            </button>
+          </div>
+        </td>
+      </tr>
+
+      {# Row for a displayed entry. #}
+      <tr id="entry_[[entry.id]]"
+        ng-class="entryRowClass(entry)" ng-repeat-end
+        ng-if="isDisplaying(entry)">
+        <td class="col-md-1">
+          <small><span>[[entry.operation_date | date:"yyyy-MM-dd"]]</span></small>
+        </td>
+        
+        <td>
+          <small><span>[[entry.label]]</span></small>
+        </td>
+        
+        <td class="col-md-1">
+          <small><span>[[entry.value]]</span></small>
+        </td>
+        
+        <td class="col-md-1" ng-class="{entryValueClass(entry.sold)">
+          <small>[[entry.sold]]</small>
+        </td>
+
+        <td class="col-md-3">
+          <small><span>[[entry.category]]</span></small>
+        </td>
+
+        <td class="col-md-2">
+          {# Button group for a saved entry. #}
+          <div class="btn-group" ng-if="isSaved(entry)">
             <button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
               <span class="fa fa-pencil-square-o"></span>
             </button>
@@ -103,21 +166,26 @@
               <span class="fa fa-trash"></span>
             </button>
 
-            <button class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
+            <button class="btn btn-xs btn-default"
+              ng-click="pointEntry(entry)"
+              ng-class="{active: entry.pointed}" title="point">
               <span class="fa fa-check"></span>
             </button>
           </div>
 
-          <div class="btn-group" ng-show="isDisplaying(entry) && !isSaved(entry)">
+          {# Button group for an unsaved (scheduled) entry. #}
+          <div class="btn-group" ng-if="!isSaved(entry)">
             <button class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
-              <span ng-class="iconSaveClass(entry)"></span>
+              <span class="fa fa-plus"></span>
             </button>
 
             <button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
               <span class="fa fa-pencil-square-o"></span>
             </button>
 
-            <button class="btn btn-xs btn-default" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" title="point">
+            <button class="btn btn-xs btn-default"
+              ng-click="pointEntry(entry)"
+              ng-class="{active: entry.pointed}" title="point">
               <span class="fa fa-check"></span>
             </button>
           </div>