new functional

.angular-cli.json

@@ -18,7 +18,8 @@
             "testTsconfig": "tsconfig.spec.json",
             "prefix": "app",
             "styles": [
-                "assets/scss/styles.scss"
+                "assets/scss/styles.scss",
+                "assets/css/pre-bootstrap.css"
             ],
             "scripts": [
             ],

src/app/components/login/login.component.scss

@@ -1,4 +1,4 @@
-@import "../../../assets/scss/palette";
+@import "../../../assets/scss/palettes/material-palette";
 
 #login-page {
     position: fixed;
@@ -27,5 +27,3 @@
 #login-header {
     text-align: center;
 }
-
-

src/app/components/spinner/spinner.component.scss

@@ -1,3 +0,0 @@
-.spinner {
-    //position: absolute;
-}

src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.html

@@ -1,24 +1,26 @@
 <div *ngIf="chartDataSet">
-    <div class="chart-switch-container">
+    <div class="chart-switch-container" *ngIf="params && params['switchable']">
         <button md-icon-button mdTooltip="Линейный график" [mdTooltipPosition]="'above'" (click)="switchChart('line')">
             <md-icon>
                 show_chart
             </md-icon>
         </button>
-        <button md-icon-button mdTooltip="Гистограмма" [mdTooltipPosition]="'above'" (click)="switchChart('bar')" class="active-chart">
+        <button md-icon-button mdTooltip="Гистограмма" [mdTooltipPosition]="'above'" (click)="switchChart('bar')"
+                class="active-chart">
             <md-icon>
                 insert_chart
             </md-icon>
         </button>
     </div>
     <div class="chart-container">
-        <div style="display: grid;">
-            <canvas baseChart
+        <div class="chart">
+            <canvas baseChart height="150"
                     [datasets]="chartData"
                     [labels]="chartLabels"
-                    [options]="{}"
+                    [options]="chartOptions || {}"
                     [legend]="chartLegend"
                     [chartType]="chartType"
+                    [colors]="chartColors || []"
                     (chartHover)="chartHover.emit($event)"
                     (chartClick)="chartClick.emit($event)"></canvas>
         </div>

src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.scss

@@ -1,6 +1,10 @@
-@import "../../../../../assets/scss/palette";
+@import "../../../../../assets/scss/palettes/material-palette";
 
 .chart-switch-container {
     display: grid;
     float: right;
 }
+
+.chart {
+    display: grid;
+}

src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.ts

