replaced momentjs with date-fns; BUT we can not drop moment hence NO …

…merge of this will happen; once chartjs/Chart.js#4303 has plugin based solution; let's drive this again

.babelrc

@@ -8,6 +8,7 @@
  }]
  ],
  "plugins": [
- "lodash"
+ "lodash",
+ "date-fns"
  ]
  }

extra-webpack.config.js

@@ -8,6 +8,7 @@ const webpackConfig = {
  }
  },
  plugins: [
+ // https://github.com/chartjs/Chart.js/issues/4303
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
  // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  new LodashModuleReplacementPlugin()

package.json

@@ -22,12 +22,11 @@
  "@angular/platform-browser": "~6.0.3",
  "@angular/platform-browser-dynamic": "~6.0.3",
  "@angular/router": "~6.0.3",
- "@types/lodash-es": "~4.17.0",
  "angular-tree-component": "^7.2.1",
  "chart.js": "~2.7.2",
  "core-js": "~2.5.6",
- "lodash-es": "~4.17.10",
- "moment": "~2.22.1",
+ "date-fns": "^1.29.0",
+ "lodash-es": "^4.17.10",
  "ng-sidebar": "~6.0.4",
  "ngx-progressbar": "~2.1.1",
  "rxjs": "^6.2.0",
@@ -42,12 +41,15 @@
  "@angular/cli": "^6.0.7",
  "@angular/compiler-cli": "~6.0.3",
  "@angular/language-service": "~6.0.3",
+ "@types/date-fns": "^2.6.0",
  "@types/jasmine": "~2.5.53",
  "@types/jasminewd2": "~2.0.2",
+ "@types/lodash-es": "^4.17.1",
  "@types/node": "~8.0.16",
  "babel-cli": "^7.0.0-beta.3",
  "babel-core": "^7.0.0-bridge.0",
  "babel-loader": "^8.0.2",
+ "babel-plugin-date-fns": "^0.2.1",
  "babel-plugin-lodash": "^3.3.4",
  "babel-polyfill": "^7.0.0-beta.3",
  "babel-preset-env": "^7.0.0-beta.3",
@@ -61,6 +63,7 @@
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "~0.2.2",
  "lodash-webpack-plugin": "^0.11.5",
+ "moment": "^2.22.2",
  "protractor": "~5.1.2",
  "protractor-beautiful-reporter": "~1.2.1",
  "ts-node": "~3.3.0",

src/app/components/core/backup-restore/backup-restore.component.ts

@@ -5,7 +5,7 @@ import { AlertDialogComponent } from '../../common/alert-dialog/alert-dialog.com
 import { BackupRestoreService } from '../../../services/backup-restore.service';
 import { AlertService } from '../../../services';
 
-import * as moment from 'moment';
+import { format } from 'date-fns';
 
 @Component({
  selector: 'app-backup-restore',
@@ -132,7 +132,8 @@ export class BackupRestoreComponent implements OnInit {
  // create a custom anchor tag
  const a = document.createElement('a');
  a.href = url;
- const date = moment(backup.date).format('YYYY_MM_DD_HH_mm_ss');
+ // use pipe util method
+ const date = format(backup.date, 'YYYY_MM_DD_HH_mm_ss');
  a.download = 'foglamp_backup_' + date + '.tar.gz';
  document.body.appendChild(a);
  a.click();

src/app/components/core/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import map from 'lodash-es/map';
-import * as moment from 'moment';
+import { format } from 'date-fns';
 import { Observable } from 'rxjs/Rx';
 import { AnonymousSubscription } from 'rxjs/Subscription';
 
@@ -202,9 +202,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
  const record = map(data['statistics'], dt.key).reverse();
  let history_ts = map(data['statistics'], 'history_ts');
  history_ts = history_ts.reverse();
- history_ts.forEach(element => {
- element = moment(element).format('HH:mm:ss');
- labels.push(element);
+ history_ts.forEach(ts => {
+ // use pipe util method
+ ts = format(ts, 'HH:mm:ss');
+ labels.push(ts);
  });
  this.graphsToShow = this.graphsToShow.filter(value => value !== undefined);
  this.graphsToShow.map(statistics => {

src/app/pipes/moment-date.ts

@@ -1,18 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-import * as moment from 'moment';
+import { format } from 'date-fns';
+
 
 /*
- * Time helper using momentjs
- * Usage:
- * timestamp | dateparser:'DD.MM.YYYY'
- * Defaults to 'L' - locale ie. '01/24/2017'
+ * Time helper using date-fns
 */
 @Pipe({name: 'dateparser'})
-export class MomentDatePipe implements PipeTransform {
- transform(value: string, arg: string): string {
+export class MomentDatePipe implements PipeTransform { // TODO: rename to DateFormatterPipe
+ transform(value: string, formatter: string): string {
  if (value !== '') {
- return moment(value).format(arg);
+ return format(value, formatter);
  } else {
  return value;
  }