diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 16e0e13..a94ae7e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -52,6 +52,7 @@ import { LayoutModule } from '@angular/cdk/layout'; import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; import {MatSortModule} from '@angular/material/sort'; +import { SearchComponent } from './components/search/search.component'; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; @@ -86,7 +87,8 @@ const appRoutes: Routes = [ ImprintComponent, AboutComponent, ProfileComponent, - MainNavigationComponent + MainNavigationComponent, + SearchComponent ], imports: [ BrowserModule, diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index 9d3f429..6edf33c 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -8,7 +8,7 @@

What's Greenvironment?

-

We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.

+

We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.

We believe, that together we can do amazing things to protect our environment and keep it clean and green.

diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 1fbc9f5..7e2b5fc 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -7,7 +7,7 @@ - + @@ -24,7 +24,7 @@ - diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index f19be8d..1e5cfef 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -12,6 +12,7 @@ import { User } from 'src/app/models/user'; }) export class FeedComponent implements OnInit { checked: boolean; // if the "I protected the environment."-box is checked + empty: boolean; // points value of the green action value: any; viewNew = true; diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 73af9aa..0949129 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -29,7 +29,13 @@ people - + + + + search + + +
diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html new file mode 100644 index 0000000..e84b9a0 --- /dev/null +++ b/src/app/components/search/search.component.html @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass new file mode 100644 index 0000000..daf5583 --- /dev/null +++ b/src/app/components/search/search.component.sass @@ -0,0 +1,29 @@ + +#search + width: 100% + height: 100% + +#input + min-width: 60% + padding-left: 0.5em + padding-right: 0.5em + +#category-chooser + padding-left: 0.5em + padding-right: 0.5em + +#friendlist + padding: 0.5em + +.friend-card + box-sizing: border-box + width: 100% + margin-top: 0.5em + cursor: pointer + + .mat-card-subtitle + margin: 0 + +.profile-picture + background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) + background-size: cover \ No newline at end of file diff --git a/src/app/components/search/search.component.spec.ts b/src/app/components/search/search.component.spec.ts new file mode 100644 index 0000000..101d71d --- /dev/null +++ b/src/app/components/search/search.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { SearchComponent } from './search.component'; + +describe('ChatComponent', () => { + let component: SearchComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts new file mode 100644 index 0000000..c9f8646 --- /dev/null +++ b/src/app/components/search/search.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit} from '@angular/core'; +import { SearchService } from 'src/app/services/search/search.service'; +import {Headers, Http} from '@angular/http'; +import { User } from 'src/app/models/user'; +import {environment} from 'src/environments/environment'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'home-search', + templateUrl: './search.component.html', + styleUrls: ['./search.component.sass'] +}) +export class SearchComponent implements OnInit { + searchValue = ' '; + category = 'username'; + foundUsers: Array; + + constructor(private searchService: SearchService, private http: Http, private router: Router) { } + ngOnInit() { + } + + changeCategory(value: string) { + this.category = value; + this.search(this.searchValue); + } + + search(searchWord: string) { + this.foundUsers = Array(); + this.searchValue = searchWord; + if (searchWord) { + if (this.category === 'username') { + this.findUserByName(searchWord); + } else if (this.category === 'handle') { + this.findUserByHandle(searchWord); + } + } + } + + findUserByName(name: String) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.searchService.buildJsonName(name)) + .subscribe(response => { + this.foundUsers = this.searchService.renderUsers(response.json()); + }); + } + + findUserByHandle(name: String) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.searchService.buildJsonHandle(name)) + .subscribe(response => { + this.foundUsers = this.searchService.renderUsers(response.json()); + }); + } + + public showUserProfile(user: User) { + console.log(user); + this.router.navigate(['profile/' + user.userID]); + } +} + diff --git a/src/app/components/social/social.component.html b/src/app/components/social/social.component.html index 95daf35..b3fbb5f 100644 --- a/src/app/components/social/social.component.html +++ b/src/app/components/social/social.component.html @@ -1,2 +1,23 @@ - - +
+ + + + people + + + + + + + search + + + + +
+
+ + +
+ + diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 615281b..4453391 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -6,6 +6,7 @@ export class User { email: string; points: number; level: number; + profilePicture: string; friendIDs: number[]; groupIDs: number[]; diff --git a/src/app/services/search/search.service.spec.ts b/src/app/services/search/search.service.spec.ts new file mode 100644 index 0000000..5571a32 --- /dev/null +++ b/src/app/services/search/search.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { SearchService } from './search.service'; + +describe('SearchService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: SearchService = TestBed.get(SearchService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/search/search.service.ts b/src/app/services/search/search.service.ts new file mode 100644 index 0000000..9360bcc --- /dev/null +++ b/src/app/services/search/search.service.ts @@ -0,0 +1,101 @@ +import {Injectable} from '@angular/core'; +import {Headers, Http} from '@angular/http'; +import {DatasharingService} from '../datasharing.service'; +import {Router} from '@angular/router'; +import {environment} from 'src/environments/environment'; +import { User } from 'src/app/models/user'; + +@Injectable({ + providedIn: 'root' +}) +export class SearchService { + + users: Array; + constructor(private http: Http, private data: DatasharingService, private router: Router) { + } + + public findUserByName(name: String): Array { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + + this.http.post(environment.graphQLUrl, this.buildJsonName(name)) + .subscribe(response => { + this.users = this.renderUsers(response.json()); + }); + return this.users; + } + + public findUserByHandle(handle: string) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + return this.http.post(environment.graphQLUrl, this.buildJsonHandle(handle)) + .subscribe(response => { + console.log(response.text()); + } + ); + } + + public renderUsers(pResponse: any): Array { + const users = new Array(); + if (pResponse.data.findUser === 'null') { + console.log('no user found'); + return null; + } else { + for (const user of pResponse.data.findUser) { + const pUser = new User(); + pUser.profilePicture = user.profilePicture; + pUser.username = user.name; + pUser.userID = user.id; + pUser.handle = user.handle; + pUser.points = user.points; + pUser.level = user.level; + pUser.friendIDs = user.friends; + users.push(pUser); + } + return users; + } + } + + public buildJsonName(name_: String): any { + const body = { + query: `query($name: String) { + findUser(name: $name, first: 100, offset: 0) { + profilePicture, + name, + id, + handle, + points, + level, + friends { + id + } + } + }` + , variables: { + name: name_ + } + }; + return body; + } + public buildJsonHandle(handle_: String): any { + const body = { + query: `query($handle: String) { + findUser(handle: $handle, first: 100, offset: 0) { + profilePicture, + name, + id, + handle, + points, + level, + friends { + id + } + } + }` + , variables: { + handle: handle_ + } + }; + return body; + } +}