Added color icons, replaced rule creation, added rule removal

www/main.css

@@ -108,6 +108,16 @@ body {
     border-radius: 3px;
 }
 
+.icon-hex-color {
+    display: inline-block;
+    background-color: #999999;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ffffff;
+    margin: 0 4px 2px 2px;
+    vertical-align: bottom;
+}
+
 ::placeholder {
     color: #999;
     opacity: 1;
@@ -133,7 +143,7 @@ body {
     border-radius: 3px;
 }
 
-.rule .field {
+.rule .field-container {
     display: inline-block;
     margin: 0 10px 0 0;
 }

www/main.js

@@ -7,7 +7,6 @@ const rulesContainer = document.getElementById('rules-list');
 const addRuleBtn = document.getElementById('add-rule');
 const saveRulesBtn = document.getElementById('save-rules');
 const closeRulesFormBtn = document.getElementById('rules-close');
-let totalRules = 0;
 
 /**
  * Compare values for array sorting
@@ -173,6 +172,7 @@ function createRulesForm() {
             if (ruleField && hexField) {
                 ruleField.value = rule.num;
                 hexField.value = rule.hex;
+                setHexColor('rule-hex-' + idx, rule.hex);
             }
         });
     } else {
@@ -182,6 +182,7 @@ function createRulesForm() {
         if (ruleField && hexField) {
             ruleField.value = '0';
             hexField.value = '999999';
+            setHexColor('rule-hex-0', '999999');
         }
     }
 
@@ -210,43 +211,122 @@ function handleAddRule(evt) {
 
     let idx = document.querySelectorAll('#rules-list .rule').length;
 
+    // Create a rule container
     let ruleDiv = document.createElement('div');
     ruleDiv.id = 'rule-' + idx;
     ruleDiv.classList.add('rule');
 
-    let fieldTotal = '<div class="field total">';
-    fieldTotal += '<label for="rule-value-' + idx + '">Minimum Value</label>';
-    fieldTotal += '<input type="text" name="rule-value-' + idx + '" id="rule-value-' + idx + '" value="" placeholder="0">';
-    fieldTotal += '</div>';
+    // Create number value label & input
+    const numDiv = document.createElement('div');
+    numDiv.className = 'field-container total';
+    const numLabel = document.createElement('label');
+    numLabel.setAttribute('for', 'rule-value-' + idx);
+    numLabel.innerHTML = 'Minimum Value';
+    const numInput = document.createElement('input');
+    numInput.setAttribute('type', 'text');
+    numInput.setAttribute('id', 'rule-value-' + idx);
+    numInput.setAttribute('name', 'rule-value-' + idx);
+    numInput.setAttribute('value', '');
+    numInput.setAttribute('placeholder', '0');
+    numInput.className = 'field num';
+    numDiv.appendChild(numLabel);
+    numDiv.appendChild(numInput);
 
-    let fieldHex = '<div class="field hex">';
-    fieldHex += '<label for="rule-hex-' + idx + '">Hex Color</label>';
-    fieldHex += '<input type="text" name="rule-hex-' + idx + '" id="rule-hex-' + idx + '" value="" placeholder="999999" maxlength="6">';
-    fieldHex += '</div>';
+    // Create hex value label & input
+    const hexDiv = document.createElement('div');
+    hexDiv.className = 'field-container hex';
+    const hexLabel = document.createElement('label');
+    hexLabel.setAttribute('for', 'rule-hex-' + idx);
+    hexLabel.innerHTML = 'Hex Color';
+    const hexInput = document.createElement('input');
+    hexInput.setAttribute('type', 'text');
+    hexInput.setAttribute('id', 'rule-hex-' + idx);
+    hexInput.setAttribute('name', 'rule-hex-' + idx);
+    hexInput.setAttribute('value', '');
+    hexInput.setAttribute('placeholder', '999999');
+    hexInput.className = 'field hex';
+    hexDiv.appendChild(hexLabel);
+    hexDiv.appendChild(hexInput);
+    hexInput.addEventListener('keyup', function(evt) {
+        handleHexChange(this.id, this.value, evt);
+    });
 
-    // let remove = '<a id="rule-remove-' + idx + '" class="btn btn-remove-rule" href="">X</a>';
-    let remove = '';
+    // Create a color icon
+    const colorDiv = document.createElement('div');
+    colorDiv.className = 'icon-hex-color';
 
-    ruleDiv.innerHTML = fieldTotal + fieldHex + remove;
+    // Create a remove button
+    const removeBtn = document.createElement('a');
+    removeBtn.setAttribute('id', 'rule-remove-' + idx);
+    removeBtn.setAttribute('href', '');
+    removeBtn.className = 'btn btn-remove-rule';
+    removeBtn.innerText = 'X';
+    removeBtn.addEventListener('click', function(evt) {
+        handleRemoveRule(this.id, evt);
+    });
+
+    ruleDiv.appendChild(numDiv);
+    ruleDiv.appendChild(hexDiv);
+    ruleDiv.appendChild(colorDiv);
+    ruleDiv.appendChild(removeBtn);
     rulesContainer.appendChild(ruleDiv);
-    // const removeBtn = document.getElementById('rule-remove-' + idx);
-    // removeBtn.addEventListener('click', handleRemoveRule, false);
-    totalRules++;
+    setHexColor('rule-hex-' + idx, '999999');
+}
+
+/**
+ * Handle event for hex color icon changes
+ *
+ * @param id
+ * @param hex
+ * @param evt
+ */
+function handleHexChange(id, hex, evt = null) {
+    if (evt && isHex(hex)) {
+        setHexColor(id, hex);
+    }
 }
 
-function handleRemoveRule(evt) {
+/**
+ * Set hex color squares
+ *
+ * @param id
+ * @param hex
+ */
+function setHexColor(id, hex) {
+    const ruleDiv = document.getElementById(id).closest('.rule');
+    const hexIcon = document.getElementById(ruleDiv.id).querySelectorAll('.icon-hex-color');
+    hexIcon[0].style.backgroundColor = '#' + hex;
+}
+
+/**
+ * Remove rule from form
+ *
+ * @param id
+ * @param evt
+ */
+function handleRemoveRule(id, evt = null) {
     if (evt) {
         evt.preventDefault();
     }
+    const ruleDiv = document.getElementById(id).closest('.rule');
+    const hexInput = document.getElementById(ruleDiv.id).querySelectorAll('input.hex');
+    if (hexInput) {
+        hexInput[0].value = '';
+        storeRules(false);
+        createRulesForm();
+    }
 }
 
 /**
  * Store rules in LocalStorage
  *
+ * @param closeForm
  * @param evt
  */
-function storeRules(evt) {
-    evt.preventDefault();
+function storeRules(closeForm, evt = null) {
+    if (evt) {
+        evt.preventDefault();
+    }
 
     // Store the endpoint
     let endpoint = document.getElementById('endpoint').value;
@@ -272,12 +352,16 @@ function storeRules(evt) {
     rulesArr.sort(compareValues('num'));
     localStorage.setItem('rules', JSON.stringify(rulesArr));
     formatMetric(metric.innerText);
-    ruleForm.classList.remove('active');
+    if (closeForm) {
+        ruleForm.classList.remove('active');
+    }
 }
 
 // Functionality
 
 addRuleBtn.addEventListener('click', handleAddRule, false);
-saveRulesBtn.addEventListener('click', storeRules, false);
+saveRulesBtn.addEventListener('click', function(evt) {
+    storeRules(true, evt);
+});
 closeRulesFormBtn.addEventListener('click', closeRulesForm, false);
 getMetric();