diff --git a/package-lock.json b/package-lock.json
index e0abb0a..588003a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,12 +23,16 @@
"@fortawesome/fontawesome-svg-core": "6.4.0",
"@fortawesome/free-solid-svg-icons": "6.4.0",
"@material/theme": "^15.0.0-canary.b994146f6.0",
- "@ng-bootstrap/ng-bootstrap": "15.1.0",
+ "@ng-bootstrap/ng-bootstrap": "^15.1.0",
"@popperjs/core": "2.11.8",
+ "@types/jquery": "^3.5.17",
"axios": "^1.4.0",
- "bootstrap": "5.3.0",
+ "bootstrap": "^5.3.1",
"dayjs": "1.11.9",
+ "jquery": "^3.7.1",
+ "ngx-bootstrap": "^11.0.2",
"ngx-infinite-scroll": "16.0.0",
+ "popper.js": "^1.16.1",
"rxjs": "7.8.1",
"tslib": "2.6.0",
"zone.js": "0.13.1"
@@ -6230,6 +6234,14 @@
"pretty-format": "^29.0.0"
}
},
+ "node_modules/@types/jquery": {
+ "version": "3.5.17",
+ "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.17.tgz",
+ "integrity": "sha512-U40tNEAGSTZ7R1OC6kGkD7f4TKW5DoVx6jd9kTB9mo5truFMi1m9Yohnw9kl1WpTPvDdj7zAw38LfCHSqnk5kA==",
+ "dependencies": {
+ "@types/sizzle": "*"
+ }
+ },
"node_modules/@types/jsdom": {
"version": "20.0.1",
"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
@@ -6340,6 +6352,11 @@
"@types/node": "*"
}
},
+ "node_modules/@types/sizzle": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+ "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+ },
"node_modules/@types/sockjs": {
"version": "0.3.33",
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -8538,9 +8555,9 @@
"dev": true
},
"node_modules/bootstrap": {
- "version": "5.3.0",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
- "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+ "version": "5.3.1",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+ "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
"funding": [
{
"type": "github",
@@ -8552,7 +8569,7 @@
}
],
"peerDependencies": {
- "@popperjs/core": "^2.11.7"
+ "@popperjs/core": "^2.11.8"
}
},
"node_modules/bplist-parser": {
@@ -16576,6 +16593,11 @@
"@sideway/pinpoint": "^2.0.0"
}
},
+ "node_modules/jquery": {
+ "version": "3.7.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+ "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18210,6 +18232,21 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
+ "node_modules/ngx-bootstrap": {
+ "version": "11.0.2",
+ "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-11.0.2.tgz",
+ "integrity": "sha512-McvQ72XB6692Jus47jahWWwjpSCa6EtHMIqoyMewKCEHMv0ybDgVnOAdEsWKvwfulowHn7Y/jDjeiURwYJG9cQ==",
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/animations": "^16.0.0",
+ "@angular/common": "^16.0.0",
+ "@angular/core": "^16.0.0",
+ "@angular/forms": "^16.0.0",
+ "rxjs": "^6.5.3 || ^7.6.0"
+ }
+ },
"node_modules/ngx-infinite-scroll": {
"version": "16.0.0",
"resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-16.0.0.tgz",
@@ -19512,6 +19549,16 @@
"node": ">=4"
}
},
+ "node_modules/popper.js": {
+ "version": "1.16.1",
+ "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+ "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+ "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/portscanner": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
diff --git a/package.json b/package.json
index 7bda1d5..4311ee6 100755
--- a/package.json
+++ b/package.json
@@ -80,12 +80,16 @@
"@fortawesome/fontawesome-svg-core": "6.4.0",
"@fortawesome/free-solid-svg-icons": "6.4.0",
"@material/theme": "^15.0.0-canary.b994146f6.0",
- "@ng-bootstrap/ng-bootstrap": "15.1.0",
+ "@ng-bootstrap/ng-bootstrap": "^15.1.0",
"@popperjs/core": "2.11.8",
+ "@types/jquery": "^3.5.17",
"axios": "^1.4.0",
- "bootstrap": "5.3.0",
+ "bootstrap": "^5.3.1",
"dayjs": "1.11.9",
+ "jquery": "^3.7.1",
+ "ngx-bootstrap": "^11.0.2",
"ngx-infinite-scroll": "16.0.0",
+ "popper.js": "^1.16.1",
"rxjs": "7.8.1",
"tslib": "2.6.0",
"zone.js": "0.13.1"
diff --git a/src/main/webapp/app/dyn-tab/dyn-tab.component.html b/src/main/webapp/app/dyn-tab/dyn-tab.component.html
new file mode 100644
index 0000000..8fff5b0
--- /dev/null
+++ b/src/main/webapp/app/dyn-tab/dyn-tab.component.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/src/main/webapp/app/dyn-tab/dyn-tab.component.scss b/src/main/webapp/app/dyn-tab/dyn-tab.component.scss
new file mode 100644
index 0000000..ebffcb0
--- /dev/null
+++ b/src/main/webapp/app/dyn-tab/dyn-tab.component.scss
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
+
+#hn-table-title {
+ text-align: center;
+ color: teal;
+ padding-bottom: 3%;
+}
+
+#detail-title {
+ text-align: left;
+ color: teal;
+ padding-top: 3%;
+ padding-bottom: 2%;
+}
+
+.pane {
+ padding: 1em;
+}
diff --git a/src/main/webapp/app/dyn-tab/dyn-tab.component.ts b/src/main/webapp/app/dyn-tab/dyn-tab.component.ts
new file mode 100644
index 0000000..881bcac
--- /dev/null
+++ b/src/main/webapp/app/dyn-tab/dyn-tab.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ selector: 'jhi-dyn-tab',
+ templateUrl: './dyn-tab.component.html',
+ styleUrls: ['./dyn-tab.component.scss'],
+})
+export class DynTabComponent {
+ @Input() tabTitle: string | undefined;
+ @Input() active = false;
+ @Input() isCloseable = false;
+ @Input() template: any;
+ @Input() dataContext: any;
+}
diff --git a/src/main/webapp/app/dyn-tabs.directive.ts b/src/main/webapp/app/dyn-tabs.directive.ts
new file mode 100644
index 0000000..49e6063
--- /dev/null
+++ b/src/main/webapp/app/dyn-tabs.directive.ts
@@ -0,0 +1,9 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+ standalone: true,
+ selector: '[jhiDynTabs]',
+})
+export class DynTabsDirective {
+ constructor(public viewContainer: ViewContainerRef) {}
+}
diff --git a/src/main/webapp/app/dyn-tabs/dyn-tabs.component.html b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.html
new file mode 100644
index 0000000..f5b1f05
--- /dev/null
+++ b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.html
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/main/webapp/app/dyn-tabs/dyn-tabs.component.scss b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.scss
new file mode 100644
index 0000000..a72ccd3
--- /dev/null
+++ b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.scss
@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
+
+.nav-tabs .nav-link,
+.nav-tabs .nav-link:hover {
+ border: 0;
+ font-size: 115%;
+ border-bottom: 0;
+ color: slategray;
+}
+
+.nav-tabs .nav-link:hover {
+ color: darkslategrey;
+}
+
+.nav-tabs .nav-link.active {
+ color: teal;
+ border-radius: 0;
+ border-bottom: 3px solid teal;
+}
+
+#hn-table-title {
+ text-align: center;
+ color: teal;
+ padding-bottom: 3%;
+}
+
+.tab-close {
+ color: gray;
+ text-align: right;
+ cursor: pointer;
+}
diff --git a/src/main/webapp/app/dyn-tabs/dyn-tabs.component.ts b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.ts
new file mode 100644
index 0000000..972c813
--- /dev/null
+++ b/src/main/webapp/app/dyn-tabs/dyn-tabs.component.ts
@@ -0,0 +1,110 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component,
+ ContentChildren,
+ QueryList,
+ AfterContentInit,
+ ViewChild,
+ ViewContainerRef,
+ ComponentFactoryResolver,
+ ComponentRef,
+ ComponentFactory,
+} from '@angular/core';
+
+import { DynTabsDirective } from 'app/dyn-tabs.directive';
+import { DynTabComponent } from 'app/dyn-tab/dyn-tab.component';
+import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+
+@Component({
+ standalone: true,
+ imports: [DynTabsDirective, CommonModule],
+ selector: 'jhi-dyn-tabs',
+ templateUrl: './dyn-tabs.component.html',
+ styleUrls: ['./dyn-tabs.component.scss'],
+ providers: [MockCtxloaderService, ResourcesLoaderService],
+})
+export class DynTabsComponent implements AfterContentInit {
+ //inizializzazioni
+ dynamicTabs: DynTabComponent[] = [];
+
+ @ContentChildren(DynTabComponent) tabs: QueryList;
+ //@ViewChild(DynTabsDirective, {read: ViewContainerRef}) tabscontainer:ViewContainerRef;
+ @ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
+
+ constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
+ this.tabs = {} as QueryList;
+ this.tabscontainer = {} as DynTabsDirective;
+ }
+
+ ngAfterContentInit(): void {
+ // get all active tabs
+ const activeTabs = this.tabs.filter(tab => tab.active);
+
+ // if there is no active tab set, activate the first
+ if (activeTabs.length === 0) {
+ this.selectTab(this.tabs.first);
+ }
+ }
+
+ //OPEN TAB
+ openTab(title: string, template: any, data: any, isCloseable = false): void {
+ // get a component factory for our TabComponent
+ const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DynTabComponent);
+ // fetch the view container reference from our anchor directive
+ const viewContainerRef = this.tabscontainer.viewContainer;
+ //istanza del component
+ const componentRef = viewContainerRef.createComponent(componentFactory);
+ // set the according properties on our component instance
+ const instance: DynTabComponent = componentRef.instance;
+ instance.tabTitle = title;
+ instance.template = template;
+ instance.dataContext = data;
+ instance.isCloseable = isCloseable;
+ // remember the dynamic component for rendering the
+ // tab navigation headers
+ this.dynamicTabs.push(componentRef.instance);
+ // set it active
+ this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
+ }
+
+ //TODO: ATTENZIONE-->nella direttiva Angular JHipster vuole questo sotto
+ //selector: '[jhiDynTabs]'
+
+ //SELECT TAB
+ selectTab(tab: DynTabComponent): void {
+ // deactivate all tabs
+ this.tabs.toArray().forEach(tb => (tb.active = false));
+ this.dynamicTabs.forEach(tb => (tb.active = false));
+
+ // activate the tab the user has clicked on.
+ tab.active = true;
+ }
+
+ // CLOSE TAB
+ closeTab(tab: DynTabComponent): void {
+ for (let i = 0; i < this.dynamicTabs.length; i++) {
+ if (this.dynamicTabs[i] === tab) {
+ // remove the tab from our array
+ this.dynamicTabs.splice(i, 1);
+
+ // destroy our dynamically created component again
+ const viewContainerRef = this.tabscontainer.viewContainer;
+ viewContainerRef.remove(i);
+
+ // set tab index to 1st one
+ this.selectTab(this.tabs.first);
+ break;
+ }
+ }
+ }
+
+ //CLOSE ACTIVE TAB
+ closeActiveTab(): void {
+ const activeTabs = this.dynamicTabs.filter(tab => tab.active);
+ if (activeTabs.length > 0) {
+ // close the 1st active tab (should only be one at a time)
+ this.closeTab(activeTabs[0]);
+ }
+ }
+}
diff --git a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.html b/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.html
deleted file mode 100644
index b6f49f5..0000000
--- a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.html
+++ /dev/null
@@ -1 +0,0 @@
-dynamic-tabs works!
diff --git a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.ts b/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.ts
deleted file mode 100644
index e37434c..0000000
--- a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'jhi-dynamic-tabs',
- templateUrl: './dynamic-tabs.component.html',
- styleUrls: ['./dynamic-tabs.component.scss'],
-})
-export class DynamicTabsComponent {}
diff --git a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.directive.ts b/src/main/webapp/app/dynamic-tabs/dynamic-tabs.directive.ts
deleted file mode 100644
index 3a48c15..0000000
--- a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.directive.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DynamicTabsComponent } from './dynamic-tabs.component';
-
-describe('DynamicTabsComponent', () => {
- let component: DynamicTabsComponent;
- let fixture: ComponentFixture;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [DynamicTabsComponent],
- });
- fixture = TestBed.createComponent(DynamicTabsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.module.ts b/src/main/webapp/app/dynamic-tabs/dynamic-tabs.module.ts
deleted file mode 100644
index 354d683..0000000
--- a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DynamicTabsComponent } from './dynamic-tabs.component';
-import { BrowserModule } from '@angular/platform-browser';
-
-//TODO: VEDI QUA: https://stackblitz.com/edit/angular-dynamic-tabs?file=app%2Fapp.module.ts
-
-@NgModule({
- declarations: [DynamicTabsComponent, TabsComponent, TabComponent, DynamicTabsDirective, PersonEditComponent, PeopleListComponent],
- imports: [BrowserModule, CommonModule],
-})
-export class DynamicTabsModule {}
-
-@NgModule({
- declarations: [AppComponent, TabsComponent, TabComponent, DynamicTabsDirective, PersonEditComponent, PeopleListComponent],
- imports: [BrowserModule, ReactiveFormsModule],
- providers: [],
- bootstrap: [AppComponent],
- // register the dynamic components here
- entryComponents: [TabComponent],
-})
-export class AppModule {}
diff --git a/src/main/webapp/app/tab-items/list-screen.component.html b/src/main/webapp/app/tab-items/list-screen.component.html
new file mode 100644
index 0000000..6343f2e
--- /dev/null
+++ b/src/main/webapp/app/tab-items/list-screen.component.html
@@ -0,0 +1,24 @@
+
+
+
+ Name |
+ Status |
+ Last Modified |
+ Available Memory |
+ HD Space |
+
+
+
+
+ {{ data.name }} |
+ {{ data.status }} |
+ {{ data.lastmod }} |
+ {{ data.memavailable }} |
+ {{ data.hdspace }} |
+
+
+
+ |
+
+
+
diff --git a/src/main/webapp/app/tab-items/list-screen.component.scss b/src/main/webapp/app/tab-items/list-screen.component.scss
new file mode 100644
index 0000000..db4f815
--- /dev/null
+++ b/src/main/webapp/app/tab-items/list-screen.component.scss
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
diff --git a/src/main/webapp/app/tab-items/list-screen.component.ts b/src/main/webapp/app/tab-items/list-screen.component.ts
new file mode 100644
index 0000000..2a00b02
--- /dev/null
+++ b/src/main/webapp/app/tab-items/list-screen.component.ts
@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { IContextNode } from 'app/services/i-context-node';
+import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
+import { IHostingnode } from 'app/services/i-hostinngnode';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+import { SharedModule } from 'app/shared/shared.module';
+
+@Component({
+ standalone: true,
+ imports: [SharedModule],
+ selector: 'jhi-list-screen',
+ templateUrl: './list-screen.component.html',
+ styleUrls: ['./list-screen.component.scss'],
+ providers: [MockCtxloaderService, ResourcesLoaderService],
+})
+export class ListScreenComponent implements OnChanges {
+ dataSource: IHostingnode[];
+ //fetchedRawData?: string;
+ tableDetail: IHostingnode;
+
+ @Input() myCtx: IContextNode; //fetching event from parent
+ @Output() jsonEmitter = new EventEmitter();
+
+ constructor(private myServiceTable: ResourcesLoaderService) {
+ this.myCtx = {} as IContextNode;
+ this.tableDetail = {} as IHostingnode;
+ this.dataSource = [];
+ //this.currentCtxId = "";
+ }
+
+ openJsonViewer(node: IHostingnode): void {
+ this.jsonEmitter.emit(node);
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ for (const propName in changes) {
+ if (propName === 'myCtx') {
+ const param = changes[propName];
+ this.myCtx = param.currentValue;
+ //controllo che l'oggetto non sia vuoto
+ if (Object.keys(this.myCtx).length !== 0) {
+ // eslint-disable-next-line no-console
+ //console.log('+++++++CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
+ //mt qui va passato il parametro myCtx.id al rest
+ this.myServiceTable.getHostingNodes().subscribe(res => {
+ this.dataSource = res;
+ });
+ }
+ }
+ }
+ }
+}
diff --git a/src/main/webapp/app/tab-items/rawjson-view.component.html b/src/main/webapp/app/tab-items/rawjson-view.component.html
new file mode 100644
index 0000000..2e1c167
--- /dev/null
+++ b/src/main/webapp/app/tab-items/rawjson-view.component.html
@@ -0,0 +1,4 @@
+Raw JSON for item: {{ chosenItem.name }}
+
+
{{ fetchedRawData | json }}
+
diff --git a/src/main/webapp/app/tab-items/rawjson-view.component.scss b/src/main/webapp/app/tab-items/rawjson-view.component.scss
new file mode 100644
index 0000000..6a34378
--- /dev/null
+++ b/src/main/webapp/app/tab-items/rawjson-view.component.scss
@@ -0,0 +1,6 @@
+#detail-title {
+ text-align: left;
+ color: teal;
+ padding-top: 3%;
+ padding-bottom: 2%;
+}
diff --git a/src/main/webapp/app/tab-items/rawjson-view.component.ts b/src/main/webapp/app/tab-items/rawjson-view.component.ts
new file mode 100644
index 0000000..941c9b0
--- /dev/null
+++ b/src/main/webapp/app/tab-items/rawjson-view.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IHostingnode } from 'app/services/i-hostinngnode';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ selector: 'jhi-rawjson-view',
+ templateUrl: './rawjson-view.component.html',
+ styleUrls: ['./rawjson-view.component.scss'],
+ providers: [ResourcesLoaderService],
+})
+export class RawjsonViewComponent implements OnInit {
+ @Input() chosenItem: IHostingnode | undefined;
+
+ fetchedRawData: string | undefined;
+
+ constructor(private myService: ResourcesLoaderService) {}
+
+ ngOnInit(): void {
+ //TODO: passare al servizio qui sotto: chosenItem.id come parametro rest
+ this.myService.getHostingNodeDetail().subscribe(res => {
+ this.fetchedRawData = res;
+ });
+ }
+}
diff --git a/src/main/webapp/app/tabbed-page/tabbed-page.component.html b/src/main/webapp/app/tabbed-page/tabbed-page.component.html
new file mode 100644
index 0000000..80d8e8c
--- /dev/null
+++ b/src/main/webapp/app/tabbed-page/tabbed-page.component.html
@@ -0,0 +1,28 @@
+
diff --git a/src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.scss b/src/main/webapp/app/tabbed-page/tabbed-page.component.scss
similarity index 100%
rename from src/main/webapp/app/dynamic-tabs/dynamic-tabs.component.scss
rename to src/main/webapp/app/tabbed-page/tabbed-page.component.scss
diff --git a/src/main/webapp/app/tabbed-page/tabbed-page.component.ts b/src/main/webapp/app/tabbed-page/tabbed-page.component.ts
new file mode 100644
index 0000000..679f560
--- /dev/null
+++ b/src/main/webapp/app/tabbed-page/tabbed-page.component.ts
@@ -0,0 +1,39 @@
+import { Component, ViewChild } from '@angular/core';
+import { SharedModule } from 'app/shared/shared.module';
+import { CtxTreeModule } from 'app/ctx-tree/ctx-tree.module';
+import { IContextNode } from 'app/services/i-context-node';
+import { DynTabComponent } from 'app/dyn-tab/dyn-tab.component';
+import { ListScreenComponent } from 'app/tab-items/list-screen.component';
+import { RawjsonViewComponent } from 'app/tab-items/rawjson-view.component';
+import { IHostingnode } from 'app/services/i-hostinngnode';
+import { DynTabsComponent } from 'app/dyn-tabs/dyn-tabs.component';
+
+@Component({
+ standalone: true,
+ imports: [CtxTreeModule, SharedModule, DynTabComponent, DynTabsComponent, ListScreenComponent, RawjsonViewComponent],
+ selector: 'jhi-tabbed-page',
+ templateUrl: './tabbed-page.component.html',
+ styleUrls: ['./tabbed-page.component.scss'],
+})
+export class TabbedPageComponent {
+ currentNodeCtx: IContextNode;
+ chosenItem: IHostingnode;
+
+ //attenzione a usare la conversione giusta per il nome del file del template (rawjson-view.component)
+ @ViewChild('rawjsonView') rawjsonTemplate: any;
+ @ViewChild(DynTabsComponent) dynTabsComponent: any;
+
+ constructor() {
+ this.currentNodeCtx = {} as IContextNode;
+ this.chosenItem = {} as IHostingnode;
+ }
+
+ loadTreeNode(node: IContextNode): void {
+ this.currentNodeCtx = node;
+ }
+
+ onViewRawJson(item: IHostingnode): void {
+ this.chosenItem = item;
+ this.dynTabsComponent.openTab(`${this.chosenItem.name}`, this.rawjsonTemplate, this.chosenItem, true);
+ }
+}