Small UI fixing

jambotron-ui/angular.json

@@ -19,7 +19,8 @@
           "options": {
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "zone.js",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -30,6 +31,9 @@
               }
             ],
             "styles": [
+              {
+                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
+              },
               "@angular/material/prebuilt-themes/cyan-orange.css",
               "src/styles.scss"
             ]
@@ -78,7 +82,8 @@
           "options": {
             "polyfills": [
               "zone.js",
-              "zone.js/testing"
+              "zone.js/testing",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
@@ -89,6 +94,9 @@
               }
             ],
             "styles": [
+              {
+                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
+              },
               "@angular/material/prebuilt-themes/cyan-orange.css",
               "src/styles.scss"
             ]
@@ -97,4 +105,4 @@
       }
     }
   }
-}
+}

jambotron-ui/package.json

@@ -17,12 +17,35 @@
     "@angular/compiler": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/forms": "^20.0.0",
+    "@angular/localize": "^20.0.0",
     "@angular/material": "^20.0.3",
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.3",
     "@angular/platform-server": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@angular/ssr": "^20.0.2",
+    "@progress/kendo-angular-buttons": "19.1.1",
+    "@progress/kendo-angular-common": "19.1.1",
+    "@progress/kendo-angular-dialog": "19.1.1",
+    "@progress/kendo-angular-dropdowns": "19.1.1",
+    "@progress/kendo-angular-editor": "^19.1.1",
+    "@progress/kendo-angular-icons": "19.1.1",
+    "@progress/kendo-angular-indicators": "^19.1.1",
+    "@progress/kendo-angular-inputs": "19.1.1",
+    "@progress/kendo-angular-intl": "19.1.1",
+    "@progress/kendo-angular-l10n": "19.1.1",
+    "@progress/kendo-angular-label": "19.1.1",
+    "@progress/kendo-angular-layout": "19.1.1",
+    "@progress/kendo-angular-navigation": "19.1.1",
+    "@progress/kendo-angular-popup": "19.1.1",
+    "@progress/kendo-angular-progressbar": "19.1.1",
+    "@progress/kendo-angular-toolbar": "19.1.1",
+    "@progress/kendo-angular-treeview": "19.1.1",
+    "@progress/kendo-angular-utils": "^19.1.1",
+    "@progress/kendo-drawing": "^1.21.0",
+    "@progress/kendo-licensing": "^1.5.0",
+    "@progress/kendo-svg-icons": "^4.0.0",
+    "@progress/kendo-theme-default": "11.0.2",
     "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -1,5 +1,5 @@
 <div>
-  <nav class="navbar navbar-expand navbar-dark bg-dark">
+ <!-- <nav class="navbar navbar-expand navbar-dark bg-dark">
     <a href="#" class="navbar-brand">Spring-AngularTS</a>
 
     <ul class="navbar-nav mr-auto" routerLinkActive="active">
@@ -41,16 +41,28 @@
       </li>
     </ul>
 
-  </nav>
+  </nav>-->
   <mat-toolbar>
-
     <button mat-raised-button routerLink="/" href="#">
       My App
     </button>
-    <span>My App
-    </span>
     <span class="example-spacer"></span>
-    <button mat-raised-button *ngIf="!isLoggedIn">
+    <button mat-raised-button routerLink="tutorials">
+      Tutorials
+    </button>
+    <button mat-raised-button routerLink="add" *ngIf="isLoggedIn">
+      Add tutorial
+    </button>
+    <span class="example-spacer"></span>
+    @if (showAdminBoard) {
+      <button mat-raised-button routerLink="admin" >
+        <mat-icon>manage_accounts</mat-icon>
+        Admin Bord
+      </button>
+    }
+
+    <span class="example-spacer"></span>
+    <button mat-raised-button routerLink="register" *ngIf="!isLoggedIn">
       <mat-icon>app_registration</mat-icon>
       Register
     </button>
@@ -60,7 +72,7 @@
       Login
     </button>
 
-    <button mat-raised-button *ngIf="isLoggedIn">
+    <button mat-raised-button routerLink="profile" *ngIf="isLoggedIn">
       <mat-icon>account_circle</mat-icon>
       {{ username }}
     </button>

jambotron-ui/src/app/app.component.scss

@@ -4,3 +4,7 @@
 .example-spacer {
   flex: 1 1 auto;
 }
+
+.mat-toolbar{
+  background-color: rgba(153,153,153,0.16);
+}

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

@@ -26,6 +26,19 @@ import {MatIcon} from "@angular/material/icon";
 import {MatChipGrid, MatChipInput, MatChipListbox, MatChipOption, MatChipRow} from "@angular/material/chips";
 import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
 import {MatFormField} from "@angular/material/form-field";
+import {MatLabel} from '@angular/material/form-field';
+
+import {
+  MatCard, MatCardActions,
+  MatCardContent,
+  MatCardHeader,
+  MatCardImage,
+  MatCardSubtitle,
+  MatCardTitle
+} from '@angular/material/card';
+import {MatInput} from '@angular/material/input';
+import {EditorComponent} from '@progress/kendo-angular-editor';
+
 
 
 
@@ -63,7 +76,17 @@ import {MatFormField} from "@angular/material/form-field";
     MatFormField,
     MatChipListbox,
     MatChipOption,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatCardContent,
+    MatCardSubtitle,
+    MatCardTitle,
+    MatCard,
+    MatCardHeader,
+    MatCardImage,
+    MatCardActions,
+    MatInput,
+    MatLabel,
+    EditorComponent
   ],
   providers: [authInterceptorProviders, provideHttpClient(withInterceptorsFromDi()), provideAnimationsAsync()] })
 

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.html

