diff --git a/README.md b/README.md index 8ecdd5e..f90300e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,34 @@ # MqttCreator -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4. +This project is a simple and incomplete generator to create a Homeassinstant compatible MQTT Autodiscovery Entity + +## Limited Coverage +By now only the these entities (binary_sensor, light, sensor, switch) are supported by the generator, because they are the most commmonly used entities for my own needs + +## Usage +The UI is seperated into two parts, the global generator with settings and upper Topic and the entity itselt + +### Generator: +Automated Topic Settings: +- all: the topics will be generated automatically from the other supplied inputs, all changes will be wiped +- only changes: user inputs will be synced accross all topics (only works if the general structure stays the same and changes are not to large at once) +- none: everything is done manually + +### Entity: +After choosing an entity type, change and input the corresponding values as you like and if automated topics is actived the topics will be populated automatically + +Once done, you can press the DiscoveryString button. + +### Discovery String: +First you see the discovery string formatted, there you can check for any errors in the configuration + +Below there will be a discovery string with escaped perentecies to input into print statements or similar + +The last field Discovery Topic is the automatically generated Discovery Topic for default Homeassistant MQTT Autodiscovery + + + + diff --git a/src/app/app.component.html b/src/app/app.component.html index d63a16c..0b0951f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,10 @@ -
- -
\ No newline at end of file + +
+
+ app icon +

MQTT Discovery Creator

+ My Homepage + Code +
+ +
\ No newline at end of file diff --git a/src/app/entity/entity.component.css b/src/app/entity/entity.component.css index 2f613fb..5a303fc 100644 --- a/src/app/entity/entity.component.css +++ b/src/app/entity/entity.component.css @@ -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{ + } \ No newline at end of file diff --git a/src/app/entity/entity.component.html b/src/app/entity/entity.component.html index 2382a68..4430c7c 100644 --- a/src/app/entity/entity.component.html +++ b/src/app/entity/entity.component.html @@ -67,8 +67,10 @@

Discovery String

- 
{{discoveryString | json}}
- {{JSONdiscoveryString}} +
+ 
{{discoveryString | json}}
+ {{JSONdiscoveryString}} +

Discovery Topic

diff --git a/src/app/entity/entity.component.ts b/src/app/entity/entity.component.ts index 11f1ad9..9045f97 100644 --- a/src/app/entity/entity.component.ts +++ b/src/app/entity/entity.component.ts @@ -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( '/', diff --git a/src/app/generator/generator.component.css b/src/app/generator/generator.component.css index 48c792f..cd945ae 100644 --- a/src/app/generator/generator.component.css +++ b/src/app/generator/generator.component.css @@ -2,6 +2,9 @@ background: #9D9D9D; border-radius: 1rem; padding: 1rem .8rem ; + display: flex; + flex-direction: column; + gap: 1rem; } .customCheckboxContainer{ diff --git a/src/app/generator/generator.component.html b/src/app/generator/generator.component.html index 88e5240..2032dbb 100644 --- a/src/app/generator/generator.component.html +++ b/src/app/generator/generator.component.html @@ -1,28 +1,15 @@ -
-
- app icon -

MQTT Discovery Creator

-
- - + +
-

Data Channel

-
-

Bereich

- Data Channel --> + +
+

Bereich

+ +
+

Automatische Topics

@@ -32,10 +19,10 @@
+
-
+
- -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 8c9d32b..1900866 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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%; */ } \ No newline at end of file