mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:11:32 +00:00
Code Issues Releases Wiki Activity

Refactor message buttons using Records for mapping

Browse Source
This commit is contained in:
Gabor PEK 2020-06-22 12:19:33 +02:00
parent aacd8aea60
commit d92f3da04d
5 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/dashboard/dashboard.component.scss
View File

@ -57,7 +57,7 @@
.tfw-messages { .tfw-messages {
// Check whether the layout contains a web component // Check whether the layout contains a web component
div[class*="web"] & { div[class*="web"] & {
border: 2px solid $tao-base-color; border: 2px solid $tao-base-color;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-bottom: 0; border-bottom: 0;

10
src/app/message-types/bot-messages.ts
View File

@ -1,17 +1,15 @@
import { WebSocketMessage } from './websocket-message'; import { WebSocketMessage } from './websocket-message';
export type MessageButton = 'yes' | 'no' | 'fix' | 'hint' | 'solution' | 'next';
export type MessageButtonMap = Record<MessageButton, {caption: string}>;
export interface MessageData { export interface MessageData {
originator?: string; originator?: string;
timestamp?: Date; timestamp?: Date;
typing?: boolean; typing?: boolean;
buttons?: Array<'yes'|'no'|'solution'|'hint'|'fix'>; buttons?: MessageButton[];
command?: any; command?: any;
message: string; message: string;
} }
export interface MessageButton {
[Key: string]: string;
}
export interface Message extends MessageData, WebSocketMessage {} export interface Message extends MessageData, WebSocketMessage {}

2
src/app/messages/messages.component.html
View File

@ -15,7 +15,7 @@
<button *ngFor="let button of message.buttons" <button *ngFor="let button of message.buttons"
class="{{button}}" class="{{button}}"
(click)="sendButtonCommand(button)"> (click)="sendButtonCommand(button)">
{{buttons[button] | capitalize}} {{buttonMap[button].caption}}
</button> </button>
</div> </div>
</div> </div>

3
src/app/messages/messages.component.scss
View File

@ -12,7 +12,7 @@
padding: $hair; padding: $hair;
border-radius: $tao-panel-border-radius-sm; border-radius: $tao-panel-border-radius-sm;
font-size: $font-size-base; font-size: $font-size-base;
margin-bottom: 8px; margin-bottom: $hair;
animation-name: inflate; animation-name: inflate;
animation-duration: 0.5s; animation-duration: 0.5s;
@ -131,6 +131,7 @@
.tfw-grid-message-body { .tfw-grid-message-body {
@include word-break(); @include word-break();
line-height: 26px;
& p { & p {
margin-bottom: $tiny !important; margin-bottom: $tiny !important;

16
src/app/messages/messages.component.ts
View File

@ -1,5 +1,5 @@
import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
import { MessageData, Message, MessageButton } from '../message-types/bot-messages'; import {MessageData, Message, MessageButton, MessageButtonMap} from '../message-types/bot-messages';
import { MarkdownService } from '../services/markdown.service'; import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service'; import { WebSocketService } from '../services/websocket.service';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@ -14,13 +14,13 @@ export class MessagesComponent implements OnInit {
newMessage: Subject<MessageData> = new Subject<MessageData>(); newMessage: Subject<MessageData> = new Subject<MessageData>();
showTypingIndicator = false; showTypingIndicator = false;
messages: MessageData[] = []; messages: MessageData[] = [];
buttons: MessageButton = { buttonMap: MessageButtonMap = {
'yes' : 'Yes', fix: {caption: 'Ready to fix'},
'no' : 'No', solution: {caption: 'Show solution'},
'fix' : 'Ready to fix', hint: {caption: 'Hint'},
'solution' : 'Show solution', next: {caption: 'Next'},
'hint' : 'Hint', yes: {caption: 'Yes'},
'next' : 'Next', no: {caption: 'No'},
}; };
constructor( constructor(