Merge pull request #1 from flockean/develop

feat: project management, new style

package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@openapitools/openapi-generator-cli": "^2.13.4",
+    "ngx-cookie-service": "^17.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -33,6 +35,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "tailwindcss": "^3.4.9",
     "typescript": "~5.4.2"
   }
 }

src/app/app.component.html

@@ -1,12 +1,17 @@
-<div ></div>
-<h1 class="container center">
-  This is my wonderful ugly website, ITS IN DEVELOPMENT ;0
-</h1>
+<div class="p-4 m-4 bg-sky-500 rounded-md">
+  <div class="flex items-center justify-center font-bold text-lg"> {{title}} </div>
+</div>
+
 <router-outlet/>
-<nav id="navbar">
-  <div id="navbar-items">
-    <button *ngIf="configService.isLoggedIn()" type="button" routerLink="MainPortal">CheeseburgerPortal</button>
-    <button class="button" routerLink="LogIn">Login</button>
-    <button *ngIf="configService.isLoggedIn()" class="button" (click)="configService.logout()">LogOut</button>
-  </div>
-</nav>
+
+
+<div class="flex items-center justify-center p-16 m-16">
+  <nav class="navbar w-5/6 rounded-xl flex p-4 m-6 bg-sky-500 box-border">
+    <div id="navbar-items">
+      <button *ngIf="configService.isLoggedIn()" class="button" routerLink="MainPortal">Portfolio</button>
+      <button class="button" routerLink="Cookies">Cookies</button>
+      <button class="button" routerLink="LogIn">Login</button>
+      <button *ngIf="configService.isLoggedIn()" class="button" (click)="configService.logout()">LogOut</button>
+   </div>
+  </nav>
+</div>

src/app/app.component.scss

@@ -1,27 +1,13 @@
-.container{
-  font-family: Bahnschrift, sans-serif;
-  background-color: var(--primary-100)  ;
-  border-radius: 10px;
-  margin: 20px;
-  padding: 20px;
-}
-
 .center{
   display: grid;
   place-items: center;
 }
 
-#navbar{
+.navbar{
   display: grid;
   place-items: center;
-  background-color: var(--secondary-100);
-  width: 95%;
   position: absolute;
-  padding: 10px;
-  margin: 20px;
   bottom: 0;
-  right: 0;
-  border-radius: 5px;
 }
 
 #navbar-items{
@@ -30,6 +16,3 @@
   gap: 20px;
 }
 
-.button:hover{
-  transform: rotate(15deg);
-}

src/app/app.component.ts

@@ -12,9 +12,11 @@ import {ConfigService} from "./shared/config.service";
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
-  title = 'LucasWeb';
+  title = 'LB Development';
   protected readonly MainPortalComponent = MainPortalComponent;
 
   constructor(protected configService: ConfigService) {
   }
+
+
 }

src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import {MainPortalComponent} from "./main-portal/main-portal.component";
 import {LogInPageComponent} from "./log-in-page/log-in-page.component";
 import {AuthGuard} from "./app.guard";
+import {CookieComponent} from "./cookie/cookie.component";
 
 export const routes: Routes = [
   {
@@ -12,5 +13,9 @@ export const routes: Routes = [
   {
     path: "LogIn",
     component: LogInPageComponent
+  },
+  {
+    path: "Cookies",
+    component: CookieComponent
   }
 ];

src/app/components/project-card/project-card.component.html

@@ -0,0 +1,13 @@
+<div class="grid border-2 border-black rounded-lg w-2/5 bg-sky-100 p-2 m-1">
+  <div class="flex">
+    <div>
+      First Projects XYZ
+    <div>
+    <div>
+      Projects Description
+    </div>
+    <div class="flex gap-2">
+      <app-service-card/>
+    </div>
+  </div>
+</div>

src/app/components/project-card/project-card.component.spec.ts

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

src/app/components/project-card/project-card.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ServiceCardComponent } from '../service-card/service-card.component';
+
+@Component({
+  selector: 'app-project-card',
+  standalone: true,
+  imports: [ ServiceCardComponent],
+  templateUrl: './project-card.component.html',
+  styleUrl: './project-card.component.scss'
+})
+export class ProjectCardComponent {
+
+}

src/app/components/service-card/service-card.component.html

@@ -0,0 +1,3 @@
+<div class="grid border-2 border-black rounded-s p-2 m-2">
+  Service X
+<div>

src/app/components/service-card/service-card.component.spec.ts

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

src/app/components/service-card/service-card.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-service-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './service-card.component.html',
+  styleUrl: './service-card.component.scss'
+})
+export class ServiceCardComponent {
+
+}

src/app/cookie/cookie.component.html

