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,45 +3,58 @@
 @tailwind components;
 @tailwind utilities;
 
-:root{
+:root {
   --accent: #4cb926;
   --text: #535353;
   --primary: #b3b3b3;
   --secondary: #f8f8f8;
-
 }
 
-input, select, label, pre {
+input,
+select,
+label,
+pre,
+button {
   background: var(--primary);
-    padding: .25rem .75rem;
+  padding: 0.25rem 0.75rem;
   border-radius: 1rem;
 }
 
-input, select{
+pre {
+  text-wrap: wrap;
+}
+
+input,
+select {
   width: 100%;
   @apply focus:outline focus:outline-myAccent focus:outline-2;
 }
 
-input::placeholder{
+span {
+  @apply focus-visible:outline focus-visible:outline-myAccent focus-visible:outline-2;
+}
+
+input::placeholder {
   color: var(--text);
   opacity: 1;
 }
 
-input::-ms-input-placeholder { /* Edge 12 -18 */
+input::-ms-input-placeholder {
+  /* Edge 12 -18 */
   color: var(--text);
-  }
+}
 
-svg{
+svg {
   height: 90%;
   margin: auto 0;
   width: auto;
 }
 
-*{
+* {
   color: var(--text);
 }
 
-button{
+button {
   background-color: var(--accent);
   border-radius: 1rem;
   color: var(--secondary);
@@ -49,7 +62,7 @@ button{
   min-width: 4rem;
 }
 
-.randomButton{
+.randomButton {
   @apply flex justify-center content-center p-1;
 }
 
@@ -58,26 +71,39 @@ button path {
 }
 
 .property {
-    background-color: #9D9D9D;
-    border-radius: .5rem;
+  /* background-color: #9d9d9d; */
+  border-radius: 0.5rem;
   /* padding: .5rem; */
   display: inline-flex;
   flex-direction: column;
-    gap: .25rem;
+  gap: 0.25rem;
 }
 
-.property p, .property h3{
+.property p,
+.property h3 {
   align-self: left;
-    padding-left: .5rem;
+  padding-left: 0.5rem;
 }
 
-.property > div {
+div.property {
   width: 100%;
 }
 
 .property span {
-    background: #B3B3B3;
-    padding: .25rem .75rem;
+  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;
+}