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

Version 1.0 working Entity creation and string generator

Browse Source
This commit is contained in:
Tom Tröger
2024-05-28 07:44:21 +02:00
parent 46eee5d726
commit 13e15a24b7
50 changed files with 13956 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.dockerignore Normal file
View File

@@ -0,0 +1,8 @@
.git
.editorconfig
/.vscode/*
/node_modules
/e2e
/docs
.gitignore
*.zip

16
.editorconfig Normal file
View File

@@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

162
.gitignore vendored
View File

@@ -1,132 +1,42 @@
# ---> Node # See http://help.github.com/ignore-files/ for more about ignoring files.
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html) # Compiled output
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json /dist
/tmp
/out-tsc
/bazel-out
# Runtime data # Node
pids /node_modules
*.pid npm-debug.log
*.seed yarn-error.log
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover # IDEs and editors
lib-cov .idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Coverage directory used by tools like istanbul # Visual Studio Code
coverage .vscode/*
*.lcov !.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# nyc test coverage # Miscellaneous
.nyc_output /.angular/cache
.sass-cache/
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) /connect.lock
.grunt /coverage
/libpeerconnection.log
# Bower dependency directory (https://bower.io/) testem.log
bower_components /typings
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# System files
.DS_Store
Thumbs.db

4
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,4 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}

20
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,20 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}

42
.vscode/tasks.json vendored Normal file
View File

@@ -0,0 +1,42 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}

16
Dockerfile Normal file
View File

@@ -0,0 +1,16 @@
FROM node:18.13.0-alpine AS build
WORKDIR /app
RUN npm cache clean --force
COPY . .
RUN npm install
RUN npm run build
FROM nginx:mainline-alpine AS ngi
COPY --from=build /app/dist/mqtt_creator /usr/share/nginx
COPY /nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

28
README.md
View File

@@ -1,3 +1,27 @@
# mqtt_creator # MqttCreator
Generator to create MQTT Strings for Homeasistant Autodiscovery This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

120
angular.json Normal file
View File

@@ -0,0 +1,120 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mqtt_creator": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
"@schematics/angular:pipe": {
"standalone": false
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/mqtt_creator",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}
},
"configurations": {
"production": {
"optimization": false,
"outputHashing": "none",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"statsJson": false,
"progress": false,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
]
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "mqtt_creator:build:production"
},
"development": {
"buildTarget": "mqtt_creator:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "mqtt_creator:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": false
}
}

20
nginx.conf Normal file
View File

@@ -0,0 +1,20 @@
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/browser/;
location / {
try_files $uri $uri/ /index.html =404;
}
}

12816
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

45
package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "mqtt-creator",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:mqtt_creator": "node dist/mqtt_creator/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.4",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.4",
"@angular/cli": "^17.3.4",
"@angular/compiler-cli": "^17.3.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"tailwindcss": "^3.4.3",
"typescript": "~5.4.2"
}
}

56
server.ts Normal file
View File

@@ -0,0 +1,56 @@
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import AppServerModule from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(browserDistFolder, {
maxAge: '1y'
}));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap: AppServerModule,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();

7
src/app/_models/mqtt-binary.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { MqttBinary } from './mqtt-binary';
describe('MqttBinary', () => {
it('should create an instance', () => {
expect(new MqttBinary()).toBeTruthy();
});
});

7
src/app/_models/mqtt-binary.ts Normal file
View File

@@ -0,0 +1,7 @@
import { DEVICE_CLASS, MQTTEntity } from "./mqtt_base";
export class MqttBinary extends MQTTEntity {
dev_cla: DEVICE_CLASS = 0
pl_on: string = "1";
pl_off: string = "0";
}

7
src/app/_models/mqtt-light.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { MqttLight } from './mqtt-light';
describe('MqttLight', () => {
it('should create an instance', () => {
expect(new MqttLight()).toBeTruthy();
});
});

9
src/app/_models/mqtt-light.ts Normal file
View File

@@ -0,0 +1,9 @@
import { MQTTEntity } from "./mqtt_base";
export class MqttLight extends MQTTEntity {
cmd_t: string = "command/topic";
bri_cmd_t: string = "brightness/command/topic";
pl_on: string = "1";
pl_off: string = "0";
val_tpl: string = "";
}

7
src/app/_models/mqtt-sensor.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { MqttSensor } from './mqtt-sensor';
describe('MqttSensor', () => {
it('should create an instance', () => {
expect(new MqttSensor()).toBeTruthy();
});
});

5
src/app/_models/mqtt-sensor.ts Normal file
View File

@@ -0,0 +1,5 @@
import { MQTTEntity } from "./mqtt_base";
export class MqttSensor extends MQTTEntity {
unit_of_meas: string = "meassure";
}

7
src/app/_models/mqtt-switch.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { MqttSwitch } from './mqtt-switch';
describe('MqttSwitch', () => {
it('should create an instance', () => {
expect(new MqttSwitch()).toBeTruthy();
});
});

8
src/app/_models/mqtt-switch.ts Normal file
View File

@@ -0,0 +1,8 @@
import { DEVICE_CLASS, MQTTEntity } from "./mqtt_base";
export class MqttSwitch extends MQTTEntity {
dev_cla: DEVICE_CLASS = 0
cmd_t: string = "command/topic";
pl_on: string = "1";
pl_off: string = "0";
}

7
src/app/_models/mqtt_base.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { MQTTEntity } from './mqtt_base';
describe('MQTTEntity', () => {
it('should create an instance', () => {
expect(new MQTTEntity()).toBeTruthy();
});
});

43
src/app/_models/mqtt_base.ts Normal file
View File

@@ -0,0 +1,43 @@
export class MQTTEntity {
name: string = "";
stat_t: string = "state/topic";
uniq_id: string = "unique_id";
dev: MQTTDevice | null = null;
// entity_type: ENTITY_TYPE = 0;
setProperty(name: unknown, value: any): void {
if(!this.hasOwnProperty(String(name))) return
this[name as keyof this] = value;
}
createString() : string{
let string: string = "";
for(let property of Object.getOwnPropertyNames(this)){
if(this[property as keyof this] == null) continue;
string += `"${property}": "${this[property as keyof this]}",`
}
console.log(string);
return string;
}
}
export class MQTTDevice {
name: string = "";
identifiers: string[] = ["MQTT"];
serial_number: string = "";
configuration_url: string = "";
}
// export enum ENTITY_TYPE {
// light = 0,
// switch = 1,
// sensor = 2,
// binary_sensor = 3,
// button = 4,
// }
export enum DEVICE_CLASS {
motion = 0,
movement = 1,
outlet = 2
}

16
src/app/_services/generator.service.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { GeneratorService } from './generator.service';
describe('GeneratorService', () => {
let service: GeneratorService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(GeneratorService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

50
src/app/_services/generator.service.ts Normal file
View File

@@ -0,0 +1,50 @@
import { EventEmitter, Injectable, Input } from '@angular/core';
import { MQTTEntity } from '../_models/mqtt_base';
import { MqttLight } from '../_models/mqtt-light';
import { MqttSwitch } from '../_models/mqtt-switch';
import { MqttSensor } from '../_models/mqtt-sensor';
import { MqttBinary } from '../_models/mqtt-binary';
@Injectable({
providedIn: 'root'
})
export class GeneratorService {
public selected_entity: MQTTEntity | null = null;
public created_enteties: Array<MQTTEntity> = [];
@Input() device_name: string = "";
@Input() device_id: string = "";
@Input() device_standalone: boolean = false;
@Input() upperTopic: string = "";
updateObserver: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
get_properties() {
return Object.getOwnPropertyNames(this.selected_entity);
}
update(){
this.updateObserver.emit();
}
has_property(property: string): boolean {
if (this.selected_entity == null) return false;
if (this.selected_entity.hasOwnProperty(property)) return true;
return false
}
}
export function randomString(length: number): string {
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
}
export const entity_types: { [id: string]: [string, typeof MQTTEntity] } = {
'0': ["select type", MQTTEntity],
'1': ["light", MqttLight],
'2': ["switch", MqttSwitch],
'3': ["sensor", MqttSensor],
'4': ["binary_sensor", MqttBinary]
}

13
src/app/app-routing.module.ts Normal file
View File

@@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GeneratorComponent } from './generator/generator.component';
const routes: Routes = [
{path: '', component: GeneratorComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

0
src/app/app.component.css Normal file
View File

3
src/app/app.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div>
<router-outlet></router-outlet>
</div>

35
src/app/app.component.spec.ts Normal file
View File

@@ -0,0 +1,35 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'mqtt_creator'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('mqtt_creator');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mqtt_creator');
});
});

10
src/app/app.component.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'mqtt_creator';
}

14
src/app/app.module.server.ts Normal file
View File

@@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}

26
src/app/app.module.ts Normal file
View File

@@ -0,0 +1,26 @@
import { NgModule } from '@angular/core';
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';
@NgModule({
declarations: [
AppComponent,
GeneratorComponent,
EntityComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
],
providers: [
provideClientHydration()
],
bootstrap: [AppComponent]
})
export class AppModule { }

23
src/app/entity/entity.component.css Normal file
View File

@@ -0,0 +1,23 @@
.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%; */
}

