Skip to content

Commit ac69bf0

Browse files
fax4everfax4ever
committed
OCP-DEMO Search by #time
1 parent 16b4c57 commit ac69bf0

File tree

15 files changed

+477
-18
lines changed

15 files changed

+477
-18
lines changed

‎openshift/message-board/message-board-web/package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎openshift/message-board/message-board-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@angular/platform-browser": "6.1.6",
2222
"@angular/platform-browser-dynamic": "6.1.6",
2323
"@angular/router": "6.1.6",
24+
"@ng-bootstrap/ng-bootstrap": "^3.2.0",
2425
"core-js": "^2.4.1",
2526
"npm": "^5.6.0",
2627
"rxjs": "^6.3.2",

‎openshift/message-board/message-board-web/src/app/app-routing.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {CommonModule} from '@angular/common';
44

55
import {MessageComponent} from './message/message.component';
66
import {TagComponent} from './tag/tag.component';
7+
import {TimeComponent} from './time/time.component';
78
import {CreateAccountComponent} from './create-account/create-account.component';
89

910
const routes: Routes = [
@@ -12,7 +13,8 @@ const routes: Routes = [
1213
{ path: 'message/:userName', component: MessageComponent },
1314
{ path: 'createAccount', component: CreateAccountComponent },
1415
{ path: 'tag', component: TagComponent },
15-
{ path: 'tag/:tag', component: TagComponent }
16+
{ path: 'tag/:tag', component: TagComponent },
17+
{ path: 'time', component: TimeComponent }
1618
];
1719

1820
@NgModule({

‎openshift/message-board/message-board-web/src/app/app.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<li class="nav-item" routerLinkActive="active">
1010
<a class="nav-link" routerLink="/tag">Search by Tag</a>
1111
</li>
12+
<li class="nav-item" routerLinkActive="active">
13+
<a class="nav-link" routerLink="/time">Search by Time</a>
14+
</li>
1215
<li class="nav-item" routerLinkActive="active">
1316
<a class="nav-link" routerLink="/createAccount">Create Account</a>
1417
</li>

‎openshift/message-board/message-board-web/src/app/app.module.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { FormsModule } from '@angular/forms';
44
import { HttpClientModule } from '@angular/common/http';
55

6+
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
7+
68
import { AppRoutingModule } from './app-routing.module';
79

810
import { MessageService } from './message.service';
@@ -16,13 +18,15 @@ import { PostMessageComponent } from './post-message/post-message.component';
1618
import { MessageComponent } from './message/message.component';
1719
import { EventComponent } from './event/event.component';
1820
import { TagComponent } from './tag/tag.component';
21+
import { TimeComponent } from './time/time.component';
1922

2023
@NgModule({
2124
imports: [
2225
BrowserModule,
2326
FormsModule,
2427
AppRoutingModule,
25-
HttpClientModule
28+
HttpClientModule,
29+
NgbModule
2630
],
2731
declarations: [
2832
AppComponent,
@@ -31,7 +35,8 @@ import { TagComponent } from './tag/tag.component';
3135
PostMessageComponent,
3236
MessageComponent,
3337
EventComponent,
34-
TagComponent
38+
TagComponent,
39+
TimeComponent
3540
],
3641
providers: [MessageService, AccountService, EventService],
3742
bootstrap: [AppComponent]

‎openshift/message-board/message-board-web/src/app/board-detail/board-detail.component.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@
66
<div class="card">
77
<div class="card-body">
88
<p class="card-text">{{ message.body }}</p>
9-
<button class="btn btn-outline-danger btn-sm" (click)="delete(message.id)">Delete</button>
10-
<a *ngFor="let tag of message.tags" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
9+
<div class="row">
10+
<div class="col-lg-1">
11+
<button class="btn btn-outline-danger btn-sm" (click)="delete(message.id)">Delete</button>
12+
</div>
13+
<div class="col-lg-4">
14+
<span class="card-text text-success">{{ message.moment }}</span>
15+
</div>
16+
<div class="col-lg-7">
17+
<a *ngFor="let tag of message.tags" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
18+
</div>
19+
</div>
1120
</div>
1221
</div>
1322
</div>

‎openshift/message-board/message-board-web/src/app/message.service.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
33
import { Observable, of } from 'rxjs';
44
import { catchError, map, tap } from 'rxjs/operators';
55

6+
import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
7+
68
import { Message } from './message';
79
import { EventService } from './event.service';
810

@@ -28,14 +30,21 @@ export class MessageService {
2830
}
2931

3032
findMessagesByTag(term: string): Observable<Message[]> {
31-
if (!term || !term.trim()) {
32-
// if not search term, return empty message array.
33-
return of([]);
34-
}
35-
this.username = term;
36-
return this.http.get<Message[]>(`message-service/messages/tag/${term}`)
37-
.pipe( catchError( this.handleError<Message[]>('findMessagesByTag', []) ) );
33+
if (!term || !term.trim()) {
34+
// if not search term, return empty message array.
35+
return of([]);
3836
}
37+
return this.http.get<Message[]>(`message-service/messages/tag/${term}`)
38+
.pipe( catchError( this.handleError<Message[]>('findMessagesByTag', []) ) );
39+
}
40+
41+
findMessagesByTime(startDate: NgbDateStruct, endDate: NgbDateStruct, startTime: NgbTimeStruct, endTime: NgbTimeStruct): Observable<Message[]> {
42+
if (!startDate || !endDate || !startTime || !endTime) {
43+
return of([]);
44+
}
45+
return this.http.get<Message[]>(`message-service/messages/since/${startDate.year}/${startDate.month}/${startDate.day}/${startTime.hour}/${startTime.minute}/${startTime.second}/to/${endDate.year}/${endDate.month}/${endDate.day}/${endTime.hour}/${endTime.minute}/${endTime.second}`)
46+
.pipe( catchError( this.handleError<Message[]>('findMessagesByTime', []) ) );
47+
}
3948

4049
postMessage(body: string): Observable<any> {
4150
const message = new Message();

‎openshift/message-board/message-board-web/src/app/tag/tag.component.html

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,17 @@
1313
<div class="card">
1414
<div class="card-body">
1515
<p class="card-text">{{ message.body }}</p>
16-
<a routerLink="/message/{{message.username}}" class="card-link text-danger">{{ message.username }}</a>
17-
<a *ngFor="let tag of message.tags" (click)="onSelect(tag)"
18-
routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
16+
<div class="row">
17+
<div class="col-lg-2">
18+
<a routerLink="/message/{{message.username}}" class="card-link text-danger">{{ message.username }}</a>
19+
</div>
20+
<div class="col-lg-5">
21+
<span class="card-text text-success">{{ message.moment }}</span>
22+
</div>
23+
<div class="col-lg-5">
24+
<a *ngFor="let tag of message.tags" (click)="onSelect(tag)" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
25+
</div>
26+
</div>
1927
</div>
2028
</div>
2129
</div>

‎openshift/message-board/message-board-web/src/app/time/time.component.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="container-fluid">
2+
<div class="row">
3+
<div class="col-lg-3">
4+
<div class="form-group">
5+
<label>Since</label>
6+
<div class="input-group">
7+
<input class="form-control" placeholder="yyyy-mm-dd"
8+
name="dp1" [(ngModel)]="startDate" ngbDatepicker #d1="ngbDatepicker">
9+
<div class="input-group-append">
10+
<button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
11+
</div>
12+
</div>
13+
<ngb-timepicker [(ngModel)]="startTime" [seconds]="true"></ngb-timepicker>
14+
</div>
15+
16+
<div class="form-group">
17+
<label>To</label>
18+
<div class="input-group">
19+
<input class="form-control" placeholder="yyyy-mm-dd"
20+
name="dp2" [(ngModel)]="endDate" ngbDatepicker #d2="ngbDatepicker">
21+
<div class="input-group-append">
22+
<button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
23+
</div>
24+
</div>
25+
<ngb-timepicker [(ngModel)]="endTime" [seconds]="true"></ngb-timepicker>
26+
</div>
27+
</div>
28+
<div class="col-lg-9">
29+
<div class="container-fluid">
30+
<div *ngFor="let message of messages" class="container-fluid">
31+
<div class="card">
32+
<div class="card-body">
33+
<p class="card-text">{{ message.body }}</p>
34+
<div class="row">
35+
<div class="col-lg-2">
36+
<a routerLink="/message/{{message.username}}" class="card-link text-danger">{{ message.username }}</a>
37+
</div>
38+
<div class="col-lg-5">
39+
<span class="card-text text-success">{{ message.moment }}</span>
40+
</div>
41+
<div class="col-lg-5">
42+
<a *ngFor="let tag of message.tags" (click)="onSelect(tag)" routerLink="/tag/{{tag.name}}" class="card-link text-info">{{ tag.name }}</a>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>

‎openshift/message-board/message-board-web/src/app/time/time.component.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Component, OnInit, Input } from '@angular/core';
2+
import { NgbDateStruct, NgbTimeStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
3+
import { Message } from '../message';
4+
import { MessageService } from '../message.service';
5+
6+
@Component({
7+
selector: 'app-time',
8+
templateUrl: './time.component.html'
9+
})
10+
export class TimeComponent implements OnInit {
11+
12+
messages: Message[];
13+
14+
private _startDate: NgbDateStruct;
15+
private _endDate: NgbDateStruct;
16+
private _startTime = {hour: 0, minute: 0, second: 0};
17+
private _endTime = {hour: 23, minute: 59, second: 59};
18+
19+
get startDate(): NgbDateStruct {
20+
return this._startDate;
21+
}
22+
23+
get endDate(): NgbDateStruct {
24+
return this._endDate;
25+
}
26+
27+
get startTime(): NgbTimeStruct {
28+
return this._startTime;
29+
}
30+
31+
get endTime(): NgbTimeStruct {
32+
return this._endTime;
33+
}
34+
35+
@Input()
36+
set startDate(startDate: NgbDateStruct) {
37+
this._startDate = startDate;
38+
this.updateMessages();
39+
}
40+
41+
@Input()
42+
set endDate(endDate: NgbDateStruct) {
43+
this._endDate = endDate;
44+
this.updateMessages();
45+
}
46+
47+
@Input()
48+
set startTime(startTime: NgbTimeStruct) {
49+
this._startTime = startTime;
50+
this.updateMessages();
51+
}
52+
53+
@Input()
54+
set endTime(endTime: NgbTimeStruct) {
55+
this._endTime = endTime;
56+
this.updateMessages();
57+
}
58+
59+
constructor(private calendar: NgbCalendar, private service: MessageService ) {}
60+
61+
ngOnInit() {
62+
this._startDate = this.calendar.getToday();
63+
this._endDate = this.calendar.getToday();
64+
this.updateMessages();
65+
}
66+
67+
updateMessages() : void {
68+
this.service.findMessagesByTime(this.startDate, this.endDate, this.startTime, this.endTime)
69+
.subscribe(messages => {
70+
this.messages = messages;
71+
});
72+
}
73+
74+
}

0 commit comments

Comments
 (0)