Unsere GitLab-Installation wurde aktualisiert (Informationen zu den Neuerungen).

Add emojis to the available nicknames

parent ae4cb0d2
This diff is collapsed.
......@@ -28,16 +28,16 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.5",
"@angular/common": "^5.0.5",
"@angular/compiler": "^5.0.5",
"@angular/core": "^5.0.5",
"@angular/forms": "^5.0.5",
"@angular/http": "^5.0.5",
"@angular/platform-browser": "^5.0.5",
"@angular/platform-browser-dynamic": "^5.0.5",
"@angular/router": "^5.0.5",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.6",
"@angular/animations": "^5.1.0",
"@angular/common": "^5.1.0",
"@angular/compiler": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/forms": "^5.1.0",
"@angular/http": "^5.1.0",
"@angular/platform-browser": "^5.1.0",
"@angular/platform-browser-dynamic": "^5.1.0",
"@angular/router": "^5.1.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"@techiediaries/ngx-qrcode": "0.0.5",
......@@ -51,18 +51,18 @@
"ngx-qrcode2": "0.0.5",
"ngx-translate-messageformat-compiler": "^2.0.1",
"popper.js": "^1.13.0",
"rxjs": "^5.5.4",
"rxjs": "^5.5.5",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@angular/cli": "^1.5.5",
"@angular/compiler-cli": "^5.0.5",
"@angular/language-service": "^5.0.5",
"@angular/cli": "^1.6.0",
"@angular/compiler-cli": "^5.1.0",
"@angular/language-service": "^5.1.0",
"@types/jasmine": "^2.8.2",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.0.55",
"@types/node": "^8.0.58",
"arsnova-click-v2-types": "git+https://git.thm.de/arsnova/arsnova-click-v2-types.git",
"codelyzer": "~4.0.1",
"codelyzer": "^4.0.2",
"http-server": "^0.10.0",
"imagemin-pngquant": "^5.0.1",
"jasmine-core": "~2.8.0",
......@@ -74,7 +74,7 @@
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.7.2",
"protractor": "~5.2.0",
"protractor": "^5.2.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.3",
......@@ -82,7 +82,7 @@
"ts-node": "~3.3.0",
"tslint": "~5.8.0",
"typescript": "2.4.2",
"uglify-js": "^3.2.1"
"uglify-js": "^3.2.2"
},
"keywords": [
"arsnova",
......
<div class="row">
<div class="col-12 nicknameFilter">
<input type="text"
class="rounded p-1 w-100 mb-3"
[placeholder]="'component.nickname_categories.filter' | translate"
(input)="filterForKeyword($event)"/>
</div>
<div class="col-12 nickCategoryWrapper"
[class.col-sm-4]="hasSelectedCategory()">
<div class="row">
<div *ngFor="let cat of availableNickCategories()"
class="nickCategory pointer col-6"
[class.disabled]="!getNumberOfAvailableNicksForCategory(cat)"
[class.selectedCategory]="hasSelectedCategory(cat)"
[class.col-sm-12]="hasSelectedCategory()"
[class.col-sm-6]="!hasSelectedCategory()"
......@@ -26,7 +33,7 @@
(click)="selectNick(nick)"
class="nickStyle nickName pointer"
[class.selectedNickName]="hasSelectedNick(nick)">
<span [innerHTML]="nick" class="nickName"></span>
<span [innerHTML]="parseAvailableNick(nick)" class="nickName d-inline-block pb-1"></span>
</div>
</div>
</div>
......@@ -9,15 +9,28 @@ h3 {
.selectedNickName {
text-decoration: underline;
.nickName {
border-bottom: 1px solid;
}
}
.nickCategory {
.nickCategoryText {
background: white;
cursor: pointer;
border-radius: 10px;
padding: 10px;
margin: 1px;
}
&.disabled {
.nickCategoryText {
background: #d0d0d0;
cursor: not-allowed;
}
}
}
.selectedCategory {
......
......@@ -3,6 +3,9 @@ import {FooterBarService} from '../../../service/footer-bar.service';
import {ActiveQuestionGroupService} from 'app/service/active-question-group.service';
import {DefaultSettings} from '../../../../lib/default.settings';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {parseGithubFlavoredMarkdown} from '../../../../lib/markdown/markdown';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {IAvailableNicks} from 'arsnova-click-v2-types/src/common';
@Component({
selector: 'app-nickname-manager',
......@@ -14,14 +17,22 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
return this._selectedCategory;
}
set availableNicks(value: IAvailableNicks) {
this._availableNicks = value;
this._availableNicks.emojis = this._availableNicks.emojis.map(nick => this.sanitizeHTML(parseGithubFlavoredMarkdown(nick)));
this._availableNicksBackup = Object.assign({}, value);
}
get availableNicks() {
return this._availableNicks;
}
private _availableNicks = {};
private _availableNicks: IAvailableNicks;
private _availableNicksBackup: IAvailableNicks;
private _selectedCategory = '';
private _previousSearchValue = '';
constructor(
private sanitizer: DomSanitizer,
private activeQuestionGroupService: ActiveQuestionGroupService,
private footerBarService: FooterBarService,
private http: HttpClient) {
......@@ -32,11 +43,43 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
]);
}
filterForKeyword(event: Event): void {
const searchValue = (<HTMLInputElement>event.target).value;
if (searchValue.length < this._previousSearchValue.length) {
this._availableNicks = Object.assign({}, this._availableNicksBackup);
}
this._previousSearchValue = searchValue;
if (!searchValue.length) {
return;
}
Object.keys(this._availableNicks).forEach(category => {
this._availableNicks[category] = this._availableNicks[category].filter(baseNick => {
return baseNick.toString().toLowerCase().indexOf(searchValue) > -1;
});
});
}
sanitizeHTML(value: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(`${value}`);
}
parseAvailableNick(name: string): SafeHtml {
return name;
}
availableNickCategories(): Array<string> {
return Object.keys(this._availableNicks);
return Object.keys(this._availableNicks || {});
}
toggleSelectedCategory(name: string): void {
if (!this.getNumberOfAvailableNicksForCategory(name)) {
return;
}
this._selectedCategory = this._selectedCategory === name ? '' : name;
}
......@@ -89,8 +132,8 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
headers.append('Accept', 'application/json');
this.http.get(`${DefaultSettings.httpApiEndpoint}/nicks/predefined`, {headers})
.subscribe(
data => {
this._availableNicks = data;
(data: IAvailableNicks) => {
this.availableNicks = data;
},
error => {
console.log(error);
......