@@ -1,35 +1,56 @@
-<div>
-  <div class="submit-form">
-    <div *ngIf="!submitted">
-      <div class="form-group">
-        <label for="title">Title</label>
-        <input
-          type="text"
-          class="form-control"
-          id="title"
-          required
-          [(ngModel)]="tutorial.title"
-          name="title"
-        />
-      </div>
+<!--<div>-->
+<!--  <div class="submit-form">-->
+<!--    <div *ngIf="!submitted">-->
+<!--      <div class="form-group">-->
+<!--        <label for="title">Title</label>-->
+<!--        <input-->
+<!--          type="text"-->
+<!--          class="form-control"-->
+<!--          id="title"-->
+<!--          required-->
+<!--          [(ngModel)]="tutorial.title"-->
+<!--          name="title"-->
+<!--        />-->
+<!--      </div>-->
 
-      <div class="form-group">
-        <label for="description">Description</label>
-        <input
-          class="form-control"
-          id="description"
-          required
-          [(ngModel)]="tutorial.description"
-          name="description"
-        />
-      </div>
+<!--      <div class="form-group">-->
+<!--        <label for="description">Description</label>-->
+<!--        <input-->
+<!--          class="form-control"-->
+<!--          id="description"-->
+<!--          required-->
+<!--          [(ngModel)]="tutorial.description"-->
+<!--          name="description"-->
+<!--        />-->
+<!--      </div>-->
 
-      <button (click)="saveTutorial()" class="btn btn-success">Submit</button>
-    </div>
+<!--      <button (click)="saveTutorial()" class="btn btn-success">Submit</button>-->
+<!--    </div>-->
 
+<!--    <div *ngIf="submitted">-->
+<!--      <h4>Tutorial was submitted successfully!</h4>-->
+<!--      <button class="btn btn-success" (click)="newTutorial()">Add</button>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</div>-->
+
+<mat-card  appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Add tutorial</mat-card-title>
+  </mat-card-header>
+   <mat-card-content *ngIf="!submitted">
+     <mat-form-field class="example-full-width">
+       <mat-label>Title</mat-label>
+       <input matInput required
+              [(ngModel)]="tutorial.title">
+     </mat-form-field>
+     <kendo-editor [(ngModel)]="tutorial.description" ></kendo-editor>
+  </mat-card-content>
+  <mat-card-actions>
+    <button matButton (click)="saveTutorial()" *ngIf="!submitted">Save</button>
     <div *ngIf="submitted">
       <h4>Tutorial was submitted successfully!</h4>
-      <button class="btn btn-success" (click)="newTutorial()">Add</button>
+      <button matButton (click)="newTutorial()">Add new tutorial</button>
     </div>
-  </div>
-</div>
+  </mat-card-actions>
+</mat-card>

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.scss

@@ -1,4 +1,21 @@
 .submit-form {
   max-width: 400px;
   margin: auto;
-}
+}
+
+mat-card{
+  margin: 20px;
+}
+mat-card-title{
+  color: cyan;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

jambotron-ui/src/app/components/add-tutorial/add-tutorial.component.ts

@@ -2,12 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import {Tutorial} from '../../models/tutorial.model';
 import {TutorialService} from '../../services/tutorial.service';
 
-
 @Component({
-    selector: 'app-add-tutorial',
-    templateUrl: './add-tutorial.component.html',
-    styleUrls: ['./add-tutorial.component.scss'],
-    standalone: false
+  selector: 'app-add-tutorial',
+  templateUrl: './add-tutorial.component.html',
+  styleUrls: ['./add-tutorial.component.scss'],
+  standalone: false
 })
 export class AddTutorialComponent implements OnInit {
 

jambotron-ui/src/app/components/home/home.component.html

@@ -2,4 +2,21 @@
     <header class="jumbotron">
       <p>{{ content }}</p>
     </header>
-  </div>
+  </div>
+
+<mat-card  appearance="outlined" >
+  <mat-card-header>
+    <mat-card-title>Tutorials</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+
+
+    </mat-card-content>
+</mat-card>
+
+@for (tutorial of tutorials; track $index){
+  <mat-card appearance="outlined" class="tutorial-card">
+    <mat-card-content [innerHTML]="tutorial.description">
+    </mat-card-content>
+  </mat-card>
+}

jambotron-ui/src/app/components/home/home.component.scss

@@ -0,0 +1,9 @@
+mat-card{
+  margin: 20px;
+}
+mat-card-title{
+  color: cyan;
+}
+.tutorial-card{
+  color: white;
+}

jambotron-ui/src/app/components/home/home.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {UserService} from '../../services/user.service';
+import {TutorialService} from '../../services/tutorial.service';
+
+import {Tutorial} from '../../models/tutorial.model';
 
 
 @Component({
@@ -11,16 +13,22 @@ import {UserService} from '../../services/user.service';
 export class HomeComponent implements OnInit {
   content?: string;
 
-  constructor(private userService: UserService) { }
+  tutorials?: Tutorial[];
+
+  constructor(private tutorialService: TutorialService) { }
 
   ngOnInit(): void {
-    // this.userService.getPublicContent().subscribe(
-    //   (data : any) => {
-    //     this.content = data;
-    //   },
-    //   (err : any) => {
-    //     this.content = JSON.parse(err.error).message;
-    //   }
-    // );
+    this.retrieveTutorials();
+  }
+  retrieveTutorials(): void {
+    this.tutorialService.getAll()
+      .subscribe(
+        data => {
+          this.tutorials = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+        });
   }
 }

jambotron-ui/src/styles.scss

@@ -1,4 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+  background-image: url('../public/Firefly_jambo tron 118290.png');
+  background-attachment:fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif;
+}

jambotron-ui/tsconfig.app.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [
-      "node"
+      "node",
+      "@angular/localize"
     ]
   },
   "include": [