TelegramAktienBot/frontend/documentation/components/BotSettingsComponent.html

1235 lines
45 KiB
HTML
Raw Normal View History

2022-05-03 08:59:36 +00:00
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>aktienbot documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="../" class="navbar-brand">aktienbot documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li
>
BotSettingsComponent</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li >
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
<li >
<a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
</li>
<li >
<a href="#styleData" role="tab" id="styleData-tab" data-toggle="tab" data-link="style">Styles</a>
</li>
<li >
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="c-info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/app/Views/bot-settings/bot-settings.component.ts</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>app-bot-settings</code></td>
</tr>
<tr>
<td class="col-md-3">styleUrls</td>
<td class="col-md-9"><code>./bot-settings.component.scss</code></td>
</tr>
<tr>
<td class="col-md-3">templateUrl</td>
<td class="col-md-9"><code>./bot-settings.component.html</code></td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#addOnBlur" >addOnBlur</a>
</li>
<li>
<a href="#cronForm" >cronForm</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#cronOptions" >cronOptions</a>
</li>
<li>
<a href="#keywords" >keywords</a>
</li>
<li>
<span class="modifier">Readonly</span>
<a href="#separatorKeysCodes" >separatorKeysCodes</a>
</li>
<li>
<a href="#shares" >shares</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Async</span>
<a href="#addKeyword" >addKeyword</a>
</li>
<li>
<span class="modifier">Async</span>
<a href="#addShare" >addShare</a>
</li>
<li>
<a href="#ngOnInit" >ngOnInit</a>
</li>
<li>
<span class="modifier">Async</span>
<a href="#removeKeyword" >removeKeyword</a>
</li>
<li>
<span class="modifier">Async</span>
<a href="#removeShare" >removeShare</a>
</li>
<li>
<a href="#setCronString" >setCronString</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(botService: <a href="../injectables/BotService.html" target="_self">BotService</a>, helper: <a href="../injectables/HelperService.html" target="_self">HelperService</a>, profileService: <a href="../injectables/ProfileService.html" target="_self">ProfileService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:31</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>botService</td>
<td>
<code><a href="../injectables/BotService.html" target="_self" >BotService</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>helper</td>
<td>
<code><a href="../injectables/HelperService.html" target="_self" >HelperService</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>profileService</td>
<td>
<code><a href="../injectables/ProfileService.html" target="_self" >ProfileService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="addKeyword"></a>
<span class="name">
<span class="modifier">Async</span>
<span ><b>addKeyword</b></span>
<a href="#addKeyword"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>addKeyword(event: MatChipInputEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="47"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:47</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
<code>MatChipInputEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise&lt;void&gt;</code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="addShare"></a>
<span class="name">
<span class="modifier">Async</span>
<span ><b>addShare</b></span>
<a href="#addShare"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>addShare(event: MatChipInputEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="79"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:79</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
<code>MatChipInputEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise&lt;void&gt;</code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnInit"></a>
<span class="name">
<span ><b>ngOnInit</b></span>
<a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="39"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:39</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="removeKeyword"></a>
<span class="name">
<span class="modifier">Async</span>
<span ><b>removeKeyword</b></span>
<a href="#removeKeyword"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>removeKeyword(keyword: <a href="../interfaces/Keyword.html" target="_self">Keyword</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="68"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:68</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>keyword</td>
<td>
<code><a href="../interfaces/Keyword.html" target="_self" >Keyword</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise&lt;void&gt;</code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="removeShare"></a>
<span class="name">
<span class="modifier">Async</span>
<span ><b>removeShare</b></span>
<a href="#removeShare"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>removeShare(share: <a href="../interfaces/Share.html" target="_self">Share</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="101"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:101</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>share</td>
<td>
<code><a href="../interfaces/Share.html" target="_self" >Share</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise&lt;void&gt;</code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setCronString"></a>
<span class="name">
<span ><b>setCronString</b></span>
<a href="#setCronString"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>setCronString()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="112"
class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:112</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="addOnBlur"></a>
<span class="name">
<span ><b>addOnBlur</b></span>
<a href="#addOnBlur"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:44</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cronForm"></a>
<span class="name">
<span ><b>cronForm</b></span>
<a href="#cronForm"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new FormControl(&#x27;0 0 1/1 * *&#x27;)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:120</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cronOptions"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>cronOptions</b></span>
<a href="#cronOptions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>CronOptions</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
defaultTime: &#x27;00:00:00&#x27;,
hideMinutesTab: true,
hideHourlyTab: true,
hideDailyTab: false,
hideWeeklyTab: true,
hideMonthlyTab: true,
hideYearlyTab: true,
hideAdvancedTab: true,
hideSpecificWeekDayTab: true,
hideSpecificMonthWeekTab: true,
use24HourTime: true,
hideSeconds: true,
cronFlavor: &#x27;quartz&#x27;, //standard or quartz
}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="keywords"></a>
<span class="name">
<span ><b>keywords</b></span>
<a href="#keywords"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/Keyword.html" target="_self" >Keyword[]</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:30</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="separatorKeysCodes"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>separatorKeysCodes</b></span>
<a href="#separatorKeysCodes"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[ENTER, COMMA] as const</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:45</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="shares"></a>
<span class="name">
<span ><b>shares</b></span>
<a href="#shares"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/Share.html" target="_self" >Share[]</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/Views/bot-settings/bot-settings.component.ts:31</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit } from &#x27;@angular/core&#x27;;
import { C, COMMA, ENTER, F } from &#x27;@angular/cdk/keycodes&#x27;;
import { MatChipInputEvent } from &#x27;@angular/material/chips&#x27;;
import { CronOptions } from &#x27;ngx-cron-editor&#x27;;
import { BotService } from &#x27;src/app/Services/bot.service&#x27;;
import { HelperService } from &#x27;src/app/Helpers/helper.service&#x27;;
import { ProfileService } from &#x27;src/app/Services/profile.service&#x27;;
import { FormControl } from &#x27;@angular/forms&#x27;;
export interface Fruit {
name: string;
}
export interface Share {
isin: string;
}
export interface Keyword {
name: string;
}
@Component({
selector: &#x27;app-bot-settings&#x27;,
templateUrl: &#x27;./bot-settings.component.html&#x27;,
styleUrls: [&#x27;./bot-settings.component.scss&#x27;],
})
export class BotSettingsComponent implements OnInit {
keywords: Keyword[] &#x3D; [];
shares: Share[] &#x3D; [];
constructor(
private botService: BotService,
private helper: HelperService,
private profileService: ProfileService
) {}
ngOnInit(): void {
this.shares &#x3D; this.helper.formatShareData();
this.keywords &#x3D; this.helper.formatKeywordsData();
}
addOnBlur &#x3D; true;
readonly separatorKeysCodes &#x3D; [ENTER, COMMA] as const;
async addKeyword(event: MatChipInputEvent): Promise&lt;void&gt; {
const value &#x3D; (event.value || &#x27;&#x27;).trim();
// Add keyword to database
if (value &amp;&amp; !this.keywords.includes({ name: value })) {
console.log(&#x27;Added: &#x27; + value);
this.botService.createKeyword(value.toLowerCase()).subscribe((result) &#x3D;&gt; {
console.log(result);
});
}
// Clear the input value
event.chipInput!.clear();
if (value) {
await this.helper.delay(1000);
this.keywords &#x3D; [];
this.keywords &#x3D; this.helper.formatKeywordsData();
}
}
async removeKeyword(keyword: Keyword): Promise&lt;void&gt; {
this.botService.deleteKeyword(keyword.name).subscribe((result) &#x3D;&gt; {
console.log(result);
});
await this.helper.delay(1000);
this.keywords &#x3D; [];
this.keywords &#x3D; this.helper.formatKeywordsData();
}
async addShare(event: MatChipInputEvent): Promise&lt;void&gt; {
const value &#x3D; (event.value || &#x27;&#x27;).trim();
// Add share to database
if (value &amp;&amp; !this.shares.includes({ isin: value.toLowerCase() })) {
console.log(&#x27;Added: &#x27; + value);
this.botService.createShare(value, &#x27;Comment&#x27;).subscribe((result) &#x3D;&gt; {
console.log(result);
});
}
// Clear the input value
event.chipInput!.clear();
if (value) {
await this.helper.delay(1000);
this.shares &#x3D; [];
this.shares &#x3D; this.helper.formatShareData();
}
}
async removeShare(share: Share): Promise&lt;void&gt; {
this.botService.deleteShare(share.isin).subscribe((result) &#x3D;&gt; {
console.log(result);
});
await this.helper.delay(1000);
this.shares &#x3D; [];
this.shares &#x3D; this.helper.formatShareData();
}
setCronString() {
this.profileService
.addCronString(this.cronForm.value)
.subscribe((result) &#x3D;&gt; {
console.log(result);
});
}
cronForm &#x3D; new FormControl(&#x27;0 0 1/1 * *&#x27;);
public cronOptions: CronOptions &#x3D; {
defaultTime: &#x27;00:00:00&#x27;,
hideMinutesTab: true,
hideHourlyTab: true,
hideDailyTab: false,
hideWeeklyTab: true,
hideMonthlyTab: true,
hideYearlyTab: true,
hideAdvancedTab: true,
hideSpecificWeekDayTab: true,
hideSpecificMonthWeekTab: true,
use24HourTime: true,
hideSeconds: true,
cronFlavor: &#x27;quartz&#x27;, //standard or quartz
};
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-templateData">
<pre class="line-numbers"><code class="language-html">&lt;mat-grid-list cols&#x3D;&quot;2&quot; rowHeight&#x3D;&quot;45%&quot;&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;1&quot;&gt;
&lt;mat-card class&#x3D;&quot;card&quot;&gt;
&lt;mat-card-title class&#x3D;&quot;card-title&quot;&gt;Keywords&lt;/mat-card-title&gt;
&lt;mat-card-content&gt;
&lt;mat-form-field class&#x3D;&quot;example-chip-list&quot; appearance&#x3D;&quot;fill&quot;&gt;
&lt;mat-label&gt;Keywords&lt;/mat-label&gt;
&lt;mat-chip-list #chipList aria-label&#x3D;&quot;Keyword selection&quot;&gt;
&lt;mat-chip
*ngFor&#x3D;&quot;let keyword of keywords&quot;
(removed)&#x3D;&quot;removeKeyword(keyword)&quot;
&gt;
{{ keyword.name }}
&lt;button matChipRemove&gt;
&lt;mat-icon&gt;cancel&lt;/mat-icon&gt;
&lt;/button&gt;
&lt;/mat-chip&gt;
&lt;input
placeholder&#x3D;&quot;New keyword...&quot;
[matChipInputFor]&#x3D;&quot;chipList&quot;
[matChipInputSeparatorKeyCodes]&#x3D;&quot;separatorKeysCodes&quot;
[matChipInputAddOnBlur]&#x3D;&quot;addOnBlur&quot;
(matChipInputTokenEnd)&#x3D;&quot;addKeyword($event)&quot;
/&gt;
&lt;/mat-chip-list&gt;
&lt;/mat-form-field&gt;
&lt;span
&gt;*To add a keyword, after writing, either press enter or click outside
of keyword input field.&lt;/span
&gt;
&lt;/mat-card-content&gt;
&lt;/mat-card&gt;
&lt;/mat-grid-tile&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;2&quot;&gt;
&lt;mat-card class&#x3D;&quot;card placeholderRHS&quot;&gt;
&lt;mat-card-title class&#x3D;&quot;card-title&quot;&gt;
&lt;span&gt;Add automatic updates&lt;/span&gt;
&lt;/mat-card-title&gt;
&lt;mat-card-content class&#x3D;&quot;cron-content&quot;&gt;
&lt;form
name&#x3D;&quot;form&quot;
(ngSubmit)&#x3D;&quot;f.form.valid &amp;&amp; setCronString()&quot;
#f&#x3D;&quot;ngForm&quot;
novalidate
class&#x3D;&quot;backgorund form&quot;
&gt;
&lt;cron-editor
class&#x3D;&quot;cron-editor&quot;
[formControl]&#x3D;&quot;cronForm&quot;
[options]&#x3D;&quot;cronOptions&quot;
&gt;&lt;/cron-editor&gt;
&lt;div class&#x3D;&quot;form-group footer-buttons&quot;&gt;
&lt;button class&#x3D;&quot;btn btn-primary btn-block&quot;&gt;Add&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/mat-card-content&gt;
&lt;/mat-card&gt;
&lt;/mat-grid-tile&gt;
&lt;mat-grid-tile colspan&#x3D;&quot;1&quot; rowspan&#x3D;&quot;1&quot;&gt;
&lt;mat-card class&#x3D;&quot;card&quot;&gt;
&lt;mat-card-title class&#x3D;&quot;card-title&quot;&gt;Shares&lt;/mat-card-title&gt;
&lt;mat-card-content&gt;
&lt;mat-form-field class&#x3D;&quot;example-chip-list&quot; appearance&#x3D;&quot;fill&quot;&gt;
&lt;mat-label&gt;Shares&lt;/mat-label&gt;
&lt;mat-chip-list #sharesList aria-label&#x3D;&quot;Share selection&quot;&gt;
&lt;mat-chip
*ngFor&#x3D;&quot;let share of shares&quot;
(removed)&#x3D;&quot;removeShare(share)&quot;
&gt;
{{ share.isin }}
&lt;button matChipRemove&gt;
&lt;mat-icon&gt;cancel&lt;/mat-icon&gt;
&lt;/button&gt;
&lt;/mat-chip&gt;
&lt;input
placeholder&#x3D;&quot;New share...&quot;
[matChipInputFor]&#x3D;&quot;sharesList&quot;
[matChipInputSeparatorKeyCodes]&#x3D;&quot;separatorKeysCodes&quot;
[matChipInputAddOnBlur]&#x3D;&quot;addOnBlur&quot;
(matChipInputTokenEnd)&#x3D;&quot;addShare($event)&quot;
/&gt;
&lt;/mat-chip-list&gt;
&lt;/mat-form-field&gt;
&lt;span
&gt;*To add a share, after writing, either press enter or click outside
of keyword input field.&lt;/span
&gt;
&lt;/mat-card-content&gt;
&lt;/mat-card&gt;
&lt;/mat-grid-tile&gt;
&lt;/mat-grid-list&gt;
</code></pre>
</div>
<div class="tab-pane fade " id="c-styleData">
<p class="comment">
<code>./bot-settings.component.scss</code>
</p>
<pre class="line-numbers"><code class="language-scss">.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;
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><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></div>'
var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BotSettingsComponent', 'selector': 'app-bot-settings'},{'name': 'ConfirmationDialogComponent', 'selector': 'app-confirmation-dialog'},{'name': 'DashboardComponent', 'selector': 'app-dashboard'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HelpDialogComponent', 'selector': 'app-help-dialog'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'ProfileComponent', 'selector': 'app-profile'},{'name': 'RegisterComponent', 'selector': 'app-register'},{'name': 'UserDialogComponent', 'selector': 'app-user-dialog'}];
var DIRECTIVES = [];
var ACTUAL_COMPONENT = {'name': 'BotSettingsComponent'};
</script>
<script src="../js/tree.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'BotSettingsComponent.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>