Disable Input when switch is active

MiRo1310 · Sep 15, 2024 · 3fd7bd5 · 3fd7bd5
1 parent c65a517
commit 3fd7bd5
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 37 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,6 +17,7 @@
 		"alexa",
 		"azul",
 		"csstype",
+		"dropbox",
 		"echart",
 		"Echart",
 		"echarts",

diff --git a/admin/app.d.ts b/admin/app.d.ts
@@ -1,4 +1,5 @@
 import { GenericAppProps, GenericAppState } from "@iobroker/adapter-react-v5";
+import { Tab } from '@mui/material';
 
 export interface AdditionalPropInfo extends GenericAppProps {
 	themeName: string;
@@ -57,7 +58,7 @@ export interface StateTabNavigation {
 	editedValueFromHelperText: string | null;
 	isOK: boolean;
 	helperText: boolean;
-	newRow: Nav;
+	newRow: RowsNav;
 	call: string;
 	nav: string;
 	text: string;
@@ -101,7 +102,7 @@ export interface SetState {
 
 export interface PropsTableDndNav {
 	entries: NavEntries[];
-	tableData: Nav | undefined;
+	tableData: TableData | undefined;
 	card: string;
 	activeMenu?: string;
 	openAddRowCard: (value: any) => void;
@@ -111,13 +112,23 @@ export interface PropsTableDndNav {
 	callback: CallbackFunctions;
 }
 
+interface TableData {
+	[key: string]: RowsNav[];
+}
+
 export interface StateTableDndNav {
-	rows: Rows[];
+	rows: RowsNav[];
 	dropStart: number;
 	dropOver: number;
 	dropEnd: number;
 	mouseOverNoneDraggable: boolean;
 }
+export interface RowsNav {
+	call: string;
+	parse_mode: BooleanString;
+	text: string;
+	value: string;
+}
 
 export interface PropsTabAction {
 	callback: Callback;
@@ -195,7 +206,7 @@ type BooleanString = "true" | "false";
 
 export interface PropsRowNavCard {
 	entries: NavEntries[];
-	newRow: Nav;
+	newRow: RowsNav;
 	callback: { onchange: (data: ChangeInputNav) => void };
 	inUse: boolean;
 	openHelperText: (value: string) => void;
@@ -242,6 +253,7 @@ export interface InputProps {
 	children?: ReactNode;
 	function?: string;
 	index?: number;
+	disabled?: boolean;
 	onMouseOver?: (e: any, setState: any) => void;
 	onMouseLeave?: (e: any, setState: any) => void;
 	setState?: SetStateFunction;
@@ -404,7 +416,7 @@ export interface StatePopupContainer {
 }
 export interface PropsRowEditPopupCard {
 	entries: any;
-	newRow: any;
+	newRow: ActionNewRowProps;
 	data: any;
 	openHelperText: any;
 	subCard: any;
@@ -413,8 +425,22 @@ export interface PropsRowEditPopupCard {
 	newUnUsedTrigger: any;
 	callback?: { setState: SetStateFunction };
 }
+
+export type BooleanString = "true" | "false";
+
+export interface ActionNewRowProps {
+	IDs: string[];
+	ack: BooleanString[];
+	confirm: BooleanString[];
+	parse_mode: BooleanString[];
+	returnText: string[];
+	values: string[];
+	trigger: string[];
+	switch_checkbox: BooleanString[];
+
+}
 export interface StateRowEditPopupCard {
-	rows: Rows[];
+	rows: RowsSetState[];
 	trigger: string;
 	data: any;
 	showSelectId: boolean;
@@ -426,9 +452,15 @@ export interface StateRowEditPopupCard {
 	mouseOverNoneDraggable: boolean;
 	itemForID: string;
 }
-export interface Rows {
+export interface RowsSetState {
 	IDs: string;
-	call?: string;
+	ack: ActionNewRowProps;
+	confirm: BooleanString;
+	parse_mode: BooleanString;
+	returnText: string;
+	values: string;
+	trigger: string;
+	switch_checkbox: BooleanString;
 }
 
 export interface AppState {
@@ -590,7 +622,7 @@ export interface Native {
 }
 export interface NativeData {
 	action: { [key: string]: Actions };
-	nav: { [key: string]: Nav };
+	nav: { [key: string]: RowsNav };
 }
 export interface Actions {
 	get: Get[];
@@ -608,13 +640,6 @@ export interface HttpRequest {
 	trigger: string[];
 	delay: string[];
 }
-export interface Nav {
-	// nav: string
-	call: string;
-	value: string;
-	text: string;
-	parse_mode: BooleanString;
-}
 export interface Set {
 	ack: BooleanString[];
 	confirm: BooleanString[];

diff --git a/admin/build/index.js b/admin/build/index.js
diff --git a/admin/build/index.js.map b/admin/build/index.js.map
diff --git a/admin/src/components/btn-Input/input.tsx b/admin/src/components/btn-Input/input.tsx
@@ -14,6 +14,8 @@ class Input extends Component<InputProps> {
 			this.props.callback({ val: event.target.value, index: this.props.index, id: this.props.id });
 		}
 	};
+
+	getClassName = () => {};
 	render() {
 		const container = {
 			width: this.props.width ? this.props.width : "auto",
@@ -26,7 +28,7 @@ class Input extends Component<InputProps> {
 			fontSize: "16px",
 			border: "none",
 			borderColor: "transparent",
-			borderBottom: "1px solid #ccc",
+			borderBottom: "1px solid #ccc ",
 		};
 		const styleChildren = {
 			display: "inline",
@@ -42,6 +44,7 @@ class Input extends Component<InputProps> {
 						className="InputField noneDraggable"
 						placeholder={I18n.t(this.props.placeholder || "")}
 						value={this.props.value}
+						disabled={this.props.disabled}
 						onChange={this.onChangeHandler}
 						spellCheck={this.props.spellCheck ? this.props.spellCheck : false}
 						onMouseOver={this.props.onMouseOver ? (e) => this.props.onMouseOver?.(e, this.props.setState) : undefined}

diff --git a/admin/src/pages/AppContentTabActionContentRowEditor.tsx b/admin/src/pages/AppContentTabActionContentRowEditor.tsx
@@ -67,6 +67,13 @@ class RowEditPopupCard extends Component<PropsRowEditPopupCard, StateRowEditPopu
 		}
 	};
 
+	disableInput = (name: string, index: number): boolean => {
+		if (this.state?.rows?.[index]?.switch_checkbox === "true" && name === "values") {
+			return true;
+		}
+		return false;
+	};
+
 	render() {
 		return (
 			<div className="Edit-Container">
@@ -157,6 +164,7 @@ class RowEditPopupCard extends Component<PropsRowEditPopupCard, StateRowEditPopu
 															callback={this.updateData}
 															callbackValue="event.target.value"
 															function="manual"
+															disabled={this.disableInput(entry.name, indexRow)}
 															type={entry.type}
 															inputWidth={
 																!entry.search || entry.name === "returnText" || entry.name === "text"

diff --git a/admin/src/pages/AppContentTabNavigation.tsx b/admin/src/pages/AppContentTabNavigation.tsx
@@ -6,7 +6,7 @@ import TableNavEditRow from "@/pages/AppContentTabNavigationTableRowEditor";
 import TableNavHelper from "@/pages/AppContentTabNavigationTableHelper";
 
 import { deepCopy } from "@/lib/Utils.js";
-import { Nav, PropsTabNavigation, StateTabNavigation } from "admin/app";
+import { RowsNav, PropsTabNavigation, StateTabNavigation } from "admin/app";
 
 class TabNavigation extends Component<PropsTabNavigation, StateTabNavigation> {
 	constructor(props) {
@@ -21,7 +21,7 @@ class TabNavigation extends Component<PropsTabNavigation, StateTabNavigation> {
 			editedValueFromHelperText: null,
 			isOK: false,
 			helperText: false,
-			newRow: {} as Nav,
+			newRow: {} as RowsNav,
 			nav: "",
 			call: "",
 			text: "",
@@ -109,7 +109,7 @@ class TabNavigation extends Component<PropsTabNavigation, StateTabNavigation> {
 		if (value) {
 			this.setState({ rowIndex: value });
 		}
-		const obj = {} as Nav;
+		const obj = {} as RowsNav;
 		this.props.entries.forEach((entry) => {
 			obj[entry.name] = entry.val;
 		});
@@ -143,7 +143,7 @@ class TabNavigation extends Component<PropsTabNavigation, StateTabNavigation> {
 							setState={this.setState.bind(this)}
 							activeMenu={this.props.data.state.activeMenu}
 							entries={this.props.entries}
-						></TableNavBody>
+						/>
 					</Table>
 				</TableContainer>
 				{this.state.rowPopup ? (

diff --git a/admin/src/pages/AppContentTabNavigationTableBody.tsx b/admin/src/pages/AppContentTabNavigationTableBody.tsx
@@ -15,10 +15,11 @@ import {
 } from "@/lib/dragNDrop.js";
 import { getElementIcon } from "@/lib/actionUtils.js";
 import { I18n } from "@iobroker/adapter-react-v5";
-import { PropsTableDndNav, Rows, StateTableDndNav } from "admin/app";
+import { PropsTableDndNav, RowsSetState, StateTableDndNav, TableData } from "admin/app";
+import { RowsNav } from "../../app";
 
 function createData(entriesOfParentComponent, element) {
-	const obj: Rows = {} as Rows;
+	const obj: RowsNav = {} as RowsNav;
 	entriesOfParentComponent.forEach((entry) => {
 		obj[entry.name] = element[entry.name];
 	});
@@ -37,13 +38,14 @@ class TableDndNav extends Component<PropsTableDndNav, StateTableDndNav> {
 		};
 	}
 
-	getRows(nav, activeMenu) {
-		if (!nav) {
+	getRows(nav: TableData | undefined, activeMenu: string | undefined): void {
+		if (!nav || !activeMenu) {
 			return;
 		}
+
 		const elements = nav[activeMenu];
-		const rows: Rows[] = [];
-		if (elements === undefined) {
+		const rows: RowsNav[] = [];
+		if (!elements) {
 			return;
 		}
 		for (const entry of elements) {

diff --git a/admin/src/style.css b/admin/src/style.css
@@ -743,13 +743,19 @@ input:focus {
 	outline: none;
 }
 
+input:disabled {
+	opacity: 0.3;
+}
+
 /* checkbox */
 input[type="checkbox"] {
 	width: 20px;
 	height: 20px;
 	margin-bottom: 0;
 	vertical-align: text-bottom;
+	cursor: pointer !important;
 }
+
 input[type="checkbox"]:checked {
 	accent-color: rgb(33, 150, 243);
 }