File
Implements
Methods
Async
addKeyword
|
addKeyword(event: MatChipInputEvent)
|
|
Parameters :
Name |
Type |
Optional |
event |
MatChipInputEvent
|
No
|
Returns : Promise<void>
|
Async
addShare
|
addShare(event: MatChipInputEvent)
|
|
Parameters :
Name |
Type |
Optional |
event |
MatChipInputEvent
|
No
|
Returns : Promise<void>
|
Async
removeKeyword
|
removeKeyword(keyword: Keyword)
|
|
Parameters :
Name |
Type |
Optional |
keyword |
Keyword
|
No
|
Returns : Promise<void>
|
Async
removeShare
|
removeShare(share: Share)
|
|
Parameters :
Name |
Type |
Optional |
share |
Share
|
No
|
Returns : Promise<void>
|
setCronString
|
setCronString()
|
|
|
addOnBlur
|
Default value : true
|
|
cronForm
|
Default value : new FormControl('0 0 1/1 * *')
|
|
Public
cronOptions
|
Type : CronOptions
|
Default value : {
defaultTime: '00:00:00',
hideMinutesTab: true,
hideHourlyTab: true,
hideDailyTab: false,
hideWeeklyTab: true,
hideMonthlyTab: true,
hideYearlyTab: true,
hideAdvancedTab: true,
hideSpecificWeekDayTab: true,
hideSpecificMonthWeekTab: true,
use24HourTime: true,
hideSeconds: true,
cronFlavor: 'quartz', //standard or quartz
}
|
|
Readonly
separatorKeysCodes
|
Default value : [ENTER, COMMA] as const
|
|
shares
|
Type : Share[]
|
Default value : []
|
|
import { Component, OnInit } from '@angular/core';
import { C, COMMA, ENTER, F } from '@angular/cdk/keycodes';
import { MatChipInputEvent } from '@angular/material/chips';
import { CronOptions } from 'ngx-cron-editor';
import { BotService } from 'src/app/Services/bot.service';
import { HelperService } from 'src/app/Helpers/helper.service';
import { ProfileService } from 'src/app/Services/profile.service';
import { FormControl } from '@angular/forms';
export interface Fruit {
name: string;
}
export interface Share {
isin: string;
}
export interface Keyword {
name: string;
}
@Component({
selector: 'app-bot-settings',
templateUrl: './bot-settings.component.html',
styleUrls: ['./bot-settings.component.scss'],
})
export class BotSettingsComponent implements OnInit {
keywords: Keyword[] = [];
shares: Share[] = [];
constructor(
private botService: BotService,
private helper: HelperService,
private profileService: ProfileService
) {}
ngOnInit(): void {
this.shares = this.helper.formatShareData();
this.keywords = this.helper.formatKeywordsData();
}
addOnBlur = true;
readonly separatorKeysCodes = [ENTER, COMMA] as const;
async addKeyword(event: MatChipInputEvent): Promise<void> {
const value = (event.value || '').trim();
// Add keyword to database
if (value && !this.keywords.includes({ name: value })) {
console.log('Added: ' + value);
this.botService.createKeyword(value.toLowerCase()).subscribe((result) => {
console.log(result);
});
}
// Clear the input value
event.chipInput!.clear();
if (value) {
await this.helper.delay(1000);
this.keywords = [];
this.keywords = this.helper.formatKeywordsData();
}
}
async removeKeyword(keyword: Keyword): Promise<void> {
this.botService.deleteKeyword(keyword.name).subscribe((result) => {
console.log(result);
});
await this.helper.delay(1000);
this.keywords = [];
this.keywords = this.helper.formatKeywordsData();
}
async addShare(event: MatChipInputEvent): Promise<void> {
const value = (event.value || '').trim();
// Add share to database
if (value && !this.shares.includes({ isin: value.toLowerCase() })) {
console.log('Added: ' + value);
this.botService.createShare(value, 'Comment').subscribe((result) => {
console.log(result);
});
}
// Clear the input value
event.chipInput!.clear();
if (value) {
await this.helper.delay(1000);
this.shares = [];
this.shares = this.helper.formatShareData();
}
}
async removeShare(share: Share): Promise<void> {
this.botService.deleteShare(share.isin).subscribe((result) => {
console.log(result);
});
await this.helper.delay(1000);
this.shares = [];
this.shares = this.helper.formatShareData();
}
setCronString() {
this.profileService
.addCronString(this.cronForm.value)
.subscribe((result) => {
console.log(result);
});
}
cronForm = new FormControl('0 0 1/1 * *');
public cronOptions: CronOptions = {
defaultTime: '00:00:00',
hideMinutesTab: true,
hideHourlyTab: true,
hideDailyTab: false,
hideWeeklyTab: true,
hideMonthlyTab: true,
hideYearlyTab: true,
hideAdvancedTab: true,
hideSpecificWeekDayTab: true,
hideSpecificMonthWeekTab: true,
use24HourTime: true,
hideSeconds: true,
cronFlavor: 'quartz', //standard or quartz
};
}
<mat-grid-list cols="2" rowHeight="45%">
<mat-grid-tile colspan="1" rowspan="1">
<mat-card class="card">
<mat-card-title class="card-title">Keywords</mat-card-title>
<mat-card-content>
<mat-form-field class="example-chip-list" appearance="fill">
<mat-label>Keywords</mat-label>
<mat-chip-list #chipList aria-label="Keyword selection">
<mat-chip
*ngFor="let keyword of keywords"
(removed)="removeKeyword(keyword)"
>
{{ keyword.name }}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input
placeholder="New keyword..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addKeyword($event)"
/>
</mat-chip-list>
</mat-form-field>
<span
>*To add a keyword, after writing, either press enter or click outside
of keyword input field.</span
>
</mat-card-content>
</mat-card>
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="2">
<mat-card class="card placeholderRHS">
<mat-card-title class="card-title">
<span>Add automatic updates</span>
</mat-card-title>
<mat-card-content class="cron-content">
<form
name="form"
(ngSubmit)="f.form.valid && setCronString()"
#f="ngForm"
novalidate
class="backgorund form"
>
<cron-editor
class="cron-editor"
[formControl]="cronForm"
[options]="cronOptions"
></cron-editor>
<div class="form-group footer-buttons">
<button class="btn btn-primary btn-block">Add</button>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-grid-tile>
<mat-grid-tile colspan="1" rowspan="1">
<mat-card class="card">
<mat-card-title class="card-title">Shares</mat-card-title>
<mat-card-content>
<mat-form-field class="example-chip-list" appearance="fill">
<mat-label>Shares</mat-label>
<mat-chip-list #sharesList aria-label="Share selection">
<mat-chip
*ngFor="let share of shares"
(removed)="removeShare(share)"
>
{{ share.isin }}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input
placeholder="New share..."
[matChipInputFor]="sharesList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addShare($event)"
/>
</mat-chip-list>
</mat-form-field>
<span
>*To add a share, after writing, either press enter or click outside
of keyword input field.</span
>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
.form {
width: 100%;
}
.card {
width: 90%;
height: 80%;
margin: 5%;
}
.example-full-width {
width: 100%;
}
.card-title {
padding-bottom: 2.5vh;
}
mat-grid {
width: 100%;
height: 100%;
}
.example-chip-list {
width: 100%;
}
.placeholder {
height: 95%;
}
.placeholderRHS {
height: 90%;
}
.cron-content {
height: 70%;
overflow: auto;
}
mat-card {
overflow: scroll;
}
Legend
Html element with directive