@@ -8,6 +8,8 @@ import {Component, Output, EventEmitter, OnInit, Input} from "@angular/core";
 export class CostsChartLayoutComponent implements OnInit {
     @Input() service: any;
     @Input() params: any;
+    @Input() chartOptions: any;
+    @Input() chartColors: any[];
     @Output() chartClick = new EventEmitter<boolean>();
     @Output() chartHover = new EventEmitter<boolean>();
     public chartDataSet: boolean = false;

src/app/modules/finance/components/costs-chart/costs-chart.component.html

@@ -4,6 +4,11 @@
         <md-card-subtitle></md-card-subtitle>
     </md-card-header>
     <md-card-content>
-        <costs-chart-layout (chartClick)="chartClick($event)" (charthover)="chartHover($event)" [service]="costsService" [params]="chartLayoutParams"></costs-chart-layout>
+        <costs-chart-layout (chartClick)="chartClick($event)"
+                            (charthover)="chartHover($event)"
+                            [service]="costsService"
+                            [chartColors]="chartLayoutColors"
+                            [params]="chartLayoutParams"
+                            [chartOptions]="chartLayoutOptions"></costs-chart-layout>
     </md-card-content>
 </md-card>

src/app/modules/finance/components/costs-chart/costs-chart.component.scss

@@ -1,7 +1 @@
-:host {
 
-}
-
-.costs-chart {
-
-}

src/app/modules/finance/components/costs-chart/costs-chart.component.ts

@@ -10,15 +10,41 @@ import {CostsService} from "../../services/costs.service";
 export class CostsChartComponent {
     @ViewChild(CostsChartLayoutComponent) private costsChartLayoutComponent: CostsChartLayoutComponent;
     chartLayoutParams: any;
+    chartLayoutOptions: any;
+    chartLayoutColors: any[];
 
     constructor(public costsService: CostsService) {
-            this.chartLayoutParams = {
-                fetchMethod: 'getCostsChart'
+        this.chartLayoutParams = {
+            fetchMethod: 'getCostsChart',
+            switchable: true
+        };
+
+        this.chartLayoutOptions = {
+            responsive: true
+        };
+
+        this.chartLayoutColors = [
+            {
+                backgroundColor: 'rgba(164,251,166,0.8)',
+                borderColor: 'rgb(74,229,74)',
+                pointBackgroundColor: 'rgb(164,251,166)',
+                pointBorderColor: 'rgb(74,229,74)',
+                pointHoverBackgroundColor: '#30CB00',
+                pointHoverBorderColor: '#006203'
+            },
+            {
+                backgroundColor: 'rgba(250,88,88,0.8)',
+                borderColor: 'rgb(184,0,0)',
+                pointBackgroundColor: 'rgb(250,88,88)',
+                pointBorderColor: 'rgb(184,0,0)',
+                pointHoverBackgroundColor: '#FF4081',
+                pointHoverBorderColor: '#FF4081'
             }
+        ];
     }
 
-    updateChart() {
-        this.costsChartLayoutComponent.getChart();
+    updateChart(options?: any) {
+        this.costsChartLayoutComponent.getChart(options);
     }
 
     chartClick(e: any) {

src/app/modules/finance/components/costs-list/costs-list.component.html

@@ -2,7 +2,7 @@
     <div class="costs-list-cost-counter">
         <md-chip-list>
             <md-chip>
-                {{costs['length']}}
+                {{costs['length'] || 0}}
             </md-chip>
         </md-chip-list>
     </div>
@@ -16,10 +16,11 @@
                 <md-icon md-list-icon>cancel</md-icon>
                 <h4 md-line>За текущий период нет операций</h4>
             </md-list-item>
-            <md-list-item class="costs-list-cost" *ngFor="let cost of costs" (click)="editCost(cost)">
-                <md-icon md-list-icon>{{cost.type}}</md-icon>
+            <md-list-item *ngFor="let cost of costs" class="costs-list-cost" (click)="editCost(cost)">
+                <md-icon md-list-icon *ngIf="cost.type === 'add'" class="add">{{cost.type}}</md-icon>
+                <md-icon md-list-icon *ngIf="cost.type === 'remove'" class="remove">{{cost.type}}</md-icon>
                 <h4 md-line>{{cost.amount}} &#8381;</h4>
-                <p class="costs-list-cost-description" *ngIf="cost.description" md-line>{{cost.description}}</p>
+                <p md-line class="costs-list-cost-description" *ngIf="cost.description">{{cost.description}}</p>
                 <p md-line>{{cost.formatDate}}</p>
             </md-list-item>
         </md-list>

src/app/modules/finance/components/costs-list/costs-list.component.scss

@@ -1,7 +1,6 @@
-@import "../../../../../assets/scss/palette";
+@import "../../../../../assets/scss/palettes/material-palette";
 
 :host {
-    width: 17rem;
 }
 
 .costs-list-cost-description {
@@ -32,4 +31,12 @@
     cursor: pointer;
     border: solid 1px $primary-color-light;
     border-radius: 5px;
+
+    .remove {
+        background-color: rgba(250, 88, 88, 0.8);
+    }
+
+    .add {
+        background-color: rgba(164, 251, 166, 0.8);
+    }
 }

src/app/modules/finance/components/costs-statistic/costs-statistic.component.html

@@ -1,10 +1,10 @@
 <md-card class="costs-statistics">
     <md-card-header>
-        <md-card-title>Статистика:</md-card-title>
-        <md-card-subtitle></md-card-subtitle>
+        <md-card-title>Текущий период:</md-card-title>
+        <md-card-subtitle class="card-subtitle"><strong>{{endDay}} - {{startDay}}</strong></md-card-subtitle>
     </md-card-header>
     <md-card-content>
-        <p>Финансовый отчет с {{firstDay}} по {{lastDay}}</p>
-        <p>Текущий интервал - {{'интервал'}}.</p>
+        <p>Доход: <strong>{{addSummary}}</strong> &#8381;</p>
+        <p>Расход: <strong>{{removeSummary}}</strong> &#8381;</p>
     </md-card-content>
 </md-card>

src/app/modules/finance/components/costs-statistic/costs-statistic.component.scss

@@ -1,3 +1,9 @@
 .costs-statistics {
     margin-top: 7px;
+
+    md-card-header {
+        .card-subtitle {
+            color: #000;
+        }
+    }
 }

src/app/modules/finance/components/costs-statistic/costs-statistic.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit} from "@angular/core";
+import {CostsService} from "../../services/costs.service";
 
 @Component({
     selector: 'costs-statistic',
@@ -7,15 +8,32 @@ import {Component, OnInit} from "@angular/core";
 })
 export class CostsStatisticComponent implements OnInit {
 
-    firstDay: string;
-    lastDay: string;
-    statisticData: any;
+    startDay: string;
+    endDay: string;
+    addSummary: number;
+    removeSummary: number;
+    currentInterval: number;
 
-    constructor() {
+    constructor(public costsService: CostsService) {
 
     }
 
     ngOnInit() {
+        this.getStatistic();
+    }
 
+    getStatistic(options?: any) {
+        this.costsService.getCostsStatistic(options).subscribe(
+            data => {
+                this.startDay = data['startDay'];
+                this.endDay = data['endDay'];
+                this.addSummary = data['addSummary'];
+                this.removeSummary = data['removeSummary'];
+                this.currentInterval = data['daysCount'];
+            },
+            err => {
+                console.log(err);
+            }
+        )
     }
 }

src/app/modules/finance/components/costs/costs.component.html

@@ -2,7 +2,7 @@
     <md-card class="app-header">
         <h3>Финансы</h3>
     </md-card>
-    <div class="app-statistics">
+    <div class="app-toolbar">
         <costs-statistic></costs-statistic>
     </div>
     <div class="app-content">

src/app/modules/finance/components/costs/costs.component.scss

@@ -1,17 +1,12 @@
-.app-statistics {
+.app-toolbar {
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 1fr 2fr;
 }
+
 .app-content {
     display: grid;
     margin-top: 7px;
-    grid-template-columns: auto 2fr;
-
-    * {
-        :first-child {
-
-        }
-    }
+    grid-template-columns: 1fr 3fr;
 
     *:nth-child(even) {
         margin-left: 7px;

src/app/modules/finance/components/costs/costs.component.ts

@@ -20,5 +20,6 @@ export class CostsComponent {
     requestModifiedData() {
         this.costsListComponent.getCosts();
         this.costsChartComponent.updateChart();
+        this.costsStatisticComponent.getStatistic();
     }
 }

src/app/modules/finance/services/costs.service.ts

@@ -32,6 +32,10 @@ export class CostsService extends RootService {
         return this.fetch(options, `${this.restUrl}/chart`);
     }
 
+    getCostsStatistic(options?: any): Observable<boolean> {
+        return this.fetch(options, `${this.restUrl}/statistic`);
+    }
+
     deleteCost(id: string): Observable<boolean> {
         const item = {
             _id: id

src/assets/css/pre-bootstrap.css

@@ -0,0 +1,13 @@
+#pre-bootstrap-loader-host {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #C5CAE9;
+}
+
+#pre-bootstrap-loader-host-container {
+    text-align: center;
+    margin-top: 20%;
+}

src/assets/scss/palettes/green-palette.sass

@@ -0,0 +1,7 @@
+// green palette for data
+
+$dark-green: #006203
+$light-dark-green: #0F9200
+$green: #30CB00
+$light-green: #4AE54A
+$very-light-green: #A4FBA6

src/assets/scss/palettes/red-palette.sass

@@ -0,0 +1,7 @@
+// red palette for data
+
+$dark-red: #B80000
+$light-dark-red: #D22525
+$red: #FF0000
+$light-red: #DA4E4E
+$very-light-red: #FA5858

src/assets/scss/styles.scss

@@ -1,7 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import url('https://fonts.googleapis.com/css?family=Roboto');
-@import "palette";
+@import "palettes/material-palette";
+@import "palettes/green-palette";
+@import "palettes/red-palette";
 
 body {
     font-family: 'Roboto', sans-serif;

src/index.html

@@ -7,8 +7,15 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="./assets/css/pre-bootstrap.css">
 </head>
 <body>
-<app-root></app-root>
+<app-root>
+    <div id="pre-bootstrap-loader-host">
+        <div id="pre-bootstrap-loader-host-container">
+            <img src="assets/svg/oval.svg"/>
+        </div>
+    </div>
+</app-root>
 </body>
 </html>