Skip to content

Commit

Permalink
feat(app): add configurator functionality to home page
Browse files Browse the repository at this point in the history 
this will show when running `npm start`
  • Loading branch information
@dalelotts
dalelotts committed Mar 22, 2019
1 parent 9ea0a03 commit e71233a
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 88 deletions.
139 changes: 79 additions & 60 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,84 @@
<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
<h1>Welcome to {{title}}!</h1>
<div class="form-group">
<label for="startView">Start View</label>
<select id="startView" [(ngModel)]="startView">
<option>year</option>
<option>month</option>
<option>day</option>
<option>hour</option>
<option>minute</option>
</select>
<small class="form-text text-muted">Determines the initial view for the calendar.</small>
<div class="row">
<div class="col">
<div class="form-group">
<label for="maxView">Max View:</label>
<select id="maxView" [(ngModel)]="maxView" class="form-control">
<option *ngFor="let view of views" [value]="view" [disabled]="isMaxViewDisabled(view)">{{view}}</option>
</select>
<small class="form-text text-muted"><code>maxView</code> must be &gt;= <code>minView</code> and <code>startView</code></small>
</div>
<div class="form-group">
<label for="minView">Min View:</label>
<select id="minView" [(ngModel)]="minView" class="form-control">
<option *ngFor="let view of views" [value]="view" [disabled]="isMinViewDisabled(view)">{{view}}</option>
</select>
<small class="form-text text-muted"><code>minView</code> must be &lt;= <code>maxView</code> and <code>startView</code></small>
<small class="form-text text-muted"><code>minView</code> determines when selection is triggered. </small>
</div>
<div class="form-group">
<label for="startView">Start View:</label>
<select id="startView" [(ngModel)]="startView" class="form-control" (change)="refresh()">
<option *ngFor="let view of views" [value]="view" [disabled]="isStartViewDisabled(view)">{{view}}</option>
</select>
<small class="form-text text-muted"><code>startView</code> must be between (or equal to) <code>maxView</code> and <code>minView</code></small>
</div>
<div class="form-group">
<label for="minuteStep">Minute step:</label>
<select id="minuteStep" [(ngModel)]="minuteStep" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>57</option>
<option>58</option>
<option>59</option>
</select>
<small class="form-text text-muted"><code>minuteStep</code> has not effect if <code>minView</code> is not set to <code>'minute'</code> </small>
</div>
</div>

<div class="form-group">
<label for="minuteStep">Minute step</label>
<select id="minuteStep" [(ngModel)]="minuteStep">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>57</option>
<option>58</option>
<option>59</option>
</select>
<small class="form-text text-muted">Determines the initial view for the calendar.</small>
<div class="col">
<pre class="bg-light">
<code>
&lt;dl-date-time-picker
maxView=&#x22;{{maxView}}&#x22;
minView=&#x22;{{minView}}&#x22;
startView=&#x22;{{startView}}&#x22;
minuteStep=&#x22;{{minuteStep}}&#x22;
[(ngModel)]="selectedDate"
&gt;
&lt;/dl-date-time-picker&gt;</code>
</pre>
</div>

<div class="dtp-wrapper card">
<dl-date-time-picker
class="en"
[startView]="startView"
[minuteStep]="minuteStep"
[selectFilter]="selectFilter"
[(ngModel)]="selectedDate"
>
</dl-date-time-picker>
</div>

<p>&nbsp;</p>

<div>
Selected Date: {{selectedDate}}
<div class="col mx-3" style="min-width:360px;">
<div class="border" *ngIf="showCalendar">
<dl-date-time-picker
[(maxView)]="maxView"
[(minView)]="minView"
[(startView)]="startView"
[(minuteStep)]="minuteStep"
[(ngModel)]="selectedDate"
(change)="onCustomDateChange($event)"></dl-date-time-picker>
</div>
<p>Selected Date: {{selectedDate}}</p>
</div>
</div>
13 changes: 0 additions & 13 deletions src/app/app.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,4 @@ describe('AppComponent', () => {
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});

it(`should have as title 'angular-bootstrap-datetimepicker'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Dale Lotts\' angular bootstrap date & time picker');
});

it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to Dale Lotts\' angular bootstrap date & time picker!');
});
});
70 changes: 62 additions & 8 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,76 @@
*/

import {Component} from '@angular/core';
import {DateButton} from '../lib/dl-date-time-picker';
import * as moment from 'moment';
import {unitOfTime} from 'moment';
import {DlDateTimePickerChange} from '../lib/dl-date-time-picker';

@Component({
selector: 'dl-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Dale Lotts\' angular bootstrap date & time picker';
startView = 'day';

maxView = 'year';
minView = 'minute';
minuteStep = 5;
selectedDate: Date;
selectFilter = (dateButton: DateButton, viewName: string) => {
const now = moment().startOf(viewName as unitOfTime.StartOf).valueOf();
return dateButton.value >= now;
showCalendar = true;
startView = 'day';
views = ['minute', 'hour', 'day', 'month', 'year'];

/**
* Sample implementation of a `change` event handler.
* @param event
* The change event.
*/

onCustomDateChange(event: DlDateTimePickerChange<Date>) {
console.log(event.value);
}

/**
* Determines whether or not the specified `minView` option is disabled (valid)
* considering the current `startView` and `maxView` settings.
* @param view
* the target view value.
*/

isMinViewDisabled(view) {
return this.views.indexOf(view) > this.views.indexOf(this.startView)
|| this.views.indexOf(view) > this.views.indexOf(this.maxView);
}

/**
* Determines whether or not the specified `maxView` option is disabled (valid)
* considering the current `startView` and `minView` settings.
* @param view
* the target view value.
*/

isMaxViewDisabled(view) {
return this.views.indexOf(view) < this.views.indexOf(this.startView)
|| this.views.indexOf(view) < this.views.indexOf(this.minView);
}

/**
* Determines whether or not the specified `startView` option is disabled (valid)
* considering the current `minView` and `maxView` settings.
* @param view
* the target view value.
*/

isStartViewDisabled(view) {
return this.views.indexOf(this.minView) > this.views.indexOf(view)
|| this.views.indexOf(this.maxView) < this.views.indexOf(view);
}

/**
* Removes/Adds the picker from the DOM forcing a re-render when
* the `starView` value changes.
*/

refresh() {
this.showCalendar = false;
setTimeout(() => this.showCalendar = true, 100);
}
}
7 changes: 0 additions & 7 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,6 @@
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Examples</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/examples/date-range">Date Range</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
Expand Down

0 comments on commit e71233a

Please sign in to comment.