@@ -0,0 +1,12 @@
+<div class="basebob">
+  <div class="flex place-items-center justify-center">
+  Here are listed all Cookies that been stored on this side
+  </div>
+  <div>
+    Here are your Cookies:
+    <div class="border-2 border-black my-2 p-2 rounded-full bg-sky-300" *ngFor="let key of Object.keys(this.cookieService.getAll())">
+      <span> {{key}}: {{this.cookieService.get(key)}}</span>
+    </div>
+    <button class="button" (click)="this.cookieService.deleteAll()">ClearAllCookies</button>
+  </div>
+</div>

src/app/cookie/cookie.component.scss

@@ -0,0 +1 @@
+

src/app/cookie/cookie.component.spec.ts

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

src/app/cookie/cookie.component.ts

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {CookieService} from "ngx-cookie-service";
+import {CommonModule, KeyValuePipe, NgForOf} from "@angular/common";
+
+@Component({
+  selector: 'app-cookie',
+  standalone: true,
+  imports: [
+    NgForOf,
+    KeyValuePipe,
+    CommonModule
+  ],
+  templateUrl: './cookie.component.html',
+  styleUrl: './cookie.component.scss'
+})
+export class CookieComponent {
+  protected readonly Object = Object;
+
+  // TODO: Do I need a Dependency for CookieService? Uhhhh
+  constructor(protected cookieService: CookieService) {
+    this.cookieService.set('MainCookie', 'This is your MainCookie, so you can see the List works (cannot be deleted)')
+  }
+
+}

src/app/log-in-page/log-in-page.component.html

@@ -1,20 +1,24 @@
-<div class="grid">
-  <div *ngIf="!configService.isLoggedIn()" class="card">
+<div class="basebob">
+  <div *ngIf="!configService.isLoggedIn()" class="grid place-items-center m-2 p-2">
+
+    This Login is unsecure, so you can login with anything you want or just press login.
+    <div> DO NOT INSERT PERSONAL DATA </div>
+    <div class="m-8">
     <form>
-    Bitte einmal einloggen!
-      <div [formGroup]="userForm" class="input-wrapper">
+      <div [formGroup]="userForm" class="grid gap-4">
       <input type="text" placeholder="Username" formControlName="username"/>
       <input type="password" placeholder="Password" formControlName="password"/>
-      <button (click)="onSubmit()" > LogIn </button>
+      <button class="button" (click)="onSubmit()" > LogIn </button>
       </div>
     </form>
+    </div>
   </div>
 
 <!--  TODO: Hmmm yes, Security on Point-->
-  <div *ngIf="configService.isLoggedIn()" class="card">
+  <div *ngIf="configService.isLoggedIn()" class="grid place-items-center m-2 p-2">
     You are already Logged In as:
-    <h4 class="text-wrapper">{{configService.getStoredUserData().username}}</h4>
+    <div class="font-bold">{{configService.getStoredUserData().username}} </div>
     and your Password is:
-    <h4 class="text-wrapper"> {{configService.getStoredUserData().password}}</h4>
+    <div class="font-bold"> {{configService.getStoredUserData().password}} </div>
   </div>
 </div>

src/app/log-in-page/log-in-page.component.scss

@@ -1,23 +0,0 @@
-.grid{
-  display: grid;
-}
-
-.card{
-  display: grid;
-  place-items: center;
-  border-radius: 10px;
-  background-color: var(--secondary-100);
-  padding: 50px;
-  margin: 50px;
-}
-
-.input-wrapper{
-  display: grid;
-  gap: 20px;
-  padding: 30px;
-  margin:  20px;
-}
-
-.text-wrapper{
-  font-family: Bahnschrift, sans-serif;
-}

src/app/main-portal/main-portal.component.html

@@ -1,8 +1,16 @@
 <!--TODO: Ideas for MainPortal-->
-<div class="container">
+<div class="basebob">
 <!--  TODO: Use .ico instead of emoji? -->
-  <h2 class="center"> I am a Developer 💻 </h2>
+  <h2 class="grid text-center"> I am a Developer 💻 </h2>
+  <div class="py-4">
+    Hello, I am a Junior Software Engineer
+  </div>
   <div>
-    Hello, I am a Junior Developer which testing UI-Design and Frontend Logic. This will be the First Page you see, once you Logged in.
+    This is my Website for managing my Projects and get finally on track with my Brain and achievements that I want to do the next few years.
+    So here is the List of my running Projects and Learnings:
+  </div>
+  <div class="block">
+    <app-project-card/>
+    <app-project-card/>
   </div>
 </div>

src/app/main-portal/main-portal.component.scss

@@ -1,11 +1,3 @@
-.container{
-  font-family: Bahnschrift, sans-serif;
-  background-color: var(--primary-100)  ;
-  border-radius: 10px;
-  margin: 20px;
-  padding: 20px;
-}
-
 .center{
   display: grid;
   place-items: center;

src/app/main-portal/main-portal.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { ProjectCardComponent } from '../components/project-card/project-card.component';
 
 @Component({
   selector: 'app-main-portal',
   standalone: true,
-  imports: [],
+  imports: [ ProjectCardComponent ],
   templateUrl: './main-portal.component.html',
   styleUrl: './main-portal.component.scss'
 })