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 = ""){ + + } +} +