73
src/app/entity/entity.component.html Normal file
View File

@@ -0,0 +1,73 @@
<main class="grid grid-cols-2 gap-4">
<!-- Entity -->
<div class="col-span-2 property">
<h3>EntityTyp:</h3>
<select [ngModel]="entity_type" (ngModelChange)="select_type($event)">
<option *ngFor="let key of useObject.keys(entities)" value="{{key}}">{{entities[key][0]}}</option>
</select>
</div>
<div class="property" *ngIf="generatorService.has_property('name')">
<p>Name</p>
<input placeholder="Name here" type="text"[ngModel]="entity_name" (ngModelChange)="entity_name = $event; updateStateTopic()"/>
</div>
<div class="property" *ngIf="generatorService.has_property('uniq_id')">
<p>Uniqe ID</p>
<div class="flex-row flex gap-2">
<input type="text"[ngModel]="entity_uniq_id" (ngModelChange)="entity_uniq_id = $event; updateStateTopic()"/>
<button (click)="entity_uniq_id = useRandomString(10); updateStateTopic()" class="randomButton" >
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
</svg>
</button>
</div>
</div>
<div class="property" *ngIf="generatorService.has_property('cmd_t')">
<p>Command Topic</p>
<input type="text" [ngModel]="entity_cmd_t" (ngModelChange)="entity_cmd_t = $event"/>
</div>
<div class="property" *ngIf="generatorService.has_property('bri_cmd_t')">
<p>Brightness Command Topic</p>
<input type="text" [ngModel]="entity_bri_cmd_t" (ngModelChange)="entity_bri_cmd_t = $event"/>
</div>
<div class="property !flex-row" >
<div *ngIf="generatorService.has_property('pl_off')">
<p>Payload off</p>
<input type="text" [ngModel]="entity_pl_off" (ngModelChange)="entity_pl_off = $event"/>
</div>
<div *ngIf="generatorService.has_property('pl_on')">
<p>Payload on</p>
<input type="text" [ngModel]="entity_pl_on" (ngModelChange)="entity_pl_on = $event"/>
</div>
</div>
<div class="property" *ngIf="generatorService.has_property('unit_of_meas')">
<p>Unit of meassurement</p>
<input type="text" [ngModel]="entity_unit_of_meas" (ngModelChange)="entity_unit_of_meas = $event"/>
</div>
<div class="property" *ngIf="generatorService.has_property('val_tpl')">
<p>Value Template</p>
<input type="text" [ngModel]="entity_val_tpl" (ngModelChange)="entity_val_tpl = $event"/>
</div>
<div class="property" *ngIf="generatorService.has_property('dev_cla')">
<p>Device Class</p>
<input type="text" [ngModel]="entity_dev_cla" (ngModelChange)="entity_dev_cla = $event"/>
</div>
<div class="property" *ngIf="generatorService.has_property('stat_t')">
<p>State Topic</p>
<input type="text" [ngModel]="state_topic" (change)="lockStateTopic($event)"/>
</div>
<button class="col-span-2 py-1" (click)="create_entity()" >Create Entity</button>
<ng-container *ngIf="showDiscovery">
<div class="col-span-2 property" >
<p>Discovery String</p>
<span contenteditable>{{discoveryString}}</span>
</div>
<div class="col-span-2 property" >
<p>Discovery Topic</p>
<input type="text" readonly value="{{discoveryTopic}}">
</div>
</ng-container>
</main>

