accountant-ui/frontend/templates/index.html

{#
    This file is part of Accountant.

    Accountant is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Foobar is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
#}
{% extends "layout.html" %}
{% block body %}
<!-- Chart row -->
<div class="row-fluid">
  <!-- Sold evolution chart placeholder -->
  <div class="span7">
    <div id="entries-chart-placeholder">
      <svg style='height:300px'/>
    </div>
  </div>

  <!-- Expense category piechart -->
  <div class="span3">
    <div id="expense-categories-chart-placeholder">
      <svg style='height:300px'/>
    </div>
  </div>

  <!-- Balance -->
  <div class="span2" ng-controller="EntryController">
    <div class="row-fluid">
      <table class="table">
        <tr><td>Dépenses&nbsp;:</td><td>[[accountStatus.expenses]]</td></tr>
        <tr><td>Recettes&nbsp;:</td><td>[[accountStatus.revenues]]</td></tr>
        <tr><td>Balance&nbsp;:</td><td><span ng-class="entryValueClass(accountStatus.balance)">[[accountStatus.balance]]</span></td></tr>
      </table>
    </div>
  </div>
</div>

<!-- Row with entry table -->
<div class="row-fluid">
  <table class="table table-striped table-condensed table-hover" ng-controller="EntryController">
    <!-- Head of the table containing column headers and size -->
    <thead>
      <tr>
        <th style="width: 100px">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: 60px">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="input-small" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
            <span ng-show="isDisplaying(entry)">[[entry.operation_date]]</span>
          </small>
        </td>
        <td>
          <small>
            <input ng-show="isEditing(entry)" type="text" class="input-xxlarge" ng-model="entry.label"/>
            <span ng-show="isDisplaying(entry)">[[entry.label]]</span>
          </small>
        </td>
        <td>
          <small>
            <input ng-show="isEditing(entry)" type="text" class="input-mini" ng-model="entry.value"/>
            <span ng-show="isDisplaying(entry)">[[entry.value]]</span>
          </small>
        </td>
        <td ng-class="entryValueClass(entry.sold)">
          <small>
              [[entry.sold]]
          </small>
        </td>
        <td>
          <small>
            <input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.category" bs-typeahead="categories"/>
            <span ng-show="isDisplaying(entry)">[[entry.category]]</span>
          </small>
        </td>
        <td>
          <div class="btn-group" ng-show="isEditing(entry)">
            <a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#" title="Save"><i ng-class="iconSaveClass(entry)"><span style="display: none">Save</span></i></a>
            <a class="btn btn-mini" ng-click="cancelEditEntry(entry)" href="#" title="Cancel"><i ng-class="iconCancelClass(entry)"><span style="display: none">Cancel</span></i></a>
            <a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
          </div>
          <div class="btn-group" ng-show="isDisplaying(entry) && isSaved(entry)">
            <a class="btn btn-mini" ng-click="editEntry(entry)" href="#" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
            <a class="btn btn-mini" bs-modal="'{{ url_for('frontend.static', filename='templates/entry_remove.html') }}'" href="#" title="remove"><i class="icon-trash"><span style="display: none">Remove</span></i></a>
            <a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
          </div>
          <div class="btn-group" ng-show="isDisplaying(entry) && !isSaved(entry)">
            <a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#" title="Save"><i ng-class="iconSaveClass(entry)"><span style="display: none">Save</span></i></a>
            <a class="btn btn-mini" ng-click="editEntry(entry)" href="#" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
            <a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}

{% block footer %}
<!-- Navbar with the months of the selected account -->
<div class="navbar navbar-fixed-bottom">
  <div class="navbar-inner" ng-controller="MonthController">
    <ul class="nav">
      <li ng-repeat="month in months" ng-class="monthClass(month)"><a href="#" ng-click="selectMonth(month)">[[month.year]]-[[month.month]]</a></li>
    </ul>
  </div>
</div>
{% endblock %}

<!-- Custom Javascript library for entries -->
{% block js %}
<script type="text/javascript" src="{{ url_for('frontend.static', filename='js/months.js') }}"></script>
<script type="text/javascript" src="{{ url_for('frontend.static', filename='js/accounts.js') }}"></script>
<script type="text/javascript" src="{{ url_for('frontend.static', filename='js/entries.js') }}"></script>
{% endblock %}