+
diff --git a/src/app/home/github.service.ts b/src/app/home/github.service.ts
index 1d2fbb3..6a9dff4 100644
--- a/src/app/home/github.service.ts
+++ b/src/app/home/github.service.ts
@@ -8,17 +8,32 @@ export class GithubSearchService {
constructor (private http: Http) {}
- formRepoUrl(username) {
- return `https://api.github.com/users/${username}/repos`; // Tempate strings yay!
+ formRepoUrl(language, pageNumber) {
+ // return `https://api.github.com/users/${username}/repos`; // Tempate strings yay!
+ return `https://api.github.com/search/repositories?q=+language:${language}&page=${pageNumber}`; // Tempate strings yay!
}
- getReposByUsername (username): Observable
{
- return this.http.get(this.formRepoUrl(username))
- .map(this.parseData)
+ getReposByUsername (language, pageNumber): Observable {
+ return this.http.get(this.formRepoUrl(language, pageNumber))
+ .map(this.parseRepos)
.catch(this.handleError);
}
- private parseData(res: Response) {
+ langaugeTagsUrl() {
+ return "https://gist.githubusercontent.com/mayurah/5a4d45d12615d52afc4d1c126e04c796/raw/ccbba9bb09312ae66cf85b037bafc670356cf2c9/languages.json";
+ }
+
+ getLanguageTags() {
+ return this.http.get(this.langaugeTagsUrl())
+ .map(this.parseTags)
+ .catch(this.handleError);
+ }
+
+ private parseTags(tags) {
+ return JSON.parse(tags._body);
+ }
+
+ private parseRepos(res: Response) {
let body = res.json();
return body || { };
}
@@ -29,4 +44,6 @@ export class GithubSearchService {
console.error(errMsg);
return Observable.throw(errMsg);
}
+
+
}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 5eaa363..a185f47 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,68 +1,130 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, AfterViewInit } from '@angular/core';
import { Search } from './search';
import { GithubSearchService } from './github.service';
import { CONSTANTS } from '../shared';
+declare var $:any;
+
@Component({
selector: 'as-home',
templateUrl: 'app/home/home.html',
styleUrls: [
'app/home/home.css'
],
- providers: [GithubSearchService]
+ directives: [ ],
+ providers: [ GithubSearchService ]
})
-export class HomeComponent {
+export class HomeComponent implements AfterViewInit {
public repos: Array = [];
-
+ public originalRepos: Array = [];
+ public languageTags: Array = [];
+
+ public elementRef: ElementRef;
public strings;
public model = new Search('');
public fetching: Boolean = false;
public isError: Boolean = false;
- public profileImage: string = "";
public isEmpty = null;
-
- constructor(private githubSearchService: GithubSearchService) {
+ public repoCount = 0;
+ public pageNumber = 1;
+ public loadingMore = false;
+ public maxStarCount = 100;
+ public starSlider;
+
+ constructor(private githubSearchService: GithubSearchService, elementRef: ElementRef) {
+ this.elementRef = elementRef;
this.strings = CONSTANTS.MAIN.APP;
}
onSubmit() {
this.fetching = true;
- this.githubSearchService.getReposByUsername(this.model.text)
+ this.clearRepos();
+ this.fetchRepos(this.pageNumber);
+ }
+
+ fetchRepos(pageNumber) {
+ this.githubSearchService.getReposByUsername(this.model.text, pageNumber)
.subscribe(
this.success.bind(this),
this.error.bind(this)
);
}
+ fetchNextPage() {
+ this.loadingMore = true;
+ this.pageNumber++;
+ this.fetchRepos(this.pageNumber);
+ }
+
+ clearRepos() {
+ this.repos = [];
+ this.originalRepos = [];
+ }
+
success(repos) {
- this.repos = repos;
+ this.repos = this.repos.concat(repos.items);
+ this.originalRepos = this.repos;
+ this.repoCount = repos.total_count;
+
this.isError = false;
if(repos.length === 0) {
- this.profileImage = "";
this.isEmpty = true;
} else {
this.isEmpty = false;
- this.getImage();
+ this.getMaxStarCount();
}
this.fetching = false;
+ this.loadingMore = false;
}
error(error) {
- console.log("errror", error);
this.handleError();
}
- getImage() {
- this.profileImage = this.repos[0].owner.avatar_url;
+ getMaxStarCount() {
+ this.maxStarCount = this.repos[0].stargazers_count;
+ this.starSlider.slider("option", "max", this.maxStarCount);
+ this.starSlider.slider("option", "value", this.maxStarCount);
}
handleError() {
this.fetching = false;
this.isError = true;
- this.profileImage = null;
this.isEmpty = false;
this.repos = null;
}
+
+ // Slider Range Change detection
+ filterReposByStar(stars) {
+ this.repos = this.originalRepos.filter(function(repo) {
+ return repo.stargazers_count >= stars;
+ });
+
+ }
+
+ ngAfterViewInit() {
+ // Init Autocomplete
+ this.githubSearchService.getLanguageTags().subscribe(function(tags){
+ this.languageTags = tags;
+ $(this.elementRef.nativeElement).find(".search-text").autocomplete({
+ source: this.languageTags
+ });
+ }.bind(this), function(error){
+ console.error("Could not fetch language tags", error);
+ }.bind(this));
+
+ // Initialize Slider
+ this.starSlider = $(this.elementRef.nativeElement).find("#slider").slider({
+ range: false,
+ min: 0,
+ max: 20000,
+ value: this.maxStarCount,
+ slide: ( event, ui ) => {
+ this.maxStarCount = ui.value;
+ this.filterReposByStar(ui.value);
+ }
+ });
+ }
}
diff --git a/src/app/home/home.css b/src/app/home/home.css
index 83c005c..7bb5427 100644
--- a/src/app/home/home.css
+++ b/src/app/home/home.css
@@ -5,7 +5,7 @@
.search-container {
margin-bottom: 10px;
border-bottom: 1px solid black;
- padding: 10px;
+ padding: 10px 10px 30px 10px;
}
.search-text {
@@ -142,6 +142,25 @@
text-overflow: ellipsis;
}
+.stars {
+ float: left;
+}
+
+.language {
+ float: right;
+ font-style: italic;
+}
+
+.load-more {
+ width: 50%;
+ text-align: center;
+ display: block;
+ margin: auto;
+
+ position: absolute;
+ bottom: -30px;
+}
+
@keyframes fadeIn {
0% {
opacity: 0;
@@ -154,4 +173,32 @@
100% {
opacity: 1;
}
+}
+
+
+/*Slider styles*/
+.ui-slider {
+ background: #d8e0f3;
+ border-radius: 2px;
+ border-color: #d8e0f3;
+ height: 8px;
+ margin-top: 10px;
+}
+
+.sider-value {
+ margin-top: 10px;
+ margin-left: 100px;
+ opacity: 0.8;
+}
+
+.ui-slider > .ui-state-default {
+ cursor: pointer;
+ width: 32px;
+ height: 32px;
+ background: #0db9f0;
+ border: none;
+ top: -13px;
+ outline: 0;
+ border-radius: 50%;
+
}
\ No newline at end of file
diff --git a/src/app/home/home.html b/src/app/home/home.html
index 79630dd..6ee0b0a 100644
--- a/src/app/home/home.html
+++ b/src/app/home/home.html
@@ -3,7 +3,7 @@
-
+
+
+
+
![]()
-