tom_trgr/mqtt_creator
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

ADD: heading and close button
All checks were successful
mqtt_creator/pipeline/head This commit looks good
Details
mqtt_creator/pipeline/pr-main This commit looks good
Details

Browse Source
This commit is contained in:
Tom Tröger
2024-08-02 08:11:39 +02:00
parent c2c82d73c1
commit 184bf373ad
8 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/entity-data/entity-data.component.css
View File

@@ -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;
}

15
src/app/entity-data/entity-data.component.html
View File

@@ -1,4 +1,11 @@
<!DOCTYPE html5> <!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()" > <form class="grid grid-cols-2 gap-4" (submit)="$event.preventDefault();generatorService.createEntity()" >
<div class="property" *ngIf="hasProperty('name')"> <div class="property" *ngIf="hasProperty('name')">
<p>Name</p> <p>Name</p>
@@ -8,12 +15,6 @@
<p>Uniqe ID</p> <p>Uniqe ID</p>
<div class="flex-row flex gap-2"> <div class="flex-row flex gap-2">
<input type="text" name="entity_uniq_id" [ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event"/> <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> </div>
<div class="property" *ngIf="hasProperty('cmd_t')"> <div class="property" *ngIf="hasProperty('cmd_t')">
@@ -58,4 +59,4 @@
<button class="w-full" (click)="generatorService.createEntity()">Add Entity</button> <button class="w-full" (click)="generatorService.createEntity()">Add Entity</button>
</div> </div>
</form> </form>

2
src/app/entity-data/entity-data.component.ts
View File

@@ -11,6 +11,8 @@ export class EntityDataComponent {
@Input() entity_type: number = 1; @Input() entity_type: number = 1;
@Input() basemodel!: MQTTEntity; @Input() basemodel!: MQTTEntity;
@Input() created: boolean = false; @Input() created: boolean = false;
@Input() ent_index: number = 0;
@ViewChild('nameinput') nameinput!: any; @ViewChild('nameinput') nameinput!: any;
constructor(public generatorService: GeneratorService) { constructor(public generatorService: GeneratorService) {
if (generatorService.selected_entity) { if (generatorService.selected_entity) {

3
src/app/generator/generator.component.css
View File

@@ -9,12 +9,13 @@
.outContainer { .outContainer {
background: #9d9d9d; background: #9d9d9d;
border-radius: 1rem; border-radius: 1rem;
padding: 1rem 0.8rem; padding: 0.75rem;
gap: 1rem; gap: 1rem;
} }
.genContainer { .genContainer {
grid-column: 1; grid-column: 1;
position: relative;
} }
.outContainer { .outContainer {

4
src/app/generator/generator.component.html
View File

@@ -67,8 +67,8 @@
</ng-container> </ng-container>
<app-entity-data class="genContainer" [basemodel]="generatorService.selected_entity" *ngIf="generatorService.selected_entity != null" ></app-entity-data> <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> <app-output class="outContainer" [ngStyle]="{'grid-row': codeSpan}" *ngIf="outputService.integrated_output" ></app-output>
<ng-container *ngFor="let entity of created_entities"> <ng-container *ngFor="let entity of created_entities.reverse()">
<app-entity-data class="genContainer" [basemodel]="entity" [created]="true" ></app-entity-data> <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> <app-entity-output class="outContainer" *ngIf="outputService.seperate_outputs" [basemodel]="entity" ></app-entity-output>
</ng-container> </ng-container>
</div> </div>

2
src/app/generator/generator.component.ts
View File

@@ -23,7 +23,7 @@ export class GeneratorComponent {
device: MQTTDevice = this.generatorService.device; device: MQTTDevice = this.generatorService.device;
get created_entities(): MQTTEntity[] { get created_entities(): MQTTEntity[] {
return Array.from(this.generatorService.created_enteties).reverse(); return Array.from(this.generatorService.created_enteties);
} }
get codeSpan(): string { get codeSpan(): string {

2
src/app/output/output.component.css
View File

@@ -1,5 +1,5 @@
pre { pre {
max-width: calc(50vw - 1rem); max-width: calc(50vw - 3rem);
overflow-x: scroll; overflow-x: scroll;
text-wrap: nowrap; text-wrap: nowrap;
} }

22
src/styles.css
View File

@@ -5,9 +5,11 @@
:root { :root {
--accent: #4cb926; --accent: #4cb926;
--text: #535353; --text: #3d3d3d;
--primary: #b3b3b3; --primary: #b3b3b3;
--secondary: #f8f8f8; --secondary: #f8f8f8;
--placeholder: #777;
--input_bg: #b3b3b3;
} }
input, input,
@@ -35,13 +37,13 @@ span {
} }
input::placeholder { input::placeholder {
color: var(--text); color: var(--placeholder);
opacity: 1; opacity: 1;
} }
input::-ms-input-placeholder { input::-ms-input-placeholder {
/* Edge 12 -18 */ /* Edge 12 -18 */
color: var(--text); color: var(--placeholder);
} }
svg { svg {
@@ -62,10 +64,6 @@ button {
min-width: 4rem; min-width: 4rem;
} }
.randomButton {
@apply flex justify-center content-center p-1;
}
button path { button path {
color: var(--secondary); color: var(--secondary);
} }
@@ -90,7 +88,7 @@ div.property {
} }
.property span { .property span {
background: #b3b3b3; background: var(--input_bg);
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 1rem; border-radius: 1rem;
/* width: 100%; */ /* width: 100%; */
@@ -98,12 +96,12 @@ div.property {
#entityPlaceholder { #entityPlaceholder {
background: transparent; background: transparent;
border: 2px dotted #b3b3b3; border: 2px dotted var(--input_bg);
color: #b3b3b3; color: var(--input_bg);
font-weight: normal; font-weight: normal;
} }
#entityPlaceholder:hover { #entityPlaceholder:hover {
border-color: #f8f8f8; border-color: var(--secondary);
color: #f8f8f8; color: var(--secondary);
} }