chore(demo): update demo

fetrarij · May 28, 2018 · 674c21f · 674c21f
1 parent a46ded8
commit 674c21f
Show file tree

Hide file tree

Showing 21 changed files with 295 additions and 122 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ This plugin is a rewrite to angular from [bootstrap daterangepicker](http://www.
 
 This plugin have an independant theme which looks more close to material design, so the material design is just a style.
 
+
 ![](screen.png)
 
 demo:  https://fetrarij.github.io/ngx-daterangepicker-material/
@@ -22,19 +23,19 @@ demo:  https://fetrarij.github.io/ngx-daterangepicker-material/
 
  import **NgxDaterangepickerMd** in your module:
 
-    ````typescript
-    ...
-    import { FormsModule } from '@angular/forms';
-    import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
-    import { App } from './app';
-
-    @NgModule({
-        imports:      [... , FormsModule, NgxDaterangepickerMd],
-        declarations: [App],
-        bootstrap:    [App]
-    })
-    export class AppModule {}
-    ````
+````typescript
+...
+import { FormsModule } from '@angular/forms';
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+import { App } from './app';
+
+@NgModule({
+    imports:      [... , FormsModule, NgxDaterangepickerMd],
+    declarations: [App],
+    bootstrap:    [App]
+})
+export class AppModule {}
+````
 
 ## Usage example
 
@@ -48,11 +49,11 @@ Typescript:
 ````typescript
 selected: {startdDate: Moment, endDate: Moment};
 ````
-### or with some options: 
+### with some options: 
 Html:
 
 ```html
-    <input type="text" matInput
+<input type="text" matInput
     ngxDaterangepickerMd
     [autoApply]="false"
     [showInputs]="false"
@@ -66,8 +67,11 @@ Html:
 Typescript: 
 
 ````typescript
-selected: {start: Moment, en: Moment};
+selected: {start: Moment, end: Moment};
 ````
+You can [play with our online demo here](https://fetrarij.github.io/ngx-daterangepicker-material/)
+and [browse our demo code here](./demo/src/app).
+
 
 
 ## Available options

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -1,62 +1,22 @@
-<mat-toolbar>{{title}}</mat-toolbar>
+<nav class="light-blue lighten-1" role="navigation">
+  <div class="nav-wrapper container">
+  <a href="//github.com/fetrarij/ngx-daterangepicker-material" class="brand-logo">
+    <img src="assets/images/github.png" style="width: 30px">
+  </a>
+    <ul class="right hide-on-med-and-down">
+      <li><a [routerLink]="['simple']">Simple</a></li>
+      <li><a [routerLink]="['single-datepicker']">Single dateicker</a></li>
+      <li><a [routerLink]="['full']">Full options</a></li>
+    </ul>
 
-<mat-card>
-  <div class="row">
-    <div class="col s6">
-        <input type="text" matInput
-          ngxDaterangepickerMd
-          [autoApply]="options.autoApply"
-          [showInputs]="options.showInputs"
-          [linkedCalendars]="options.linkedCalendars"
-          [singleDatePicker]="options.singleDatePicker"
-          applyLabel="Okay"
-          [locale]="locale"
-          startKey="start"
-          endKey="end"
-          [(ngModel)]="selected"
-          (click)="click()"
-          [minDate]="minDate"
-          [maxDate]="maxDate"
-          [showWeekNumbers]="options.showWeekNumbers"
-          [showISOWeekNumbers]="options.showISOWeekNumbers"
-          name="daterange"/>
-    </div>
-    <div class="col s6">
-          <strong>Value: </strong>{{selected  | json}}
-          <hr/>
-        <h4>Options:</h4>
-        <strong>autoApply:</strong>  <mat-checkbox [(ngModel)]="options.autoApply">Value: {{options.autoApply}}</mat-checkbox><br/>
-        <strong>showInputs:</strong>  <mat-checkbox [(ngModel)]="options.showInputs">Value: {{options.showInputs}}</mat-checkbox><br/>
-        <strong>linkedCalendars:</strong><mat-checkbox [(ngModel)]="options.linkedCalendars">Value: {{options.linkedCalendars}}</mat-checkbox><br/>
-        <strong>singleDatePicker:</strong><mat-checkbox [(ngModel)]="options.singleDatePicker">Value: {{options.singleDatePicker}}</mat-checkbox><br/>
-        <strong>showWeekNumbers:</strong><mat-checkbox [(ngModel)]="options.showWeekNumbers">Value: {{options.showWeekNumbers}}</mat-checkbox><br/>
-        <strong>showISOWeekNumbers:</strong><mat-checkbox [(ngModel)]="options.showISOWeekNumbers">Value: {{options.showISOWeekNumbers}}</mat-checkbox><br/>
-        <strong>minDate:</strong>  {{minDate | date: 'dd/MM/yyyy'}}<br/>
-        <strong>maxDate:</strong>  {{maxDate | date: 'dd/MM/yyyy'}}<br/>
-        <strong>locale</strong> : <br/>
-        <div class="">
-          <div class="row">
-            <div class="col s12">
-                <mat-form-field>
-                  <mat-select placeholder="Choose format" [(ngModel)]="locale.format">
-                    <mat-option value="DD/MM/YYYY">DD/MM/YYYY</mat-option>
-                    <mat-option value="MM-DD-YYYY">MM-DD-YYYY</mat-option>
-                  </mat-select>
-                </mat-form-field><br/>
-                locale value:<br/> 
-              {{locale | json}}
-            </div>
-          </div>
-        </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col s6">
-    </div>
-    <div class="col s6">
-    </div>
-  </div>
-</mat-card>
 
-
+    <ul id="nav-mobile" class="side-nav" style="transform: translateX(-100%);">
+      <li><a href="//github.com/fetrarij/ngx-daterangepicker-material">Github</a></li>
+    </ul>
+    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
+  </div>
+</nav>
 
+<div class="container">
+  <router-outlet></router-outlet>
+</div>
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -0,0 +1,3 @@
+nav {
+    margin-bottom: 50px;
+}
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -1,6 +1,4 @@
 import { Component,ViewChild } from '@angular/core';
-import { DaterangepickerDirective } from '../../../src/daterangepicker/daterangepicker.directive';
-import * as moment from 'moment';
 
 @Component({
   selector: 'ngx-root',
@@ -9,26 +7,4 @@ import * as moment from 'moment';
 })
 
 export class AppComponent {
-  title = 'Pure angular daterangepicker';
-  options: any = {
-    autoApply: false,
-    showInputs: false,
-    alwaysShowCalendars: false,
-    linkedCalendars: true,
-    singleDatePicker: false,
-    showWeekNumbers: false,
-    showISOWeekNumbers: false
-  };
-  minDate: moment.Moment = moment().subtract(5, 'days');
-  maxDate: moment.Moment = moment().add(2, 'month');
-  locale: any = {
-    format: 'DD MMMM YYYY',
-    separator: ' To ',
-    cancelLabel: 'Cancel',
-    applyLabel: 'Okay'
-  }
-  @ViewChild(DaterangepickerDirective) daterangepicker: DaterangepickerDirective;
-  click() {
-  }
-  selected = {start: moment().subtract(3, 'days'), end: moment().add(3, 'days') };
 }
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { AppRoutes } from './app.routing';
 import {
   MatButtonModule,
   MatCheckboxModule,
@@ -14,11 +16,17 @@ import {
 
 import { NgxDaterangepickerMd } from './../../../src/daterangepicker';
 import { AppComponent } from './app.component';
+import { SimpleComponent } from './simple/simple.component';
+import { FullComponent } from './full/full.component';
+import { SingleDatepickerComponent } from './single-datepicker/single-datepicker.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SimpleComponent,
+    FullComponent,
+    SingleDatepickerComponent
   ],
   imports: [
     BrowserModule,
@@ -31,7 +39,8 @@ import { AppComponent } from './app.component';
     MatGridListModule,
     MatInputModule,
     MatSelectModule,
-    NgxDaterangepickerMd
+    NgxDaterangepickerMd,
+    RouterModule.forRoot(AppRoutes),
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+import { SimpleComponent } from './simple/simple.component';
+import { FullComponent } from './full/full.component';
+import { SingleDatepickerComponent } from './single-datepicker/single-datepicker.component';
+
+export const AppRoutes: Routes = [
+    {
+         path: '',
+         redirectTo: 'simple',
+         pathMatch: 'full'
+    },
+    {
+        path: 'simple',
+        component: SimpleComponent,
+    },
+    {
+        path: 'single-datepicker',
+        component: SingleDatepickerComponent,
+    },
+    {
+        path: 'full',
+        component: FullComponent,
+    }
+];
diff --git a/demo/src/app/full/full.component.html b/demo/src/app/full/full.component.html
@@ -0,0 +1,60 @@
+<mat-toolbar>{{title}}</mat-toolbar>
+
+<mat-card>
+  <div class="row">
+    <div class="col s6">
+        <input type="text" matInput
+          ngxDaterangepickerMd
+          [autoApply]="options.autoApply"
+          [showInputs]="options.showInputs"
+          [linkedCalendars]="options.linkedCalendars"
+          [singleDatePicker]="options.singleDatePicker"
+          applyLabel="Okay"
+          [locale]="locale"
+          startKey="start"
+          endKey="end"
+          [(ngModel)]="selected"
+          (click)="click()"
+          [minDate]="minDate"
+          [maxDate]="maxDate"
+          [showWeekNumbers]="options.showWeekNumbers"
+          [showISOWeekNumbers]="options.showISOWeekNumbers"
+          name="daterange"/>
+    </div>
+    <div class="col s6">
+          <strong>Value: </strong>{{selected  | json}}
+          <hr/>
+        <h4>Options:</h4>
+        <strong>autoApply:</strong>  <mat-checkbox [(ngModel)]="options.autoApply">Value: {{options.autoApply}}</mat-checkbox><br/>
+        <strong>showInputs:</strong>  <mat-checkbox [(ngModel)]="options.showInputs">Value: {{options.showInputs}}</mat-checkbox><br/>
+        <strong>linkedCalendars:</strong><mat-checkbox [(ngModel)]="options.linkedCalendars">Value: {{options.linkedCalendars}}</mat-checkbox><br/>
+        <strong>singleDatePicker:</strong><mat-checkbox [(ngModel)]="options.singleDatePicker">Value: {{options.singleDatePicker}}</mat-checkbox><br/>
+        <strong>showWeekNumbers:</strong><mat-checkbox [(ngModel)]="options.showWeekNumbers">Value: {{options.showWeekNumbers}}</mat-checkbox><br/>
+        <strong>showISOWeekNumbers:</strong><mat-checkbox [(ngModel)]="options.showISOWeekNumbers">Value: {{options.showISOWeekNumbers}}</mat-checkbox><br/>
+        <strong>minDate:</strong>  {{minDate | date: 'dd/MM/yyyy'}}<br/>
+        <strong>maxDate:</strong>  {{maxDate | date: 'dd/MM/yyyy'}}<br/>
+        <strong>locale</strong> : <br/>
+        <div class="">
+          <div class="row">
+            <div class="col s12">
+                <mat-form-field>
+                  <mat-select placeholder="Choose format" [(ngModel)]="locale.format">
+                    <mat-option value="DD/MM/YYYY">DD/MM/YYYY</mat-option>
+                    <mat-option value="MM-DD-YYYY">MM-DD-YYYY</mat-option>
+                  </mat-select>
+                </mat-form-field><br/>
+                locale value:<br/> 
+              {{locale | json}}
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col s6">
+    </div>
+    <div class="col s6">
+    </div>
+  </div>
+</mat-card>
+<simple></simple>
diff --git a/demo/src/app/full/full.component.scss b/demo/src/app/full/full.component.scss
diff --git a/demo/src/app/full/full.component.spec.ts b/demo/src/app/full/full.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FullComponent } from './full.component';
+
+describe('FullComponent', () => {
+  let component: FullComponent;
+  let fixture: ComponentFixture<FullComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FullComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FullComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/demo/src/app/full/full.component.ts b/demo/src/app/full/full.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import * as moment from 'moment';
+import { DaterangepickerDirective } from '../../../../src/daterangepicker/daterangepicker.directive';
+
+@Component({
+  selector: 'full',
+  templateUrl: './full.component.html',
+  styleUrls: ['./full.component.scss']
+})
+export class FullComponent implements OnInit {
+
+  title = 'Pure angular daterangepicker';
+  options: any = {
+    autoApply: false,
+    showInputs: false,
+    alwaysShowCalendars: false,
+    linkedCalendars: true,
+    singleDatePicker: false,
+    showWeekNumbers: false,
+    showISOWeekNumbers: false
+  };
+  minDate: moment.Moment = moment().subtract(5, 'days');
+  maxDate: moment.Moment = moment().add(2, 'month');
+  locale: any = {
+    format: 'DD MMMM YYYY',
+    separator: ' To ',
+    cancelLabel: 'Cancel',
+    applyLabel: 'Okay'
+  }
+  click() {
+  }
+  selected = {start: moment().subtract(3, 'days'), end: moment().add(3, 'days') };
+  @ViewChild(DaterangepickerDirective) daterangepicker: DaterangepickerDirective;
+  constructor() { }
+  ngOnInit() {
+  }
+}
diff --git a/demo/src/app/simple/simple.component.html b/demo/src/app/simple/simple.component.html
@@ -0,0 +1,6 @@
+<mat-toolbar>Simple daterangepicker</mat-toolbar>
+<div class="row">
+  <div class="col s6">
+    <input type="text" ngxDaterangepickerMd [(ngModel)]="selected" class="form-control" placeholder="Choose date"/>
+  </div>
+</div>
diff --git a/demo/src/app/simple/simple.component.scss b/demo/src/app/simple/simple.component.scss