Change @Input handling.

Cleanup.
Externalize operation delete modal template.
2018-06-14 21:48:34 +02:00 · 2018-06-14 21:19:17 +02:00 · 2018-06-14 21:18:51 +02:00 · 2018-06-14 12:05:58 +02:00 · 2018-06-14 12:03:09 +02:00 · 2018-06-14 11:59:35 +02:00
61 changed files with 1302 additions and 1246 deletions
--- a/.gitignore
+++ b/.gitignore
@ -81,4 +81,5 @@ tags

 # End of https://www.gitignore.io/api/vim,node

-/build
+/dist
+
--- a/config/helpers.js
+++ b/config/helpers.js
@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@ -0,0 +1,119 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const helpers = require('./helpers');
+
+module.exports = {
+  entry: {
+    'polyfills': './src/polyfills.ts',
+    'vendor': './src/vendor.ts',
+    'app': './src/main.ts',
+    'styles': './src/main.scss'
+  },
+
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+
+  module: {
+    rules: [{
+      enforce: 'pre',
+      test: /webpack\.config\.js$/,
+      include: helpers.root('src', 'app'),
+      loader: 'eslint-loader',
+      options: {
+        useEslintrc: false,
+        emitWarning: true,
+        emitError: true,
+        failOnWarning: true,
+        failOnError: true,
+        baseConfig: 'webpack',
+        rules: {
+          indent: ['error', 4]
+        },
+      },
+    }, {
+      // Javascript
+      enforce: 'pre',
+      test: /\.jsx?$/,
+      include: helpers.root('src', 'app'),
+      loader: 'eslint-loader',
+      options: {
+        useEslintrc: false,
+        emitWarning: false,
+        emitError: true,
+        failOnWarning: false,
+        failOnError: true,
+        baseConfig: 'angular',
+        rules: {
+          indent: ['error', 4]
+        },
+        plugins: [
+          'angular',
+          'html',
+          'security',
+          'this',
+          'jquery',
+          'promise'
+        ]
+      },
+    // }, {
+    //   test: /\.jsx?$/,
+    //   exclude: /node_modules/,
+    //   loader: 'babel-loader'
+    }, {
+      test: /\.ts$/,
+      use: [
+        {
+          loader: 'awesome-typescript-loader',
+          options: { configFileName: helpers.root('src', 'tsconfig.json') }
+        },
+        'angular2-template-loader'
+      ]
+    }, {
+      test: /\.html$/,
+      include: helpers.root('src'),
+      loader: 'html-loader'
+    }, {
+      test: /\.css$/,
+      //include: helpers.root('src'),
+      use: [
+        'style-loader',
+        'css-loader',
+        'resolve-url-loader'
+      ]
+    }, {
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        'resolve-url-loader',
+        'sass-loader?sourceMap'
+      ]
+    }, {
+      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+      loader: 'file-loader?name=assets/[name].[hash].[ext]'
+    }]
+  },
+
+  optimization: {
+    splitChunks: {
+      name: true
+    }
+  },
+
+  plugins: [
+    // Workaround for angular/angular#11580
+    new webpack.ContextReplacementPlugin(
+      // The (\\|\/) piece accounts for path separators in *nix and Windows
+      /angular(\\|\/)core(\\|\/)@angular/,
+      helpers.root('./src'), // location of your src
+      {} // a map of your routes
+    ),
+
+    new HtmlWebpackPlugin({
+      template: 'src/index.ejs'
+    })
+  ],
+};
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@ -0,0 +1,34 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'cheap-module-eval-source-map',
+
+  mode: 'development',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js'
+  },
+
+  plugins: [
+    new ExtractTextPlugin('[name].css')
+  ],
+
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        secure: false
+      }
+    },
+    historyApiFallback: true,
+    stats: 'minimal'
+  }
+});
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@ -0,0 +1,41 @@
+/* jshint esversion: 6 */
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'source-map',
+
+  mode: 'production',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
+  },
+
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+      mangle: {
+        keep_fnames: true
+      }
+    }),
+    new ExtractTextPlugin('[name].[hash].css'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'ENV': JSON.stringify(ENV)
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      htmlLoader: {
+        minimize: false // workaround for ng2
+      }
+    })
+  ]
+});
--- a/package.json
+++ b/package.json
@ -4,77 +4,89 @@
  "repository": "https://git.lahouze.org/xals/accountant",
  "license": "AGPL-1.0",
  "devDependencies": {
+    "@angular/cli": "^6.0.7",
+    "@angular/compiler-cli": "^6.0.3",
+    "@ngtools/webpack": "^6.1.0-beta.1",
    "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^3.2.3",
+    "awesome-typescript-loader": "^5.0.0",
    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
-    "codelyzer": "^3.1.2",
-    "css-loader": "^0.28.5",
-    "ejs-loader": "^0.3.0",
-    "eslint": "^4.10.0",
+    "babel-eslint": "^8.2.2",
+    "babel-loader": "^7.1.4",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.10",
+    "ejs-loader": "^0.3.1",
+    "eslint": "^4.18.2",
    "eslint-config-angular": "^0.5.0",
    "eslint-config-webpack": "^1.2.5",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-angular": "^3.1.0",
-    "eslint-plugin-html": "^3.2.0",
-    "eslint-plugin-jquery": "^1.2.1",
-    "eslint-plugin-promise": "^3.6.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-angular": "^3.3.0",
+    "eslint-plugin-html": "^4.0.2",
+    "eslint-plugin-jquery": "^1.3.0",
+    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-security": "^1.4.0",
    "eslint-plugin-this": "^0.2.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.5",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.0.6",
    "htmllint-loader": "^2.1.4",
-    "imports-loader": "^0.7.1",
-    "less": "^3.0.0-alpha.3",
-    "less-loader": "^4.0.5",
-    "loglevel": "^1.5.1",
+    "imports-loader": "^0.8.0",
+    "less": "^3.0.1",
+    "less-loader": "^4.1.0",
+    "loglevel": "^1.6.1",
    "ngtemplate-loader": "^2.0.1",
-    "node-sass": "^4.5.3",
-    "resolve-url-loader": "^2.1.0",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "ts-loader": "^3.1.0",
-    "tslint": "^5.7.0",
-    "tslint-config-prettier": "^1.4.0",
-    "tslint-loader": "^3.5.3",
-    "typescript": "^2.4.2",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.8.1",
-    "webpack-concat-plugin": "^1.4.1",
-    "webpack-dev-server": "^2.9.3"
+    "node-sass": "^4.7.2",
+    "null-loader": "^0.1.1",
+    "raw-loader": "^0.5.1",
+    "resolve-url-loader": "^2.3.0",
+    "sass-loader": "^7.0.2",
+    "script-ext-html-webpack-plugin": "^2.0.1",
+    "style-loader": "^0.21.0",
+    "ts-loader": "^4.0.1",
+    "typescript": "~2.7.2",
+    "typescript-eslint-parser": "^15.0.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.8.0",
+    "webpack-cli": "^3.0.1",
+    "webpack-dev-server": "^3.1.0",
+    "webpack-merge": "^4.1.1"
  },
  "dependencies": {
-    "@angular/animations": "^4.4.6",
-    "@angular/common": "^4.4.6",
-    "@angular/compiler": "^4.4.6",
-    "@angular/core": "^4.4.6",
-    "@angular/forms": "^4.4.6",
-    "@angular/http": "^4.4.6",
-    "@angular/platform-browser": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@angular/router": "^4.4.6",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
-    "@nsalaun/ng-logger": "^2.0.2",
-    "@types/c3": "^0.4.45",
-    "@types/node": "^8.0.47",
-    "angular2-text-mask": "^8.0.3",
-    "base64util": "^1.0.2",
-    "bootstrap": "4.0.0-beta",
-    "c3": "^0.4.17",
+    "@angular/animations": "^6.0.3",
+    "@angular/common": "^6.0.3",
+    "@angular/compiler": "^6.0.3",
+    "@angular/core": "^6.0.3",
+    "@angular/forms": "^6.0.3",
+    "@angular/http": "^6.0.3",
+    "@angular/platform-browser": "^6.0.3",
+    "@angular/platform-browser-dynamic": "^6.0.3",
+    "@angular/router": "^6.0.3",
+    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
+    "@nsalaun/ng-logger": "^5.0.0",
+    "@swimlane/ngx-charts": "^8.0.2",
+    "@types/d3": "^5.0.0",
+    "@types/geojson": "^7946.0.3",
+    "@types/node": "^10.3.2",
+    "@types/underscore": "^1.8.8",
+    "angular2-text-mask": "^9.0.0",
+    "base64util": "^2.0.0-f",
+    "bootstrap": "4.1.1",
+    "d3": "^5.0.0",
    "font-awesome": "^4.7.0",
-    "jquery": "^3.2.1",
-    "moment": "^2.19.1",
-    "ng2-materialize": "^1.5.1",
-    "ngx-toastr": "^6.5.0",
-    "reflect-metadata": "^0.1.10",
-    "rxjs": "^5.5.2",
-    "zone.js": "^0.8.17"
+    "jquery": "^3.3.1",
+    "jqwidgets-scripts": "^5.7.2",
+    "moment": "^2.21.0",
+    "ng2-nvd3": "^2.0.0",
+    "ngx-toastr": "^8.3.0",
+    "reflect-metadata": "^0.1.12",
+    "rxjs": "^6.2.0",
+    "rxjs-compat": "^6.2.0",
+    "underscore": "^1.8.3",
+    "zone.js": "^0.8.20"
  },
  "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "dev": "webpack-dev-server --debug --devtool eval --config webpack.config.js --progress --colors --hot --content-base build"
+    "build": "rm -Rf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "test": "karma start",
+    "dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --colors --hot --info --debug --devtool eval-cheap-module-source-map"
  }
 }
--- a/src/accounts/account.module.ts
+++ b/src/accounts/account.module.ts
@ -9,7 +9,6 @@ import { RouterModule } from '@angular/router';
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrModule } from 'ngx-toastr';
-import { MaterializeModule } from 'ng2-materialize';

 import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
@ -31,8 +30,7 @@ import { AccountListState } from './account.states'
    ]),
    NgLoggerModule,
    ToastrModule,
