From c83b49658a5ac9034a639579f286e1d183c806e6 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Fri, 25 Jan 2013 22:20:38 +0100
Subject: [PATCH] Commented index.html

---
 src/html/index.html | 64 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 5 deletions(-)
diff --git a/src/html/index.html b/src/html/index.html
index 8572f89..433fe5d 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -1,10 +1,16 @@
 <!DOCTYPE html>
 <html lang="fr">
   <head>
+    <!-- Title -->
     <title>Entries</title>
-    <!-- Bootstrap -->
+
+    <!-- Bootstrap CSS -->
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+
+    <!-- Bootstrap datepicker plugin CSS -->
     <link href="datepicker/css/datepicker.css" rel="stylesheet" media="screen">
+
+    <!-- JQPlot CSS -->
     <link href="jqplot/jquery.jqplot.min.css" rel="stylesheet" type="text/css">
   </head>
 
@@ -12,15 +18,21 @@
     <div class="container-fluid">
       <div class="row-fluid">
         <div class="span12">
+          <!-- Navbar with accounts -->
           <div class="navbar navbar-fixed-top">
             <div class="navbar-inner">
+              <!-- Title -->
               <a class="brand" href="#">&nbsp;Comptes</a>
 
+              <!-- Account list -->
               <div class="nav" data-bind="foreach: accounts, value: account">
                 <div class="btn-group">
+                  <!-- Account button -->
                   <button class="btn btn-nav" data-bind="css: { active: $data === $root.account() }, click: $parent.selectAccount"><span data-bind="text: name"></span>&nbsp;(<span data-bind="text: current, css: {'text-error': $data.current < 0 }"></span>)</button>
+                  <!-- Dropdown button -->
                   <button class="btn btn-nav dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></button>
 
+                  <!-- Dropdown menu -->
                   <ul class="dropdown-menu">
                     <li><a href="#" data-bind="click: $root.editAccount">Modifier</a></li>
                     <li><a href="#" data-bind="click: $root.removeAccount">Supprimer</a></li>
@@ -28,12 +40,14 @@
                 </div>
               </div>
 
+              <!-- New account button -->
               <div class="btn btn-nav">
                 <a data-bind="click: $root.addAccount" href="#"><i class="icon-plus"></i></a>
               </div>
             </div>
           </div>
 
+          <!-- Navbar with the months of the selected account -->
           <div class="navbar navbar-fixed-bottom">
             <div class="navbar-inner">
               <ul data-bind="foreach: months()" class="nav">
@@ -42,24 +56,31 @@
             </div>
           </div>
 
+          <!-- Emtpy row with top margin to avoid data under the fixed top navbar -->
           <div class="row-fluid" style="margin-top: 46px"></div>
 
+          <!-- Chart row -->
           <div class="row-fluid">
+            <!-- Sold evolution chart placeholder -->
             <div class="span8">
               <div id="entries-chart-placeholder" data-bind="chart: $root.entriesChart"></div>
             </div>
 
+            <!-- Expense category piechart -->
             <div class="span4">
               <div id="expense-categories-chart-placeholder" data-bind="pieChart: $root.expenseCategoriesChart"></div>
             </div>
           </div>
 
+          <!-- Message placeholder -->
           <div class="row-fluid">
             <div id="message-placeholder"></div>
           </div>
 
+          <!-- Row with entry table -->
           <div class="row-fluid">
             <table class="table table-striped table-condensed table-hover">
+              <!-- Head of the table containing column headers and size -->
               <thead>
                 <tr>
                   <th style="width: 100px">Date de valeur</th>
@@ -73,53 +94,73 @@
                 </tr>
               </thead>
 
-              <tbody data-bind="template:{name: templateToUse, foreach: entries}">
-              </tbody>
+              <!-- Body of the table containing the entries -->
+              <tbody data-bind="template:{name: templateToUse, foreach: entries}"></tbody>
             </table>
           </div>
 
+          <!-- Emtpy row with bottom margin to avoid data undur the fixed bottom navbar -->
           <div class="row-fluid" style="margin-bottom: 21px"></div>
         </div>
       </div>
     </div>
 
