ADD: heading and close button

2024-08-02 08:11:39 +02:00
parent c2c82d73c1
commit 184bf373ad
8 changed files with 44 additions and 24 deletions
--- a/src/app/entity-data/entity-data.component.css
+++ b/src/app/entity-data/entity-data.component.css
@@ -0,0 +1,18 @@
+.heading {
+  display: flex;
+  position: inherit;
+  margin-bottom: 0.25rem;
+}
+
+.heading button {
+  padding: 0.25rem;
+  min-width: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.heading h2 {
+  width: 100%;
+  text-align: center;
+}
--- a/src/app/entity-data/entity-data.component.html
+++ b/src/app/entity-data/entity-data.component.html
@@ -1,4 +1,11 @@
 <!DOCTYPE html5>
+<div class="heading" *ngIf="created" >
+    <h2>entity {{ent_index}} - {{basemodel.ent_type}}</h2>
+    <button (click)="generatorService.deleteEntity(basemodel)" ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+      </svg>
+    </button>
+</div>
 <form class="grid grid-cols-2 gap-4" (submit)="$event.preventDefault();generatorService.createEntity()" >
    <div class="property" *ngIf="hasProperty('name')">
        <p>Name</p>
@@ -8,12 +15,6 @@
        <p>Uniqe ID</p>
        <div class="flex-row flex gap-2">
            <input type="text" name="entity_uniq_id" [ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event"/>
-            <!-- <button tabindex="-1" class="randomButton" type="button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-3" viewBox="0 0 16 16">
-                    <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/>
-                    <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m8 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
-                  </svg>
-            </button> -->
        </div>
    </div>
    <div class="property" *ngIf="hasProperty('cmd_t')">
--- a/src/app/entity-data/entity-data.component.ts
+++ b/src/app/entity-data/entity-data.component.ts
@@ -11,6 +11,8 @@ export class EntityDataComponent {
  @Input() entity_type: number = 1;
  @Input() basemodel!: MQTTEntity;
  @Input() created: boolean = false;
+  @Input() ent_index: number = 0;
+
  @ViewChild('nameinput') nameinput!: any;
  constructor(public generatorService: GeneratorService) {
    if (generatorService.selected_entity) {
--- a/src/app/generator/generator.component.css
+++ b/src/app/generator/generator.component.css
@@ -9,12 +9,13 @@
 .outContainer {
  background: #9d9d9d;
  border-radius: 1rem;
-  padding: 1rem 0.8rem;
+  padding: 0.75rem;
  gap: 1rem;
 }

 .genContainer {
  grid-column: 1;
+  position: relative;
 }

 .outContainer {
--- a/src/app/generator/generator.component.html
+++ b/src/app/generator/generator.component.html
@@ -67,8 +67,8 @@
  </ng-container>
  <app-entity-data class="genContainer" [basemodel]="generatorService.selected_entity" *ngIf="generatorService.selected_entity != null" ></app-entity-data>
  <app-output class="outContainer" [ngStyle]="{'grid-row': codeSpan}" *ngIf="outputService.integrated_output" ></app-output>
-  <ng-container *ngFor="let entity of created_entities">
-    <app-entity-data class="genContainer" [basemodel]="entity" [created]="true" ></app-entity-data>
+  <ng-container *ngFor="let entity of created_entities.reverse()">
+    <app-entity-data class="genContainer" [basemodel]="entity" [created]="true" [ent_index]="created_entities.indexOf(entity)" ></app-entity-data>
    <app-entity-output class="outContainer" *ngIf="outputService.seperate_outputs" [basemodel]="entity" ></app-entity-output>
  </ng-container>
 </div>
--- a/src/app/generator/generator.component.ts
+++ b/src/app/generator/generator.component.ts
@@ -23,7 +23,7 @@ export class GeneratorComponent {
  device: MQTTDevice = this.generatorService.device;

  get created_entities(): MQTTEntity[] {
-    return Array.from(this.generatorService.created_enteties).reverse();
+    return Array.from(this.generatorService.created_enteties);
  }

  get codeSpan(): string {
--- a/src/app/output/output.component.css
+++ b/src/app/output/output.component.css
@@ -1,5 +1,5 @@
 pre {
-  max-width: calc(50vw - 1rem);
+  max-width: calc(50vw - 3rem);
  overflow-x: scroll;
  text-wrap: nowrap;
 }
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,9 +5,11 @@

 :root {
  --accent: #4cb926;
-  --text: #535353;
+  --text: #3d3d3d;
  --primary: #b3b3b3;
  --secondary: #f8f8f8;
+  --placeholder: #777;
+  --input_bg: #b3b3b3;
 }

 input,
@@ -35,13 +37,13 @@ span {
 }

 input::placeholder {
-  color: var(--text);
+  color: var(--placeholder);
  opacity: 1;
 }

 input::-ms-input-placeholder {
  /* Edge 12 -18 */
-  color: var(--text);
+  color: var(--placeholder);
 }

 svg {
@@ -62,10 +64,6 @@ button {
  min-width: 4rem;
 }

-.randomButton {
-  @apply flex justify-center content-center p-1;
-}
-
 button path {
  color: var(--secondary);
 }
@@ -90,7 +88,7 @@ div.property {
 }

 .property span {
-  background: #b3b3b3;
+  background: var(--input_bg);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  /* width: 100%; */
@@ -98,12 +96,12 @@ div.property {

 #entityPlaceholder {
  background: transparent;
-  border: 2px dotted #b3b3b3;
-  color: #b3b3b3;
+  border: 2px dotted var(--input_bg);
+  color: var(--input_bg);
  font-weight: normal;
 }

 #entityPlaceholder:hover {
-  border-color: #f8f8f8;
-  color: #f8f8f8;
+  border-color: var(--secondary);
+  color: var(--secondary);
 }