update: Sun 22 Dec 2024 01:51:20 PM CET

cophilot · Dec 22, 2024 · 93cd617 · 93cd617
1 parent 3971654
commit 93cd617
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 24 deletions.
diff --git a/src/app/add-object-form/add-object-form.component.html b/src/app/add-object-form/add-object-form.component.html
@@ -1,6 +1,6 @@
 <div class="background" (click)="close()"></div>
 <div class="container glass" cdkDrag>
-  <h1>Add Object</h1>
+  <h1>{{ heading }}</h1>
   <p [style.color]="'red'" *ngIf="wrongInput">Wrong input!</p>
   <div class="row">
     <p>Name:</p>
@@ -41,6 +41,8 @@ <h1>Add Object</h1>
   </div>
   <div class="buttonContainer">
     <button class="closeButton" (click)="close()">Close</button>
-    <button class="addButton" (click)="add()">Add</button>
+    <button class="addButton" (click)="add()">
+      {{ editObject ? "Save" : "Add" }}
+    </button>
   </div>
 </div>
diff --git a/src/app/add-object-form/add-object-form.component.sass b/src/app/add-object-form/add-object-form.component.sass
@@ -19,6 +19,7 @@
   animation: slideInFromRight 0.3s
   box-shadow: 0 0 10px 0 #ffffff
   color: white
+  z-index: 1000
   .row
     display: flex
     flex-direction: row