23
src/app/entity/entity.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EntityComponent } from './entity.component';
describe('EntityComponent', () => {
let component: EntityComponent;
let fixture: ComponentFixture<EntityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [EntityComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EntityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

98
src/app/entity/entity.component.ts Normal file
View File

@@ -0,0 +1,98 @@
import { Component, Input } from '@angular/core';
import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
import { MqttBinary } from '../_models/mqtt-binary';
import { MQTTEntity } from '../_models/mqtt_base';
@Component({
selector: 'app-entity',
templateUrl: './entity.component.html',
styleUrl: './entity.component.css'
})
export class EntityComponent {
constructor(public generatorService: GeneratorService) {
generatorService.updateObserver.subscribe(date => {
this.updateStateTopic();
})
}
readonly useObject = Object;
readonly entities = entity_types;
readonly useRandomString = randomString;
auto_stat_t: boolean = true;
showDiscovery: boolean = false;
@Input() entity_type: number = 0;
@Input() state_topic: string = "";
@Input() basemodel: MQTTEntity | null = null;
@Input() entity_name: string = "";
@Input() entity_uniq_id: string = "";
@Input() entity_cmd_t: string = "";
@Input() entity_bri_cmd_t: string = "";
@Input() entity_pl_off: string = "";
@Input() entity_pl_on: string = "";
@Input() entity_unit_of_meas: string = "";
@Input() entity_val_tpl: string = "";
@Input() entity_dev_cla: string = "";
updateStateTopic() {
if (!this.auto_stat_t) return
this.state_topic = ""
if (this.generatorService.upperTopic != "") this.state_topic += this.generatorService.upperTopic + "/";
if (this.entity_type != 0) this.state_topic += entity_types[this.entity_type][0] + "/"
if (this.generatorService.device_name != "") this.state_topic += this.generatorService.device_name + "/"
if (this.entity_name != "" && this.entity_uniq_id != "") this.state_topic += this.entity_name + "_" + this.entity_uniq_id + "/stat"
else if (this.entity_name != "") this.state_topic += this.entity_name + "/stat"
this.state_topic = this.state_topic.toLocaleLowerCase();
}
basemodelProperty(property: string) {
if (this.basemodel?.hasOwnProperty(property)) console.log(property)
return this.basemodel?.stat_t
}
select_type(event: unknown) {
let ent_type = entity_types[event as keyof typeof entity_types]
let ent_class = ent_type[1];
if (typeof ent_class === 'function') {
this.basemodel = new ent_class();
this.generatorService.selected_entity = this.basemodel
} else this.generatorService.selected_entity = null
this.entity_type = event as number;
this.updateStateTopic();
}
lockStateTopic(event: any) {
this.auto_stat_t = false;
}
create_entity() {
this.basemodel?.setProperty('stat_t', this.state_topic);
this.basemodel?.setProperty('name', this.entity_name);
this.basemodel?.setProperty('cmd_t', this.entity_cmd_t);
this.basemodel?.setProperty('bri_cmd_t', this.entity_bri_cmd_t);
this.basemodel?.setProperty('pl_off', this.entity_pl_off);
this.basemodel?.setProperty('pl_on', this.entity_pl_on);
this.basemodel?.setProperty('unit_of_meas', this.entity_unit_of_meas);
this.basemodel?.setProperty('val_tpl', this.entity_val_tpl);
this.basemodel?.setProperty('dev_cla', this.entity_dev_cla);
this.showDiscovery = true;
return
}
get discoveryString() {
let discString = this.basemodel?.createString()
if (discString == "" || discString == undefined) return "";
discString = discString.replaceAll('"', '\\"')
return "{" + discString + "}"
}
get discoveryTopic() {
if (this.entity_type == 0) return "";
if (this.entity_name == "") return "";
let discTopic = "homeassistant/" + entity_types[this.entity_type][0] + "/" + this.entity_name + "_" + this.entity_uniq_id + "/config"
return discTopic;
}
}

5
src/app/generator/generator.component.css Normal file
View File

@@ -0,0 +1,5 @@
.genContainer {
background: #9D9D9D;
border-radius: 1rem;
padding: 1rem .8rem ;
}

28
src/app/generator/generator.component.html Normal file
View File

@@ -0,0 +1,28 @@
<main class="flex flex-col gap-2 p-4">
<h2>MQTT Discovery Creator:</h2>
<!-- <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> -->
<div class="genContainer">
<!-- Statetopic -->
<h3>Data Channel</h3>
<div>
<p>Bereich</p>
<input type="text" [ngModel]="generatorService.upperTopic"
(ngModelChange)="generatorService.upperTopic = $event; generatorService.update()" />
</div>
</div>
<app-entity class="genContainer" ></app-entity>
</main>

23
src/app/generator/generator.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GeneratorComponent } from './generator.component';
describe('GeneratorComponent', () => {
let component: GeneratorComponent;
let fixture: ComponentFixture<GeneratorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [GeneratorComponent]
})
.compileComponents();
fixture = TestBed.createComponent(GeneratorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

33
src/app/generator/generator.component.ts Normal file
View File

@@ -0,0 +1,33 @@
import { Component, Input } from '@angular/core';
import { MqttLight } from '../_models/mqtt-light';
import { MqttSwitch } from '../_models/mqtt-switch';
import { MqttSensor } from '../_models/mqtt-sensor';
import { MqttBinary } from '../_models/mqtt-binary';
import { GeneratorService, entity_types, randomString } from '../_services/generator.service';
import { MQTTEntity } from '../_models/mqtt_base';
@Component({
selector: 'app-home',
templateUrl: './generator.component.html',
styleUrl: './generator.component.css'
})
export class GeneratorComponent {
constructor(public generatorService: GeneratorService) {
}
readonly useObject = Object;
readonly useRandomString = randomString;
}

0
src/assets/.gitkeep Normal file
View File

BIN
src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en" class="h-full bg-myBlack" >
<head>
<meta charset="utf-8">
<title>MqttCreator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body >
<app-root></app-root>
</body>
</html>

1
src/main.server.ts Normal file
View File

@@ -0,0 +1 @@
export { AppServerModule as default } from './app/app.module.server';

7
src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

48
src/styles.css Normal file
View File

@@ -0,0 +1,48 @@
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;
input {
background: #B3B3B3;
padding: .25rem .75rem;
outline: none;
border-radius: 1rem;
width: 100%;
}
input::placeholder{
color: #535353;
opacity: 1;
}
input::-ms-input-placeholder { /* Edge 12 -18 */
color: #535353;
}
svg{
height: 90%;
margin: auto 0;
width: auto;
}
*{
color: #535353;
}
button{
background-color: #4CB926;
border-radius: 1rem;
color: #F8F8F8;
font-weight: bold;
min-width: 4rem;
}
.randomButton{
@apply flex justify-center content-center;
}
button path {
color: #F8F8F8;
}

18
tailwind.config.js Normal file
View File

@@ -0,0 +1,18 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors:{
'myBlack': '#2E2E2E',
'myText': '#535353',
'myAccent': '#4CB926',
'myPrimary': '#9D9D9D',
'mySecondary': '#B3B3B3',
'myButton': '#F8F8F8',
}
},
},
plugins: [],
}

18
tsconfig.app.json Normal file
View File

@@ -0,0 +1,18 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"node"
]
},
"files": [
"src/main.ts",
"src/main.server.ts",
"server.ts"
],
"include": [
"src/**/*.d.ts"
]
}

32
tsconfig.json Normal file
View File

@@ -0,0 +1,32 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

14
tsconfig.spec.json Normal file
View File

@@ -0,0 +1,14 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}