Merge pull request #3 from flockean/develop

feat: finally some structure and style (I like blue)

src/app/components/container-block/container-block.component.html

@@ -0,0 +1,6 @@
+<div class="grid m-2 bg-sky-300 rounded-lg shadow-lg">
+  <div class="my-2 place-self-center"> {{title}} </div>
+  <div class="grid bg-sky-200 rounded-b-lg p-2">
+    <ng-content/>
+  </div>
+</div>

src/app/components/container-block/container-block.component.spec.ts

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

src/app/components/container-block/container-block.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-container-block',
+  standalone: true,
+  imports: [],
+  templateUrl: './container-block.component.html',
+  styleUrl: './container-block.component.scss'
+})
+export class ContainerBlockComponent {
+@Input() title: string = '';
+}

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

@@ -1,4 +1,4 @@
-<div class="grid border-2 border-black rounded-lg w-2/5 bg-sky-100 p-2 m-1">
+<div class="grid border-2 border-black rounded-lg w-44 bg-sky-100 p-2 m-1">
   <div class="flex">
     <div>
       First Projects XYZ

src/app/cookie/cookie.component.html

@@ -1,12 +1,9 @@
-<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 (click)="this.cookieService.deleteAll()">ClearAllCookies</button>
+<app-container-block title="Cookies">
+<div>
+  Here are all Cookies that have been stored since you're here:
+  <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 (click)="this.cookieService.deleteAll()">ClearAllCookies</button>
 </div>
+</app-container-block>

src/app/cookie/cookie.component.ts

@@ -1,14 +1,16 @@
 import {Component} from '@angular/core';
 import {CookieService} from "ngx-cookie-service";
 import {CommonModule, KeyValuePipe, NgForOf} from "@angular/common";
+import { ContainerBlockComponent } from '../components/container-block/container-block.component';
 
 @Component({
   selector: 'app-cookie',
   standalone: true,
   imports: [
     NgForOf,
     KeyValuePipe,
-    CommonModule
+    CommonModule,
+    ContainerBlockComponent
   ],
   templateUrl: './cookie.component.html',
   styleUrl: './cookie.component.scss'

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

@@ -6,9 +6,9 @@
     <div class="m-8">
     <form>
       <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>
+        <input type="text" placeholder="Username" formControlName="username"/>
+        <input type="password" placeholder="Password" formControlName="password"/>
+        <button (click)="onSubmit()" > LogIn </button>
       </div>
     </form>
     </div>

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

@@ -1,14 +1,16 @@
-<!--TODO: Ideas for MainPortal-->
 <!--  TODO: Use .ico instead of emoji? -->
-  <h2 class="grid text-center"> I am a Developer 💻 </h2>
+<app-container-block title="I am a Developer 💻 ">
   <div class="py-4">
     Hello, I am a Junior Software Engineer
+    </div>
+    <div>
+      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="grid pt-4">
+    <div class="flex">
+      <app-project-card/>
+      <app-project-card/>
+    </div>
   </div>
-  <div>
-    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>
+</app-container-block>

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

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

src/app/management-view/management-view.component.html

@@ -1,8 +1,25 @@
 <div class="basebob">
-  Here will be the Managment of my Projects... someday
+  Management of Projects and Services, here you can create, modify and delete Projects in the Database
 </div>
-<div class="p-2 m2 border-black bg-sky-400">
-  <div>
 
-  </div>
-</div>
+<!-- TODO: This css style is used in multiple components, abstract this container in new component --->
+  <app-container-block title="Create New Service">
+    <form class="flex">
+      <div [formGroup]="serviceForm" class="grid gap-4 w-2/4 p-4">
+        <input type=text placeholder="Service Name">
+        <input type=text placeholder="Service Type">
+        <input type=text placeholder="Service Languages">
+      </div>
+      <div class="grid gap-4 w-1/2 p-4">
+        <div class="h-1/2 border-gray-500 border-dashed border-2 place-content-center text-center"> Insert Representativ Picture ;) </div>
+      </div>
+    </form>
+  </app-container-block>
+
+<app-container-block title="Create New Project">
+  <form>
+    <div [formGroup]="projectForm" class="grid gap-4 w-2/4 p-4">
+      --PlaceHolder--
+    </div>
+  </form>
+</app-container-block>

src/app/management-view/management-view.component.ts

@@ -1,12 +1,26 @@
 import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { ContainerBlockComponent } from '../components/container-block/container-block.component';
 
 @Component({
   selector: 'app-management-view',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule, ContainerBlockComponent],
   templateUrl: './management-view.component.html',
   styleUrl: './management-view.component.scss'
 })
 export class ManagementViewComponent {
+  projectForm;
+  serviceForm;
+  constructor(private formbuilder: FormBuilder) {
+    this.serviceForm = this.formbuilder.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required]
+    })
 
+    this.projectForm = this.formbuilder.group({
+      // TODO: fill Data
+    })
+
+  }
 }