added new components

Author: shoudaos

angular.json

@@ -35,6 +35,8 @@
               "node_modules/rickshaw/rickshaw.min.js",
               "node_modules/moment/min/moment.min.js",
               "node_modules/fullcalendar/dist/fullcalendar.min.js",
+              "node_modules/skycons/skycons.js",
+              "node_modules/dropzone/dist/dropzone.js",
               "node_modules/parsleyjs/dist/parsley.js",
               "node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
               "node_modules/markdown/lib/markdown.js",
@@ -51,6 +53,8 @@
               "node_modules/jquery-ui/ui/mouse.js",
               "node_modules/jquery-ui/ui/sortable.js",
               "node_modules/jquery-ui/ui/draggable.js",
+              "node_modules/jvectormap/jquery-jvectormap.min.js",
+              "node_modules/jvectormap-world/jquery-jvectormap-world-mill-en.js",
               "node_modules/jquery-sparkline/jquery.sparkline.min.js",
               "node_modules/magnific-popup/dist/jquery.magnific-popup.min.js",
               "node_modules/jquery-flot/jquery.flot.js",

package.json

@@ -11,8 +11,9 @@
     "test": "ng test",
     "lint": "ng lint"
   },
+  "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.5",
+    "@agm/core": "1.0.0-beta.6",
     "@angular/animations": "8.0.0",
     "@angular/common": "8.0.0",
     "@angular/compiler": "8.0.0",
@@ -22,8 +23,11 @@
     "@angular/platform-browser": "8.0.0",
     "@angular/platform-browser-dynamic": "8.0.0",
     "@angular/router": "8.0.0",
-    "angular-froala-wysiwyg": "3.0.2",
-    "angular2-datatable": "0.6.0",
+    "@ngx-loading-bar/core": "4.1.1",
+    "@ngx-loading-bar/router": "4.1.1",
+    "@swimlane/ngx-datatable": "15.0.2",
+    "@tinymce/tinymce-angular": "2.2.0",
+    "angular2-text-mask": "8.0.5",
     "animate.css": "3.5.2",
     "awesome-bootstrap-checkbox": "1.0.1",
     "bootstrap": "4.0.0-beta",
@@ -34,29 +38,33 @@
     "bootstrap-slider": "9.8.1",
     "core-js": "2.4.1",
     "d3": "3.5.17",
+    "dropzone": "5.1.1",
     "easy-pie-chart": "2.1.7",
     "font-awesome": "4.7.0",
     "fullcalendar": "3.4.0",
     "glyphicons-halflings": "https://github.com/inway/glyphicons-halflings#df545d9e4bdae9b5ffa112fcb70b3f8350929875",
+    "govpredict-morris": "^0.5.1",
     "jasny-bootstrap": "3.1.3",
     "jquery": "3.2.1",
     "jquery-flot": "0.8.3",
     "jquery-slimscroll": "1.3.8",
     "jquery-sparkline": "2.4.0",
     "jquery-ui": "git://github.com/jquery/jquery-ui.git#1.11.4",
-    "jqvmap": "https://github.com/shoudaos/jqvmap.git#7828d7cbacfcc91850831aa6fe6f7b8657e7aa17",
+    "jquery.animate-number": "0.0.14",
+    "jvectormap": "2.0.4",
+    "line-awesome": "icons8/line-awesome",
     "magnific-popup": "1.1.0",
     "markdown": "0.5.0",
     "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
     "moment": "2.15.2",
     "morris.js": "0.5.0",
     "ng-autosize": "1.1.0",
+    "ng2-carouselamos": "3.2.0",
     "ng2-datetime": "1.4.0",
-    "ng2-file-upload": "1.2.1",
     "ng2-select2": "1.0.0-beta.16",
     "ng2-table": "1.3.2",
     "ngx-bootstrap": "5.0.0",
-    "ngx-chips": "2.0.2",
+    "ngx-trend": "^3.4.3",
     "nvd3": "1.8.6",
     "parsleyjs": "2.7.2",
     "popper.js": "1.12.9",
