diff --git a/app/assets/styles.less b/app/assets/styles.less
new file mode 100644
index 0000000..ef0d88f
--- /dev/null
+++ b/app/assets/styles.less
@@ -0,0 +1,9 @@
+.dashboard_stats_count {
+ font-size: 33px;
+ line-height: 40px;
+ font-weight: 600;
+}
+
+.outlet {
+ min-height: 900px;
+}
\ No newline at end of file
diff --git a/app/components/app/app.pug b/app/components/app/app.pug
index 8881b93..a7a7e3c 100644
--- a/app/components/app/app.pug
+++ b/app/components/app/app.pug
@@ -2,8 +2,5 @@
.main_container
sidebar
top-panel
- .right_col(style="min-height:800px")
- ng-outlet
- footer
- .pull-right @Copyright
- .clearfix
\ No newline at end of file
+ .right_col.outlet
+ ng-outlet
\ No newline at end of file
diff --git a/app/components/dashboard/dashboard.js b/app/components/dashboard/dashboard.js
index 73bc203..1ff10c4 100644
--- a/app/components/dashboard/dashboard.js
+++ b/app/components/dashboard/dashboard.js
@@ -1,8 +1,15 @@
-var dashboard = angular.module('dashboard', []);
+var dashboard = angular.module('dashboard', ['turnover', 'paymentMethods', 'paymentConversion', 'geolocation']);
dashboard.component('dashboard', {
templateUrl: 'components/dashboard/dashboard.html',
controller: function () {
- this.testField = 'Test';
+ this.statisticInfo = [
+ {title: 'Баланс', count: '63 000', bottom: 'Рублей'},
+ {title: 'Оборот', count: '1 325 000', bottom: 'Рублей'},
+ {title: 'Успешные', count: '1 274 300', bottom: 'Рублей'},
+ {title: 'Незавершенные', count: '50 700', bottom: 'Рублей'},
+ {title: 'Средний чек', count: '8 700', bottom: 'Рублей'},
+ {title: 'Плательщиков', count: '598', bottom: ''}
+ ];
}
});
diff --git a/app/components/dashboard/dashboard.pug b/app/components/dashboard/dashboard.pug
index d94830b..71c2403 100644
--- a/app/components/dashboard/dashboard.pug
+++ b/app/components/dashboard/dashboard.pug
@@ -1,2 +1,34 @@
.row
- .col-md-12 {{$ctrl.testField}}
+ .tile_count
+ .col-md-2.col-sm-4.col-xs-6.tile_stats_count(ng-repeat="info in $ctrl.statisticInfo")
+ span.count_top {{info.title}}
+ .dashboard_stats_count {{info.count}}
+ span.count_bottom {{info.bottom}}
+.row
+ .col-md-12.col-sm-12.col-xs-12
+ .x_panel.tile
+ .x_title
+ h3 Оборот
+ .x_content
+ turnover
+.row
+ .col-md-6.col-sm-6.col-xs-12
+ .x_panel.tile
+ .x_title
+ h3 Способы оплаты
+ .x_content
+ payment-methods
+ .col-md-6.col-sm-6.col-xs-12
+ .x_panel.tile
+ .x_title
+ h3 Геолокация
+ .x_content
+ geolocation
+.row
+ .col-md-12.col-sm-12.col-xs-12
+ .x_panel.tile
+ .x_title
+ h3 Конверсия оплат
+ .x_content
+ payment-conversion
+
diff --git a/app/components/dashboard/geolocation/geolocation.js b/app/components/dashboard/geolocation/geolocation.js
new file mode 100644
index 0000000..d873135
--- /dev/null
+++ b/app/components/dashboard/geolocation/geolocation.js
@@ -0,0 +1,15 @@
+var geolocation = angular.module('geolocation', ['chart.js']);
+
+geolocation.component('geolocation', {
+ template: `
`,
+ controller: function () {
+ this.labels = ['Москва', 'Санкт-Петербург', 'Ростов', 'Самара', 'Краснодар'];
+ this.data = [9343, 3000, 1237, 1179, 978];
+ this.options = {
+ legend: {
+ display: true,
+ position: 'left'
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/app/components/dashboard/payment-conversion/payment-conversion.js b/app/components/dashboard/payment-conversion/payment-conversion.js
new file mode 100644
index 0000000..d19bcaf
--- /dev/null
+++ b/app/components/dashboard/payment-conversion/payment-conversion.js
@@ -0,0 +1,41 @@
+var paymentConversion = angular.module('paymentConversion', ['chart.js']);
+
+paymentConversion.component('paymentConversion', {
+ template: ``,
+ controller: function () {
+ this.labels = ["01.06.16", "02.06.16", "03.06.16", "04.06.16", "05.06.16", "06.06.16", "07.06.16"];
+ this.series = ['Начатые', 'Успешные', 'Незавершенные'];
+ this.data = [
+ [23, 34, 33, 23, 56, 55, 40],
+ [28, 44, 50, 35, 86, 27, 46],
+ [22, 54, 23, 76, 56, 33, 23]
+ ];
+ this.onClick = function (points, evt) {
+ console.log(points, evt);
+ };
+ this.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
+ this.options = {
+ scales: {
+ yAxes: [
+ {
+ id: 'y-axis-1',
+ type: 'linear',
+ display: true,
+ position: 'left'
+ },
+ {
+ id: 'y-axis-2',
+ type: 'linear',
+ display: true,
+ position: 'right'
+ }
+ ]
+ },
+ legend: {
+ display: true
+ }
+ };
+ }
+});
\ No newline at end of file
diff --git a/app/components/dashboard/payment-methods/payment-methods.js b/app/components/dashboard/payment-methods/payment-methods.js
new file mode 100644
index 0000000..6d53066
--- /dev/null
+++ b/app/components/dashboard/payment-methods/payment-methods.js
@@ -0,0 +1,16 @@
+var paymentMathods = angular.module('paymentMethods', ['chart.js']);
+
+paymentMathods.component('paymentMethods', {
+ template: ``,
+ controller: function () {
+ this.labels = ["Терминалы", "Салоны связи", "Прочее"];
+ this.data = [15, 40, 45];
+
+ this.options = {
+ legend: {
+ display: true,
+ position: 'left'
+ }
+ }
+ }
+});
diff --git a/app/components/dashboard/turnover/turnover.js b/app/components/dashboard/turnover/turnover.js
new file mode 100644
index 0000000..6828c38
--- /dev/null
+++ b/app/components/dashboard/turnover/turnover.js
@@ -0,0 +1,18 @@
+var turnover = angular.module('turnover', ['chart.js']);
+
+turnover.component('turnover', {
+ template: ``,
+ controller: function () {
+ this.labels = ["January", "February", "March", "April", "May", "June", "July"];
+ this.data = [
+ [137, 138, 140, 143, 140, 144, 140]
+ ];
+ this.onClick = function (points, evt) {
+ console.log(points, evt);
+ };
+ this.options = {
+ };
+ }
+});
\ No newline at end of file
diff --git a/app/components/sidebar/sidebar.js b/app/components/sidebar/sidebar.js
index f16e8cb..88d5923 100644
--- a/app/components/sidebar/sidebar.js
+++ b/app/components/sidebar/sidebar.js
@@ -2,7 +2,7 @@ var sidebar = angular.module('sidebar', []);
sidebar.component('sidebar', {
templateUrl: 'components/sidebar/sidebar.html',
- controller: function () {
-
+ controller: function ($location) {
+ this.isActive = location => location === $location.path();
}
});
diff --git a/app/components/sidebar/sidebar.pug b/app/components/sidebar/sidebar.pug
index b2a0e08..fe7cb09 100644
--- a/app/components/sidebar/sidebar.pug
+++ b/app/components/sidebar/sidebar.pug
@@ -7,7 +7,7 @@
#sidebar-menu.main_menu_side.hidden-print.main_menu
.menu_section
ul.nav.side-menu
- li.active
+ li(ng-class="{active: $ctrl.isActive('/dashboard')}")
a(ng-link="[\'Dashboard\']")
i.fa.fa-home
| Обзор
diff --git a/app/index.pug b/app/index.pug
index 3e5aa3a..6bf7358 100644
--- a/app/index.pug
+++ b/app/index.pug
@@ -5,6 +5,7 @@ html(ng-app="koffing" lang="en")
base(href="/")
title Private Office
link(href="vendor.min.css" rel="stylesheet")
+ link(href="styles.css" rel="stylesheet")
body.nav-md
app
script(src="vendor.min.js")
diff --git a/gulpfile.js b/gulpfile.js
index adf7957..409984d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,6 +8,7 @@ const templateCache = require('gulp-angular-templatecache');
const addStream = require('add-stream');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
+const less = require('gulp-less');
function prepareTemplates() {
return gulp.src('app/**/*.pug')
@@ -33,13 +34,22 @@ gulp.task('sources', () => {
.pipe(livereload());
});
+gulp.task('styles', () => {
+ return gulp.src('app/assets/styles.less')
+ .pipe(less())
+ .pipe(gulp.dest('dist'))
+ .pipe(livereload());
+});
+
gulp.task('vendorScripts', () => {
return gulp.src([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/gentelella/build/js/custom.js',
'node_modules/angular/angular.js',
- 'node_modules/@angular/router/angular1/angular_1_router.js'
+ 'node_modules/@angular/router/angular1/angular_1_router.js',
+ 'node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.bundle.js',
+ 'node_modules/angular-chart.js/dist/angular-chart.js'
])
.pipe(uglify())
.pipe(concat('vendor.min.js'))
@@ -79,7 +89,8 @@ gulp.task('watch', () => {
livereload.listen();
gulp.watch(['app/**/*.js', 'app/**/*.pug'], ['sources']);
gulp.watch('app/index.pug', ['index']);
+ gulp.watch('app/assets/**/*.less', ['styles']);
});
-gulp.task('build', ['index', 'sources', 'vendorScripts', 'vendorStyles']);
+gulp.task('build', ['index', 'sources', 'styles', 'vendorScripts', 'vendorStyles']);
gulp.task('default', ['connect', 'watch', 'build']);
diff --git a/package.json b/package.json
index eebd57a..1c69001 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"gulp-clean-css": "^2.0.11",
"gulp-concat": "^2.6.0",
"gulp-connect": "^4.1.0",
+ "gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-pug": "^3.0.3",
"gulp-sourcemaps": "^1.6.0",
@@ -22,6 +23,7 @@
"dependencies": {
"@angular/router": "^0.2.0",
"angular": "^1.5.7",
+ "angular-chart.js": "^1.0.0-alpha8",
"bootstrap": "^3.3.6",
"gentelella": "^1.3.0",
"jquery": "^2.2.3"