lirc plugin: improve web interface feedback on button press for sendi…

…ng command
smarthomeNG · Sep 11, 2023 · 17cf42d · 17cf42d
1 parent a0b5e10
commit 17cf42d
Showing 1 changed file with 51 additions and 2 deletions.
diff --git a/lirc/webif/templates/index.html b/lirc/webif/templates/index.html
@@ -20,10 +20,47 @@
   .shng_button_highlight{
     background-color: green;
   }
+  .checkmark {
+  background-color: green;
+  color: white;
+  }
+  .checkmark:hover {
+  background-color: darkgreen;
+  color: white;
+  }
+  .issue {
+  background-color: red;
+  color: white;
+  }
+  .issue:hover {
+  background-color: darkred;
+  color: white;
+  }
 </style>
 {% endblock pluginstyles %}
 {% block pluginscripts %}
 <script>
+  function updateButton(buttonElement, success) {
+      if (success == "checkmark")
+        buttonElement
+          .prop("disabled", true)
+          .html('<i class="fas fa-check"></i>')
+          .addClass(success);
+      else
+        buttonElement
+          .prop("disabled", true)
+          .html('<i class="fas fa-times"></i>')
+          .addClass(success);
+
+      // After 2 seconds, revert the button to its original state
+      setTimeout(function() {
+        console.log("reset button")
+        buttonElement
+          .prop("disabled", false)
+          .html('<i class="fas fa-play"></i>')
+          .removeClass(success);
+      }, 2000); // 2 seconds (2000 milliseconds)
+  }
   $(document).ready( function () {
     $("#button_pressed").submit(function(e) {
       console.log('Sending lirc command for ' + $("#button").val());
@@ -32,8 +69,20 @@
 
         // die Kennung des gedrückten Buttons per AJAX senden
         $.post('submit', {item: $("#button").val()}, function(data) {
+          console.log("Return value from plugin: " + data);
+          const escapedVal = $.escapeSelector($("#button").val());
+          const buttonElement = $("#" + escapedVal + "_button");
+          if (data)
+            updateButton(buttonElement, "checkmark");
+          else
+            updateButton(buttonElement, "issue");
 
-
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+          // Error callback
+          console.error("AJAX request failed:", textStatus, errorThrown);
+          const escapedVal = $.escapeSelector($("#button").val());
+          const buttonElement = $("#" + escapedVal + "_button");
+          updateButton(buttonElement, "issue");
         });
         return false ;
     });
@@ -137,7 +186,7 @@
           <td></td>
           <td class="py-1">{{ item.property.path }}</td>
           <td>
-            <button id="{{ item }}_button" type="button" class="btn btn-shng btn-sm" title="{{ _('Senden') }}" onclick=" $('#button').val('{{ item }}');$('#button_pressed').submit();"><i class="fas fa-play"></i></button></td>
+            <button id="{{ item }}_button" type="button" class="btn btn-shng btn-sm" title="{{ _('Senden') }} {{ item }}" onclick=" $('#button').val('{{ item }}');$('#button_pressed').submit();"><i class="fas fa-play"></i></button></td>
           <td class="py-1">{{ p.get_iattr_value(item.conf, 'lirc_remote') }}</td>
           <td class="py-1">{{ p.get_iattr_value(item.conf, 'lirc_key') }}</td>
           <td class="py-1" id="{{ item._path }}_last_update" style="text-align: center">{{ item.property.last_update.strftime('%d.%m.%Y %H:%M:%S') }}</td>