-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): add support for sub paths (#67)
- Loading branch information
Showing
7 changed files
with
346 additions
and
23 deletions.
There are no files selected for viewing
105 changes: 105 additions & 0 deletions
105
frontend/src/app/cloud-http-proxy/cloud-http-proxy-path/cloud-http-proxy-path.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <div class="viewport-modal"> | ||
| <div class="modal-header dialog-header"> | ||
| <i c8yIcon="wrench"></i> | ||
| <h4 id="modal-title">{{ "Cloud HTTP proxy paths" | translate }}</h4> | ||
| </div> | ||
| <div class="modal-inner-scroll"> | ||
| <div id="modal-body" class="bg-component"> | ||
| <div class="p-4"> | ||
| <p> | ||
| This section allows you to define specific pathes per configuration | ||
| that you can directly navigate to. Instead of navigating to the root | ||
| path ("/") on the web server, you can provide a specific path here or | ||
| even multiple ones. | ||
| </p> | ||
| <div> | ||
| <fieldset class="c8y-fieldset" *ngIf="configs.length"> | ||
| <legend translate>Configured paths</legend> | ||
| <div *ngFor="let item of configs" class="d-flex j-c-center"> | ||
| <c8y-form-group> | ||
| <label for="headerValue">{{ item.label }}</label> | ||
| <div class="input-group"> | ||
| <input | ||
| class="form-control" | ||
| id="headerValue" | ||
| [ngModel]="item.path" | ||
| type="text" | ||
| disabled="" | ||
| /> | ||
| <div class="input-group-btn"> | ||
| <button | ||
| class="btn-dot btn-dot--danger" | ||
| (click)="removePath(item.path)" | ||
| [attr.aria-label]="'Remove'" | ||
| > | ||
| <i c8yIcon="minus-circle"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </c8y-form-group> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| <div> | ||
| <fieldset class="c8y-fieldset"> | ||
| <legend translate>New path</legend> | ||
| <div class="d-flex a-i-center j-c-around"> | ||
| <c8y-form-group> | ||
| <label for="headerKey" translate>Label</label> | ||
| <input | ||
| class="form-control" | ||
| id="headerKey" | ||
| [(ngModel)]="newValue.label" | ||
| type="text" | ||
| placeholder="e.g. Dashboard" | ||
| /> | ||
| </c8y-form-group> | ||
|
|
||
| <c8y-form-group> | ||
| <label for="headerValue" translate>Path</label> | ||
| <input | ||
| class="form-control" | ||
| id="headerValue" | ||
| [(ngModel)]="newValue.path" | ||
| type="text" | ||
| placeholder="e.g. /dashboard/" | ||
| /> | ||
| </c8y-form-group> | ||
| </div> | ||
| <div class="d-flex a-i-center j-c-around"> | ||
| <button | ||
| type="button" | ||
| class="btn btn-default m-b-8" | ||
| (click)="addPath()" | ||
| [disabled]="!newValue.label || !newValue.path" | ||
| > | ||
| <i c8yIcon="plus"></i> | ||
| Add Path | ||
| </button> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <button | ||
| class="btn btn-primary" | ||
| type="button" | ||
| title="{{ 'Save' | translate }}" | ||
| (click)="save()" | ||
| > | ||
| {{ "Save" | translate }} | ||
| </button> | ||
| <button | ||
| class="btn btn-default" | ||
| type="button" | ||
| title="{{ 'Cancel' | translate }}" | ||
| (click)="cancel()" | ||
| > | ||
| {{ "Cancel" | translate }} | ||
| </button> | ||
| </div> | ||
| </div> |
68 changes: 68 additions & 0 deletions
68
frontend/src/app/cloud-http-proxy/cloud-http-proxy-path/cloud-http-proxy-path.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { CloudHTTPProxyPathConfig, CloudHTTPProxyPathConfigs, RemoteAccessService } from './remote-access.service'; | ||
| import { KeyValuePipe, NgFor } from '@angular/common'; | ||
| import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
| import { CoreModule, NavigatorService, TabsService } from '@c8y/ngx-components'; | ||
| import { IManagedObject } from '@c8y/client'; | ||
| import { BsModalRef } from 'ngx-bootstrap/modal'; | ||
|
|
||
| @Component({ | ||
| selector: 'cloud-http-proxy-path', | ||
| templateUrl: './cloud-http-proxy-path.component.html', | ||
| standalone: true, | ||
| imports: [NgFor, ReactiveFormsModule, FormsModule, KeyValuePipe, CoreModule] | ||
| }) | ||
| export class CloudHttpProxyPathComponent implements OnInit { | ||
| device: IManagedObject | undefined; | ||
| configs: CloudHTTPProxyPathConfig[] = []; | ||
| allConfigs: CloudHTTPProxyPathConfigs | undefined; | ||
| cloudProxyConfigId: string | undefined; | ||
|
|
||
| newValue: CloudHTTPProxyPathConfig = this.resetNewValue(); | ||
|
|
||
| constructor(private remoteAccess: RemoteAccessService, private modalRef: BsModalRef, private tabs: TabsService) { | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| console.log(this.device); | ||
| this.allConfigs = this.device?.[RemoteAccessService.pathFragment] || {}; | ||
| if (!this.cloudProxyConfigId || !this.allConfigs) { | ||
| this.configs = []; | ||
| return; | ||
| } | ||
| this.configs = this.allConfigs[this.cloudProxyConfigId] || []; | ||
| } | ||
|
|
||
| removePath(path: string) { | ||
| this.configs = this.configs.filter(config => config.path !== path); | ||
| } | ||
|
|
||
| addPath() { | ||
| this.configs.push(this.newValue); | ||
| this.newValue = this.resetNewValue(); | ||
| } | ||
|
|
||
| cancel() { | ||
| this.modalRef.hide(); | ||
| } | ||
|
|
||
| async save() { | ||
| if (!this.cloudProxyConfigId || !this.device || !this.allConfigs) { | ||
| return; | ||
| } | ||
| this.allConfigs[this.cloudProxyConfigId] = this.configs; | ||
| await this.remoteAccess.updatePathConfig(this.device.id, this.allConfigs); | ||
| this.device[RemoteAccessService.pathFragment] = this.allConfigs; | ||
| this.tabs.refresh(); | ||
| this.modalRef.hide(); | ||
| } | ||
|
|
||
| private resetNewValue() { | ||
| return { | ||
| label: '', | ||
| path: '' | ||
| }; | ||
| } | ||
|
|
||
| } |
30 changes: 30 additions & 0 deletions
30
frontend/src/app/cloud-http-proxy/cloud-http-proxy-path/remote-access.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { FetchClient, InventoryService } from '@c8y/client'; | ||
|
|
||
| export interface CloudHTTPProxyPathConfig { | ||
| path: string; | ||
| label: string; | ||
| } | ||
|
|
||
| export interface CloudHTTPProxyPathConfigs { | ||
| [key: string]: CloudHTTPProxyPathConfig[]; | ||
| } | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class RemoteAccessService { | ||
| static pathFragment = 'cloudHTTPProxyPathConfigs'; | ||
|
|
||
| constructor(private inventory: InventoryService) {} | ||
|
|
||
| async updatePathConfig(deviceId: string, config: CloudHTTPProxyPathConfigs) { | ||
| const response = await this.inventory.update({ | ||
| id: deviceId, | ||
| [RemoteAccessService.pathFragment]: config | ||
| }); | ||
|
|
||
| return response.data[RemoteAccessService.pathFragment]; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 35 additions & 5 deletions
40
frontend/src/app/cloud-http-proxy/cloud-http-proxy.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.