Manage multiple screen parts and add home screen

inc/myco.js

@@ -67,6 +67,57 @@ navbar_collapse_hide=function() {
   }
 }
 
+/****************
+ * Parts
+ ****************/
+
+view_part=function(part) {
+  $('.part').each(function(idx,div) {
+    $(div).css('display','none');
+  });
+  $(part).css('display','block');
+}
+
+view_home=function() {
+  if (user) {
+    $('#view-home #title').html('Bonjour '+user.name);
+  }
+  else {
+    $('#view-home #title').html('Bonjour');
+  }
+  if (groups.count()>0) {
+    tbody=$('#view-home #mybalances tbody');
+    tbody.html('');
+    balances=groups.balances();
+    var sum=0;
+    for (g in balances) {
+      if (jQuery.type(balances[g]['balance'][user.name])!='undefined') {
+        if (balances[g]['balance'][user.name]['diff']<0) {
+          sum+=balances[g]['balance'][user.name]['diff'];
+          diff='<td class="negative">'+balances[g]['balance'][user.name]['diff'].toFixed(2)+'</td>';
+        }
+        else {
+          value=balances[g]['balance'][user.name]['total']-balances[g]['min'];
+          sum+=value;
+          diff='<td class="positive">+'+value.toFixed(2)+' €</td>';
+        }
+        tbody.html(tbody.html()+'<tr><td>'+g+'</td>'+diff+'</tr>');
+      }
+    }
+    if (sum<0) {
+      $('#view-home #mybalances #total-value').html('<span class="negative">'+sum.toFixed(2)+' €</span>');
+    }
+    else {
+      $('#view-home #mybalances #total-value').html('<span class="positive">'+(sum==0?'':'+')+sum.toFixed(2)+' €</span>');
+    }
+    $('#view-home #mybalances').css('display','block');
+  }
+  else {
+    $('#view-home #mybalances').css('display','none');
+  }
+  view_part('#view-home');
+}
+
 /****************
  * View group
  ****************/
@@ -75,7 +126,7 @@ view_group=function(group) {
   $('#view-group #group_name')[0].value=group.name;
   set_contributors(group);
   on_contributor_change();
-  $('#view-group').css('display','block');
+  view_part('#view-group');
 }
 
 set_contributors=function(group) {
@@ -535,4 +586,5 @@ $( document ).ready( function() {
   $("#display_balance_btn").bind('click',on_display_balance_btn_click);
 
   $('#remove_group_btn').bind('click',on_remove_group_btn_click);
+  view_home();
 } );

index.html

@@ -37,11 +37,15 @@ body{
   font-weight: bold;
 }
 
-.late {
+.positive {
+  color: green;
+}
+
+.negative {
   color: red;
 }
 
-.hidden-part {
+.part {
   display: none;
 }
 
@@ -84,7 +88,26 @@ body{
     </div>
 <div class="container">
 
-<div id='view-group' class='part hidden-part'>
+<div id='view-home' class='part'>
+  <h1 id='title'></h1>
+  <table class="table table-striped" id='mybalances'>
+    <thead>
+      <tr>
+        <th>Groupe</th>
+        <th>Balance</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+    <tfoot>
+      <tr>
+        <td id='total-label'>Total :</td>
+        <td id='total-value'></td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+<div id='view-group' class='part'>
   <h1><span>Noël</span><small><span id='edit_group_btn' class='glyphicon glyphicon-edit btn btn-sm'></span></small></h1>
   <form class="form-horizontal" role="form">
     <input type='hidden' id='group_name' value='Noël'/>