+    <!-- Confirm entry removal modal dialog -->
     <div id="remove-confirm" class="modal hide fade">
+      <!-- Dialog header with title -->
       <div class="modal-header">
         <h3>Confirmer la suppression</h3>
       </div>
+
+      <!-- Dialog body -->
       <div class="modal-body">
         <p>Confirmez-vous la suppression de cette entr&eacute;e ?</p>
       </div>
+
+      <!-- Dialog footer with buttons -->
       <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>
 
+    <!-- Confirm account removal modal dialog -->
     <div id="remove-account-confirm" class="modal hide fade">
+      <!-- Dialog header with title -->
       <div class="modal-header">
         <h3>Confirmer la suppression</h3>
       </div>
+
+      <!-- Dialog body -->
       <div class="modal-body">
         <p>Confirmez-vous la suppression de ce compte ?</p>
       </div>
+
+      <!-- Dialog footer with buttons -->
       <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: confirmAccountRemove">Oui</a>
       </div>
     </div>
 
+    <!-- Account edit modal dialog -->
     <div id="edit-account" class="modal hide fade">
+      <!-- Dialog header with title -->
       <div class="modal-header">
         <h3>&Eacute;diter le compte</h3>
       </div>
+
+      <!-- Dialog body -->
       <div class="modal-body">
         <form class="form-horizontal" data-bind="with: editingAccount">
           <div class="control-group">
+            <!-- Account name field -->
             <label class="control-label" for="inputName">Nom du compte</label>
             <div class="controls">
               <input type="text" id="inputName" data-bind="value: name"></input>
             </div>
+
+            <!-- Authorized overdraft field -->
             <label class="control-label" for="inputAuthorizedOverdraft">D&eacute;couvert authoris&eacute;</label>
             <div class="controls">
               <input type="text" id="inputAuthorizedOverdraft" data-bind="value: authorized_overdraft"></input>
@@ -127,12 +168,15 @@
           </div>
         </form>
       </div>
+
+      <!-- Dialog footer with buttons -->
       <div class="modal-footer">
         <a href="#" class="btn btn-primary" data-bind="click: saveAccount">OK</a>
         <a href="#" class="btn" data-bind="click: cancelEditAccount">Annuler</a>
       </div>
     </div>
 
+    <!-- Displayed item template -->
     <script id="itemsTmpl" type="text/html">
       <tr data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
         <td data-bind="text: value_date"></td>
@@ -148,7 +192,8 @@
         </td>
       </tr>
     </script>
-       
+
+    <!-- New item template -->
     <script id="newTmpl" type="text/html">
       <tr>
         <td><div class="date"><input type="text" class="input-small" data-bind="value: value_date" data-date-format="yyyy-mm-dd" id="new_value_date"></input></div></td>
@@ -165,7 +210,7 @@
       </tr>
     </script>
 
-     
+    <!-- Edit item template -->
     <script id="editTmpl" type="text/html">
       <tr data-bind="css: { 'warning': sold() < 0 && sold() >= $root.account().authorized_overdraft(), 'error': sold() < $root.account().authorized_overdraft() }">
         <td><div class="date"><input type="text" class="input-small" data-bind="value: value_date" data-date-format="yyyy-mm-dd" id="value_date"></input></div></td>
@@ -182,13 +227,19 @@
       </tr>
     </script>
 
+    <!-- JQuery Javascript library -->
     <script type="text/javascript" src="jquery/jquery.js"></script>
+
+    <!-- Bootstrap Javascript library -->
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
+    <!-- Bootstrap datepicker module -->
     <script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
 
+    <!-- Knockoutjs.com Javascript library -->
     <script type="text/javascript" src="knockout/knockout.js"></script>
     <script type="text/javascript" src="knockout/knockout-mapping.min.js"></script>
 
+    <!-- JQPlot Javascript library and needed modules -->
     <script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
     <script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
     <script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
@@ -199,7 +250,10 @@
     <script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
     <script type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
 
+    <!-- Custom Javascript library for date manipulation -->
     <script type="text/javascript" src="js/date.js"></script>
+
+    <!-- Custom Javascript library for entries -->
     <script type="text/javascript" src="js/entries.js"></script>
   </body>
 </html>
