Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master
Trivernis
5 years ago
committed by
Gitea
commit
0fdbd0f1ff
@ -0,0 +1,44 @@
|
||||
<div id="search">
|
||||
<!--<mat-toolbar><span>Search</span></mat-toolbar>-->
|
||||
<mat-card >
|
||||
<mat-card-content>
|
||||
<mat-form-field id="input">
|
||||
<textarea matInput #searchWord type="search"
|
||||
mat-autosize="false"
|
||||
matAutosizeMaxRows="1"
|
||||
placeholder="search something"
|
||||
[ngModel]="searchWord.value"
|
||||
(ngModelChange)="search(searchWord.value)"></textarea>
|
||||
<button mat-button matSuffix mat-icon-button>
|
||||
<mat-icon>search </mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<mat-form-field id="category-chooser">
|
||||
<mat-label>category</mat-label>
|
||||
<mat-select value="username" #field (selectionChange)="changeCategory($event.value)">
|
||||
<mat-option value="username">username</mat-option>
|
||||
<mat-option value="handle">handle</mat-option>
|
||||
<mat-option value="groupname" disabled>groupname</mat-option>
|
||||
<mat-option value="grouphandle" disabled>grouphandle</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div id="friendlist">
|
||||
<!--<div class="frienditem" *ngFor="let friend of friends"
|
||||
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
|
||||
<div class="picture">Pic</div>
|
||||
<div class="name"><span>{{friend.name}}</span></div>
|
||||
</div>-->
|
||||
<mat-card class="friend-card" *ngFor="let user of foundUsers"
|
||||
[class.selected]="user === selectedUser" (click)="showUserProfile(user)"
|
||||
tabindex="0"
|
||||
matRipple>
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="profile-picture"></div>
|
||||
<mat-card-title>{{user.username}}</mat-card-title>
|
||||
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -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
|
||||
@ -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<SearchComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SearchComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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<User>;
|
||||
|
||||
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<User>();
|
||||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,23 @@
|
||||
<social-friends id="friendscontainer"></social-friends>
|
||||
<social-groups id="groupscontainer"></social-groups>
|
||||
<div id="content" fxShow="true" fxHide.lt-md="true">
|
||||
<mat-tab-group selectedIndex="0" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>people</mat-icon>
|
||||
</ng-template>
|
||||
<social-friends id="friendscontainer"></social-friends>
|
||||
<social-groups id="groupscontainer"></social-groups>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>search</mat-icon>
|
||||
</ng-template>
|
||||
<home-search class="tab-content"></home-search>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<div fxShow="true" fxHide.gt-sm="true">
|
||||
<social-friends id="friendscontainer"></social-friends>
|
||||
<social-groups id="groupscontainer"></social-groups>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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<User>;
|
||||
constructor(private http: Http, private data: DatasharingService, private router: Router) {
|
||||
}
|
||||
|
||||
public findUserByName(name: String): Array<User> {
|
||||
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<User> {
|
||||
const users = new Array<User>();
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue