From ea28a8e5e604b71e2297bf79d57accfcabe34c36 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Tue, 3 May 2016 21:04:57 +0200 Subject: [PATCH] implementing basic autocomplete for gallery --- frontend/app/admin/admin.component.html | 2 +- frontend/app/frame/frame.component.html | 3 +- frontend/app/gallery/gallery.component.html | 5 +- frontend/app/gallery/gallery.component.ts | 4 +- .../gallery/search/autocomplete.service.ts | 22 ++++++++ .../search/search.gallery.component.css | 19 +++++++ .../search/search.gallery.component.html | 19 +++++++ .../search/search.gallery.component.ts | 53 +++++++++++++++++++ 8 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 frontend/app/gallery/search/autocomplete.service.ts create mode 100644 frontend/app/gallery/search/search.gallery.component.css create mode 100644 frontend/app/gallery/search/search.gallery.component.html create mode 100644 frontend/app/gallery/search/search.gallery.component.ts diff --git a/frontend/app/admin/admin.component.html b/frontend/app/admin/admin.component.html index 385ec060..8f748285 100644 --- a/frontend/app/admin/admin.component.html +++ b/frontend/app/admin/admin.component.html @@ -1,5 +1,5 @@ -
+

User management

diff --git a/frontend/app/frame/frame.component.html b/frontend/app/frame/frame.component.html index 44d164ef..cdd8da99 100644 --- a/frontend/app/frame/frame.component.html +++ b/frontend/app/frame/frame.component.html @@ -15,7 +15,8 @@
  • Gallery
  • Admin
    • +
    - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html index c7bc3f16..0ec75c97 100644 --- a/frontend/app/gallery/gallery.component.html +++ b/frontend/app/gallery/gallery.component.html @@ -1,6 +1,9 @@ -
    +
    + +
    +
    diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts index f3102466..ccee65b4 100644 --- a/frontend/app/gallery/gallery.component.ts +++ b/frontend/app/gallery/gallery.component.ts @@ -10,6 +10,7 @@ import {GalleryDirectoryComponent} from "./directory/directory.gallery.component import {GalleryGridComponent} from "./grid/grid.gallery.component"; import {FrameComponent} from "../frame/frame.component"; import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component"; +import {GallerySearchComponent} from "./search/search.gallery.component"; @Component({ selector: 'gallery', @@ -18,7 +19,8 @@ import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component"; directives:[GalleryGridComponent, GalleryDirectoryComponent, GalleryLightboxComponent, - FrameComponent] + FrameComponent, + GallerySearchComponent] }) export class GalleryComponent implements OnInit{ diff --git a/frontend/app/gallery/search/autocomplete.service.ts b/frontend/app/gallery/search/autocomplete.service.ts new file mode 100644 index 00000000..8d1284c3 --- /dev/null +++ b/frontend/app/gallery/search/autocomplete.service.ts @@ -0,0 +1,22 @@ +/// + +import {Injectable} from "angular2/core"; +import {Http} from "angular2/http"; +import {NetworkService} from "../../model/network/network.service"; + +@Injectable() +export class AutoCompleteService extends NetworkService { + + + constructor(_http:Http) { + super(_http); + } + + arraytmp:Array = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Cape Verde", "Cayman Islands", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cruise Ship", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kuwait", "Kyrgyz Republic", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Mauritania", "Mauritius", "Mexico", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre & Miquelon", "Samoa", "San Marino", "Satellite", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "South Africa", "South Korea", "Spain", "Sri Lanka", "St Kitts & Nevis", "St Lucia", "St Vincent", "St. Lucia", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "Uruguay", "Uzbekistan", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"]; + + public autoComplete(text:string) { + return this.arraytmp.filter(t => t.toLowerCase().indexOf(text.toLowerCase()) > -1).slice(0,10); + } + + +} diff --git a/frontend/app/gallery/search/search.gallery.component.css b/frontend/app/gallery/search/search.gallery.component.css new file mode 100644 index 00000000..e35e7243 --- /dev/null +++ b/frontend/app/gallery/search/search.gallery.component.css @@ -0,0 +1,19 @@ +.autocomplete-list { + position: absolute; + left: 0; + top: 34px; + background-color:white; + width: 100%; + border: 1px solid #ccc; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + padding:12px; +} + +.autocomplete-item{ +} + +#srch-term { + border-bottom-left-radius: 0; + border-bottom-width: 0; +} \ No newline at end of file diff --git a/frontend/app/gallery/search/search.gallery.component.html b/frontend/app/gallery/search/search.gallery.component.html new file mode 100644 index 00000000..44956235 --- /dev/null +++ b/frontend/app/gallery/search/search.gallery.component.html @@ -0,0 +1,19 @@ +
    + +
    diff --git a/frontend/app/gallery/search/search.gallery.component.ts b/frontend/app/gallery/search/search.gallery.component.ts new file mode 100644 index 00000000..462d49de --- /dev/null +++ b/frontend/app/gallery/search/search.gallery.component.ts @@ -0,0 +1,53 @@ +/// + +import {Component} from "angular2/core"; +import {AutoCompleteService} from "./autocomplete.service"; + +@Component({ + selector: 'gallery-search', + templateUrl: 'app/gallery/search/search.gallery.component.html', + styleUrls: ['app/gallery/search/search.gallery.component.css'], + providers: [AutoCompleteService] +}) +export class GallerySearchComponent { + + autoCompleteItems:Array = []; + constructor(private _autoCompleteService:AutoCompleteService) { + } + + getSuggestions(event:KeyboardEvent){ + let searchText = (event.target).value; + let result = []; + if(searchText.length > 0) { + result = this._autoCompleteService.autoComplete(searchText); + } + this.showSuggestions(result,searchText); + } + + private showSuggestions(suggestions:Array,searchText:string){ + this.autoCompleteItems = []; + suggestions.forEach((value)=>{ + let preIndex = value.toLowerCase().indexOf(searchText.toLowerCase()); + let item = new AutoCompleteItem(); + if(preIndex > -1){ + item.preText = value.substring(0,preIndex); + item.highLightText = value.substring(preIndex, preIndex + searchText.length); + item.postText = value.substring(preIndex + searchText.length); + }else{ + item.postText = value; + } + this.autoCompleteItems.push(item); + }); + } + + + + +} + +class AutoCompleteItem{ + constructor(public preText:string = "",public highLightText:string = "", public postText:string = ""){ + + } +} +