Hello!
I am trying to do a form in thinger.io. I have tried this example of the documentation and it works me well: https://docs.thinger.io/features/dashboards#angularjs-directive-update-device-properties
However, when I try to make a form adapting it to our case, that is when the problems arise.
In my case, the path where the property is saved varies dynamically depending on the data entered by the user in the form. Example: we do not know the path to reach “type” until the user enters the name (“type” is, in the image, the dropdownlist “Selecciona una condición”). The same occurs with “action” (its path depends on the “name” chosen by the user).
Therefore, we cannot update the properties of a device (using a form) as shown in the example in the documentation, because in that case the route is static: ng-model=“value.b” (it is not dynamic like ours). Example in a part of the code from the HTML documentation:
<div class="col-sm-12">
<input type="number" class="form-control" placeholder="Value B" ng-model="value.b" min="0" max="100" required>
</div>
For solving this, that we have done is to add those dynamic variables within the angular directive, in the $scope.save function:
$scope.save = function(){
// Obtención de los valores ingresados por el usuario desde los elementos HTML
var newSceneName = document.getElementById("newSceneName").value;
var conditionDropdown = document.getElementById("conditionDropdown").value;
var actionDropdown = document.getElementById("actionDropdown").value;
console.log("newSceneName su valor es: " + newSceneName);
console.log("conditionDropdown su valor es: " + conditionDropdown);
console.log("actionDropdown su valor es: " + actionDropdown);
// Construye dinámicamente las rutas dinámicas para los ng-model. CREO QUE NO HACE FALTA ESTE PASO
/*var ngModelPathName = "valueScene.name";
var ngModelPathType = "value.valueScene." + newSceneName + ".type";
var ngModelPathAction = "value.valueScene." + newSceneName + ".actionDropdown";*/
// Verifica si $scope.value y sus propiedades están definidas
if (!$scope.valueScene) {
// Crea un objeto $scope.valueScene si aún no existe
$scope.valueScene = {};
$scope.valueScene = $scope.valueScene || {}; // Asegúrate de que valueScene esté inicializado
}
if (!$scope.valueScene[newSceneName]) {
// Crea un objeto dinámico dentro de $scope.valueScene
$scope.valueScene[newSceneName] = {};
$scope.valueScene[newSceneName] = $scope.valueScene[newSceneName] || {}; // Asegúrate de que newSceneName esté inicializado
}
//Añade el valor a la ruta dinámica
$scope.valueScene[newSceneName].name = newSceneName;
$scope.valueScene[newSceneName].type = conditionDropdown;
$scope.valueScene[newSceneName].actionDropdown = actionDropdown;
// just call our api to patch values
$scope.api.patch({value: $scope.value}).then(result => {
}).catch(error => {
});
};
And I have added into the HTML one way of calling the function save():
<body class="create-scene-body">
<form id="myForm" ng-submit="save()">
However, it does not work.
Does anyone know how to change device properties when routes are dynamic? Or maybe check where is my mistake in the code.
Help, please!
Best regards!
