2 |
3 |
17 |
18 |
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/app.component.scss:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 0;
3 |
4 | }
5 |
6 | .starter-template {
7 | padding: 40px 15px;
8 | text-align: center;
9 | }
10 |
11 | .navigationLinkButton:hover {
12 | cursor: pointer;
13 | }
14 |
15 | a {
16 | color: #03A9F4;
17 | }
18 |
19 | .navbar-inverse {
20 | border-radius:0;
21 | }
22 |
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | // AoT compilation doesn't support 'require'.
5 | import './app.component.scss';
6 | import '../style/app.scss';
7 |
8 | @Component({
9 | selector: 'my-app',
10 | templateUrl: 'app.component.html'
11 | })
12 |
13 |
14 | export class AppComponent {
15 |
16 | constructor(private router: Router) {
17 | }
18 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/app.constants.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable()
4 | export class Configuration {
5 | public Server = 'http://localhost:5000/';
6 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { BrowserModule } from '@angular/platform-browser';
5 | import { AppComponent } from './app.component';
6 | import { Configuration } from './app.constants';
7 | import { routing } from './app.routes';
8 | import { HttpModule, JsonpModule } from '@angular/http';
9 |
10 | import { HomeComponent } from './home/home.component';
11 | import { HomeSearchComponent } from './homesearch/homesearch.component';
12 |
13 | import { Ng2CompleterModule } from 'ng2-completer';
14 | import { PersoncityautocompleteComponent } from './personcityautocomplete/personcityautocomplete.component';
15 | import { PersoncitysearchComponent } from './personcitysearch/personcitysearch.component';
16 | import { SearchDataService } from './services/searchDataService';
17 |
18 | @NgModule({
19 | imports: [
20 | BrowserModule,
21 | CommonModule,
22 | Ng2CompleterModule,
23 | FormsModule,
24 | routing,
25 | HttpModule,
26 | JsonpModule
27 | ],
28 | declarations: [
29 | AppComponent,
30 | HomeComponent,
31 | HomeSearchComponent,
32 | PersoncityautocompleteComponent,
33 | PersoncitysearchComponent
34 | ],
35 | providers: [
36 | SearchDataService,
37 | Configuration,
38 | PersoncitysearchComponent
39 | ],
40 | bootstrap: [AppComponent],
41 | })
42 |
43 | export class AppModule {}
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes, RouterModule } from '@angular/router';
2 | import { HomeComponent } from './home/home.component';
3 | import { HomeSearchComponent } from './homesearch/homesearch.component';
4 |
5 | const appRoutes: Routes = [
6 | { path: '', component: HomeComponent },
7 | { path: 'home', component: HomeComponent },
8 | { path: 'homesearch', component: HomeSearchComponent }
9 | ];
10 |
11 | export const routing = RouterModule.forRoot(appRoutes);
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 |
11 |
12 | 13 | {{SelectedPersonCity.name}} {{SelectedPersonCity.familyName}}
14 |
15 | {{SelectedPersonCity.info}}
16 |
17 | {{SelectedPersonCity.web}}
18 |
19 |
20 |
21 | {{SelectedPersonCity.metadata}}
22 |
23 | 24 |
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 | import { Component, OnInit } from '@angular/core';
3 | import { Http } from '@angular/http';
4 |
5 | import { PersoncityautocompleteComponent } from '../personcityautocomplete/personcityautocomplete.component';
6 | import { SearchDataService } from '../services/searchDataService';
7 | import { PersonCity } from '../model/personCity';
8 |
9 | @Component({
10 | selector: 'homecomponent',
11 | templateUrl: 'home.component.html',
12 | providers: [SearchDataService]
13 | })
14 |
15 | export class HomeComponent implements OnInit {
16 |
17 | public message: string;
18 | public PersonCityItems: any[];
19 | public SelectedPersonCity: PersonCity;
20 | public IndexExists = false;
21 | public CreateIndexDisabled = false;
22 |
23 | constructor(private _dataService: SearchDataService) {
24 | this.message = 'Hello from HomeComponent constructor';
25 | this.SelectedPersonCity = new PersonCity();
26 | }
27 |
28 | public CreateTestData() {
29 | this._dataService.CreateTestData().subscribe(
30 | error => console.log(error),
31 | () => console.log('CreateTestData complete'));
32 | }
33 |
34 | public CreateIndex() {
35 | this.CreateIndexDisabled = true;
36 | if (!this.IndexExists) {
37 | this._dataService.CreateIndex().subscribe(
38 | error => console.log(error),
39 | () => {
40 | console.log('CreateIndex complete');
41 | this.IndexExists = true;
42 | this.CreateIndexDisabled = false;
43 | });
44 | }
45 | }
46 |
47 | ngOnInit() {
48 | this._dataService
49 | .IndexExists()
50 | .subscribe(data => this.IndexExists = data,
51 | error => console.log(error),
52 | () => console.log('IndexExists complete'));
53 | }
54 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/homesearch/homesearch.component.html:
--------------------------------------------------------------------------------
1 | 6 |
7 | 8 |
12 | 13 | {{SelectedPersonCity.name}} {{SelectedPersonCity.familyName}}
14 |
15 | {{SelectedPersonCity.info}}
16 |
17 | {{SelectedPersonCity.web}}
18 |
19 |
20 |
21 | {{SelectedPersonCity.metadata}}
22 |
23 | 24 |
2 |
3 |
4 |
5 |
6 | Hits: {{PersonCitySearchData.hits}}
7 |
8 | 9 |
27 |
28 |
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/homesearch/homesearch.component.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 | import { Component, OnInit } from '@angular/core';
3 | import { Http } from '@angular/http';
4 | import { SearchDataService } from '../services/searchDataService';
5 | import { PersonCity } from '../model/personCity';
6 | import { PersonCitySearchResult } from '../model/personCitySearchResult';
7 | import { PersoncitysearchComponent } from '../personcitysearch/personcitysearch.component';
8 |
9 | @Component({
10 | selector: 'homesearchcomponent',
11 | templateUrl: 'homesearch.component.html',
12 | providers: [SearchDataService]
13 | })
14 |
15 | export class HomeSearchComponent implements OnInit {
16 |
17 | public message: string;
18 | public PersonCitySearchData: PersonCitySearchResult;
19 | public SelectedTerm: string;
20 | public IndexExists = false;
21 |
22 | public ShowPaging = false;
23 | public CurrentPage = 0;
24 | public TotalHits = 0;
25 | public PagesCount = 0;
26 | public Pages: number[] = [];
27 |
28 | constructor(public _dataService: SearchDataService, private _personcitysearchComponent: PersoncitysearchComponent) {
29 | this.message = 'Hello from HomeSearchComponent constructor';
30 | this.SelectedTerm = 'none';
31 | this.PersonCitySearchData = new PersonCitySearchResult();
32 | }
33 |
34 | public onTermSelectedEvent(term: string) {
35 | this.SelectedTerm = term;
36 | this.findDataForSearchTerm(term, 0);
37 | }
38 |
39 | private findDataForSearchTerm(term: string, from: number) {
40 | console.log('findDataForSearchTerm:' + term);
41 | this._dataService.FindAllForTerm(term, from)
42 | .subscribe((data) => {
43 | console.log(data);
44 | this.PersonCitySearchData = data;
45 | this.configurePagingDisplay(this.PersonCitySearchData.hits);
46 | },
47 | error => console.log(error),
48 | () => {
49 | console.log('PersonCitySearch:findDataForSearchTerm completed');
50 | }
51 | );
52 | }
53 |
54 | ngOnInit() {
55 | this._dataService
56 | .IndexExists()
57 | .subscribe(data => this.IndexExists = data,
58 | error => console.log(error),
59 | () => console.log('Get IndexExists complete'));
60 | }
61 |
62 | public LoadDataForPage(page: number) {
63 | let from = page * 10;
64 | this.findDataForSearchTerm(this.SelectedTerm, from);
65 | this.CurrentPage = page;
66 | }
67 |
68 | public NextPage() {
69 | let page = this.CurrentPage;
70 | console.log('TotalHits' + this.TotalHits + 'NextPage: ' + ((this.CurrentPage + 1) * 10) + 'CurrentPage' + this.CurrentPage );
71 |
72 | if (this.TotalHits > ((this.CurrentPage + 1) * 10)) {
73 | page = this.CurrentPage + 1;
74 | }
75 |
76 | this.LoadDataForPage(page);
77 | }
78 |
79 | public PreviousPage() {
80 | let page = this.CurrentPage;
81 |
82 | if (this.CurrentPage > 0) {
83 | page = this.CurrentPage - 1;
84 | }
85 |
86 | this.LoadDataForPage(page);
87 | }
88 |
89 | private configurePagingDisplay(hits: number) {
90 | this.PagesCount = Math.floor(hits / 10);
91 |
92 | this.Pages = [];
93 | for (let i = 0; i <= this.PagesCount; i++) {
94 | this.Pages.push((i));
95 | }
96 |
97 | this.TotalHits = hits;
98 |
99 | if (this.PagesCount <= 1) {
100 | this.ShowPaging = false;
101 | } else {
102 | this.ShowPaging = true;
103 | }
104 | }
105 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/model/personCity.ts:
--------------------------------------------------------------------------------
1 |
2 | export class PersonCity {
3 | public id: number;
4 | public name: string;
5 | public info: string;
6 | public familyName: string;
7 | public cityCountry: string;
8 | public metadata: string;
9 | public web: string;
10 | public github: string;
11 | public twitter: string;
12 | public mvp: string;
13 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/model/personCitySearchResult.ts:
--------------------------------------------------------------------------------
1 | import { PersonCity } from '../model/personCity';
2 |
3 | export class PersonCitySearchResult {
4 | public personCities: PersonCity[];
5 | public hits: number;
6 | public took: number;
7 | }
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/personcityautocomplete/personcityautocomplete.component.scss:
--------------------------------------------------------------------------------
1 |
2 | .completer-input {
3 | width: 600px;
4 | display:block;
5 | height: 40px;
6 | padding: 6px 12px;
7 | font-size: 14px;
8 | line-height: 1.42857143;
9 | color: #555;
10 | background-color: #fff;
11 | background-image: none;
12 | border: 1px solid #ccc;
13 | border-radius: 4px;
14 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
15 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
16 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
17 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
18 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
19 | }
20 |
21 | .completer-dropdown {
22 | width: 580px !important;
23 | }
24 |
--------------------------------------------------------------------------------
/src/AngularAutoCompleteAspNetCoreElasticsearch/angularApp/app/personcityautocomplete/personcityautocomplete.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject, EventEmitter, Input, Output, OnInit, AfterViewInit, ElementRef } from '@angular/core';
2 | import { Http, Response } from '@angular/http';
3 |
4 | import { Subscription } from 'rxjs/Subscription';
5 | import { Observable } from 'rxjs/Observable';
6 | import { Router } from '@angular/router';
7 |
8 | import { Configuration } from '../app.constants';
9 | import { PersoncityautocompleteDataService } from './personcityautocompleteService';
10 | import { PersonCity } from '../model/personCity';
11 |
12 | import { CompleterService, CompleterItem } from 'ng2-completer';
13 |
14 | import './personcityautocomplete.component.scss';
15 |
16 | @Component({
17 | selector: 'personcityautocomplete',
18 | template: `
19 | 7 |
8 | 9 |
10 | {{personCity.name}} {{personCity.familyName}}
11 | {{personCity.web}}
12 | {{personCity.metadata}}
13 | {{personCity.info}}
14 |
15 |
16 | 17 |
18 |
19 |
26 | 11 | {{personCity.web}}
12 | {{personCity.metadata}}
13 | {{personCity.info}}
14 |
15 |
16 | 17 |