Add image generation feature with new component and service integration

jambotron-ui/src/app/main-module/main.component/main.component.html

@@ -1,11 +1,14 @@
 <!--<p>main.component works!</p>-->
 
 <mat-toolbar class="fixed-top">
-  <button mat-raised-button routerLink="/" href="#">
-    <img ngSrc="jambotron_logo.svg" height="40" width="135">
+  <button mat-raised-button routerLink="home">
+<!--    <img ngSrc="jambotron_logo.svg" height="40" width="135">-->
     My App
   </button>
   <span class="menu-spacer"></span>
+  <button mat-raised-button routerLink="generate-image">
+    Generate Image
+  </button>
   <button mat-raised-button routerLink="tutorials">
     Tutorials
   </button>
@@ -17,14 +20,14 @@
   <span class="menu-spacer"></span>
   @if (showAdminBoard) {
     <button mat-raised-button routerLink="admin/welcome">
-      <mat-icon>manage_accounts</mat-icon>
+<!--      <mat-icon>manage_accounts</mat-icon>-->
       Admin Bord
     </button>
   }
 
   @if (showAdminBoard) {
     <button mat-raised-button routerLink="admin/system" >
-      <mat-icon>settings_applications</mat-icon>
+<!--      <mat-icon>settings_applications</mat-icon>-->
       System
     </button>
   }
@@ -32,7 +35,7 @@
   <span class="menu-spacer"></span>
   @if (isLoggedIn) {
   <button mat-raised-button routerLink="register">
-    <mat-icon>app_registration</mat-icon>
+<!--    <mat-icon>app_registration</mat-icon>-->
     Register
   </button>
   }
@@ -40,17 +43,17 @@
   <button mat-raised-button (click)="openDialog('100ms', '5ms')" >
 <!--    <i antIcon type="bell" theme="outline"></i>-->
 <!--    <mat-icon>login</mat-icon>-->
-    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>
+<!--    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>-->
   </button>
   }
   @if (isLoggedIn) {
   <button mat-raised-button routerLink="profile" >
-    <mat-icon>account_circle</mat-icon>
+<!--    <mat-icon>account_circle</mat-icon>-->
     {{ username }}
   </button>
     <button mat-raised-button (click)="logout()">
 
-            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>
+<!--            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>-->
       Logout
     </button>
 

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -1,10 +1,7 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
 //import {NavigationComponent} from '../navigation/navigation.component';
-import {NgClass, NgOptimizedImage} from '@angular/common';
-import {NavigationComponent} from '../../layouts/admin-layout/navigation/navigation.component';
+
 import {Router, RouterLink, RouterOutlet} from '@angular/router';
-import {BreadcrumbComponent} from '../../components/breadcrumb/breadcrumb.component';
-import {NavBarComponent} from '../../layouts/admin-layout/nav-bar/nav-bar.component';
 import {MatToolbar} from '@angular/material/toolbar';
 import {MatButton} from '@angular/material/button';
 import {IconDirective, IconService} from '@ant-design/icons-angular';
@@ -22,17 +19,20 @@ import {
   PhoneOutline, ProfileOutline, QuestionCircleOutline,
   SettingOutline, UnorderedListOutline, UserOutline, WalletOutline
 } from '@ant-design/icons-angular/icons';
+import {BrowserModule} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-main.component',
   imports: [
-    NavBarComponent,
+
     MatToolbar,
     MatButton,
     RouterLink,
     IconDirective,
     RouterOutlet,
-    NgOptimizedImage
+    CommonModule
+
   ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
   templateUrl: './main.component.html',

jambotron-ui/src/app/main-module/main.module.ts

@@ -2,12 +2,30 @@ import {RouterModule} from '@angular/router';
 import {MainComponent} from './main.component/main.component';
 import {mainRouting} from './main.routing';
 import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {CustomHttpInterceptor} from '../helpers/custom-http-interceptor';
+import {AngularImageViewerModule} from '@hreimer/angular-image-viewer';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
 
   ],
-  imports: [mainRouting, MainComponent],
+  imports: [
+    mainRouting,
+    MainComponent,
+
+
+
+  ],
   exports: [RouterModule],
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: CustomHttpInterceptor,
+    multi: true
+  }],
 })
 export class MainModule {}

jambotron-ui/src/app/main-module/main.routing.ts

@@ -6,6 +6,7 @@ import {TutorialsComponent} from '../components/tutorials.component/tutorials.co
 import {AddTutorialComponent} from '../components/add-tutorial/add-tutorial.component';
 import {RegisterComponent} from '../components/register/register.component';
 import {ProfileComponent} from '../components/profile/profile.component';
+import {GenerateImageComponent} from '../components/generate-image.component/generate-image.component';
 
 const MAIN_ROUTES: Routes =[
   {
@@ -21,6 +22,10 @@ const MAIN_ROUTES: Routes =[
         path: 'home',
         component: HomeComponent
       },
+      {
+        path: 'generate-image',
+        component: GenerateImageComponent
+      },
       {
         path: 'tutorials',
         component: TutorialsComponent