From f6b5e2075d43a301dd296fcdbab6aa119e80c13f Mon Sep 17 00:00:00 2001 From: Zemke <florian@zemke.io> Date: Sat, 22 May 2021 10:59:15 +0200 Subject: [PATCH] GH-278 Dynamic application name --- .../main/webapp/app/_modules/shared.module.ts | 3 ++ .../main/webapp/app/_util/email-note.pipe.ts | 8 ++++-- .../main/webapp/app/_util/name.component.ts | 22 +++++++++++++++ cwt-angular/src/main/webapp/app/app.config.ts | 4 +++ .../app/application/applicants.component.html | 2 +- .../app/application/apply.component.html | 2 +- .../main/webapp/app/home/home.component.html | 2 +- .../app/stream/channel-create.component.html | 20 ++++++------- .../app/stream/channel-create.component.ts | 2 ++ .../channel-creation-statement.component.ts | 28 ++++++++++++------- .../app/user-panel/user-panel.component.html | 12 ++++---- .../app/user-panel/user-panel.component.ts | 2 ++ cwt-angular/src/main/webapp/scss/main.scss | 5 ---- 13 files changed, 76 insertions(+), 36 deletions(-) create mode 100644 cwt-angular/src/main/webapp/app/_util/name.component.ts diff --git a/cwt-angular/src/main/webapp/app/_modules/shared.module.ts b/cwt-angular/src/main/webapp/app/_modules/shared.module.ts index 1f481ec5b..2158f44a5 100644 --- a/cwt-angular/src/main/webapp/app/_modules/shared.module.ts +++ b/cwt-angular/src/main/webapp/app/_modules/shared.module.ts @@ -13,6 +13,7 @@ import {CommonModule} from "@angular/common"; import {StandingsOrderPipe} from "../_util/standings-order.pipe"; import {ReplayLinkPipe} from "../_util/replay-link.pipe"; import {EmailNote} from "../_util/email-note.pipe"; +import {NameComponent} from "../_util/name.component"; @NgModule({ imports: [ @@ -32,6 +33,7 @@ import {EmailNote} from "../_util/email-note.pipe"; StandingsOrderPipe, ReplayLinkPipe, EmailNote, + NameComponent, ], exports: [ MarkdownComponent, @@ -43,6 +45,7 @@ import {EmailNote} from "../_util/email-note.pipe"; StandingsOrderPipe, ReplayLinkPipe, EmailNote, + NameComponent, ], providers: [], bootstrap: [], diff --git a/cwt-angular/src/main/webapp/app/_util/email-note.pipe.ts b/cwt-angular/src/main/webapp/app/_util/email-note.pipe.ts index b1238dbf1..b493ebf2f 100644 --- a/cwt-angular/src/main/webapp/app/_util/email-note.pipe.ts +++ b/cwt-angular/src/main/webapp/app/_util/email-note.pipe.ts @@ -1,16 +1,20 @@ -import {Pipe, PipeTransform} from '@angular/core'; +import {Pipe, PipeTransform, Inject} from '@angular/core'; +import {APP_CONFIG, AppConfig} from "../app.config"; @Pipe({ name: 'cwtEmailNote' }) export class EmailNote implements PipeTransform { + constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) { + } + transform(_: null): string { return ` We use this as a source of identification. You can reset your password with it if you happen to forget it, for instance.<br> In spite of that and if at all, we might send you an email once a year to inform you about the upcoming -edition of CWT.<br> +edition of ${this.appConfig.nameShort}.<br> In case you forget your password you can get a new one sent to your email address. So you wouldn’t need to contact the support. ` } diff --git a/cwt-angular/src/main/webapp/app/_util/name.component.ts b/cwt-angular/src/main/webapp/app/_util/name.component.ts new file mode 100644 index 000000000..eddd178f0 --- /dev/null +++ b/cwt-angular/src/main/webapp/app/_util/name.component.ts @@ -0,0 +1,22 @@ +import {Component, Input, Inject} from '@angular/core'; +import {APP_CONFIG, AppConfig} from "../app.config"; + +@Component({ + selector: 'cwt-name', + template: '<span class="text-nowrap">{{result}}</span>' +}) +export class NameComponent { + + @Input() + private short: boolean = false; + + /** + * The name or short name. + */ + public result: string; + + constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) { + this.result = this.short === true ? this.appConfig.nameShort : this.appConfig.nameLong; + } +} + diff --git a/cwt-angular/src/main/webapp/app/app.config.ts b/cwt-angular/src/main/webapp/app/app.config.ts index b21548831..8e155183d 100644 --- a/cwt-angular/src/main/webapp/app/app.config.ts +++ b/cwt-angular/src/main/webapp/app/app.config.ts @@ -8,6 +8,8 @@ export interface AppConfig { liveStreamProducer: string; liveStreamSubscriber: string; twitchBotEndpoint: string; + nameShort: string; + nameLong: string; } export const appConfig: AppConfig = { @@ -16,6 +18,8 @@ export const appConfig: AppConfig = { liveStreamProducer: process.env.liveStreamProducer, liveStreamSubscriber: process.env.liveStreamSubscriber, twitchBotEndpoint: process.env.twitchBotEndpoint, + nameShort: process.env.nameShort, + nameLong: process.env.nameLong, }; export const APP_CONFIG = new InjectionToken<AppConfig>('app.config'); diff --git a/cwt-angular/src/main/webapp/app/application/applicants.component.html b/cwt-angular/src/main/webapp/app/application/applicants.component.html index f671b45bb..ddf875004 100644 --- a/cwt-angular/src/main/webapp/app/application/applicants.component.html +++ b/cwt-angular/src/main/webapp/app/application/applicants.component.html @@ -7,7 +7,7 @@ <h1>Applicants</h1> {{applications.length}} applicant{{applications.length === 1 ? '' : 's'}} for the upcoming edition of - <span class="cwt-label"></span>. + <cwt-name></cwt-name> </p> <p> diff --git a/cwt-angular/src/main/webapp/app/application/apply.component.html b/cwt-angular/src/main/webapp/app/application/apply.component.html index 2083f49c3..f6639b7ed 100644 --- a/cwt-angular/src/main/webapp/app/application/apply.component.html +++ b/cwt-angular/src/main/webapp/app/application/apply.component.html @@ -1,7 +1,7 @@ <h1>Apply</h1> <p class="lead mb-4"> - Apply for playing in the next edition of <span class="cwt-label"></span>. + Apply for playing in the next edition of <cwt-name></cwt-name>. </p> <cwt-markdown [raw]="rules" *ngIf="rules"></cwt-markdown> diff --git a/cwt-angular/src/main/webapp/app/home/home.component.html b/cwt-angular/src/main/webapp/app/home/home.component.html index c126489f9..26ee5b94f 100644 --- a/cwt-angular/src/main/webapp/app/home/home.component.html +++ b/cwt-angular/src/main/webapp/app/home/home.component.html @@ -1,7 +1,7 @@ <cwt-apply-banner [userId]="authenticatedUser?.id" *ngIf="authenticatedUser && tournament" class="float-right"></cwt-apply-banner> <h1 class="mb-1"> - Crespo’s Worms Tournament + <cwt-name></cwt-name> </h1> <div class="position-relative"> diff --git a/cwt-angular/src/main/webapp/app/stream/channel-create.component.html b/cwt-angular/src/main/webapp/app/stream/channel-create.component.html index cabbf0748..3845e21ff 100644 --- a/cwt-angular/src/main/webapp/app/stream/channel-create.component.html +++ b/cwt-angular/src/main/webapp/app/stream/channel-create.component.html @@ -10,7 +10,7 @@ </div> <div class="alert alert-success" *ngIf="channelCreated"> - Your channel has been successfully registered on CWT. + Your channel has been successfully registered on {{nameShort}}. </div> <div class="row justify-content-center" *ngIf="!userAlreadyHasChannel && !channelCreated"> @@ -23,28 +23,28 @@ <h1> </p> <div class="alert alert-info"> <p> - Register your channel to benefit from CWT and Twitch interoperation: + Register your channel to benefit from {{nameShort}} and Twitch interoperation: </p> <p> When you go live a very visible banner will appear on the top - of the page advertising your live stream to the CWT visitors. + of the page advertising your live stream to the {{nameShort}} visitors. </p> <p> - Your live stream broadcasts will be linked to the respective game on the CWT site.<br> - Allowing for easy finding of broadcasts and later watching in the context of CWT. + Your live stream broadcasts will be linked to the respective game on the {{nameShort}} site.<br> + Allowing for easy finding of broadcasts and later watching in the context of {{nameShort}}. </p> <p> You can schedule live streams on games participants of the tournament have scheduled and thereby attract people early on. </p> <p> - These features will only trigger when you include “CWT” in the title of your live stream.<br> - Therefore your Twitch channel will not publish information on CWT if you also perform other - duties with your Twitch channel other than streaming CWT games. + These features will only trigger when you include “{{nameShort}}” in the title of your live stream.<br> + Therefore your Twitch channel will not publish information on {{nameShort}} if you also perform other + duties with your Twitch channel other than streaming {{nameShort}} games. </p> <p> These features are all automated and work best when you include the players’ names as they - are on the CWT site in the title of your live stream. + are on the {{nameShort}} site in the title of your live stream. </p> </div> <form class="mt-4" #channelForm=ngForm (ngSubmit)="submit()"> @@ -59,7 +59,7 @@ <h1> <label for="title">Channel name</label> <input type="text" id="title" required class="form-control" [(ngModel)]="channel.title" name="title" minlength="3" #channelTitle=ngModel> <small class="form-text text-muted"> - The name of your channel how it will appear throughout the CWT website. + The name of your channel how it will appear throughout the {{nameShort}} website. </small> <div class="text-danger" *ngIf="channelTitle.errors && channelTitle.dirty"> <div [hidden]="!channelTitle.errors.minlength"> diff --git a/cwt-angular/src/main/webapp/app/stream/channel-create.component.ts b/cwt-angular/src/main/webapp/app/stream/channel-create.component.ts index a7e76e608..7c19ae977 100644 --- a/cwt-angular/src/main/webapp/app/stream/channel-create.component.ts +++ b/cwt-angular/src/main/webapp/app/stream/channel-create.component.ts @@ -20,9 +20,11 @@ export class ChannelCreateComponent implements OnInit { channelCreated: boolean = false; authUser: JwtUser; loading: boolean = true; + nameShort: string; constructor(private requestService: RequestService, private authService: AuthService, @Inject(APP_CONFIG) private appConfig: AppConfig) { + this.nameShort = this.appConfig.nameShort; } async ngOnInit() { diff --git a/cwt-angular/src/main/webapp/app/user-panel/channel-creation-statement.component.ts b/cwt-angular/src/main/webapp/app/user-panel/channel-creation-statement.component.ts index d3fd35190..0d21953ad 100644 --- a/cwt-angular/src/main/webapp/app/user-panel/channel-creation-statement.component.ts +++ b/cwt-angular/src/main/webapp/app/user-panel/channel-creation-statement.component.ts @@ -1,39 +1,47 @@ -import {Component, Input} from "@angular/core"; +import {Component, Input, Inject} from "@angular/core"; +import {APP_CONFIG, AppConfig} from "../app.config"; @Component({ selector: 'cwt-channel-creation-statement', template: ` <p *ngIf="includeRegisterSentence"> - Register your channel to benefit from CWT and Twitch interoperation: + Register your channel to benefit from {{nameShort}} and Twitch interoperation: </p> <p> When you go live a very visible banner will appear on the top - of the page advertising your live stream to the CWT visitors. + of the page advertising your live stream to the {{nameShort}} visitors. </p> <p> - Your live stream broadcasts will be linked to the respective game on the CWT site.<br> - Allowing for easy finding of broadcasts and later watching in the context of CWT. + Your live stream broadcasts will be linked to the respective game on the {{nameShort}} site.<br> + Allowing for easy finding of broadcasts and later watching in the context of {{nameShort}}. </p> <p> You can schedule live streams on games participants of the tournament have scheduled and thereby attract people early on. </p> <p> - There is a dedicated CWT Twitch chat bot which makes “beep boop” and has some nice commands + There is a dedicated {{nameShort}} Twitch chat bot which makes “beep boop” and has some nice commands to enrich the live streaming experience for your viewers. </p> <p> - These features will only trigger when you include “CWT” in the title of your live stream.<br> - Therefore your Twitch channel will not publish information on CWT if you also perform other - duties with your Twitch channel other than streaming CWT games. + These features will only trigger when you include “{{nameShort}}” in the title of your live stream.<br> + Therefore your Twitch channel will not publish information on {{nameShort}} if you also perform other + duties with your Twitch channel other than streaming {{nameShort}} games. </p> <p> These features are all automated and work best when you include the players’ names as they - are on the CWT site in the title of your live stream. + are on the {{nameShort}} site in the title of your live stream. </p> ` }) export class ChannelCreationStatementComponent { @Input() includeRegisterSentence: boolean = true; + + nameShort: string; + + constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) { + this.nameShort = this.appConfig.nameShort; + console.log(this.appConfig); + } } diff --git a/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.html b/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.html index a4b525b9b..e3592ac7a 100644 --- a/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.html +++ b/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.html @@ -96,7 +96,7 @@ <h2 class="mt-md-0">Twitch</h2> <div class="alert alert-success"> <i class="fa fa-check"></i> <strong>{{userChannel.displayName}}</strong> - is registered on CWT. + is registered on {{nameShort}}. </div> <div class="my-3 card bg-secondary"> <div class="card-body"> @@ -109,12 +109,12 @@ <h2 class="mt-md-0">Twitch</h2> <button (click)="revokeBot()" class="btn btn-danger" *ngIf="botInvited === true" [disabled]="togglingBotInvite"> <i class="fa fa-robot"></i> - Revoke CWT Bot + Revoke {{nameShort}} Bot </button> <button (click)="inviteBot()" class="btn btn-success" *ngIf="botInvited === false" [disabled]="togglingBotInvite"> <i class="fa fa-robot"></i> - Invite CWT Bot + Invite {{nameShort}} Bot </button> <div class="alert alert-success my-3"> <div class="form-check"> @@ -125,15 +125,15 @@ <h2 class="mt-md-0">Twitch</h2> Allow the bot to join by itself </label> <small class="form-text text-muted"> - Everytime you start live streaming with “CWT” in the title of your live stream, + Everytime you start live streaming with “{{nameShort}}” in the title of your live stream, the bot will join the chat and leave once the stream ends. Maximum comfort. </small> </div> </div> </ng-container> <small class="form-text text-muted"> - Let the CWT Bot join your channel, it will provide a few commands - to enrich the experience and also mirror the CWT chat.<br> + Let the {{nameShort}} Bot join your channel, it will provide a few commands + to enrich the experience and also mirror the {{nameShort}} chat.<br> Enter <code>!cwtcommands</code> once it has joined the Twitch chat.<br> You can revoke access at any time. </small> diff --git a/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.ts b/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.ts index 90e61035a..fd276e848 100644 --- a/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.ts +++ b/cwt-angular/src/main/webapp/app/user-panel/user-panel.component.ts @@ -28,6 +28,7 @@ export class UserPanelComponent implements OnInit { botInvited: boolean = null; botRequestFailed: boolean = false; togglingBotAutoJoin: boolean = false; + nameShort: string; private authUser: JwtUser; // @ts-ignore @@ -38,6 +39,7 @@ export class UserPanelComponent implements OnInit { private toastr: Toastr, private binaryService: BinaryService, @Inject(APP_CONFIG) private appConfig: AppConfig) { + this.nameShort = this.appConfig.nameShort; } async ngOnInit() { diff --git a/cwt-angular/src/main/webapp/scss/main.scss b/cwt-angular/src/main/webapp/scss/main.scss index 066e97881..5283ee8d5 100644 --- a/cwt-angular/src/main/webapp/scss/main.scss +++ b/cwt-angular/src/main/webapp/scss/main.scss @@ -463,11 +463,6 @@ body { color: #fff !important; } -.cwt-label:before { - content: 'Crespo’s Worms Tournament'; - white-space: nowrap; -} - .btn-group-justified { display: table; width: 100%;