From 93b99003a08267c358cf02ffa0793a146874bc96 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 24 Dec 2019 01:18:47 +0100 Subject: [PATCH 1/3] implemented search function --- src/app/app.module.ts | 4 +- src/app/components/home/home.component.html | 8 +- .../components/search/search.component.html | 41 +++++++ .../components/search/search.component.sass | 29 +++++ .../search/search.component.spec.ts | 24 +++++ src/app/components/search/search.component.ts | 62 +++++++++++ .../components/social/social.component.html | 19 +++- src/app/models/user.ts | 1 + .../services/search/search.service.spec.ts | 12 +++ src/app/services/search/search.service.ts | 101 ++++++++++++++++++ 10 files changed, 297 insertions(+), 4 deletions(-) create mode 100644 src/app/components/search/search.component.html create mode 100644 src/app/components/search/search.component.sass create mode 100644 src/app/components/search/search.component.spec.ts create mode 100644 src/app/components/search/search.component.ts create mode 100644 src/app/services/search/search.service.spec.ts create mode 100644 src/app/services/search/search.service.ts 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/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..76b7e62 --- /dev/null +++ b/src/app/components/search/search.component.html @@ -0,0 +1,41 @@ + \ 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..ab66fee --- /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: string; + 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..ff9addb 100644 --- a/src/app/components/social/social.component.html +++ b/src/app/components/social/social.component.html @@ -1,2 +1,17 @@ - - + + + + 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; + } +} From ce072d41b10b5dec3c1a25f930cc6d05c805a39d Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 24 Dec 2019 11:17:21 +0100 Subject: [PATCH 2/3] fixed spelling mistake, post button is now hidden when post is empty --- src/app/components/about/about.component.html | 2 +- src/app/components/feed/feed.component.html | 4 ++-- src/app/components/feed/feed.component.ts | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) 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; From 1c096cd655293843f0b774885e13527bc4b426f9 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 24 Dec 2019 11:31:43 +0100 Subject: [PATCH 3/3] fixed search field --- .../components/search/search.component.html | 7 ++-- src/app/components/search/search.component.ts | 2 +- .../components/social/social.component.html | 36 +++++++++++-------- 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html index 76b7e62..e84b9a0 100644 --- a/src/app/components/search/search.component.html +++ b/src/app/components/search/search.component.html @@ -3,8 +3,11 @@ -