ADD: general changes + changelog

Changelog.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## [1.1.0] - Devices
+- code integration for faster development
+- device and multi entity support
+- dual window view (config + discovery)
+- fixed config bug
+
+## [1.0.0] - Initial
+- Single Entity creation and discovery creation

src/app/app.component.html

@@ -3,7 +3,7 @@
 <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 text-nowrap" >MQTT Discovery Creator</h2>
-  <p class="w-auto text-nowrap w-full">v.1.0</p>
+  <p class="w-auto text-nowrap w-full">v.1.1</p>
   <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>

src/app/app.module.ts

@@ -1,26 +1,27 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
+import {
+  BrowserModule,
+  provideClientHydration,
+} from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { GeneratorComponent } from './generator/generator.component';
 import { FormsModule } from '@angular/forms';
-import { EntityComponent } from './entity/entity.component';
+import { EntityDataComponent } from './entity-data/entity-data.component';
+import { EntityOutputComponent } from './entity-output/entity-output.component';
+import { OutputComponent } from './output/output.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     GeneratorComponent,
-    EntityComponent
+    EntityDataComponent,
+    EntityOutputComponent,
+    OutputComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-  ],
-  providers: [
-    provideClientHydration()
-  ],
-  bootstrap: [AppComponent]
+  imports: [BrowserModule, AppRoutingModule, FormsModule],
+  providers: [provideClientHydration()],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/styles.css

@@ -3,81 +3,107 @@
 @tailwind components;
 @tailwind utilities;
 
-:root{
-    --accent: #4cb926;
-    --text: #535353;
-    --primary: #b3b3b3;
-    --secondary: #f8f8f8;
-
+:root {
+  --accent: #4cb926;
+  --text: #535353;
+  --primary: #b3b3b3;
+  --secondary: #f8f8f8;
 }
 
-input, select, label, pre {
-    background: var(--primary);
-    padding: .25rem .75rem;
-    border-radius: 1rem;
+input,
+select,
+label,
+pre,
+button {
+  background: var(--primary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
 }
 
-input, select{
-    width: 100%;
-    @apply focus:outline focus:outline-myAccent focus:outline-2;
+pre {
+  text-wrap: wrap;
 }
 
-input::placeholder{
-    color: var(--text);
-    opacity: 1;
+input,
+select {
+  width: 100%;
+  @apply focus:outline focus:outline-myAccent focus:outline-2;
 }
 
-input::-ms-input-placeholder { /* Edge 12 -18 */
-    color: var(--text);
-  }
-
-svg{
-    height: 90%;
-    margin: auto 0;
-    width: auto;
+span {
+  @apply focus-visible:outline focus-visible:outline-myAccent focus-visible:outline-2;
 }
 
-*{
-    color: var(--text);
+input::placeholder {
+  color: var(--text);
+  opacity: 1;
 }
 
-button{
-    background-color: var(--accent);
-    border-radius: 1rem;
-    color: var(--secondary);
-    font-weight: bold;
-    min-width: 4rem;
+input::-ms-input-placeholder {
+  /* Edge 12 -18 */
+  color: var(--text);
 }
 
-.randomButton{
-    @apply flex justify-center content-center p-1;
+svg {
+  height: 90%;
+  margin: auto 0;
+  width: auto;
+}
+
+* {
+  color: var(--text);
+}
+
+button {
+  background-color: var(--accent);
+  border-radius: 1rem;
+  color: var(--secondary);
+  font-weight: bold;
+  min-width: 4rem;
+}
+
+.randomButton {
+  @apply flex justify-center content-center p-1;
 }
 
 button path {
-    color: var(--secondary);
+  color: var(--secondary);
 }
 
 .property {
-    background-color: #9D9D9D;
-    border-radius: .5rem;
-    /* padding: .5rem; */
-    display: inline-flex;
-    flex-direction: column;
-    gap: .25rem;
+  /* background-color: #9d9d9d; */
+  border-radius: 0.5rem;
+  /* padding: .5rem; */
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
-.property p, .property h3{
-    align-self: left;
-    padding-left: .5rem;
+.property p,
+.property h3 {
+  align-self: left;
+  padding-left: 0.5rem;
 }
 
-.property > div {
-    width: 100%;
+div.property {
+  width: 100%;
 }
 
 .property span {
-    background: #B3B3B3;
-    padding: .25rem .75rem;
-    border-radius: 1rem;
-    /* width: 100%; */
-}
+  background: #b3b3b3;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  /* width: 100%; */
+}
+
+#entityPlaceholder {
+  background: transparent;
+  border: 2px dotted #b3b3b3;
+  color: #b3b3b3;
+  font-weight: normal;
+}
+
+#entityPlaceholder:hover {
+  border-color: #f8f8f8;
+  color: #f8f8f8;
+}