@@ -72,7 +80,14 @@
   },
   "napa": {
     "twitter-bootstrap-wizard": "git://github.com/VinceG/twitter-bootstrap-wizard.git#62a9aca8cc61fdb496c4bf7b92e1ff70c698667e",
-    "jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751"
+    "jvectormap-world": "http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js",
+    "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
+    "jquery.nestable": "https://github.com/dbushell/Nestable.git#4f93032cfafe2002f24ed6bd7dc1510931498503",
+    "jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
+    "jQuery-Mapael": "https://github.com/neveldo/jQuery-Mapael.git#0.7.1",
+    "skycons": "https://github.com/darkskyapp/skycons.git#7095ecf5f653dbcadbddb0d317b42e65fe091eae",
+    "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
+    "jquery.flot-orderBars": "https://github.com/emmerich/flot-orderBars.git"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^8.1.0",

src/app/app.config.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppConfig {
+  config = {
+    settings: {
+      colors: {
+        'white': '#fff',
+        'black': '#000',
+        'gray-light': '#999',
+        'gray-lighter': '#eee',
+        'gray': '#666',
+        'gray-dark': '#343434',
+        'gray-darker': '#222',
+        'gray-semi-light': '#777',
+        'gray-semi-lighter': '#ddd',
+        'brand-primary': '#5d8fc2',
+        'brand-success': '#64bd63',
+        'brand-warning': '#f0b518',
+        'brand-danger': '#dd5826',
+        'brand-info': '#5dc4bf'
+      },
+    },
+  };
+
+  getConfig(): Object {
+    return this.config;
+  }
+}
+

src/app/app.routes.ts

@@ -13,9 +13,6 @@ export const ROUTES: Routes = [{
   {
     path: 'error', component: ErrorComponent
   },
-  {
-    path: 'landing', loadChildren: './pages/landing/landing.module#LandingModule'
-  },
   {
     path: '**', component: ErrorComponent
   }

src/app/components/dropzone/dropzone.directive.ts

@@ -0,0 +1,23 @@
+import {Directive, ElementRef, OnInit} from '@angular/core';
+declare let jQuery: any;
+declare let Dropzone: any;
+
+Dropzone.autoDiscover = false;
+
+@Directive ({
+  selector: '[dropzone-demo]'
+})
+
+export class DropzoneDemoDirective implements OnInit {
+  $el: any;
+
+  constructor(el: ElementRef) {
+    this.$el = jQuery(el.nativeElement);
+    this.$el.addClass('dropzone');
+  }
+
+  ngOnInit(): void {
+    const dropzone = new Dropzone(this.$el[0], {});
+  }
+
+}

src/app/layout/directives/flot/flot.directive.ts renamed to src/app/components/flot/flot.directive.ts

@@ -1,11 +1,11 @@
-import { Directive, ElementRef, Input } from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
 declare let jQuery: any;
 
 @Directive ({
   selector: '[flot-chart]'
 })
 
-export class FlotChart {
+export class FlotChartDirective implements AfterViewInit {
   $el: any;
   @Input() data: any;
   @Input() options: string;
@@ -43,7 +43,7 @@ export class FlotChart {
       });
   }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
     this.render();
   }
 }

src/app/components/flot/flot.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { FlotChartDirective } from './flot.directive';
+
+@NgModule({
+  declarations: [
+    FlotChartDirective
+  ],
+  exports: [
+    FlotChartDirective
+  ]
+})
+export class FlotChartModule {
+}

src/app/components/mapael/mapael.directive.ts

@@ -0,0 +1,35 @@
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
+declare let jQuery: any;
+
+@Directive ({
+  selector: '[mapael-layers-map]'
+})
+
+export class MapaelLayersMapDirective implements AfterViewInit {
+  $el: any;
+  @Input() height: number;
+  @Input() marginBottom: number;
+  @Input() data: any;
+  @Input() zoom: any;
+
+  constructor(el: ElementRef) {
+    this.$el = jQuery(el.nativeElement);
+  }
+
+  render(): void {
+    const $map = this.$el;
+    $map.css('height', this.height || 394).css('margin-bottom', this.marginBottom || (-15));
+    if ($map.parents('.widget')[0]) {
+      $map.find('.map').css('height', parseInt($map.parents('.widget').css('height'), 10) - 40);
+    }
+    $map.mapael(this.data);
+
+    if (this.zoom) {
+      $map.trigger('zoom', this.zoom);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.render();
+  }
+}

src/app/components/mapael/mapael.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { MapaelLayersMapDirective } from './mapael.directive';
+
+@NgModule({
+  declarations: [
+    MapaelLayersMapDirective
+  ],
+  exports: [
+    MapaelLayersMapDirective
+  ]
+})
+export class MapaelLayersMapModule {
+}

src/app/layout/directives/morris/morris.directive.ts renamed to src/app/components/morris/morris.directive.ts

@@ -1,11 +1,11 @@
-import { Directive, ElementRef, Input } from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
 declare let jQuery: any;
 
 @Directive ({
   selector: '[morris-chart]'
 })
 
-export class MorrisChart {
+export class MorrisChartDirective implements AfterViewInit {
   $el: any;
   @Input() height: number;
   @Input() type: string;
@@ -28,7 +28,7 @@ export class MorrisChart {
     /* tslint:enable */
   }
 
-  ngOnInit(): void {
-    this.render();
+  ngAfterViewInit(): void {
+      this.render();
   }
 }

src/app/components/morris/morris.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { MorrisChartDirective } from './morris.directive';
+
+@NgModule({
+  declarations: [
+    MorrisChartDirective
+  ],
+  exports: [
+    MorrisChartDirective
+  ]
+})
+export class MorrisChartModule {
+}

src/app/layout/directives/nvd3/nvd3.directive.ts renamed to src/app/components/nvd3/nvd3.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input } from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
 declare let jQuery: any;
 declare let nv: any;
 declare let d3: any;
@@ -7,7 +7,7 @@ declare let d3: any;
   selector: '[nvd3-chart]'
 })
 
-export class Nvd3Chart {
+export class Nvd3ChartDirective implements AfterViewInit {
   $el: any;
   @Input() chart: any;
   @Input() height: string;
@@ -19,7 +19,7 @@ export class Nvd3Chart {
 
   render(): void {
     nv.addGraph(() => {
-      let chart = this.chart;
+      const chart = this.chart;
       d3.select(this.$el.find('svg')[0])
         .style('height', this.height || '300px')
         .datum(this.datum)
@@ -33,7 +33,7 @@ export class Nvd3Chart {
     });
   }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
     this.render();
   }
 }

src/app/components/nvd3/nvd3.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Nvd3ChartDirective } from './nvd3.directive';
+
+@NgModule({
+  declarations: [
+    Nvd3ChartDirective
+  ],
+  exports: [
+    Nvd3ChartDirective
+  ]
+})
+export class Nvd3ChartModule {
+}

src/app/components/rickshaw/rickshaw.directive.ts

@@ -0,0 +1,64 @@
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
+declare let jQuery: any;
+declare let Rickshaw: any;
+
+@Directive ({
+  selector: '[rickshaw-chart]'
+})
+
+export class RickshawChartDirective implements AfterViewInit {
+  $el: any;
+  @Input() height: string;
+  @Input() series: Array<any>;
+  @Input() seriesData: Array<any>;
+  @Input() random: any;
+  @Input() configureProps: Object;
+  @Input() realtime: boolean;
+  @Input() renderer: string;
+
+  constructor(el: ElementRef) {
+    this.$el = jQuery(el.nativeElement);
+  }
+
+  render(): void {
+    const graph = new Rickshaw.Graph({
+      element: this.$el[0],
+      height: this.height,
+      renderer: this.renderer || 'area',
+      series: this.series
+    });
+
+    const onResize = () => {
+      const configureProperties = jQuery.extend({
+        height: this.height
+      }, this.configureProps);
+      graph.configure(configureProperties);
+      graph.render();
+
+      this.$el.find('svg').css({height: this.height, width: '100%'});
+    };
+
+    jQuery(window).on('sn:resize', onResize);
+    onResize();
+
+    const hoverDetail = new Rickshaw.Graph.HoverDetail({
+      graph: graph,
+      xFormatter: function(x): string {
+        return new Date(x * 1000).toString();
+      }
+    });
+
+    if (this.realtime) {
+      setInterval( () => {
+        this.random.removeData(this.seriesData);
+        this.random.addData(this.seriesData);
+        graph.update();
+
+      }, 1000 );
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.render();
+  }
+}