Browse Source
- Create TbIotHubItemsPageComponent with hero section (title, description, illustration, installed items button, contribute link) per item type - Add separate routes: /iot-hub/widgets, /iot-hub/dashboards, /iot-hub/solution-templates, /iot-hub/calculated-fields, /iot-hub/rule-chains, /iot-hub/devices - Remove old /iot-hub/browse route, update all navigation links - Browse component: add @Input activeType and hideTabs for embedded use - Home component: navigateToBrowse now routes to type-specific pages - Add item type page description translationspull/15508/head
Igor Kulikov
6 months ago
10 changed files with 356 additions and 20 deletions
@ -0,0 +1,52 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2026 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-iot-hub-items-page"> |
|||
<!-- Back link --> |
|||
<button mat-button color="primary" class="tb-iot-hub-back-btn" (click)="goBack()"> |
|||
<mat-icon>chevron_left</mat-icon> |
|||
{{ 'iot-hub.back-to-iot-hub' | translate }} |
|||
</button> |
|||
|
|||
<!-- Hero section --> |
|||
<div class="tb-iot-hub-items-hero"> |
|||
<div class="tb-iot-hub-items-hero-text"> |
|||
<h1 class="tb-iot-hub-items-title">{{ config.titleKey | translate }}</h1> |
|||
<p class="tb-iot-hub-items-desc">{{ config.descriptionKey | translate }}</p> |
|||
<div class="tb-iot-hub-items-actions"> |
|||
@if (installedItemsCount > 0) { |
|||
<button mat-stroked-button color="primary" class="tb-iot-hub-items-installed-btn" (click)="navigateToInstalledItems()"> |
|||
<mat-icon>inventory_2</mat-icon> |
|||
{{ 'iot-hub.installed-items' | translate }}: {{ installedItemsCount }} |
|||
</button> |
|||
} |
|||
<button mat-button color="primary" (click)="openSignup()"> |
|||
{{ 'iot-hub.contribute' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="tb-iot-hub-items-hero-image"> |
|||
<img [src]="config.image" alt=""> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Browse component (without tabs) --> |
|||
<tb-iot-hub-browse |
|||
[activeType]="config.type" |
|||
[hideTabs]="true"> |
|||
</tb-iot-hub-browse> |
|||
</div> |
|||
@ -0,0 +1,92 @@ |
|||
/** |
|||
* Copyright © 2016-2026 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 "../../../../../scss/constants"; |
|||
|
|||
:host { |
|||
display: block; |
|||
padding: 16px; |
|||
} |
|||
|
|||
.tb-iot-hub-items-page { |
|||
background: white; |
|||
border-radius: 8px; |
|||
padding: 40px 40px 0; |
|||
} |
|||
|
|||
.tb-iot-hub-back-btn { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
// Hero section |
|||
.tb-iot-hub-items-hero { |
|||
display: flex; |
|||
gap: 40px; |
|||
margin-bottom: 40px; |
|||
} |
|||
|
|||
.tb-iot-hub-items-hero-text { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.tb-iot-hub-items-title { |
|||
font-size: 40px; |
|||
font-weight: 500; |
|||
line-height: 48px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0 0 12px; |
|||
} |
|||
|
|||
.tb-iot-hub-items-desc { |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
margin: 0 0 24px; |
|||
max-width: 500px; |
|||
} |
|||
|
|||
.tb-iot-hub-items-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 16px; |
|||
} |
|||
|
|||
.tb-iot-hub-items-installed-btn { |
|||
&.mat-primary { |
|||
--mat-button-outlined-outline-color: #{$tb-primary-color}; |
|||
} |
|||
} |
|||
|
|||
.tb-iot-hub-items-hero-image { |
|||
width: 400px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
max-height: 200px; |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
|
|||
// Browse component — stretch to fill, ignore parent padding |
|||
tb-iot-hub-browse { |
|||
margin-left: -40px; |
|||
margin-right: -40px; |
|||
} |
|||
@ -0,0 +1,115 @@ |
|||
///
|
|||
/// Copyright © 2016-2026 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, OnInit } from '@angular/core'; |
|||
import { ActivatedRoute, Router } from '@angular/router'; |
|||
import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models'; |
|||
import { IotHubApiService } from '@core/http/iot-hub-api.service'; |
|||
|
|||
interface ItemTypePageConfig { |
|||
type: ItemType; |
|||
titleKey: string; |
|||
descriptionKey: string; |
|||
image: string; |
|||
routeSegment: string; |
|||
} |
|||
|
|||
const PAGE_CONFIGS: Record<string, ItemTypePageConfig> = { |
|||
WIDGET: { |
|||
type: ItemType.WIDGET, |
|||
titleKey: 'item.type-widget-plural', |
|||
descriptionKey: 'iot-hub.items-page-desc-widgets', |
|||
image: 'assets/iot-hub/category-widgets-img.svg', |
|||
routeSegment: 'widgets' |
|||
}, |
|||
DASHBOARD: { |
|||
type: ItemType.DASHBOARD, |
|||
titleKey: 'item.type-dashboard-plural', |
|||
descriptionKey: 'iot-hub.items-page-desc-dashboards', |
|||
image: 'assets/iot-hub/category-dashboards-img.svg', |
|||
routeSegment: 'dashboards' |
|||
}, |
|||
SOLUTION_TEMPLATE: { |
|||
type: ItemType.SOLUTION_TEMPLATE, |
|||
titleKey: 'item.type-solution-template-plural', |
|||
descriptionKey: 'iot-hub.items-page-desc-solution-templates', |
|||
image: 'assets/iot-hub/category-solution-templates-img.png', |
|||
routeSegment: 'solution-templates' |
|||
}, |
|||
CALCULATED_FIELD: { |
|||
type: ItemType.CALCULATED_FIELD, |
|||
titleKey: 'item.type-calculated-field-plural', |
|||
descriptionKey: 'iot-hub.items-page-desc-calculated-fields', |
|||
image: 'assets/iot-hub/category-calculated-fields-img.svg', |
|||
routeSegment: 'calculated-fields' |
|||
}, |
|||
RULE_CHAIN: { |
|||
type: ItemType.RULE_CHAIN, |
|||
titleKey: 'item.type-rule-chain-plural', |
|||
descriptionKey: 'iot-hub.items-page-desc-rule-chains', |
|||
image: 'assets/iot-hub/category-rule-chains-img.svg', |
|||
routeSegment: 'rule-chains' |
|||
}, |
|||
DEVICE: { |
|||
type: ItemType.DEVICE, |
|||
titleKey: 'iot-hub.device-library', |
|||
descriptionKey: 'iot-hub.items-page-desc-devices', |
|||
image: 'assets/iot-hub/category-device-library-img.svg', |
|||
routeSegment: 'devices' |
|||
} |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'tb-iot-hub-items-page', |
|||
standalone: false, |
|||
templateUrl: './iot-hub-items-page.component.html', |
|||
styleUrls: ['./iot-hub-items-page.component.scss'] |
|||
}) |
|||
export class TbIotHubItemsPageComponent implements OnInit { |
|||
|
|||
config: ItemTypePageConfig; |
|||
installedItemsCount = 0; |
|||
|
|||
constructor( |
|||
private route: ActivatedRoute, |
|||
private router: Router, |
|||
private iotHubApiService: IotHubApiService |
|||
) {} |
|||
|
|||
ngOnInit(): void { |
|||
const itemType = this.route.snapshot.data['itemType'] as string; |
|||
this.config = PAGE_CONFIGS[itemType]; |
|||
this.loadInstalledCount(); |
|||
} |
|||
|
|||
goBack(): void { |
|||
this.router.navigate(['/iot-hub']); |
|||
} |
|||
|
|||
navigateToInstalledItems(): void { |
|||
this.router.navigate(['/iot-hub/installed']); |
|||
} |
|||
|
|||
openSignup(): void { |
|||
window.open('https://iothub.thingsboard.io/signup', '_blank'); |
|||
} |
|||
|
|||
private loadInstalledCount(): void { |
|||
this.iotHubApiService.getInstalledItemsCount(this.config.type, { ignoreLoading: true }).subscribe(count => { |
|||
this.installedItemsCount = count; |
|||
}); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue