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

CHANGE: styling and readme

Browse Source
This commit is contained in:
Tom Tröger
2024-06-28 12:38:19 +01:00
parent 5ed32b8b82
commit af36d235a2
8 changed files with 106 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/app.component.html
View File

@@ -1,3 +1,10 @@
<div>
<router-outlet></router-outlet>
</div>
<!DOCTYPE html>
<main class="p-4">
<div class="flex flex-row justify-left gap-4 items-center h-12 mb-2 px-2">
<img src="mqtt_creator.ico" alt="app icon" class="h-full">
<h2 class="text-3xl font-bold text-myButton w-full" >MQTT Discovery Creator</h2>
<a class="w-auto text-nowrap hover:text-myButton" href="http://www.tomtroeger.de">My Homepage</a>
<a class="w-auto text-nowrap hover:text-myButton" href="https://git.letsstein.de/tom/mqtt_creator">Code</a>
</div>
<router-outlet></router-outlet>
</main>

24
src/app/entity/entity.component.css
View File

@@ -1,23 +1,3 @@
.property {
background-color: #9D9D9D;
border-radius: .5rem;
padding: .5rem;
display: inline-flex;
flex-direction: column;
column-gap: 1rem;
}
.property p{
align-self: center;
}
.property > div {
width: 100%;
}
.property span {
background: #B3B3B3;
padding: .25rem .75rem;
border-radius: 1rem;
/* width: 100%; */
pre{
}

6
src/app/entity/entity.component.html
View File

@@ -67,8 +67,10 @@
<ng-container *ngIf="showDiscovery">
<div class="col-span-2 property" >
<p>Discovery String</p>
<pre>{{discoveryString | json}}</pre>
<span contenteditable>{{JSONdiscoveryString}}</span>
<div class="flex flex-row gap-2">
<pre>{{discoveryString | json}}</pre>
<span contenteditable>{{JSONdiscoveryString}}</span>
</div>
</div>
<div class="col-span-2 property" >
<p>Discovery Topic</p>

23
src/app/entity/entity.component.ts
View File

@@ -79,13 +79,28 @@ export class EntityComponent {
this[model] = value as (typeof this)[keyof this];
return;
}
let sync_topic = new_list.slice(0, -1).join('/');
this.stat_t = sync_topic + '/stat';
this.entity_cmd_t = sync_topic + '/cmd';
this.entity_bri_cmd_t = sync_topic + '/bri_cmd';
let missing_index = new_list.indexOf(missing[0]);
this.stat_t = this.replaceComponent(this.stat_t, missing[0], missing_index);
this.entity_cmd_t = this.replaceComponent(
this.entity_cmd_t,
missing[0],
missing_index
);
this.entity_bri_cmd_t = this.replaceComponent(
this.entity_bri_cmd_t,
missing[0],
missing_index
);
return;
}
replaceComponent(object: string, value: string, index: number) {
let param_list = object.split('/');
param_list[index] = value;
return param_list.join('/');
}
updateTopic(topic: string) {
let topic_str = join(
'/',

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

@@ -2,6 +2,9 @@
background: #9D9D9D;
border-radius: 1rem;
padding: 1rem .8rem ;
display: flex;
flex-direction: column;
gap: 1rem;
}
.customCheckboxContainer{

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

@@ -1,28 +1,15 @@
<main class="flex flex-col gap-2 p-4">
<div class="flex flex-row justify-left gap-4 items-center h-12">
<img src="mqtt_creator.ico" alt="app icon" class="h-full">
<h2 class="text-3xl font-bold text-myButton" >MQTT Discovery Creator</h2>
</div>
<!-- <div class="border border-slate-800 my-2">
<h2>Device: - not working</h2>
<p>Name</p><input type="text" placeholder="name here" [ngModel]="generatorService.device_name"
(ngModelChange)="generatorService.device_name = $event; generatorService.update()">
<p>Identifier</p>
<input type="text" placeholder="Identifier here" [ngModel]="generatorService.device_id"
(ngModelChange)="generatorService.device_id = $event">
<button (click)="generatorService.device_id = useRandomString(16)">Random</button>
<p>Standalone -> no device</p>
<input type="checkbox" [ngModel]="generatorService.device_standalone"
(ngModelChange)="generatorService.device_standalone = $event; generatorService.update()" />
</div> -->
<!DOCTYPE html>
<div class="flex flex-col gap-2">
<div class="genContainer">
<!-- Statetopic -->
<h3>Data Channel</h3>
<div>
<p>Bereich</p>
<input type="text" [ngModel]="generatorService.upperTopic"
<!-- <h3>Data Channel</h3> -->
<div class="property">
<p>Bereich</p>
<input type="text" [ngModel]="generatorService.upperTopic"
(ngModelChange)="generatorService.upperTopic = $event; generatorService.update()" />
</div>
<div class="property">
<p>Automatische Topics</p>
<div class="customCheckboxContainer">
<input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_0" type="radio" name="auto_topic" value="2">
@@ -32,10 +19,10 @@
<input [ngModel]="auto_topic" (ngModelChange)="auto_topic=$event" id="auto_topic_2" type="radio" name="auto_topic" value="0">
<label class="customCheckbox" for="auto_topic_2">Aus</label>
</div>
</div>
</div>
</div>
<app-entity class="genContainer" ></app-entity>
</main>
</div>

27
src/styles.css
View File

@@ -11,7 +11,7 @@
}
input, select, label {
input, select, label, pre {
background: var(--primary);
padding: .25rem .75rem;
border-radius: 1rem;
@@ -55,4 +55,29 @@ button{
button path {
color: var(--secondary);
}
.property {
background-color: #9D9D9D;
border-radius: .5rem;
/* padding: .5rem; */
display: inline-flex;
flex-direction: column;
gap: .25rem;
}
.property p, .property h3{
align-self: left;
padding-left: .5rem;
}
.property > div {
width: 100%;
}
.property span {
background: #B3B3B3;
padding: .25rem .75rem;
border-radius: 1rem;
/* width: 100%; */
}