From 714d30452845d99fd15b65428a6b225902766e0f Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Tue, 31 Dec 2019 19:10:29 -0500
Subject: [PATCH] Change WebColour to a colour selector input and add a random
 colour icon. Select a random colour on new Monitor creation

---
 web/includes/Monitor.php              |  2 +-
 web/includes/functions.php            | 10 +++++-----
 web/skins/classic/views/js/monitor.js | 27 +++++++++++++++++++++++++++
 web/skins/classic/views/monitor.php   |  7 +++++--
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/web/includes/Monitor.php b/web/includes/Monitor.php
index abc39859b..4575d2ab6 100644
--- a/web/includes/Monitor.php
+++ b/web/includes/Monitor.php
@@ -89,7 +89,7 @@ class Monitor extends ZM_Object {
     'DefaultScale'  =>  100,
     'SignalCheckPoints' =>  0,
     'SignalCheckColour' =>  '#0000BE',
-    'WebColour'   =>  'red',
+    'WebColour'   =>  '#ff0000',
     'Exif'    =>  array('type'=>'boolean','default'=>0),
     'Sequence'  =>  null,
     'TotalEvents' =>  array('type'=>'integer', 'default'=>null, 'do_not_update'=>1),
diff --git a/web/includes/functions.php b/web/includes/functions.php
index c4853a7dc..42dc56c30 100644
--- a/web/includes/functions.php
+++ b/web/includes/functions.php
@@ -2610,12 +2610,12 @@ function html_radio($name, $values, $selected=null, $options=array(), $attrs=arr
   return $html;
 } # end sub html_radio
 
-function random_color_part() {
-    return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
-}
 
-function random_color() {
-    return random_color_part() . random_color_part() . random_color_part();
+function random_colour() {
+  return '#'.
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT).
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT).
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
 }
 
 ?>
diff --git a/web/skins/classic/views/js/monitor.js b/web/skins/classic/views/js/monitor.js
index 9d1fc7d7b..b24f6a1b3 100644
--- a/web/skins/classic/views/js/monitor.js
+++ b/web/skins/classic/views/js/monitor.js
@@ -131,9 +131,36 @@ function initPage() {
   document.querySelectorAll('select[name="newMonitor[ControlId]"]').forEach(function(el) {
     el.onchange = window['loadLocations'].bind(el, el);
   });
+  document.querySelectorAll('input[name="newMonitor[WebColour]"]').forEach(function(el) {
+    el.onchange = window['change_WebColour'].bind(el);
+  });
 
 
   $j('.chosen').chosen();
 } // end function initPage()
 
+function change_WebColour() {
+  $j('#WebSwatch').css(
+    'backgroundColor',
+    $j('input[name="newMonitor[WebColour]"]').val()
+  );
+}
+
+function getRandomColour() {
+  var letters = '0123456789ABCDEF';
+  var colour = '#';
+  for (var i = 0; i < 6; i++) {
+    colour += letters[Math.floor(Math.random() * 16)];
+  }
+  return colour;
+}
+
+function random_WebColour() {
+  var new_colour = getRandomColour();
+  $j('input[name="newMonitor[WebColour]"]').val(new_colour);
+  $j('#WebSwatch').css(
+    'backgroundColor', new_colour
+  );
+}
+
 window.addEventListener('DOMContentLoaded', initPage);
diff --git a/web/skins/classic/views/monitor.php b/web/skins/classic/views/monitor.php
index df3718735..63089dd51 100644
--- a/web/skins/classic/views/monitor.php
+++ b/web/skins/classic/views/monitor.php
@@ -54,6 +54,7 @@ if ( !$monitor ) {
     $monitor = new ZM\Monitor();
   } # end if $_REQUEST['dupID']
   $monitor->Name(translate('Monitor').'-'.$nextId);
+  $monitor->WebColour(random_colour());
 } # end if $_REQUEST['mid']
 
 if ( ZM_OPT_X10 && empty($x10Monitor) ) {
@@ -1112,15 +1113,17 @@ if ( canEdit('Control') ) {
         <tr>
           <td><?php echo translate('SignalCheckColour') ?></td>
           <td>
-            <input type="text" name="newMonitor[SignalCheckColour]" value="<?php echo validHtmlStr($monitor->SignalCheckColour()) ?>"/>
+            <input type="color" name="newMonitor[SignalCheckColour]" value="<?php echo validHtmlStr($monitor->SignalCheckColour()) ?>"/>
             <span id="SignalCheckSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->SignalCheckColour()); ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
           </td>
         </tr>
         <tr>
           <td><?php echo translate('WebColour') ?></td>
           <td>
-            <input type="text" name="newMonitor[WebColour]" value="<?php echo validHtmlStr($monitor->WebColour()) ?>" onchange="$('WebSwatch').setStyle( 'backgroundColor', this.value )"/>
+            <input type="color" name="newMonitor[WebColour]" value="<?php echo validHtmlStr($monitor->WebColour()) ?>"/>
             <span id="WebSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->WebColour()) ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <i class="material-icons" data-on-click="random_WebColour">sync</i> 
+
           </td>
         </tr>
         <tr>