Add Modbus service for dynamic parameter reading

assets/js/components/Config/DeviceModal/DeviceModalBase.vue

@@ -330,12 +330,11 @@ export default defineComponent({
 			return (this.modbus?.Choice || []) as ModbusCapability[];
 		},
 		modbusDefaults() {
-			const { ID, Comset, Baudrate, Port } = this.modbus || {};
 			return {
-				id: ID,
-				comset: Comset,
-				baudrate: Baudrate,
-				port: Port,
+				id: this.modbus?.ID,
+				comset: this.modbus?.Comset,
+				baudrate: this.modbus?.Baudrate,
+				port: this.modbus?.Port,
 			};
 		},
 		description() {
@@ -353,7 +352,6 @@ export default defineComponent({
 		},
 		apiData(): ApiData {
 			let data: ApiData = {
-				...this.modbusDefaults,
 				...this.values,
 			};
 			if (this.values.type === ConfigType.Template && this.templateName) {
@@ -743,7 +741,10 @@ export default defineComponent({
 				clearTimeout(this.serviceValuesTimer);
 			}
 			this.serviceValuesTimer = setTimeout(async () => {
-				this.serviceValues = await fetchServiceValues(this.templateParams, this.values);
+				this.serviceValues = await fetchServiceValues(this.templateParams, {
+					...this.modbusDefaults,
+					...this.values,
+				});
 			}, 500);
 		},
 		applyServiceDefault(paramName: string) {

assets/js/components/Config/DeviceModal/Modbus.vue

@@ -45,8 +45,8 @@
 			type="Int"
 			class="me-2"
 			required
-			:model-value="id || defaultId || 1"
-			@change="$emit('update:id', $event.target.value)"
+			:model-value="id || defaultId"
+			@input="$emit('update:id', $event.target.value)"
 		/>
 	</FormRow>
 	<div v-if="connection === MODBUS_CONNECTION.TCPIP">
@@ -62,7 +62,7 @@
 				class="me-2"
 				required
 				:model-value="host"
-				@change="$emit('update:host', $event.target.value)"
+				@input="$emit('update:host', $event.target.value)"
 			/>
 		</FormRow>
 		<FormRow :id="formId('modbusPort')" :label="$t('config.modbus.port')">
@@ -72,8 +72,8 @@
 				type="Int"
 				class="me-2 w-50"
 				required
-				:model-value="port || defaultPort || 502"
-				@change="$emit('update:port', $event.target.value)"
+				:model-value="port || defaultPort"
+				@input="$emit('update:port', $event.target.value)"
 			/>
 		</FormRow>
 		<FormRow
@@ -142,7 +142,7 @@
 				:choice="baudrateOptions"
 				required
 				:model-value="baudrate || defaultBaudrate"
-				@change="$emit('update:baudrate', parseInt($event.target.value))"
+				@input="$emit('update:baudrate', parseInt($event.target.value))"
 			/>
 		</FormRow>
 		<FormRow :id="formId('modbusComset')" :label="$t('config.modbus.comset')">
@@ -153,8 +153,8 @@
 				class="me-2 w-50"
 				:choice="comsetOptions"
 				required
-				:model-value="comset || defaultComset || '8N1'"
-				@change="$emit('update:comset', $event.target.value)"
+				:model-value="comset || defaultComset"
+				@input="$emit('update:comset', $event.target.value)"
 			/>
 		</FormRow>
 	</div>
@@ -268,7 +268,15 @@ export default defineComponent({
 				this.setConnectionAndProtocolByModbus(newValue);
 			}
 		},
-		connection() {
+		connection(newValue: MODBUS_CONNECTION, oldValue: MODBUS_CONNECTION) {
+			if (newValue !== oldValue) {
+				// Clear connection-specific parameters to ensure correct dependency group is used
+				if (newValue === MODBUS_CONNECTION.TCPIP) {
+					this.$emit("update:device", undefined);
+				} else if (newValue === MODBUS_CONNECTION.SERIAL) {
+					this.$emit("update:host", undefined);
+				}
+			}
 			this.applyServiceDefault();
 		},
 		device(newValue: string | undefined) {

assets/js/components/Config/DeviceModal/index.test.ts

@@ -21,9 +21,7 @@ describe("createServiceEndpoints", () => {
     const endpoints = createServiceEndpoints(params);
     const homeEndpoint = endpoints.find(({ name }) => name === "home")!;
     const powerEndpoint = endpoints.find(({ name }) => name === "power")!;
-    expect(homeEndpoint.dependencies).toEqual([]);
     expect(homeEndpoint.url({})).toBe("homes");
-    expect(powerEndpoint.dependencies).toEqual(["home"]);
     expect(powerEndpoint.url({ home: "main" })).toBe("homes/main/sensors");
     expect(powerEndpoint.url({ home: "with space" })).toBe("homes/with%20space/sensors");
     expect(powerEndpoint.url({} as Record<string, string>)).toBe("homes/{home}/sensors");
@@ -36,7 +34,6 @@ describe("createServiceEndpoints", () => {
     ];
     const endpoints = createServiceEndpoints(params);
     const sensorEndpoint = endpoints.find(({ name }) => name === "sensor")!;
-    expect(sensorEndpoint.dependencies).toEqual(["home", "sensor"]);
     expect(sensorEndpoint.url({ home: "hq", sensor: "battery" })).toBe("homes/hq/sensors/battery");
   });
 
@@ -51,4 +48,55 @@ describe("createServiceEndpoints", () => {
       "homes/{home}/sensors/{sensor}?token={token}"
     );
   });
+
+  it("expands {modbus} for TCP/IP", () => {
+    const params = [buildParam("param", "service?address=100&{modbus}")];
+    const endpoints = createServiceEndpoints(params);
+
+    expect(endpoints[0]!.url({ host: "192.168.1.1", port: "502", id: "1" })).toBe(
+      "service?address=100&uri=192.168.1.1:502&id=1"
+    );
+  });
+
+  it("expands {modbus} for serial", () => {
+    const params = [buildParam("param", "service?address=100&{modbus}")];
+    const endpoints = createServiceEndpoints(params);
+
+    expect(
+      endpoints[0]!.url({ device: "/dev/ttyUSB0", baudrate: "9600", comset: "8N1", id: "1" })
+    ).toBe("service?address=100&device=%2Fdev%2FttyUSB0&baudrate=9600&comset=8N1&id=1");
+  });
+
+  it("leaves {modbus} unexpanded when connection missing", () => {
+    const params = [buildParam("param", "service?address=100&{modbus}")];
+    const endpoints = createServiceEndpoints(params);
+
+    expect(endpoints[0]!.url({})).toBe("service?address=100&{modbus}");
+  });
+
+  it("prefers device over host when both present", () => {
+    const params = [buildParam("param", "service?{modbus}")];
+    const endpoints = createServiceEndpoints(params);
+
+    expect(
+      endpoints[0]!.url({
+        device: "/dev/ttyUSB0",
+        baudrate: "9600",
+        comset: "8N1",
+        host: "192.168.1.1",
+        port: "502",
+        id: "1",
+      })
+    ).toBe("service?device=%2Fdev%2FttyUSB0&baudrate=9600&comset=8N1&id=1");
+  });
+
+  it("treats empty strings as missing values", () => {
+    const params = [buildParam("sensor", "homes/{home}/sensors")];
+    const endpoints = createServiceEndpoints(params);
+
+    // Empty string should be treated as missing, leaving placeholder
+    expect(endpoints[0]!.url({ home: "" })).toBe("homes/{home}/sensors");
+    // Non-empty value should replace placeholder
+    expect(endpoints[0]!.url({ home: "main" })).toBe("homes/main/sensors");
+  });
 });

assets/js/components/Config/DeviceModal/index.ts

@@ -35,7 +35,7 @@ export type TemplateParam = {
 
 export type ParamService = {
   name: string;
-  dependencies: string[];
+  service: string;
   url: (values: Record<string, any>) => string;
 };
 
@@ -118,6 +118,22 @@ export async function loadServiceValues(path: string) {
   }
 }
 
+// Expand {modbus} to actual connection params based on values
+const expandModbus = (service: string, values: Record<string, any>): string => {
+  if (!service.includes("{modbus}")) return service;
+
+  if (values["device"]) {
+    return service.replace(
+      "{modbus}",
+      "device={device}&baudrate={baudrate}&comset={comset}&id={id}"
+    );
+  }
+  if (values["host"]) {
+    return service.replace("{modbus}", "uri={host}:{port}&id={id}");
+  }
+  return service;
+};
+
 export const createServiceEndpoints = (params: TemplateParam[]): ParamService[] => {
   return params
     .map((param) => {
@@ -127,17 +143,18 @@ export const createServiceEndpoints = (params: TemplateParam[]): ParamService[]
       const stringValues = (values: Record<string, any>): Record<string, string> =>
         Object.entries(values).reduce(
           (acc, [key, val]) => {
-            if (val !== undefined && val !== null) acc[key] = String(val);
+            if (val !== undefined && val !== null && val !== "" && key !== "modbus")
+              acc[key] = String(val);
             return acc;
           },
           {} as Record<string, string>
         );
 
       return {
         name: param.Name,
-        dependencies: extractPlaceholders(param.Service),
+        service: param.Service,
         url: (values: Record<string, any>) =>
-          replacePlaceholders(param.Service!, stringValues(values)),
+          replacePlaceholders(expandModbus(param.Service!, values), stringValues(values)),
       } as ParamService;
     })
     .filter((endpoint): endpoint is ParamService => endpoint !== null);
@@ -152,17 +169,11 @@ export const fetchServiceValues = async (
 
   await Promise.all(
     endpoints.map(async (endpoint) => {
-      const params: Record<string, any> = {};
-      endpoint.dependencies.forEach((dependency) => {
-        if (values[dependency]) {
-          params[dependency] = values[dependency];
-        }
-      });
-      if (Object.keys(params).length !== endpoint.dependencies.length) {
-        // missing dependency values, skip
+      const url = endpoint.url(values);
+      if (extractPlaceholders(url).length > 0) {
+        // missing values, not all placeholders are filled
         return;
       }
-      const url = endpoint.url(params);
       const data = await loadServiceValues(url);
       if (data) {
         result[endpoint.name] = data;

assets/js/components/Config/PropertyEntry.vue

@@ -10,7 +10,6 @@
 		<PropertyField
 			:id="id"
 			v-model="value"
-			class="me-2"
 			:masked="Mask"
 			:property="Name"
 			:type="Type"

assets/js/components/Config/PropertyField.vue

@@ -1,19 +1,5 @@
 <template>
-	<div v-if="unitValue" class="input-group" :class="inputClasses">
-		<input
-			:id="id"
-			v-model="value"
-			:type="inputType"
-			:step="step"
-			:placeholder="placeholder"
-			:required="required"
-			:aria-describedby="id + '_unit'"
-			class="form-control"
-			:class="{ 'text-end': endAlign }"
-		/>
-		<span :id="id + '_unit'" class="input-group-text">{{ unitValue }}</span>
-	</div>
-	<div v-else-if="icons" class="d-flex flex-wrap">
+	<div v-if="icons" class="d-flex flex-wrap">
 		<div
 			v-for="{ key } in selectOptions"
 			v-show="key === value || selectMode"
@@ -77,32 +63,45 @@
 		:required="required"
 		rows="4"
 	/>
-	<div v-else class="position-relative">
-		<input
-			:id="id"
-			v-model="value"
-			:list="datalistId"
-			:class="`${datalistId && serviceValues.length > 0 ? 'form-select' : 'form-control'} ${inputClasses}`"
-			:type="inputType"
-			:step="step"
-			:placeholder="placeholder"
-			:required="required"
-			:autocomplete="masked || datalistId ? 'off' : null"
-		/>
-		<button
-			v-if="showClearButton"
-			type="button"
-			class="form-control-clear"
-			:aria-label="$t('config.general.clear')"
-			@click="value = ''"
+	<div v-else class="d-flex" :class="sizeClass">
+		<div class="position-relative flex-grow-1">
+			<input
+				:id="id"
+				v-model="value"
+				:list="datalistId"
+				:type="inputType"
+				:step="step"
+				:placeholder="placeholder"
+				:required="required"
+				:aria-describedby="unitValue ? id + '_unit' : null"
+				:class="`${datalistId && serviceValues.length > 0 ? 'form-select' : 'form-control'} ${showClearButton ? 'has-clear-button' : ''} ${invalid ? 'is-invalid' : ''} ${endAlign ? 'text-end' : ''}`"
+				:style="
+					unitValue ? 'border-top-right-radius: 0; border-bottom-right-radius: 0' : null
+				"
+				:autocomplete="masked || datalistId ? 'off' : null"
+			/>
+			<button
+				v-if="showClearButton"
+				type="button"
+				class="form-control-clear"
+				:aria-label="$t('config.general.clear')"
+				@click="value = ''"
+			>
+				&times;
+			</button>
+			<datalist v-if="showDatalist" :id="datalistId">
+				<option v-for="v in serviceValues" :key="v" :value="v">
+					{{ v }}
+				</option>
+			</datalist>
+		</div>
+		<span
+			v-if="unitValue"
+			:id="id + '_unit'"
+			class="input-group-text"
+			style="border-top-left-radius: 0; border-bottom-left-radius: 0"
+			>{{ unitValue }}</span
 		>
-			&times;
-		</button>
-		<datalist v-if="showDatalist" :id="datalistId">
-			<option v-for="v in serviceValues" :key="v" :value="v">
-				{{ v }}
-			</option>
-		</datalist>
 	</div>
 </template>
 
@@ -148,7 +147,15 @@ export default {
 			// no values
 			if (length === 0) return false;
 			// value selected, dont offer single same option again
-			if (this.value && this.serviceValues.includes(this.value)) return false;
+			// Convert both to strings for comparison to handle number/string type mismatches
+			const valueStr = String(this.value ?? "");
+			if (
+				this.value != null &&
+				valueStr !== "" &&
+				this.serviceValues.some((v) => String(v) === valueStr)
+			) {
+				return false;
+			}
 			return true;
 		},
 		showClearButton() {
@@ -294,7 +301,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 input[type="number"] {
 	appearance: textfield;
 }