-    NgbModule,
-    MaterializeModule,
+    NgbModule
  ],
  providers: [
    AccountService,
--- a/src/accounts/account.ts
+++ b/src/accounts/account.ts
@ -3,13 +3,13 @@
 import { AccountBalances } from './accountBalances';

 export class Account {
-  id: number;
-  name: string;
-  authorized_overdraft: number;
+  public id: number;
+  public name: string;
+  public authorized_overdraft: number;

-  balances: AccountBalances;
+  public balances: AccountBalances;

-  constructor() {
+  public constructor() {
    this.authorized_overdraft = 0;
  }
 }
--- a/src/accounts/accountBalances.ts
+++ b/src/accounts/accountBalances.ts
@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 export class AccountBalances {
-  current: number;
-  pointed: number;
-  future: number;
+  public current: number;
+  public pointed: number;
+  public future: number;
 }
--- a/src/accounts/accountDeleteModal.component.html
+++ b/src/accounts/accountDeleteModal.component.html
@ -0,0 +1,20 @@
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <p>
+  Do you really want to delete account #{{ account.id }} with name:<br/>
+  {{ account.name }}
+  </p>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-danger" (click)="submit()">
+    Yes
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    No
+  </button>
+</div>
--- a/src/accounts/accountDeleteModal.component.ts
+++ b/src/accounts/accountDeleteModal.component.ts
@ -7,28 +7,7 @@ import { Account } from './account';

@Component({
  selector: 'account-delete-modal',
-  template: `
-    <div class="modal-header">
-      <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-    </div>
-
-    <div class="modal-body" id="modal-body">
-      <p>
-      Do you really want to delete account #{{ account.id }} with name:<br/>
-      {{ account.name }}
-      </p>
-    </div>
-
-    <div class="modal-footer">
-      <button class="btn btn-danger" (click)="submit()">
-        Yes
-      </button>
-
-      <button class="btn btn-default" (click)="cancel()">
-        No
-      </button>
-    </div>
-  `
+  templateUrl: './accountDeleteModal.component.html'
 })
 export class AccountDeleteModalComponent {
  @Input() account: Account
--- a/src/accounts/accountEditModal.component.html
+++ b/src/accounts/accountEditModal.component.html
@ -0,0 +1,17 @@
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
+    Save
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    Cancel
+  </button>
+</div>
--- a/src/accounts/accountEditModal.component.ts
+++ b/src/accounts/accountEditModal.component.ts
@ -8,25 +8,7 @@ import { AccountFormComponent } from './accountForm.component';

@Component({
  selector: 'account-edit-modal',
-  template: `
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
-
-<div class="modal-body" id="modal-body">
-  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
-</div>
-
-<div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
-    Save
-  </button>
-
-  <button class="btn btn-default" (click)="cancel()">
-    Cancel
-  </button>
-</div>
-  `
+  templateUrl: './accountEditModal.component.html'
 })
 export class AccountEditModalComponent {
  @Input() account: Account;
--- a/src/accounts/accountForm.component.html
+++ b/src/accounts/accountForm.component.html
@ -0,0 +1,47 @@
+<form novalidate
+  (keyup.enter)="submit()" [formGroup]="form">
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="name">
+      Account name
+    </label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="name.errors">
+      <input class="form-control"
+        id="name" formControlName="name"
+        placeholder="Account name">
+
+      <div class="help-block text-danger" *ngIf="name.errors">
+        <p *ngIf="name.errors.required">The account name is required.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="authorized-overdraft">
+      Authorized overdraft
+    </label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="authorizedOverdraft.errors">
+      <div class="input-group">
+        <input class="form-control"
+          id="authorized-overdraft" formControlName="authorizedOverdraft"
+          placeholder="Authorized overdraft">
+
+        <div class="input-group-addon">.00€</div>
+      </div>
+
+      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
+        <p *ngIf="authorizedOverdraft.errors.required">
+          The authorized overdraft is required.
+        </p>
+
+        <p *ngIf="authorizedOverdraft.errors.max">
+          The authorized overdraft must be less than or equal to 0.
+        </p>
+      </div>
+    </div>
+  </div>
+</form>
+
--- a/src/accounts/accountForm.component.ts
+++ b/src/accounts/accountForm.component.ts
@ -7,54 +7,7 @@ import { Account } from './account';
@Component({
  selector: 'account-form',
  exportAs: 'accountForm',
-  template: `
-<form novalidate
-  (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="name">
-      Account name
-    </label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="name.errors">
-      <input class="form-control"
-        id="name" formControlName="name"
-        placeholder="Account name">
-
-      <div class="help-block text-danger" *ngIf="name.errors">
-        <p *ngIf="name.errors.required">The account name is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="authorized-overdraft">
-      Authorized overdraft
-    </label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="authorizedOverdraft.errors">
-      <div class="input-group">
-        <input class="form-control"
-          id="authorized-overdraft" formControlName="authorizedOverdraft"
-          placeholder="Authorized overdraft">
-
-        <div class="input-group-addon">.00€</div>
-      </div>
-
-      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
-        <p *ngIf="authorizedOverdraft.errors.required">
-          The authorized overdraft is required.
-        </p>
-
-        <p *ngIf="authorizedOverdraft.errors.max">
-          The authorized overdraft must be less than or equal to 0.
-        </p>
-      </div>
-    </div>
-  </div>
-</form>
-  `
+  templateUrl: './accountForm.component.html'
 })
 export class AccountFormComponent implements OnInit {
  public form: FormGroup;
--- a/src/accounts/accountList.component.html
+++ b/src/accounts/accountList.component.html
@ -0,0 +1,27 @@
+<div class="row">
+  <table class="table table-sm table-striped table-condensed table-hover">
+    <thead>
+      <tr>
+        <th>Nom du compte</th>
+        <th>Solde courant</th>
+        <th>Solde pointé</th>
+        <th>Découvert autorisé</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td colspan="5">
+          <button class="btn btn-success" (click)="add()">
+            Ajouter
+          </button>
+        </td>
+      </tr>
+
+      <tr *ngFor="let account of accounts"
+        [account-row]="account" (needsReload)="load()">
+      </tr>
+    </tbody>
+  </table>
+</div>
--- a/src/accounts/accountList.component.ts
+++ b/src/accounts/accountList.component.ts
@ -13,37 +13,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';

@Component({
  selector: 'account-list',
-  template: `
-<div class="row">
-  <div class="col s12">
-    <table class="bordered highlight responsive-table">
-      <thead>
-        <tr>
-          <th>Nom du compte</th>
-          <th>Solde courant</th>
-          <th>Solde pointé</th>
-          <th>Découvert autorisé</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr>
-          <td colspan="5">
-            <button mz-button class="green" (click)="add()">
-              Ajouter
-            </button>
-          </td>
-        </tr>
-
-        <tr *ngFor="let account of accounts"
-          [account-row]="account" (needsReload)="load()">
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-    `,
+  templateUrl: './accountList.component.html',
 })
 export class AccountListComponent implements OnInit {
  accounts: Account[];
--- a/src/accounts/accountRow.component.html
+++ b/src/accounts/accountRow.component.html
@ -0,0 +1,41 @@
+<td>
+  <a [routerLink]="[account.id, 'operations']">{{ account.name }}</a>
+</td>
+
+<td>
+  <span (ngClass)="valueClass(accountBalances?.current)">
+    {{ accountBalances?.current | currency:'EUR':'symbol' }}
+  </span>
+</td>
+
+<td>
+  <span (ngClass)="valueClass(accountBalances?.pointed)">
+    {{ accountBalances?.pointed | currency:'EUR':'symbol' }}
+  </span>
+</td>
+
+<td>{{ account.authorized_overdraft | currency:'EUR':'symbol' }}</td>
+
+<td>
+  <div class="btn-group btn-group-sm">
+    <!-- Edit account. -->
+    <button type="button" class="btn btn-success"
+      (click)="modify()">
+      <span class="fa fa-pencil-square-o"></span>
+    </button>
+
+    <!-- Delete account, with confirm. -->
+    <button type="button" class="btn btn-danger"
+      (click)="confirmDelete()">
+      <span class="fa fa-trash-o"></span>
+    </button>
+
+    <!-- Open account scheduler. -->
+    <a class="btn btn-secondary"
+      [hidden]="!account.id"
+      [routerLink]="[account.id, 'scheduler']">
+      <span class="fa fa-clock-o"></span>
+    </a>
+  </div>
+</td>
+
--- a/src/accounts/accountRow.component.ts
+++ b/src/accounts/accountRow.component.ts
@ -17,60 +17,16 @@ import { AccountEditModalComponent } from './accountEditModal.component';
  selector: 'tr[account-row]',
  host: {
    "[id]": "account.id",
-    "class": "lighten-5",
-    "[class.orange]": "account.authorized_overdraft < 0 && accountBalances?.current < 0",
-    "[class.red]": "accountBalances?.current < account.authorized_overdraft",
+    "[class.warning]": "warning",
+    "[class.danger]": "danger"
  },
-  template: `
-<td>
-  <a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
-</td>
-
-<td>
-  <span class="text-lighten-2"
-    [class.orange-text]="account.authorized_overdraft < 0 && accountBalances?.current < 0"
-    [class.red-text]="accountBalances?.current < account.authorized_overdraft">
-    {{ accountBalances?.current | currency:"EUR":true }}
-  </span>
-</td>
-
-<td>
-  <span class="text-lighten-2"
-    [class.orange-text]="account.authorized_overdraft < 0 && accountBalances?.pointed < 0"
-    [class.red-text]="accountBalances?.pointed < account.authorized_overdraft">
-    {{ accountBalances?.pointed | currency:"EUR":true }}
-  </span>
-</td>
-
-<td>{{ account.authorized_overdraft | currency:"EUR":true }}</td>
-
-<td>
-  <!-- Edit account. -->
-  <button mz-button [float]="true" class="green"
-    (click)="modify()">
-    <span class="fa fa-pencil-square-o"></span>
-  </button>
-
-  <!-- Delete account, with confirm. -->
-  <button mz-button [float]="true" class="red"
-    (click)="confirmDelete()">
-    <span class="fa fa-trash-o"></span>
-  </button>
-
-  <!-- Open account scheduler. -->
-  <button mz-button [float]="true"
-    [hidden]="!account.id"
-    [routerLink]="['/account', account.id, 'scheduler']">
-    <span class="fa fa-clock-o"></span>
-  </button>
-</td>
-  `
+  templateUrl: './accountRow.component.html'
 })
 export class AccountRowComponent implements OnInit {
  @Input('account-row') account: Account;
  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();

-  private accountBalances: AccountBalances;
+  public accountBalances: AccountBalances;

  constructor(
    private accountService: AccountService,
@ -91,6 +47,32 @@ export class AccountRowComponent implements OnInit {
      })
  }

+  get warning() {
+    return this.account && this.accountBalances
+      && this.account.authorized_overdraft < this.accountBalances.current
+      && this.accountBalances.current < 0;
+  };
+
+  get error() {
+    return this.account && this.accountBalances
+      && this.accountBalances.current < this.account.authorized_overdraft;
+  };
+
+  /*
+   * Return the class for a value compared to account authorized overdraft.
+   */
+  valueClass(value: number) {
+    if (!value) {
+      return;
+    }
+
+    if (value < this.account.authorized_overdraft) {
+      return 'text-danger';
+    } else if (value < 0) {
+      return 'text-warning';
+    }
+  };
+
  confirmDelete() {
    const modal = this.ngbModal.open(AccountDeleteModalComponent);

--- a/src/accounts/dailyBalance.ts
+++ b/src/accounts/dailyBalance.ts
@ -1,8 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

 export class DailyBalance {
-  operation_date: string;
-  balance: number;
-  expenses: number;
-  revenues: number;
+  public operation_date: string;
+  public balance: number;
+  public expenses: number;
+  public revenues: number;
 }
--- a/src/app.component.html
+++ b/src/app.component.html
@ -0,0 +1,8 @@
+<!-- Navbar -->
+<nav class="navbar fixed-top navbar-dark bg-dark">
+  <a class="navbar-brand" routerLink="/accounts">&nbsp;Accountant</a>
+</nav>
+
+<div class="container-fluid">
+  <router-outlet></router-outlet>
+</div>
--- a/src/app.component.ts
+++ b/src/app.component.ts
@ -4,15 +4,6 @@ import { Component } from '@angular/core';

@Component({
  selector: 'accountant',
-  template: `
-    <!-- Navbar -->
-    <div class="navbar-fixed">
-      <mz-navbar>
-        <a class="brand-logo" routerLink="/accounts">&nbsp;Accountant</a>
-      </mz-navbar>
-    </div>
-
-    <router-outlet></router-outlet>
-  `
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }
--- a/src/app.module.ts
+++ b/src/app.module.ts
@ -1,6 +1,4 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import 'zone.js';
-import 'reflect-metadata';

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@ -10,7 +8,6 @@ import { RouterModule } from '@angular/router';
 import { NgLoggerModule } from '@nsalaun/ng-logger';
 import { ToastrModule } from 'ngx-toastr';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { MaterializeModule } from 'ng2-materialize'

 import { LoginModule } from './login/login.module';
 import { AccountModule } from './accounts/account.module';
@ -33,13 +30,13 @@ import { ApiBaseURL, LogLevel } from './app.config';
      }
    ], {
      enableTracing: true,
-      useHash: true
+      useHash: true,
+      onSameUrlNavigation: 'reload'
    }),
    LoginModule,
    NgLoggerModule.forRoot(LogLevel),
    ToastrModule.forRoot(),
    NgbModule.forRoot(),
-    MaterializeModule.forRoot(),
    AccountModule,
    ScheduleModule,
    OperationModule,
--- a/src/index.ejs
+++ b/src/index.ejs
@ -9,7 +9,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

-  <body>
+  <!-- htmllint attr-bans="false" -->
+  <body style="padding-bottom: 50px; padding-top: 70px">
+  <!-- htmllint attr-bans="$previous" -->
    <accountant></accountant>
  </body>
 </html>
--- a/src/login/authInterceptor.ts
+++ b/src/login/authInterceptor.ts
@ -40,7 +40,7 @@ export class AuthInterceptor implements HttpInterceptor {
    let loginService = this.injector.get(LoginService);

    if(request.url == loginService.url) {
-      this.logger.log("Login URL, do not handle.");
+      this.logger.log('Login URL, do not handle.');

      return next.handle(request);
    }
@ -61,7 +61,7 @@ export class AuthInterceptor implements HttpInterceptor {

    return observable.catch(
      (error, caught): Observable<any> => {
-        this.logger.error("Error", error, caught);
+        this.logger.error('Error', error, caught);

        if(!(error instanceof HttpErrorResponse) || error.status != 401) {
          return Observable.throw(error);
@ -74,12 +74,12 @@ export class AuthInterceptor implements HttpInterceptor {
        }

        if(!this.observable) {
-          this.logger.log("No current login observable.")
+          this.logger.log('No current login observable.');
          this.observable = loginService.login();
        }

        return this.observable.flatMap((token: Token): Observable<HttpEvent<any>> => {
-          this.logger.log("Logged in, access_token:", token.access_token);
+          this.logger.log('Logged in, access_token:', token.access_token);
          this.observable = null;
          return this.intercept(request, next, ++pass);
        }).catch((error) => {
--- a/src/login/login.module.ts
+++ b/src/login/login.module.ts
@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { MaterializeModule } from 'ng2-materialize';

 import { NgLoggerModule } from '@nsalaun/ng-logger';

@ -19,7 +18,6 @@ import { LoginModalComponent } from './loginModal.component';
    HttpClientModule,
    CommonModule,
    ReactiveFormsModule,
-    MaterializeModule,
    NgLoggerModule,
  ],
  providers: [
--- a/src/login/login.service.ts
+++ b/src/login/login.service.ts
@ -6,7 +6,7 @@ import { Observable} from 'rxjs/Rx';
 import * as base64 from 'base64util';

 import { Logger } from '@nsalaun/ng-logger';
-import { MzModalService } from 'ng2-materialize';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

 import { Token } from './token';
 import { LoginModalComponent } from './loginModal.component';
@ -18,25 +18,24 @@ export class LoginService {
    constructor(
        private httpClient: HttpClient,
        private logger: Logger,
-        private mzModalService: MzModalService,
+        private ngbModal: NgbModal,
    ) {}

    public readonly url: string = '/api/user/login';

    login(): Observable<Token> {
-        let modal = this.mzModalService.open(LoginModalComponent);
+        let modal = this.ngbModal.open(LoginModalComponent);

        sessionStorage.clear();

-        //let observable: Observable<any> = Observable.fromPromise(modal.result);
+        let observable: Observable<any> = Observable.fromPromise(modal.result);

-        //return observable.flatMap((login: Login) =>
-        //    this.doLogin(login)
-        //).map((token: Token): Token => {
-        //    this.accessToken = token.access_token;
-        //    return token;
-        //});
-        return null;
+        return observable.flatMap((login: Login) =>
+            this.doLogin(login)
+        ).map((token: Token): Token => {
+            this.accessToken = token.access_token;
+            return token;
+        });
    }

    logout() {
--- a/src/login/login.tmpl.html
+++ b/src/login/login.tmpl.html
@ -1,38 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
-<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title" id="modal-title">Authentification requise</h3>
-      </div>
-
-      <form class="form-horizontal" ng-submit="$login()">
-        <div class="modal-body" id="modal-body">
-          <div class="form-group">
-            <label for="email" class="col-sm-4 control-label">Adresse email</label>
-            <div class="col-sm-8">
-              <input type="text" class="form-control" id="email" ng-model="email"
-                placeholder="Nom d'utilisateur">
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label for="password" class="col-sm-4 control-label">Mot de passe</label>
-            <div class="col-sm-8">
-              <input type="password" class="form-control" id="password"
-              ng-model="password" placeholder="Mot de passe">
-            </div>
-          </div>
-        </div>
-
-        <div class="modal-footer">
-          <input class="btn btn-primary" type="submit" value="OK"/>
-
-          <button class="btn btn-default" type="button" ng-click="$hide()">
-            Annuler
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
--- a/src/login/login.ts
+++ b/src/login/login.ts
@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:

 export class Login {
-    email: string;
-    password: string;
+    public email: string;
+    public password: string;
 }
--- a/src/login/loginForm.component.html
+++ b/src/login/loginForm.component.html
@ -0,0 +1,29 @@
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <div class="form-group row">
+    <label for="email" class="col-sm-4 control-label">Adresse email</label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="email.errors">
+      <input type="text" class="form-control" id="email"
+        formControlName="email" placeholder="Nom d'utilisateur">
+
+      <div class="help-block text-danger" *ngIf="email.errors">
+        <p *ngIf="email.errors.required">The email is required.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label for="password" class="col-sm-4 control-label">Mot de passe</label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="password.errors">
+      <input type="password" class="form-control" id="password"
+        formControlName="password" placeholder="Mot de passe">
+
+      <div class="help-block text-danger" *ngIf="password.errors">
+        <p *ngIf="password.errors.required">The password is required.</p>
+      </div>
+    </div>
+  </div>
+</form>
--- a/src/login/loginForm.component.ts
+++ b/src/login/loginForm.component.ts
@ -7,37 +7,7 @@ import { Login } from './login';
@Component({
  selector: 'login-form',
  exportAs: 'loginForm',
-  template: `
-<form novalidate (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label for="email" class="col-sm-4 control-label">Adresse email</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="email.errors">
-      <input type="text" class="form-control" id="email"
-        formControlName="email" placeholder="Nom d'utilisateur">
-
-      <div class="help-block text-danger" *ngIf="email.errors">
-        <p *ngIf="email.errors.required">The email is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label for="password" class="col-sm-4 control-label">Mot de passe</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="password.errors">
-      <input type="password" class="form-control" id="password"
-        formControlName="password" placeholder="Mot de passe">
-
-      <div class="help-block text-danger" *ngIf="password.errors">
-        <p *ngIf="password.errors.required">The password is required.</p>
-      </div>
-    </div>
-  </div>
-</form>
-  `
+  templateUrl: './loginForm.component.html'
 })

 export class LoginFormComponent {
--- a/src/login/loginModal.component.html
+++ b/src/login/loginModal.component.html
@ -0,0 +1,17 @@
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">Authentification requise</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-succes" [disabled]="!loginForm.form.valid" (click)="submit()">
+    Login
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    Cancel
+  </button>
+</div>
--- a/src/login/loginModal.component.ts
+++ b/src/login/loginModal.component.ts
@ -1,49 +1,35 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 import { Component, Input, ViewChild } from '@angular/core';

-import { MzBaseModal } from 'ng2-materialize';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+//import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';
+import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';

 import { Login } from './login';
 import { LoginFormComponent } from './loginForm.component';

@Component({
  selector: 'login-modal',
-  template: `
-<mz-modal>
-  <mz-modal-header>
-    Authentification requise
-  </mz-modal-header>
-
-  <mz-modal-content>
-    <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
-  </mz-modal-content>
-
-  <mz-modal-footer>
-    <button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
-      Login
-    </button>
-
-    <button class="btn btn-default" (click)="cancel()">
-      Cancel
-    </button>
-  </mz-modal-footer>
-</mz-modal>
-  `
+  templateUrl: './loginModal.component.html'
 })
-export class LoginModalComponent extends MzBaseModal {
+export class LoginModalComponent {
  @ViewChild('loginForm') loginForm: LoginFormComponent;

-  //submit(): void {
-  //  let formModel = this.loginForm.form.value;
-  //  let login: Login = new Login();
+  constructor(private activeModal: NgbActiveModal) {
+    
+  }

-  //  login.email = formModel.email;
-  //  login.password = formModel.password;
+  submit(): void {
+    let formModel = this.loginForm.form.value;
+    let login: Login = new Login();

-  //  this.activeModal.close(login);
-  //}
+    login.email = formModel.email;
+    login.password = formModel.password;

-  //cancel(): void {
-  //  this.activeModal.dismiss("closed");
-  //}
+    this.activeModal.close(login);
+  }
+
+  cancel(): void {
+    this.activeModal.dismiss("closed");
+  }
 }
--- a/src/login/token.ts
+++ b/src/login/token.ts
@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

 export class Token {
-  access_token: string;
-  refresh_token: string;
+  public access_token: string;
+  public refresh_token: string;
 }
--- a/src/main.scss
+++ b/src/main.scss
@ -2,9 +2,9 @@ $fa-font-path: '~font-awesome/fonts';

@import '~font-awesome/scss/font-awesome';

-@import '~materialize-css/sass/materialize.scss';
+@import '~bootstrap/scss/bootstrap';

-@import '~c3/c3';
+@import '~jqwidgets-scripts/jqwidgets/styles/jqx.base';

@import '~ngx-toastr/toastr';

@ -15,11 +15,3 @@ $fa-font-path: '~font-awesome/fonts';
 .stroke {
    text-decoration: line-through;
 }
-
-.c3-ygrid-line.zeroline line {
-    stroke: orange;
-}
-
-.c3-ygrid-line.overdraft line {
-    stroke: #FF0000;
-}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

-import { AppModule } from './app.module';
-
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

+import { AppModule } from './app.module';
+
 platformBrowserDynamic().bootstrapModule(AppModule);
--- a/src/operations/balanceChart.component.ts
+++ b/src/operations/balanceChart.component.ts
@ -1,177 +1,203 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:

 import * as moment from 'moment';
-import * as c3 from 'c3';

-import {
-  Component, ElementRef,
-  Inject, Input, Output, EventEmitter,
-  OnInit, OnChanges
-} from '@angular/core';
+import { Component, ViewChild, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';

 import { Account } from '../accounts/account';
+import { DailyBalance } from './dailyBalance';
 import { DailyBalanceService } from '../accounts/dailyBalance.service';

-class DateRange {
-  minDate: Date;
-  maxDate: Date;
-}
-
@Component({
  selector: 'balance-chart',
-  template: '<div></div>'
+  template:  `
+<jqxChart #balanceChart
+  [width]="'100%'"
+  [height]="400"
+  [title]="'Balance evolution'"
+  [description]="''"
+  [source]="data"
+  [xAxis]="xAxis"
+  [valueAxis]="valueAxis"
+  [seriesGroups]="seriesGroups"
+  (onRangeSelectionChanged)="select($event)">
+</jqxChart>
+`
 })
-export class BalanceChartComponent implements OnInit, OnChanges {
-  @Input() account: Account;
-  @Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();
+export class BalanceChartComponent implements OnInit {
+  private _account: Account;
+  @ViewChild('balanceChart') chart: jqxChartComponent;

-  private chart: c3.ChartAPI;
-  private balances: number[];
+  public data;
+
+  public xAxis: any = {
+    type: 'date',
+    dataField: 'operation_date',
+    displayText: 'Date',
+    baseUnit: 'day',
+
+    bands: [{
+      fillColor: 'blue',
+      opacity: 0.10
+    }],
+
+    rangeSelector: {
+      size: 80,
+      padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
+      backgroundColor: 'white',
+      dataField: 'balance',
+      //baseUnit: 'month',
+      baseUnit: 'day',
+      gridLines: { visible: false },
+      serieType: 'line',
+      //labels: {
+      //  formatFunction: (value: any): any => {
+      //    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
+      //  }
+      //}
+    }
+  };
+
+  public valueAxis: any = {
+    title: {
+      visible: false
+    },
+  };
+
+  public seriesGroups: any = [{
+    type: 'stackedcolumn',
+    valueAxis: {
+      title: { text: 'Expenses/revenues' },
+      position: 'right',
+      visible: true,
+      gridLines: { visible: false },
+      labels: {
+        horizontalAlignment: 'left',
+        formatSettings: {
+          sufix:  '€',
+          decimalPlaces: 2
+        },
+      }
+    },
+    series: [{
+      dataField: 'expenses',
+      displayText: 'Expenses',
+      fillColor: 'tomato'
+    }, {
+      dataField: 'revenues',
+      displayText: 'Revenues',
+      fillColor: 'yellowgreen'
+    }]
+  }, {
+    type: 'stepline',
+    valueAxis: {
+      title: { text: 'Balance' },
+      //gridLines: { visible: false },
+      labels: {
+        formatSettings: {
+          sufix:  '€',
+          decimalPlaces: 2
+        }
+      }
+    },
+    series: [{
+      dataField: 'balance',
+      displayText: 'Balance',
+      fillColor: 'steelblue'
+    }],
+    bands: [{
+      minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
+    }, {
+      minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
+    }]
+  }];

  constructor(
-    private elementRef: ElementRef,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private logger: Logger,
    private dailyBalanceService: DailyBalanceService,
  ) {
+    this.data = [];
  }

-  loadData(account: Account) {
+  loadData() {
+    this.logger.info('Loading data.');
+
+    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
+
    this.dailyBalanceService.query(
-      account.id
+      +accountId
    ).subscribe((results) => {
-      var headers: any[][] = [['date', 'balances', 'expenses', 'revenues']];
+      this.data = results;

-      var rows = results.map(function(result) {
-        return [
-          result.operation_date,
-          result.balance,
-          result.expenses,
-          result.revenues
-        ];
-      });
+      let lastResult = results[results.length -1];

-      this.chart.unload();
-
-      this.chart.load({
-        rows: headers.concat(rows)
-      });
-
-      var x: any;
-
-      x = this.chart.x();
-
-      var balances = x.balances;
-
-      this.onUpdate.emit({
-        minDate: balances[0],
-        maxDate: balances[balances.length - 1]
-      });
+      this.updateXBands(results[0].operation_date, lastResult.operation_date);
    });
-  };
-
-  ngOnInit() {
-    var tomorrow = moment().endOf('day').valueOf();
-
-    this.chart = c3.generate({
-      bindto: this.elementRef.nativeElement.children[0],
-      size: {
-        height: 450,
-      },
-      data: {
-        x: 'date',
-        rows: [],
-        axes: {
-          expenses: 'y2',
-          revenues: 'y2'
-        },
-        type: 'bar',
-        types: {
-          balances: 'area'
-        },
-        groups: [
-          ['expenses', 'revenues']
-        ],
-        // Disable for the moment because there is an issue when
-        // using subchart line is not refreshed after subset
-        // selection.
-        //regions: {
-        //  balances: [{
-        //    start: tomorrow,
-        //    style: 'dashed'
-        //  }]
-        //}
-      },
-      regions: [{
-        start: tomorrow,
-      }],
-      axis: {
-        x: {
-          type: 'timeseries',
-          tick: {
-            format: '%Y-%m-%d',
-            rotate: 50,
-          }
-        },
-        y: {
-          label: {
-            text: 'Amount',
-            position: 'outer-middle'
-          }
-        },
-        y2: {
-          show: true,
-          label: {
-            text: 'Amount',
-            position: 'outer-middle'
-          }
-        }
-      },
-      grid: {
-        x: {
-          show: true,
-        },
-        y: {
-          show: true,
-        }
-      },
-      tooltip: {
-        format: {
-          value: function(value, ratio, id, index) {
-            return value + '€';
-          }
-        }
-      },
-      subchart: {
-        show: true,
-        onbrush: (domain) => {
-          this.onUpdate.emit({minDate: domain[0], maxDate: domain[1]});
-        }
-      }
-    });
-  };
+  }

  setLines(account: Account) {
-    if(this.chart) {
-      this.chart.ygrids([
-        { value: 0, axis: 'y2' },
-        { value: 0, axis: 'y', class: 'zeroline'},
-      ]);
+    if (account) {
+      this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
+      this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
+    }
+  }

-      if(account) {
-        this.chart.ygrids.add({
-          value: account.authorized_overdraft,
-          axis: 'y',
-          class: 'overdraft'
-        });
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe((params: ParamMap) => {
+      let fromDay = params.get('from');
+      let toDay = params.get('to');
+
+      this.xAxis.minValue = moment(fromDay).toDate();
+      this.xAxis.maxValue = moment(toDay).toDate();
+
+      if(this.chart && this.chart.host) {
+        this.chart.refresh();
      }
-    }
-  };
+    });

-  ngOnChanges(changes) {
-    if('account' in changes && changes.account.currentValue) {
-      this.loadData(changes.account.currentValue);
-      this.setLines(changes.account.currentValue);
-    } else {
-      this.setLines(this.account);
+    this.loadData();
+  }
+
+  @Input()
+  set account(account: Account) {
+    this._account = account;
+
+    this.setLines(account);
+  }
+
+  get account(): Account {
+    return this._account;
+  }
+
+  updateXBands(minDate, maxDate) {
+    if(moment(maxDate) > moment()) {
+      if(moment(minDate) < moment()) {
+        this.xAxis.bands[0].minValue = moment().toDate();
+      } else {
+        this.xAxis.bands[0].minValue = moment(minDate).toDate();
+      }
+      this.xAxis.bands[0].maxValue = moment(maxDate).toDate();
    }
-  };
+  }
+
+  select(event: any) {
+    let args = event.args;
+
+    this.updateXBands(args.minValue, args.maxValue);
+
+    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
+
+    this.router.navigate(['account', accountId, 'operations'], {
+      queryParams: {
+        from: moment(args.minValue).format('YYYY-MM-DD'),
+        to: moment(args.maxValue).format('YYYY-MM-DD')
+      }
+    });
+  }
 }
--- a/src/operations/category.service.ts
+++ b/src/operations/category.service.ts
@ -23,7 +23,7 @@ export class CategoryService {
    return date;
  }

-  query(id: number, minDate: Date = null, maxDate: Date = null): Observable<Category[]> {
+  query(id: number, minDate: Date|string = null, maxDate: Date|string = null): Observable<Category[]> {
    let params: HttpParams = new HttpParams();

    if(minDate) {
--- a/src/operations/category.ts
+++ b/src/operations/category.ts
@ -1,7 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

 export class Category {
-  category: string;
-  expenses: number;
-  revenues: number;
+  public category: string;
+  public expenses: number;
+  public revenues: number;
+  public income: number;
 }
--- a/src/operations/categoryChart.component.ts
+++ b/src/operations/categoryChart.component.ts
@ -1,107 +1,141 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

-import * as c3 from 'c3';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';

-import {
-  Component, ElementRef,
-  Inject, Input, Output,
-  OnInit, OnChanges
-} from '@angular/core';
+import { Logger } from '@nsalaun/ng-logger';
+import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';

-import { Account } from '../accounts/account';
+import * as _ from 'underscore';
+
+import { Category } from './category';
 import { CategoryService } from './category.service';

+
@Component({
  selector: 'category-chart',
-  template: '<div></div>'
+  template: `
+<jqxChart #categoryChart
+  [width]="'100%'"
+  [height]="400"
+  [title]="'Categories'"
+  [description]="''"
+  [showLegend]="false"
+  [seriesGroups]="seriesGroups">
+</jqxChart>
+`
 })
-export class CategoryChartComponent implements OnInit, OnChanges {
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() account: Account;
+export class CategoryChartComponent implements OnInit {
+  @ViewChild('categoryChart') chart: jqxChartComponent;

-  chart: c3.ChartAPI;
+  public seriesGroups: any = [{
+    type: 'donut',
+    source: [],
+    //showLabels: true,
+    series: [{
+      dataField: 'value',
+      displayText: 'category',
+      initialAngle: 90,
+      radius: 130,
+      innerRadius: 90,
+      formatSettings: { sufix: '€', decimalPlaces: 2 },
+      radiusDataField: 'category',
+      colorFunction: (value, itemIndex, series, group) => {
+        if(group.source[itemIndex].type === 'expenses') {
+          return 'tomato';
+        }
+
+        return 'yellowgreen';
+      },
+      opacity: 0.5
+    }]
+  }, {
+    type: 'donut',
+    source: [],
+    showLabels: true,
+    series: [{
+      dataField: 'value',
+      displayText: 'name',
+      initialAngle: 90,
+      labelRadius: 50,
+      radius: 85,
+      innerRadius: 75,
+      formatSettings: { sufix: '€', decimalPlaces: 2 },
+      colorFunction: (value, itemIndex, series, group) => {
+        if(group.source[itemIndex].name === 'Expenses') {
+          return 'tomato';
+        }
+
+        return 'yellowgreen';
+      }
+    }]
+  }];

  constructor(
-    private elementRef: ElementRef,
+    private activatedRoute: ActivatedRoute,
+    private logger: Logger,
    private categoryService: CategoryService,
-  ) {}
+  ) {
+    //this.data = [];
+  }
+
+  loadData() {
+    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
+    let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
+    let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');

-  loadData(account: Account) {
    this.categoryService.query(
-      account.id,
-      this.minDate,
-      this.maxDate
-    ).subscribe((results) => {
-      var expenses=[],
-        revenues=[],
-        colors={},
-        names={};
-
-      var revenuesColor = 'green',
-        expensesColor = 'orange';
-
-      for(let result of results) {
-        if(result.revenues > 0) {
-          var revenuesName = 'revenues-' + result.category;
-
-          revenues.push([revenuesName, result.revenues]);
-          names[revenuesName] = result.category;
-          colors[revenuesName] = revenuesColor;
-        }
-
-        if(result.expenses < 0) {
-          var expensesName = 'expenses-' + result.category;
-
-          expenses.splice(0, 0, [expensesName, -result.expenses]);
-          names[expensesName] = result.category;
-          colors[expensesName] = expensesColor;
-        }
-      };
-
-      this.chart.unload();
-
-      this.chart.load({
-        columns: revenues.concat(expenses),
-        names: names,
-        colors: colors
+      +accountId,
+      fromDay,
+      toDay
+    ).subscribe((results: Category[]) => {
+      let expenses = _.filter(results, function(item: Category) {
+        return item.expenses < 0;
+      }).map(function(item: Category) {
+        return {
+          category: item.category,
+          value: -item.expenses,
+          type: 'expenses'
+        };
      });
-    });
-  };

-  ngOnInit() {
-    this.chart = c3.generate({
-      bindto: this.elementRef.nativeElement.children[0],
-      data: {
-        columns: [],
-        type: 'donut',
-        order: null,
-      },
-      tooltip: {
-        format: {
-          value: function(value, ratio, id, index) {
-            return value + '€';
-          }
-        }
-      },
-      donut: {
-        label: {
-          format: function(value) {
-            return value + '€';
-          }
-        }
-      },
-      legend: {
-        show: false
+      expenses = _.sortBy(expenses, 'value').reverse();
+
+      let revenues = _.filter(results, function(item: Category) {
+        return item.revenues > 0;
+      }).map(function(item: Category) {
+        return {
+          category: item.category,
+          value: item.revenues,
+          type: 'revenues'
+        };
+      });
+
+      revenues = _.sortBy(revenues, 'value');
+
+      this.seriesGroups[0].source = expenses.concat(revenues);
+
+      let totals = [
+        {name: 'Expenses', value: 0},
+        {name: 'Revenues', value: 0}
+      ];
+
+      results.forEach(function(item: Category) {
+        totals[0].value -= item.expenses;
+        totals[1].value += item.revenues;
+      });
+
+      this.seriesGroups[1].source = totals;
+
+      if(this.chart && this.chart.host) {
+        this.chart.refresh();
      }
    });
-  };
+  }

-  ngOnChanges(changes) {
-    if('account' in changes && changes.account.currentValue) {
-      this.loadData(changes.account.currentValue);
-    } else if (this.account) {
-      this.loadData(this.account);
-    }
-  };
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
+
+    this.loadData();
+  }
 }
--- a/src/operations/dailyBalance.ts
+++ b/src/operations/dailyBalance.ts
@ -0,0 +1,9 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+
+export class DailyBalance {
+    public operation_date: string;
+    public expenses: number;
+    public revenues: number;
+    public income: number;
+    public balance: number;
+}
--- a/src/operations/operation.module.ts
+++ b/src/operations/operation.module.ts
@ -2,57 +2,56 @@

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';

 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ToastrModule } from 'ngx-toastr';
 import { TextMaskModule } from 'angular2-text-mask';
-import { MaterializeModule } from 'ng2-materialize';
+import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';

 import { BalanceChartComponent } from './balanceChart.component';
 import { CategoryChartComponent } from './categoryChart.component';
 import { OperationRowComponent } from './operationRow.component';
 import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
+import { OperationEditComponent } from './operationEdit.component';
 import { OperationListComponent } from './operationList.component';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
-import { OperationFormComponent } from './operationForm.component';
-import { OperationEditModalComponent } from './operationEditModal.component'
-import { OperationListState } from './operation.states'
+import { OperationRoutes } from './operation.states';

@NgModule({
  imports: [
    HttpClientModule,
    CommonModule,
-    ReactiveFormsModule,
-    RouterModule.forChild([
-      OperationListState
-    ]),
+    FormsModule,
+    RouterModule.forChild(
+      OperationRoutes
+    ),
    NgLoggerModule,
    ToastrModule,
    NgbModule,
-    TextMaskModule,
-    MaterializeModule,
+    NgxChartsModule,
+    TextMaskModule
  ],
  providers: [
    CategoryService,
    OperationService,
  ],
  declarations: [
+    jqxChartComponent,
    BalanceChartComponent,
    CategoryChartComponent,
    OperationRowComponent,
+    OperationEditComponent,
    OperationListComponent,
    OperationDeleteModalComponent,
-    OperationFormComponent,
-    OperationEditModalComponent,
  ],
  entryComponents: [
    OperationDeleteModalComponent,
-    OperationEditModalComponent,
    OperationListComponent,
  ]
 })
--- a/src/operations/operation.states.ts
+++ b/src/operations/operation.states.ts
@ -1,8 +1,17 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :

-import { OperationListComponent } from './operationList.component';
+import { Routes } from '@angular/router';

-export const OperationListState = {
-  path: 'account/:accountId/operations',
-  component: OperationListComponent
-}
+import { OperationListComponent } from './operationList.component';
+import { OperationEditComponent } from './operationEdit.component';
+
+export const OperationRoutes: Routes = [{
+  path: 'accounts/:accountId/operations',
+  component: OperationListComponent,
+}, {
+  path: 'accounts/:accountId/operations/new',
+  component: OperationEditComponent,
+}, {
+  path: 'accounts/:accountId/operations/:operationId/edit',
+  component: OperationEditComponent,
+}];
--- a/src/operations/operation.ts
+++ b/src/operations/operation.ts
@ -1,15 +1,15 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:

 export class Operation {
-  id: number;
-  operation_date: string;
-  label: string;
-  value: number;
-  category: string;
-  scheduled_operation_id: number;
-  account_id: number;
-  balance: number;
-  confirmed: boolean;
-  pointed: boolean;
-  cancelled: boolean
+  public id: number;
+  public operation_date: string;
+  public label: string;
+  public value: number;
+  public category: string;
+  public scheduled_operation_id: number;
+  public account_id: number;
+  public balance: number;
+  public confirmed: boolean;
+  public pointed: boolean;
+  public canceled: boolean
 }
--- a/src/operations/operationDeleteModal.component.html
+++ b/src/operations/operationDeleteModal.component.html
@ -0,0 +1,22 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <p>
+    Do you really want to delete operation #{{ operation.id }} with label:<br/>
+    {{ operation.label }}
+  </p>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-danger" (click)="submit()">
+    Yes
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    No
+  </button>
+</div>
+
--- a/src/operations/operationDeleteModal.component.ts
+++ b/src/operations/operationDeleteModal.component.ts
@ -7,28 +7,7 @@ import { Operation } from './operation';

@Component({
  selector: 'operation-delete-modal',
-  template: `
-    <div class="modal-header">
-      <h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
-    </div>
-
-    <div class="modal-body" id="modal-body">
-      <p>
-      Do you really want to delete operation #{{ operation.id }} with label:<br/>
-      {{ operation.label }}
-      </p>
-    </div>
-
-    <div class="modal-footer">
-      <button class="btn btn-danger" (click)="submit()">
-        Yes
-      </button>
-
-      <button class="btn btn-default" (click)="cancel()">
-        No
-      </button>
-    </div>
-  `
+  templateUrl: './operationDeleteModal.component.html'
 })
 export class OperationDeleteModalComponent {
  @Input() operation: Operation
--- a/src/operations/operationEdit.component.html
+++ b/src/operations/operationEdit.component.html
@ -0,0 +1,79 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 :-->
+<div>
+  <div class="row">
+    <form novalidate (keyup.enter)="submit()" #form="ngForm">
+      <div class="form-group">
+        <label for="operation-date">Date</label>
+
+        <input class="form-control"
+          [class.has-danger]="operationDate.errors"
+          id="operation-date" name="operationDate"
+          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
+          [textMask]="{mask: dateMask}"
+          placeholder="Operation date" required>
+
+        <div class="help-block text-danger" *ngIf="operationDate.errors">
+          <small class="form-text" *ngIf="operationDate.errors.required">
+            The operation date is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="label">Label</label>
+
+        <input class="form-control"
+          [class.has-danger]="label.errors"
+          id="label" name="label"
+          [(ngModel)]="operation.label" #label="ngModel"
+          placeholder="Label" required>
+
+        <div class="help-block text-danger" *ngIf="label.errors">
+          <small class="form-text" *ngIf="label.errors.required">
+            The operation label is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="value">Montant</label>
+
+        <input class="form-control"
+          [class.has-errors]="value.errors"
+          id="value" name="value"
+          [(ngModel)]="operation.value" #value="ngModel"
+          type="number" placeholder="Value" required>
+
+        <div class="help-block text-danger" *ngIf="value.errors">
+          <small class="form-text" *ngIf="value.errors.required">
+            The operation value is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="category">Catégorie</label>
+
+        <input class="form-control"
+          [class.has-errors]="category.errors"
+          id="category" name="category"
+          [(ngModel)]="operation.category" #category="ngModel"
+          placeholder="Category" required>
+
+        <div class="help-block text-danger" *ngIf="category.errors">
+          <small class="form-text" *ngIf="category.errors.required">
+            The operation category is required.
+          </small>
+        </div>
+      </div>
+
+      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
+        Save
+      </button>
+
+      <button class="btn btn-default" (click)="cancel()">
+        Cancel
+      </button>
+    </form>
+  </div>
+</div>
--- a/src/operations/operationEdit.component.ts
+++ b/src/operations/operationEdit.component.ts
@ -0,0 +1,86 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { ToastrService } from 'ngx-toastr';
+
+import { Operation } from './operation';
+import { OperationService } from './operation.service';
+
+@Component({
+  selector: 'operation-edit',
+  templateUrl: './operationEdit.component.html'
+})
+export class OperationEditComponent {
+  public operation: Operation = new Operation();
+
+  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
+  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
+
+  constructor(
+    private location: Location,
+    private router: Router,
+    private route: ActivatedRoute,
+    private logger: Logger,
+    private toastrService: ToastrService,
+    private operationService: OperationService
+  ) {}
+
+  ngOnInit() {
+    this.route.paramMap.subscribe((params: Params) => {
+      let operationId = params.get('operationId');
+
+      if (operationId) {
+        this.logger.info('Loading operation with id', operationId);
+
+        // Load Operation
+        this.operationService.get(
+          +operationId
+        ).subscribe((operation: Operation) => {
+          this.operation = operation;
+
+          this.logger.info(operation);
+        });
+      } else {
+        this.logger.info('Initialize new operation');
+
+        let accountId = params.get('accountId');
+
+        this.operation = new Operation();
+        this.operation.account_id = +accountId;
+
+        this.logger.info(this.operation);
+      }
+    });
+  }
+
+  submit(): void {
+    this.save(this.operation);
+  }
+
+  /*
+   * Save an operation and return a promise.
+   */
+  save(operation) {
+    operation.confirmed = true;
+
+    return this.operationService.create(operation).subscribe(
+      (operation) => {
+        this.toastrService.success('Operation #' + operation.id + ' saved.');
+
+        this.location.back();
+      }, (result) => {
+        this.toastrService.error(
+          'Error while saving operation: ' + result.message
+        );
+      }
+    );
+  }
+
+  cancel(): void {
+    this.location.back();
+  }
+}
--- a/src/operations/operationEditModal.component.ts
+++ b/src/operations/operationEditModal.component.ts
@ -1,63 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { Operation } from './operation';
-import { OperationFormComponent } from './operationForm.component';
-
-@Component({
-  selector: 'operation-edit-modal',
-  template: `
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
-
-<div class="modal-body" id="modal-body">
-  <operation-form [operation]="operation" (submit)="submit()" #operationForm="operationForm"></operation-form>
-</div>
-
-<div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
-    Save
-  </button>
-
-  <button class="btn btn-default" (click)="cancel()">
-    Cancel
-  </button>
-</div>
-  `
-})
-export class OperationEditModalComponent {
-  @Input() operation: Operation;
-  @ViewChild('operationForm') operationForm: OperationFormComponent;
-
-  valid: boolean = false;
-
-  constructor(private activeModal: NgbActiveModal) {}
-
-  title(): string {
-    if(this.operation.id) {
-      return "Operation #" + this.operation.id;
-    } else {
-      return "New operation";
-    }
-  }
-
-  submit(): void {
-    let formModel = this.operationForm.form.value;
-    let operation = Object.assign({}, this.operation);
-
-    operation.id = this.operation.id;
-    operation.operation_date = formModel.operationDate;
-    operation.label = formModel.label;
-    operation.value = formModel.value;
-    operation.category = formModel.category;
-
-    this.activeModal.close(operation);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
-  }
-}
--- a/src/operations/operationForm.component.ts
+++ b/src/operations/operationForm.component.ts
@ -1,122 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2 :
-import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-import { Operation } from './operation';
-
-@Component({
-  selector: 'operation-form',
-  exportAs: 'operationForm',
-  template: `
-<form novalidate (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="operation-date">Date</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="operationDate.errors">
-      <input class="form-control"
-        id="operation-date" formControlName="operationDate"
-        [textMask]="{mask: dateMask}"
-        placeholder="Operation date">
-
-      <div class="help-block text-danger" *ngIf="operationDate.errors">
-        <p *ngIf="operationDate.errors.required">The operation date is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="label">Label</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="label.errors">
-      <input class="form-control"
-        id="label" formControlName="label"
-        placeholder="Label">
-
-      <div class="help-block text-danger" *ngIf="label.errors">
-        <p *ngIf="label.errors.required">The operation label is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="value">Montant</label>
-
-    <div class="col-sm-8"
-      [class.has-errors]="value.errors">
-      <input class="form-control"
-        id="value" formControlName="value"
-        type="number" placeholder="Value">
-
-      <div class="help-block text-danger" *ngIf="value.errors">
-        <p *ngIf="value.errors.required">The operation value is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="category">Catégorie</label>
-
-    <div class="col-sm-8"
-      [class.has-errors]="category.errors">
-      <input class="form-control"
-        id="category" formControlName="category"
-        placeholder="Category">
-
-      <div class="help-block text-danger" *ngIf="category.errors">
-        <p *ngIf="category.errors.required">The operation category is required.</p>
-      </div>
-    </div>
-  </div>
-</form>
-  `
-})
-export class OperationFormComponent implements OnInit {
-  public form: FormGroup;
-  @Input() operation: Operation;
-  @Output() submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
-
-  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
-  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
-
-  constructor(private formBuilder: FormBuilder) {}
-
-  ngOnInit() {
-    this.form = this.formBuilder.group({
-      operationDate: ['', Validators.required],
-      label: ['', Validators.required],
-      value: ['', Validators.required],
-      category: ['', Validators.required],
-    });
-
-    this.form.patchValue({
-      operationDate: this.operation.operation_date,
-      label: this.operation.label,
-      value: this.operation.value,
-      category: this.operation.category,
-    });
-  }
-
-  submit() {
-    if(this.form.valid) {
-      this.submitEventEmitter.emit();
-    }
-  }
-
-  get operationDate() {
-    return this.form.get('operationDate');
-  }
-
-  get label() {
-    return this.form.get('label');
-  }
-
-  get value() {
-    return this.form.get('value');
-  }
-
-  get category() {
-    return this.form.get('category');
-  }
-}
--- a/src/operations/operationList.component.html
+++ b/src/operations/operationList.component.html
@ -0,0 +1,46 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
+<div>
+  <div class="row">
+    <div class="col-md-8">
+      <balance-chart [account]="account"></balance-chart>
+    </div>
+
+    <div class="col-md-4">
+      <category-chart></category-chart>
+    </div>
+  </div>
+
+  <div class="row">
+    <table class="table table-striped table-condensed table-hover">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Date d'op.</th>
+          <th>Libell&eacute; de l'op&eacute;ration</th>
+          <th>Montant</th>
+          <th>Solde</th>
+          <th>Cat&eacute;gorie</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <td colspan="6">
+            <a class="btn btn-success"
+              [routerLink]="['new']">
+              Ajouter
+            </a>
+          </td>
+        </tr>
+
+        <tr [operation-row]="operation"
+          [account]="account"
+          (needsReload)="loadData()"
+          *ngFor="let operation of operations">
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
--- a/src/operations/operationList.component.ts
+++ b/src/operations/operationList.component.ts
@ -1,8 +1,9 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
-import { Component, Inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';

-import { Observable } from 'rxjs/Rx';
+import * as moment from 'moment';
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';

 import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@ -12,67 +13,14 @@ import { Account } from '../accounts/account';
 import { AccountService } from '../accounts/account.service';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
-import { OperationEditModalComponent } from './operationEditModal.component';

@Component({
  selector: 'operation-list',
-  template: `
-<div>
-  <div class="row">
-    <div class="col s9">
-      <balance-chart (onUpdate)="onUpdate($event)"
-        [account]="account"></balance-chart>
-    </div>
-
-    <div class="col s3">
-      <category-chart
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        [account]="account"></category-chart>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col s12">
-      <table class="bordered highlight responsive-table">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Date d'op.</th>
-            <th>Libell&eacute; de l'op&eacute;ration</th>
-            <th>Montant</th>
-            <th>Solde</th>
-            <th>Cat&eacute;gorie</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr>
-            <td colspan="7">
-              <button mz-button class="green" (click)="add()">
-                Ajouter
-              </button>
-            </td>
-          </tr>
-
-          <tr [operation-row]="operation"
-            [account]="account"
-            (needsReload)="load(minDate, maxDate)"
-            *ngFor="let operation of operations">
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-    `
+  templateUrl: './operationList.component.html'
 })
 export class OperationListComponent implements OnInit {
  private account: Account;
-  private minDate: Date;
-  private maxDate: Date;
-  private operations: Operation[];
+  public operations: Operation[];

  constructor(
    private toastrService: ToastrService,
@ -80,73 +28,49 @@ export class OperationListComponent implements OnInit {
    private accountService: AccountService,
    private logger: Logger,
    private ngbModal: NgbModal,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
  ) {}

  ngOnInit() {
-    this.accountService.get(
-      +this.route.snapshot.paramMap.get('accountId')
-    ).subscribe(account => {
-      this.account = account
+    this.route.queryParamMap.subscribe((params: Params) => {
+      if (params.get('from') && params.get('to')) {
+        this.loadData();
+      } else {
+        this.router.navigate([], {
+          queryParams: {
+            from: moment().startOf('month').format('YYYY-MM-DD'),
+            to: moment().endOf('month').format('YYYY-MM-DD')
+          }
+        });
+      }
+    });
+
+    this.route.paramMap.subscribe((params: Params) => {
+      let accountId = params.get('accountId');
+
+      this.accountService.get(
+        +accountId
+      ).subscribe(account => {
+        this.account = account;
+      });
    });
  }

-  /*
-   * Add an empty operation.
-   */
-  add() {
-    var operation = new Operation();
-    operation.account_id = this.account.id;
-
-    // FIXME Alexis Lahouze 2017-06-15 i18n
-    const modal = this.ngbModal.open(OperationEditModalComponent, {
-      size: 'lg'
-    });
-
-    modal.componentInstance.operation = operation;
-
-    modal.result.then((operation: Operation) => {
-      this.save(operation);
-    }, (reason) => {
-    });
-  };
-
  /*
   * Load operations.
   */
-  load(minDate, maxDate) {
-    this.minDate = minDate;
-    this.maxDate = maxDate;
+  loadData() {
+    let accountId = this.route.snapshot.paramMap.get('accountId');
+    let fromDay = this.route.snapshot.queryParamMap.get('from');
+    let toDay = this.route.snapshot.queryParamMap.get('to');

    return this.operationService.query(
-      this.account.id,
-      minDate,
-      maxDate
+      +accountId,
+      fromDay,
+      toDay
    ).subscribe((operations: Operation[]) => {
      this.operations = operations.reverse();
    });
-  };
-
-  /*
-   * Save an operation and return a promise.
-   */
-  save(operation) {
-    operation.confirmed = true;
-
-    return this.operationService.create(operation).subscribe(
-      (operation) => {
-        this.toastrService.success('Operation #' + operation.id + ' saved.');
-
-        this.load(this.minDate, this.maxDate);
-      }, (result) => {
-        this.toastrService.error(
-          'Error while saving operation: ' + result.message
-        );
-      }
-    );
-  };
-
-  onUpdate(dateRange) {
-    this.load(dateRange.minDate, dateRange.maxDate);
-  };
-};
+  }
+}
--- a/src/operations/operationRow.component.html
+++ b/src/operations/operationRow.component.html
@ -0,0 +1,51 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
+<td>{{ operation.id }}</td>
+
+<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
+
+<td>{{ operation.label }}</td>
+
+<td>{{ operation.value | currency:'EUR':'symbol' }}</td>
+
+<td [class.text-warning]="operation.balance < 0"
+    [class.text-danger]="operation.balance < account.authorized_overdraft">
+  {{ operation.balance | currency:'EUR':'symbol' }}
+</td>
+
+<td>{{ operation.category }}</td>
+
+<td>
+  <div class="btn-group btn-group-sm">
+    <!-- Edit operation, for non-canceled operation. -->
+    <a class="btn btn-success"
+      *ngIf="!operation.canceled"
+      [routerLink]="[operation.id, 'edit']"
+      title="edit">
+      <span class="fa fa-pencil-square-o"></span>
+    </a>
+
+    <!-- Toggle pointed operation, for non-canceled operations. -->
+    <button type="button" class="btn btn-secondary"
+      *ngIf="!operation.canceled"
+      (click)="togglePointed(operation)"
+      [class.active]="operation.pointed" title="point">
+      <span class="fa" [class.fa-check-square-o]="operation.pointed"
+        [class.fa-square-o]="!operation.pointed"></span>
+    </button>
+
+    <!-- Toggle canceled operation. -->
+    <button type="button" class="btn btn-warning"
+      (click)="toggleCanceled(operation)"
+      *ngIf="operation.scheduled_operation_id"
+      [class.active]="operation.canceled" title="cancel">
+      <span class="fa fa-remove"></span>
+    </button>
+
+    <!-- Delete operation, with confirm. -->
+    <button type="button" class="btn btn-danger"
+      (click)="confirmDelete(operation)"
+      *ngIf="operation.id && !operation.scheduled_operation_id">
+      <span class="fa fa-trash-o"></span>
+    </button>
+  </div>
+</td>
--- a/src/operations/operationRow.component.ts
+++ b/src/operations/operationRow.component.ts
@ -1,7 +1,9 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { CurrencyPipe } from '@angular/common';
-import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Inject, Input } from '@angular/core';
+import { Router } from '@angular/router';

+import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';

@ -9,7 +11,6 @@ import { Account } from '../accounts/account';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
-import { OperationEditModalComponent } from './operationEditModal.component';

@Component({
  selector: 'tr[operation-row]',
@ -17,83 +18,34 @@ import { OperationEditModalComponent } from './operationEditModal.component';
    "[id]": "operation.id",
    "[class.stroke]": "operation.canceled",
    "[class.italic]": "!operation.confirmed",
-    "class": "lighten-5",
-    "[class.orange]": "account.authorized_overdraft < 0 && operation.balance < 0",
-    "[class.red]": "operation.balance < account.authorized_overdraft"
+    "[class.warning]": "operation.balance < 0",
+    "[class.danger]": "operation.balance < account.authorized_overdraft"
  },
-  template: `
-<td>{{ operation.id }}</td>
-
-<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
-
-<td>{{ operation.label }}</td>
-
-<td>{{ operation.value | currency:'EUR':true }}</td>
-
-<td class="test-lighten-2"
-  [class.orange-text]="account.authorized_overdraft < 0 && operation.balance < 0"
-  [class.red-text]="operation.balance < account.authorized_overdraft">
-  {{ operation.balance | currency:'EUR':true }}
-</td>
-
-<td>{{ operation.category }}</td>
-
-<td>
-  <!-- Edit operation, for non-canceled operation. -->
-  <button mz-button [float]="true" class="green"
-    *ngIf="!operation.canceled"
-    (click)="modify(operation)" title="edit">
-    <span class="fa fa-pencil-square-o"></span>
-  </button>
-
-  <!-- Toggle pointed operation, for non-canceled operations. -->
-  <button mz-button [float]="true" class="blue"
-    *ngIf="!operation.canceled"
-    (click)="togglePointed(operation)"
-    [class.active]="operation.pointed" title="point">
-    <span class="fa" [class.fa-check-square-o]="operation.pointed"
-      [class.fa-square-o]="!operation.pointed"></span>
-  </button>
-
-  <!-- Toggle canceled operation. -->
-  <button mz-button [float]="true" class="orange"
-    (click)="toggleCanceled(operation)"
-    *ngIf="operation.scheduled_operation_id"
-    [class.active]="operation.canceled" title="cancel">
-    <span class="fa fa-remove"></span>
-  </button>
-
-  <!-- Delete operation, with confirm. -->
-  <button mz-button [float]="true" class="red"
-    (click)="confirmDelete(operation)"
-    *ngIf="operation.id && !operation.scheduled_operation_id">
-    <span class="fa fa-trash-o"></span>
-  </button>
-</td>
-  `
+  templateUrl: './operationRow.component.html'
 })
 export class OperationRowComponent {
-  @Input('operation-row') operation: Operation;
-  @Input() account: Account;
-  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
+  @Input('operation-row') operation: Operation = new Operation();
+  @Input() account: Account = new Account();

  constructor(
    private operationService: OperationService,
    private toastrService: ToastrService,
+    private logger: Logger,
    private ngbModal: NgbModal,
+    private router: Router
  ) {}

  togglePointed(operation, rowform) {
    operation.pointed = !operation.pointed;

    this.save(operation);
-  };
+  }

  toggleCanceled(operation) {
    operation.canceled = !operation.canceled;

    this.save(operation);
-  };
+  }

  save(operation) {
    operation.confirmed = true;
@ -101,7 +53,8 @@ export class OperationRowComponent {
    return this.operationService.update(operation).subscribe((operation) => {
      this.toastrService.success('Operation #' + operation.id + ' saved.');

-      this.needsReload.emit();
+      this.logger.info('Reload route', this.router.url);
+      this.router.navigateByUrl(this.router.url);
    }, (result) => {
      this.toastrService.error(
        'Error while saving operation: ' + result.message
@ -114,13 +67,11 @@ export class OperationRowComponent {

    modal.componentInstance.operation = this.operation;

-    var id = operation.id;
-
    modal.result.then((operation: Operation) => {
      this.delete(operation);
-    }, (reason) => {
-    })
-  };
+    }, () => {
+    });
+  }

  delete(operation) {
    var id = operation.id;
@ -128,26 +79,13 @@ export class OperationRowComponent {
    return this.operationService.delete(operation).subscribe(() => {
      this.toastrService.success('Operation #' + id + ' deleted.');

-      this.needsReload.emit();
+      this.logger.info('Reload route', this.router.url);
+      this.router.navigateByUrl(this.router.url);
    }, (result) => {
      this.toastrService.error(
        'An error occurred while trying to delete operation #' +
        id + ':<br />' + result
      );
    });
-  };
-
-  modify(operation) {
-    // FIXME Alexis Lahouze 2017-06-15 i18n
-    const modal = this.ngbModal.open(OperationEditModalComponent, {
-      size: 'lg'
-    });
-
-    modal.componentInstance.operation = operation;
-
-    modal.result.then((operation: Operation) => {
-        this.save(operation);
-    }, (reason) => {
-    });
-  };
+  }
 }
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@ -0,0 +1,3 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
--- a/src/scheduler/schedule.module.ts
+++ b/src/scheduler/schedule.module.ts
@ -10,7 +10,6 @@ import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrModule } from 'ngx-toastr';
 import { TextMaskModule } from 'angular2-text-mask';
-import { MaterializeModule } from 'ng2-materialize';

 import { ScheduleService } from './schedule.service';
 import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
@ -31,8 +30,7 @@ import { ScheduleListState } from './schedule.states';
    NgLoggerModule,
    ToastrModule,
    NgbModule,
-    TextMaskModule,
-    MaterializeModule,
+    TextMaskModule
  ],
  providers: [
    ScheduleService,
--- a/src/scheduler/scheduleList.component.ts
+++ b/src/scheduler/scheduleList.component.ts
@ -16,7 +16,7 @@ import { Schedule } from './schedule';
  selector: 'schedule-list',
  template: `
 <div class="row">
-  <table class="bordered highlight responsive-table">
+  <table class="table table-sm table-striped table-condensed table-hover">
    <thead>
      <tr>
        <th>Date de d&eacute;but</th>
@ -33,7 +33,7 @@ import { Schedule } from './schedule';
    <tbody>
      <tr>
        <td colspan="8">
-          <button mz-button class="green" (click)="add()">
+          <button class="btn btn-success" (click)="add()">
            Ajouter
          </button>
        </td>
--- a/src/scheduler/scheduleRow.component.ts
+++ b/src/scheduler/scheduleRow.component.ts
@ -33,19 +33,21 @@ import { Schedule } from './schedule';
 <td>{{ schedule.category }}</td>

 <td>
-  <!-- Edit operation. -->
-  <button mz-button [float]="true" class="green"
-    (click)="modify()" title="edit">
-    <span class="fa fa-pencil-square-o"></span>
-  </button>
+  <div class="btn-group btn-group-sm">
+    <!-- Edit operation. -->
+    <button type="button" class="btn btn-success"
+      (click)="modify()" title="edit">
+      <span class="fa fa-pencil-square-o"></span>
+    </button>

-  <!-- Remove operation. -->
-  <button mz-button [float]="true" class="red"
-    [hidden]="!schedule.id"
-    (click)="confirmDelete()"
-    title="remove">
-    <span class="fa fa-trash"></span>
-  </button>
+    <!-- Remove operation. -->
+    <button type="button" class="btn btn-danger"
+      [hidden]="!schedule.id"
+      (click)="confirmDelete()"
+      title="remove">
+      <span class="fa fa-trash"></span>
+    </button>
+  </div>
 </td>
  `
 })
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@ -9,9 +9,8 @@
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
-    "types": [
-        "jquery",
-        "materialize-css"
+    "typeRoots": [
+        "../node_modules/@types"
    ]
  }
 }
--- a/src/vendor.ts
+++ b/src/vendor.ts
@ -0,0 +1,13 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// Other vendors for example jQuery, Lodash or Bootstrap
+// You can import js, ts, css, sass, ...
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,162 +1 @@
-/* jshint esversion: 6 */
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-
-module.exports = {
-    context: path.resolve(__dirname, 'src'),
-    entry: {
-        main: [
-            './main.ts'
-        ],
-        styles: [
-            './main.scss'
-        ],
-        vendor: [
-            'jquery',
-            'materialize-css'
-        ]
-    },
-    devtool: 'source-map',
-    resolve: {
-        extensions: ['.js', '.ts', '.html'],
-    },
-    module: {
-        rules: [{
-            enforce: 'pre',
-            test: /webpack\.config\.js$/,
-            include: path.resolve(__dirname),
-            loader: 'eslint-loader',
-            options: {
-                useEslintrc: false,
-                emitWarning: true,
-                emitError: true,
-                failOnWarning: true,
-                failOnError: true,
-                baseConfig: 'webpack',
-                rules: {
-                    indent: ['error', 4]
-                },
-            },
-        }, {
-            // Javascript
-            enforce: 'pre',
-            test: /\.js$/,
-            //include: path.resolve(__dirname, 'src'),
-            loader: 'eslint-loader',
-            options: {
-                useEslintrc: false,
-                emitWarning: false,
-                emitError: true,
-                failOnWarning: false,
-                failOnError: true,
-                baseConfig: 'angular',
-                rules: {
-                    indent: ['error', 4]
-                },
-                plugins: [
-                    'angular',
-                    'html',
-                    'security',
-                    'this',
-                    'jquery',
-                    'promise'
-                ]
-            },
-        }, {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel-loader'
-        }, {
-            // Typescript linting
-            enforce: 'pre',
-            test: /\.ts$/,
-            loader: 'tslint-loader',
-            options: {
-                configuration: {
-                    extends: [
-                        "tslint:latest",
-                        "codelyzer"
-                    ],
-                    rules: {
-                        //quotemark: [true, 'single']
-                    }
-                },
-                configFile: 'tslint-custom.json',
-                emitErrors: true,
-                failOnHint: true,
-                typeCheck: true,
-                tsConfigFile: 'tsconfig.json',
-                formatter: 'verbose',
-                formattersDirectory: 'node_modules/tslint/lib/formatters/',
-            }
-        }, {
-            test: /\.ts$/,
-            exclude: /node_modules/,
-            loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
-        }, {
-            test: /\.html$/,
-            loader: 'raw-loader'
-        }, {
-            test: /\.css$/,
-            loaders: [
-                'style-loader',
-                'css-loader',
-            ]
-        }, {
-            test: /\.scss$/,
-            loaders: [
-                'style-loader',
-                'css-loader',
-                'sass-loader',
-                'resolve-url-loader',
-                'sass-loader?sourceMap'
-            ]
-        }, {
-            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
-            loader: 'url-loader?limit=100000'
-        }]
-    },
-    plugins: [
-        new webpack.optimize.CommonsChunkPlugin({
-            name: "vendor"
-        }),
-        new webpack.ProvidePlugin({
-            $: "jquery",
-            jQuery: "jquery",
-            "window.jQuery": "jquery",
-            "window.Materialize": "materialize-css",
-            "Materialize": "materialize-css"
-        }),
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            path.resolve(__dirname, './')
-        ),
-        new HtmlWebpackPlugin({
-            title: 'Accountant',
-            template: 'index.ejs',
-            hash: false,
-            inject: true,
-            compile: true,
-            minify: false,
-            chunks: 'all'
-        })
-    ],
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        filename: '[name].bundle.js',
-        chunkFilename: '[name].chunk.js'
-        //publicPath: 'js'
-    },
-    devServer: {
-        proxy: {
-            '/api': {
-                target: 'http://localhost:5000',
-                secure: false
-            }
-        },
-        hot: true,
-        noInfo: false,
-        quiet: false,
-    }
-};
+module.exports = require('./config/webpack.dev.js');
Author	SHA1	Message	Date
Alexis Lahouze	8b63a9d5df	Change @Input handling.	2018-06-14 21:48:34 +02:00
Alexis Lahouze	8eaa3b9039	Cleanup.	2018-06-14 21:19:17 +02:00
Alexis Lahouze	b3f0199036	Externalize operation delete modal template.	2018-06-14 21:18:51 +02:00
Alexis Lahouze	6efe5a897c	Externalize operation row template.	2018-06-14 12:05:58 +02:00
Alexis Lahouze	2ea1b38454	Fix property initialization.	2018-06-14 12:03:09 +02:00
Alexis Lahouze	161eb42942	Cleanup code.	2018-06-14 11:59:35 +02:00
Alexis Lahouze	296c89ce20	Externalize operation list template.	2018-06-14 11:54:35 +02:00
Alexis Lahouze	d2e8a3f7ef	Clenaup dependencies.	2018-06-14 11:52:41 +02:00
Alexis Lahouze	4071893ed5	Improve Operation loading in edit component.	2018-06-14 11:50:03 +02:00
Alexis Lahouze	1859efb98c	Fix component initialization.	2018-06-14 11:34:04 +02:00
Alexis Lahouze	0e001cf680	Externalize operation edit template.	2018-06-14 11:22:07 +02:00
Alexis Lahouze	b753b59080	Fix accounts route.	2018-06-14 11:09:19 +02:00
Alexis Lahouze	01d77b22c3	Fix Operations routes.	2018-06-14 11:02:12 +02:00
Alexis Lahouze	54c44afd47	Homogeneise operation edit selector.	2018-06-14 10:41:38 +02:00
Alexis Lahouze	d4d3baba31	Remove unused form component.	2018-06-14 09:28:51 +02:00
Alexis Lahouze	d082dae44c	Add missing dateMask.	2018-06-14 09:27:48 +02:00
Alexis Lahouze	f33d7f1437	Rename component and route.	2018-06-14 09:24:18 +02:00
Alexis Lahouze	65dcd7f453	Cleanup.	2018-06-14 09:19:15 +02:00
Alexis Lahouze	5f8cf9abbf	Implement Operation edit component.	2018-06-14 09:14:06 +02:00
Alexis Lahouze	f3d71fd081	Bootstrap new operation page.	2018-06-13 23:04:10 +02:00
Alexis Lahouze	d3e73ba739	Cleanup.	2018-06-13 22:09:52 +02:00
Alexis Lahouze	bbac3e67bc	Simplify routing configuration.	2018-06-13 22:09:10 +02:00
Alexis Lahouze	f36a0bfa92	Change route configuration.	2018-06-13 22:08:26 +02:00
Alexis Lahouze	45207d6500	Prepare Edit and New separation.	2018-06-13 21:37:40 +02:00
Alexis Lahouze	c92b1bed11	Fix routing.	2018-06-13 21:18:53 +02:00
Alexis Lahouze	ffbae85e11	Debug.	2018-06-13 21:18:07 +02:00
Alexis Lahouze	100e7d2d8b	Fix chart height.	2018-06-13 21:17:39 +02:00
Alexis Lahouze	280d5b8bb8	Rewrote category chart.	2018-06-11 00:25:01 +02:00
Alexis Lahouze	9b9a64fb52	Remove unused event and logger.	2018-06-10 18:39:12 +02:00
Alexis Lahouze	f913d52842	Reload balance chart on parameter change.	2018-06-10 18:37:11 +02:00
Alexis Lahouze	a4c676ee8e	Import cleanup.	2018-06-10 18:11:13 +02:00
Alexis Lahouze	088fab2d51	Fix needsReload.	2018-06-10 18:11:03 +02:00
Alexis Lahouze	3be01f1240	Semicolon cleanup.	2018-06-10 18:09:07 +02:00
Alexis Lahouze	8d6465de71	Use queryParameter for dates.	2018-06-10 18:07:05 +02:00
Alexis Lahouze	89c1c4f64c	Simplify loading using parameter instead of injected account object.	2018-06-10 17:51:45 +02:00
Alexis Lahouze	f9d26ed888	Update query parameter when changing selection range in graph.	2018-06-10 17:37:20 +02:00
Alexis Lahouze	d69ace6292	Use query parameters in Category chart component.	2018-06-10 17:26:26 +02:00
Alexis Lahouze	cf2453c4c6	Modify categoryService to accept string as dates.	2018-06-10 17:23:47 +02:00
Alexis Lahouze	e9cc86d064	Formats and colors.	2018-06-10 15:42:29 +02:00
Alexis Lahouze	94e103b365	Handle x band for future period.	2018-06-10 15:42:08 +02:00
Alexis Lahouze	adb025c308	Change disaply texts.	2018-06-10 14:51:05 +02:00
Alexis Lahouze	0efdbc5378	Remove xAxis title.	2018-06-10 14:49:35 +02:00
Alexis Lahouze	abfaab8743	Fix currency pipes.	2018-06-10 14:22:43 +02:00
Alexis Lahouze	d0159b3fb6	Fix jqwidets style import.	2018-06-10 14:21:55 +02:00
Alexis Lahouze	efe9b6340d	Double-quotes to single ones.	2018-06-10 14:21:24 +02:00
Alexis Lahouze	7ca6a9827a	Improve style depencencies.	2018-06-10 14:21:06 +02:00
Alexis Lahouze	e641759ff7	Cleanup unused c3 styles, add jqwidgets style.	2018-06-10 14:10:05 +02:00
Alexis Lahouze	e25c788123	Remove unused c3 library, add missing jqwidgets-scripts library.	2018-06-10 14:09:31 +02:00
Alexis Lahouze	c617cf2cab	Cleanup, separate axis for expenses and revenues.	2018-06-10 11:18:59 +02:00
Alexis Lahouze	4d9faf7406	Add expenses and revenues graphs, change graph colors.	2018-06-10 11:06:26 +02:00
Alexis Lahouze	ebcddbbfa5	Change chart sizes.	2018-06-10 10:04:14 +02:00
Alexis Lahouze	f19403f0ea	Use jqWidgets for balance chart.	2018-06-10 10:03:45 +02:00
Alexis Lahouze	a915d33a54	Add DailyBalance type.	2018-06-10 10:00:27 +02:00
Alexis Lahouze	d30a8951f6	Externalize HTML templates in separate files.	2018-06-10 00:30:56 +02:00
Alexis Lahouze	408a1e71b7	Externalize HTML templates in separate files.	2018-06-10 00:13:32 +02:00
Alexis Lahouze	11d73abae4	Remove unnneeded semicolon.	2018-06-09 23:56:16 +02:00
Alexis Lahouze	062d623649	Add typeRoots.	2018-06-09 23:55:49 +02:00
Alexis Lahouze	53a78fa09e	Add missing null-loader, upgrade @types/node.	2018-06-09 23:55:13 +02:00
Alexis Lahouze	d813bf4c89	Add missing modes.	2018-06-09 23:54:22 +02:00
Alexis Lahouze	d6f895c535	Webpack 4 chunk configuration.	2018-06-09 23:54:01 +02:00
Alexis Lahouze	df85d72217	Cleanup.	2018-06-09 23:53:29 +02:00
Alexis Lahouze	0599d39690	Fix CSS loader.	2018-06-09 23:53:09 +02:00
Alexis Lahouze	247ece861e	Fix includes and excludes.	2018-06-09 23:51:46 +02:00
Alexis Lahouze	156d5099d5	Fix typo in typescript test.	2018-06-09 23:50:49 +02:00
Alexis Lahouze	b83b38e2b9	Replace var by const.	2018-06-09 23:49:46 +02:00
Alexis Lahouze	9dd489e6c4	Change category graph type.	2018-06-09 23:34:03 +02:00
Alexis Lahouze	d63c5dbffe	Upgrades.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	79bea27c14	Add missing semicolons.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	4aea098e3d	Change property visibility.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	406ae3aae0	Cleanup app module.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	994604ddbf	Externalize app component html template.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	c71c015616	Cleanup main.ts.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	1f4b2aa2f5	Simplify polyfills.	2018-06-09 23:19:39 +02:00
Alexis Lahouze	2262e0ae49	Cleanup unneeded login config.	2018-06-09 23:19:16 +02:00
Alexis Lahouze	eca1cacfeb	Improve webpack command invokation.	2017-11-15 21:56:38 +01:00
Alexis Lahouze	c799c62621	Upgrades.	2017-11-15 21:55:33 +01:00
Alexis Lahouze	658a55b810	Indent.	2017-11-07 22:45:59 +01:00
Alexis Lahouze	b50d841862	Improve webpack configuration.	2017-11-07 22:41:52 +01:00