Igor Kulikov
3 years ago
18 changed files with 536 additions and 41 deletions
@ -0,0 +1,31 @@ |
|||
{ |
|||
"widgetsBundle": { |
|||
"alias": "home_page_widgets", |
|||
"title": "Home page widgets", |
|||
"image": null, |
|||
"description": null, |
|||
"externalId": null, |
|||
"name": "Home page widgets" |
|||
}, |
|||
"widgetTypes": [ |
|||
{ |
|||
"alias": "documentation_links", |
|||
"name": "Documentation links", |
|||
"image": null, |
|||
"description": null, |
|||
"descriptor": { |
|||
"type": "static", |
|||
"sizeX": 7.5, |
|||
"sizeY": 3, |
|||
"resources": [], |
|||
"templateHtml": "<tb-doc-links-widget\n [ctx]=\"ctx\">\n</tb-doc-links-widget>\n", |
|||
"templateCss": "", |
|||
"controllerScript": "self.onInit = function() {\n}", |
|||
"settingsSchema": "", |
|||
"dataKeySettingsSchema": "", |
|||
"settingsDirective": "tb-doc-links-widget-settings", |
|||
"defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"columns\":3},\"title\":\"Documentation links\",\"dropShadow\":true}" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px"> |
|||
<div class="tb-card-header"> |
|||
<a class="tb-title-link" href="https://thingsboard.io/docs/" target="_blank">Documentation</a> |
|||
<button class="tb-title-icon" |
|||
matTooltip="Edit" |
|||
matTooltipPosition="above" |
|||
mat-icon-button |
|||
(click)="edit()"> |
|||
<mat-icon>edit</mat-icon> |
|||
</button> |
|||
</div> |
|||
<mat-grid-list fxFlex [cols]="columns" rowHeight="fit" gutterSize="12px"> |
|||
<mat-grid-tile class="tb-docs-tile" *ngFor="let docLink of documentationLinks?.links"> |
|||
<a fxFlex class="tb-doc-button" |
|||
[href]="docLink.link" target="_blank"> |
|||
<div class="tb-doc-container"> |
|||
<div class="tb-doc-icon-container"> |
|||
<mat-icon color="primary">{{ docLink.icon }}</mat-icon> |
|||
</div> |
|||
<div class="tb-doc-text">{{ docLink.name }}</div> |
|||
</div> |
|||
</a> |
|||
</mat-grid-tile> |
|||
<mat-grid-tile class="tb-docs-tile"> |
|||
<div fxFlex class="tb-add-doc-button" |
|||
matTooltip="Add link" |
|||
matTooltipPosition="above" |
|||
(click)="addLink()"> |
|||
<mat-icon class="tb-add-icon">add</mat-icon> |
|||
</div> |
|||
</mat-grid-tile> |
|||
</mat-grid-list> |
|||
</div> |
|||
@ -0,0 +1,124 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
.tb-card-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.tb-card-header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.tb-title-link { |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
position: relative; |
|||
border-bottom: none; |
|||
&:hover, &:focus { |
|||
border-bottom: none; |
|||
} |
|||
&::after { |
|||
content: 'arrow_forward'; |
|||
display: inline-block; |
|||
position: absolute; |
|||
top: -2px; |
|||
right: -28px; |
|||
transform: rotate(315deg); |
|||
font-family: 'Material Icons'; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
font-size: 18px; |
|||
color: rgba(0, 0, 0, 0.12); |
|||
} |
|||
&:hover::after { |
|||
color: inherit; |
|||
} |
|||
} |
|||
|
|||
.tb-title-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
width: 32px; |
|||
height: 32px; |
|||
padding: 4px; |
|||
} |
|||
|
|||
.mat-grid-tile.tb-docs-tile { |
|||
overflow: visible; |
|||
} |
|||
|
|||
.tb-doc-button { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding: 12px; |
|||
background: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); |
|||
border-radius: 10px; |
|||
&:hover { |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08); |
|||
} |
|||
.tb-doc-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.tb-doc-icon-container { |
|||
height: 40px; |
|||
padding: 8px; |
|||
background: #F3F6FA; |
|||
border-radius: 6px; |
|||
margin-right: 8px; |
|||
} |
|||
.tb-doc-text { |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tb-add-doc-button { |
|||
height: 100%; |
|||
cursor: pointer; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #FFFFFF; |
|||
padding: 12px; |
|||
border: 2px dashed rgba(0, 0, 0, 0.08); |
|||
border-radius: 10px; |
|||
.tb-add-icon { |
|||
color: rgba(0, 0, 0, 0.12); |
|||
} |
|||
&:hover { |
|||
.tb-add-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
import { map } from 'rxjs'; |
|||
import { DocumentationLinks } from '@shared/models/user-settings.models'; |
|||
import { UserSettingsService } from '@core/http/user-settings.service'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
|
|||
const defaultDocLinksMap = new Map<Authority, DocumentationLinks>( |
|||
[ |
|||
[Authority.SYS_ADMIN, { |
|||
links: [ |
|||
{ |
|||
icon: 'rocket', |
|||
name: 'Getting started', |
|||
link: 'https://thingsboard.io/docs/getting-started-guides/helloworld/' |
|||
}, |
|||
{ |
|||
icon: 'title', |
|||
name: 'Tenant profiles', |
|||
link: 'https://thingsboard.io/docs/user-guide/tenant-profiles/' |
|||
}, |
|||
{ |
|||
icon: 'insert_chart', |
|||
name: 'API', |
|||
link: 'https://thingsboard.io/docs/api/' |
|||
}, |
|||
{ |
|||
icon: 'now_widgets', |
|||
name: 'Widgets Library', |
|||
link: 'https://thingsboard.io/docs/user-guide/ui/widget-library/' |
|||
} |
|||
] |
|||
}], |
|||
[Authority.TENANT_ADMIN, { |
|||
links: [ |
|||
{ |
|||
icon: 'rocket', |
|||
name: 'Getting started', |
|||
link: 'https://thingsboard.io/docs/getting-started-guides/helloworld/' |
|||
}, |
|||
{ |
|||
icon: 'settings_ethernet', |
|||
name: 'Rule engine', |
|||
link: 'https://thingsboard.io/docs/user-guide/rule-engine-2-0/re-getting-started/' |
|||
}, |
|||
{ |
|||
icon: 'insert_chart', |
|||
name: 'API', |
|||
link: 'https://thingsboard.io/docs/api/' |
|||
}, |
|||
{ |
|||
icon: 'devices', |
|||
name: 'Device profiles', |
|||
link: 'https://thingsboard.io/docs/user-guide/device-profiles/' |
|||
} |
|||
] |
|||
}], |
|||
[Authority.CUSTOMER_USER, { |
|||
links: [] |
|||
}] |
|||
] |
|||
); |
|||
|
|||
interface DocLinksWidgetSettings { |
|||
columns: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-doc-links-widget', |
|||
templateUrl: './doc-links-widget.component.html', |
|||
styleUrls: ['./doc-links-widget.component.scss'] |
|||
}) |
|||
export class DocLinksWidgetComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
settings: DocLinksWidgetSettings; |
|||
columns: number; |
|||
|
|||
documentationLinks: DocumentationLinks; |
|||
authUser = getCurrentAuthUser(this.store); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private cd: ChangeDetectorRef, |
|||
private userSettingsService: UserSettingsService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.settings = this.ctx.settings; |
|||
this.columns = this.settings.columns || 3; |
|||
this.userSettingsService.getDocumentationLinks().pipe( |
|||
map((documentationLinks) => { |
|||
if (!documentationLinks || !documentationLinks.links) { |
|||
return defaultDocLinksMap.get(this.authUser.authority); |
|||
} else { |
|||
return documentationLinks; |
|||
} |
|||
}) |
|||
).subscribe( |
|||
(documentationLinks) => { |
|||
this.documentationLinks = documentationLinks; |
|||
this.cd.markForCheck(); |
|||
} |
|||
); |
|||
} |
|||
|
|||
edit() { |
|||
|
|||
} |
|||
|
|||
addLink() { |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<section class="tb-widget-settings" [formGroup]="docLinksWidgetSettingsForm" fxLayout="column"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label>Columns</mat-label> |
|||
<input required matInput type="number" step="1" min="1" max="20" formControlName="columns"> |
|||
</mat-form-field> |
|||
</section> |
|||
@ -0,0 +1,52 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component } from '@angular/core'; |
|||
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-doc-links-widget-settings', |
|||
templateUrl: './doc-links-widget-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss'] |
|||
}) |
|||
export class DocLinksWidgetSettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
docLinksWidgetSettingsForm: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): UntypedFormGroup { |
|||
return this.docLinksWidgetSettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return { |
|||
columns: 3 |
|||
}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.docLinksWidgetSettingsForm = this.fb.group({ |
|||
columns: [settings.columns, [Validators.required, Validators.min(1), Validators.max(20)]] |
|||
}); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue