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