diff --git a/src/app/add-object-form/add-object-form.component.ts b/src/app/add-object-form/add-object-form.component.ts
@@ -1,9 +1,10 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input } from '@angular/core';
 import { ObjectService } from '../service/object.service';
 import { VVector } from '../utils/VVector';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { Obj } from '../utils/Obj';
 
 @Component({
   selector: 'app-add-object-form',
@@ -13,6 +14,10 @@ import { FormsModule } from '@angular/forms';
   standalone: true,
 })
 export class AddObjectFormComponent {
+  @Input() editObject: Obj | undefined;
+
+  heading = 'Add Object';
+
   name: string = '';
   startX: number = 0;
   startY: number = 0;
@@ -28,26 +33,58 @@ export class AddObjectFormComponent {
 
   constructor(private objectService: ObjectService) {}
 
+  ngOnInit() {
+    if (!this.editObject) {
+      return;
+    }
+
+    this.name = this.editObject.name;
+    this.startX = this.editObject.x;
+    this.startY = this.editObject.y;
+    this.vX = this.editObject.velocity.x;
+    this.vY = this.editObject.velocity.y;
+    this.radius = this.editObject.radius;
+    this.weight = this.editObject.weight;
+    this.color = this.editObject.color;
+    this.heading = 'Edit Object';
+  }
+
   add() {
     if (this.name === '' || this.radius <= 0 || this.color === '') {
       this.wrongInput = true;
       return;
     }
-    this.objectService.addNewObject(
-      this.name,
-      this.startX,
-      this.startY,
-      this.radius,
-      this.weight,
-      new VVector(this.vX, this.vY),
-      this.color
-    );
+
+    if (this.editObject) {
+      this.objectService.editObject(
+        this.name,
+        this.startX,
+        this.startY,
+        this.radius,
+        this.weight,
+        new VVector(this.vX, this.vY),
+        this.color
+      );
+    } else {
+      this.objectService.addNewObject(
+        this.name,
+        this.startX,
+        this.startY,
+        this.radius,
+        this.weight,
+        new VVector(this.vX, this.vY),
+        this.color
+      );
+    }
+
     this.name = '';
     this.startX = 0;
     this.startY = 0;
     this.radius = 10;
     this.color = 'red';
     this.wrongInput = false;
+    this.editObject = undefined;
+    this.closeForm.emit();
   }
 
   close() {

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -15,10 +15,12 @@
   *ngFor="let object of getObjectService().getObjects()"
   [object]="object"
 ></app-object>
+
 <app-add-object-form
   *ngIf="showAddObjectForm"
   (closeForm)="closeAddObjectForm()"
 ></app-add-object-form>
+
 <app-my-icon
   class="glass"
   name="bi bi-plus-circle-dotted"

diff --git a/src/app/object-meta-data/object-meta-data.component.html b/src/app/object-meta-data/object-meta-data.component.html
@@ -3,9 +3,13 @@
   *ngIf="getObjectService().getSelectedObject() != -1"
 >
   <div class="row">
-    <b>{{ getObjectService().getSelectedObjectAsObject().name }}</b>
+    <b>{{ obj().name }}</b>
     <div class="frow">
-      <app-my-icon name="bi bi-pencil" description="Edit object"></app-my-icon>
+      <app-my-icon
+        name="bi bi-pencil"
+        description="Edit object"
+        (click)="showAddObjectForm = true"
+      ></app-my-icon>
       <app-my-icon
         name="bi bi-trash"
         (click)="getObjectService().deleteSelectedObject()"
@@ -16,38 +20,46 @@
   <div class="line"></div>
   <div class="row">
     <i>X</i>
-    <b>{{ trimNumber(getObjectService().getSelectedObjectAsObject().x) }}</b>
+    <b>{{ trimNumber(obj().x) }}</b>
   </div>
   <div class="line"></div>
   <div class="row">
     <i>Y</i>
-    <b>{{ trimNumber(getObjectService().getSelectedObjectAsObject().y) }}</b>
+    <b>{{ trimNumber(obj().y) }}</b>
+  </div>
+  <div class="line"></div>
+  <div class="row">
+    <i>Absolut Velocity</i>
+    <b>{{
+      trimNumber(getAbsolutVelocity(obj().velocity.x, obj().velocity.y))
+    }}</b>
   </div>
   <div class="line"></div>
   <div class="row">
     <i>Velocity</i>
     <b>
       {{
         "(" +
-          trimNumber(
-            getObjectService().getSelectedObjectAsObject().velocity.x
-          ) +
+          trimNumber(obj().velocity.x) +
           " , " +
-          trimNumber(
-            getObjectService().getSelectedObjectAsObject().velocity.y
-          ) +
+          trimNumber(obj().velocity.y) +
           ")"
       }}
     </b>
   </div>
   <div class="line"></div>
   <div class="row">
     <i>Weight</i>
-    <b>{{ getObjectService().getSelectedObjectAsObject().weight }}</b>
+    <b>{{ addTousandSeparator(obj().weight) }}</b>
   </div>
   <div class="line"></div>
   <div class="row">
     <i>Radius</i>
-    <b>{{ getObjectService().getSelectedObjectAsObject().radius }}</b>
+    <b>{{ obj().radius }}</b>
   </div>
 </div>
+<app-add-object-form
+  *ngIf="showAddObjectForm"
+  (closeForm)="showAddObjectForm = false"
+  [editObject]="obj()"
+></app-add-object-form>
diff --git a/src/app/object-meta-data/object-meta-data.component.ts b/src/app/object-meta-data/object-meta-data.component.ts
@@ -7,13 +7,26 @@ import { ObjectService } from '../service/object.service';
   styleUrls: ['./object-meta-data.component.sass'],
 })
 export class ObjectMetaDataComponent {
+  showAddObjectForm = false;
   constructor(private objectService: ObjectService) {}
 
   getObjectService() {
     return this.objectService;
   }
 
+  obj() {
+    return this.objectService.getSelectedObjectAsObject();
+  }
+
   trimNumber(number: number): string {
     return number.toFixed(1);
   }
+
+  addTousandSeparator(number: number): string {
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
+  getAbsolutVelocity(x: number, y: number): number {
+    return Math.sqrt(x * x + y * y);
+  }
 }
diff --git a/src/app/service/object.service.ts b/src/app/service/object.service.ts
@@ -24,6 +24,31 @@ export class ObjectService {
     return this.objects;
   }
 
+  checkName(name: string) {
+    return !this.objects.find((object) => object.name === name);
+  }
+
+  editObject(
+    name: string,
+    startX: number,
+    startY: number,
+    radius: number,
+    weight: number,
+    velocity: VVector,
+    color: string = 'red'
+  ): void {
+    if (!this.selectedObject) {
+      return;
+    }
+    this.deleteObject(this.selectedObject.id, false);
+    this.addObject(
+      new Obj(name, startX, startY, radius, weight, velocity, color),
+      false
+    );
+    this.selectedObject = null;
+    LocalStorageService.saveObjects(this.objects);
+  }
+
   addNewObject(
     name: string,
     startX: number,
@@ -81,6 +106,13 @@ export class ObjectService {
     this.selectedObject = null;
   }
 
+  editSelectedObject(): void {
+    if (this.selectedObject) {
+      this.deleteObject(this.selectedObject.id);
+    }
+    this.selectedObject = null;
+  }
+
   getObjectsForExport(): any[] {
     return this.objects.map((object) => {
       return {