Make output state color (yellow/red/green) more prominent

kizniche · Oct 1, 2024 · 1845d2e · 1845d2e
1 parent 32f7424
commit 1845d2e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
  - Allow deletion of the last remaining Dashboard
  - Add custom favicon
+ - Make output state color (yellow/red/green) more prominent
 
 
 ## 8.16.0 (2024.09.29)

diff --git a/mycodo/mycodo_flask/templates/pages/output.html b/mycodo/mycodo_flask/templates/pages/output.html
@@ -91,14 +91,16 @@
                   if (states[i] !== null && document.getElementById(output_id + "-" + i + "-output-state") != null) {
                     document.getElementById(output_id + "-" + i + "-output-state").className = "item_channel row small-gutters active-background";
                     if (states[i] !== 'off') {
+                      document.getElementById(output_id + "-" + i + "-input-output-state").className = 'form-control btn btn-primary btn-sm btn-block active-background';
                       if (states[i] === 'on') {
                         document.getElementById(output_id + "-" + i + "-input-output-state").value = '{{_('Active')}}';
                       } else {
                         document.getElementById(output_id + "-" + i + "-input-output-state").value = '{{_('Active')}}, ' + states[i].toFixed(1);
                       }
                     } else {
-                      document.getElementById(output_id + "-" + i + "-output-state").className = "item_channel row small-gutters inactive-background";
+                      document.getElementById(output_id + "-" + i + "-input-output-state").className = 'form-control btn btn-primary btn-sm btn-block inactive-background';
                       document.getElementById(output_id + "-" + i + "-input-output-state").value = '{{_('Inactive')}}';
+                      document.getElementById(output_id + "-" + i + "-output-state").className = "item_channel row small-gutters inactive-background";
                     }
                   }
                 }
@@ -108,8 +110,9 @@
           else {
             {% for each_output in output %}
               {% for each_output_channel in dict_outputs[each_output.output_type]['channels_dict'] %}
-            document.getElementById("{{each_output.unique_id}}-{{each_output_channel}}-output-state").className = "item_channel row small-gutters pause-background";
+            document.getElementById("{{each_output.unique_id}}-{{each_output_channel}}-input-output-state").className = 'form-control btn btn-primary btn-sm btn-block pause-background';
             document.getElementById("{{each_output.unique_id}}-{{each_output_channel}}-input-output-state").value = '{{_('No Connection')}}';
+            document.getElementById("{{each_output.unique_id}}-{{each_output_channel}}-output-state").className = "item_channel row small-gutters pause-background";
               {% endfor %}
             {% endfor %}
           }

diff --git a/mycodo/mycodo_flask/templates/pages/output_entry.html b/mycodo/mycodo_flask/templates/pages/output_entry.html
@@ -45,7 +45,7 @@
         " type="text">
       </div>
       <div class="col-4">
-        <input class="form-control btn btn-primary btn-sm btn-block" type="button" onclick="setClipboard('{{each_output.unique_id}}')" id="{{each_output.unique_id}}-{{each_output_channel}}-input-output-state" title="[{{'%02d' % each_output.id}}] UUID: {{each_output.unique_id}}, {{dict_translation['copy_to_clipboard']['phrase']}}" value="{{ _('Unconfigured')}}">
+        <input class="form-control btn btn-primary btn-sm btn-block pause-background" type="button" onclick="setClipboard('{{each_output.unique_id}}')" id="{{each_output.unique_id}}-{{each_output_channel}}-input-output-state" title="[{{'%02d' % each_output.id}}] UUID: {{each_output.unique_id}}, {{dict_translation['copy_to_clipboard']['phrase']}}" value="{{ _('Unconfigured')}}">
       </div>
       {% if 'button_on' in dict_options['options_enabled'] -%}
       <div class="col-2">