Wide implementation

angular.json

@@ -3,7 +3,8 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -36,9 +37,15 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
+              "node_modules/bootstrap-table/dist/bootstrap-table.min.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
+              "node_modules/bootstrap-table/dist/bootstrap-table.js"
             ],
-            "scripts": [],
             "customWebpackConfig": {
               "path": "./angular.webpack.js",
               "replaceDuplicatePlugins": true
@@ -142,7 +149,7 @@
           "options": {
             "polyfills": ["src/polyfills-test.ts"],
             "tsConfig": "src/tsconfig.spec.json",
-            "globalMocks": ["styleTransform", "matchMedia", "getComputedStyle"],
+            "globalMocks": ["styleTransform", "matchMedia", "getComputedStyle"]
           }
         },
         "lint": {

package.json

@@ -54,6 +54,10 @@
     "@angular/platform-browser": "17.3.6",
     "@angular/platform-browser-dynamic": "17.3.6",
     "@angular/router": "17.3.6",
+    "bootstrap": "5.3.3",
+    "bootstrap-icons": "1.11.3",
+    "bootstrap-table": "1.23.2",
+    "jquery": "3.7.1",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
     "zone.js": "0.14.4"
@@ -72,7 +76,9 @@
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@playwright/test": "1.43.1",
+    "@types/bootstrap": "5.2.10",
     "@types/jest": "29.5.12",
+    "@types/jquery": "3.5.30",
     "@types/node": "20.12.7",
     "@typescript-eslint/eslint-plugin": "7.7.1",
     "@typescript-eslint/parser": "7.7.1",

src/app/app-routing.module.ts

@@ -4,11 +4,12 @@ import { PageNotFoundComponent } from './shared/components';
 
 import { HomeRoutingModule } from './home/home-routing.module';
 import { DetailRoutingModule } from './detail/detail-routing.module';
+import { HardForkInfoRoutingModule } from './hard-fork-info/hard-fork-info-routing.module';
 
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'home',
+    redirectTo: 'detail',
     pathMatch: 'full'
   },
   {
@@ -21,7 +22,8 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {}),
     HomeRoutingModule,
-    DetailRoutingModule
+    DetailRoutingModule,
+    HardForkInfoRoutingModule
   ],
   exports: [RouterModule]
 })

src/app/app.component.html

@@ -1 +1,7 @@
-<router-outlet></router-outlet>
+<app-navbar></app-navbar>
+<div class="d-flex">
+    <app-sidebar></app-sidebar>
+    <div class="d-flex">
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/app.component.scss

@@ -1,3 +1,7 @@
 :host {
 
+}
+
+body {
+    background-color: #373636;
 }

src/app/app.module.ts

@@ -15,6 +15,10 @@ import { HomeModule } from './home/home.module';
 import { DetailModule } from './detail/detail.module';
 
 import { AppComponent } from './app.component';
+import { SidebarComponent } from "./sidebar/sidebar.component";
+import { BansModule } from './bans/bans.module';
+import { NavbarComponent } from "./navbar/navbar.component";
+import { MiningModule } from './mining/mining.module';
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -29,15 +33,19 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     SharedModule,
     HomeModule,
     DetailModule,
+    BansModule,
+    MiningModule,
     AppRoutingModule,
     TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: httpLoaderFactory,
-        deps: [HttpClient]
-      }
-    })
-  ],
+        loader: {
+            provide: TranslateLoader,
+            useFactory: httpLoaderFactory,
+            deps: [HttpClient]
+        }
+    }),
+    SidebarComponent,
+    NavbarComponent
+],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/bans/bans-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BansComponent } from './bans.component';
+
+const routes: Routes = [{
+    path: 'bans',
+    component: BansComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BansRoutingModule { }

src/app/bans/bans.component.html

@@ -0,0 +1,14 @@
+<table
+    id="bansTable"
+    data-toggle="bansTable"
+    data-toolbar="#toolbar"
+    data-height="460"
+    >
+    <thead>
+    <tr>
+        <th data-field="host">Host</th>
+        <th data-field="ip">Ip</th>
+        <th data-field="seconds">Seconds</th>
+    </tr>
+    </thead>
+</table>

src/app/bans/bans.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BansComponent } from './bans.component';
+
+describe('BansComponent', () => {
+  let component: BansComponent;
+  let fixture: ComponentFixture<BansComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BansComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BansComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/bans/bans.component.ts

@@ -0,0 +1,56 @@
+import { AfterViewInit, Component } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { NavbarService } from '../navbar/navbar.service';
+import { DaemonService } from '../core/services/daemon/daemon.service';
+
+@Component({
+  selector: 'app-bans',
+  templateUrl: './bans.component.html',
+  styleUrl: './bans.component.scss'
+})
+export class BansComponent implements AfterViewInit {
+
+  constructor(private router: Router, private daemonService: DaemonService, private navbarService: NavbarService) {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        if (event.url != '/bans') return;
+        this.onNavigationEnd();
+      }
+    })
+  }
+
+  ngAfterViewInit(): void {
+      console.log('BansComponent AFTER VIEW INIT');
+
+      setTimeout(() => {
+        const $table = $('#bansTable');
+        $table.bootstrapTable({});
+        $table.bootstrapTable('refreshOptions', {
+          classes: 'table table-bordered table-hover table-dark table-striped'
+        });        
+        this.load();
+
+      }, 500);
+  }
+
+  private onNavigationEnd(): void {
+    this.navbarService.removeNavbarLinks();
+  }
+
+  private async load(): Promise<void> {
+    const $table = $('#bansTable');
+
+    const _bans = await this.daemonService.getBans();
+    const bans: any[] = [];
+
+    _bans.forEach((ban) => bans.push({
+      'ip': ban.ip,
+      'host': ban.host,
+      'seconds': ban.seconds
+    }));
+
+    $table.bootstrapTable('load', bans);
+
+  }
+
+}