Merge pull request #4 from DaveElsensohn/master

Created form generation based on stored values

www/index.html

@@ -24,21 +24,10 @@
             <fieldset>
                 <legend>Rules</legend>
                 <p>Add rules to set color levels. Begin with 0. Add additional rules to set colors for each level.</p>
-                <div id="rules-list" class="rules">
-                    <div id="rule-0" class="rule">
-                        <div class="field total">
-                            <label for="rule-value-0">Value</label>
-                            <input type="text" name="rule-value-0" id="rule-value-0" value="0" placeholder="0">
-                        </div>
-                        <div class="field hex">
-                            <label for="rule-hex-0">Hex Color</label>
-                            <input type="text" name="rule-hex-0" id="rule-hex-0" value="999999" placeholder="999999">
-                        </div>
-                    </div>
-                </div>
+                <div id="rules-list" class="rules"></div>
                 <a id="add-rule" class="btn add-rule" href="">Add Another Rule</a>
                 <br/>
-                <button id="save-rules" type="button" class="btn">Save Rules</button>
+                <button id="save-rules" type="button" class="btn btn-save">Save Rules</button>
             </fieldset>
         </form>
     </div>

www/main.css

@@ -24,10 +24,10 @@ body {
     display: inline-block;
     background-color: rgba(255,255,255,0.3);
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 400;
     color: #fff;
     text-decoration: none;
-    margin: 0 0 8px 0;
+    margin: 0 0 10px 0;
     padding: 5px 8px;
     clear: both;
     border: 1px solid #fff;
@@ -52,6 +52,17 @@ body {
     box-sizing: border-box;
 }
 
+.btn-save {
+    background-color: rgba(66,255,66,0.5);
+}
+
+.btn-remove-rule {
+    background-color: rgba(255,66,66,0.5);
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-left: 20px;
+}
+
 .form-rules-container {
     display: block;
     position: absolute;

www/main.js

@@ -7,17 +7,37 @@ 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;
 
-Array.prototype.sortOn = function (key) {
-    this.sort(function (a, b) {
-        if (a[key] < b[key]) {
-            return -1;
-        } else if (a[key] > b[key]) {
-            return 1;
+/**
+ * Compare values for array sorting
+ *
+ * @param key
+ * @param order
+ * @return {Function}
+ */
+function compareValues(key, order = 'asc') {
+    return function (a, b) {
+        if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+            return 0;
         }
-        return 0;
-    });
-};
+
+        const varA = (typeof a[key] === 'string') ?
+            a[key].toUpperCase() : a[key];
+        const varB = (typeof b[key] === 'string') ?
+            b[key].toUpperCase() : b[key];
+
+        let comparison = 0;
+        if (varA > varB) {
+            comparison = 1;
+        } else if (varA < varB) {
+            comparison = -1;
+        }
+        return (
+            (order === 'desc') ? (comparison * -1) : comparison
+        );
+    };
+}
 
 /**
  * Get endpoint value or reset it
@@ -42,6 +62,17 @@ function validateEndpoint(endpoint) {
     return (endpoint && (endpoint.indexOf('/') === 0 || endpoint.indexOf('http') !== -1));
 }
 
+/**
+ * Validate the hex value
+ *
+ * @param hex
+ * @return {boolean}
+ */
+function isHex(hex) {
+    const a = parseInt(hex, 16);
+    return (a.toString(16) === hex);
+}
+
 /**
  * Get Metric from stored endpoint
  */
@@ -125,7 +156,36 @@ document.onkeydown = function (evt) {
  * Generate the rules form
  */
 function createRulesForm() {
-    // @TODO create/populate from existing LocalStorage values
+    // Populate the form endpoint value if stored
+    const storedEndpoint = localStorage.getItem('endpoint');
+    if (storedEndpoint) {
+        const endpointInput = document.getElementById('endpoint');
+        endpointInput.value = storedEndpoint;
+    }
+    // Populate the form with existing rules
+    rulesContainer.innerHTML = '';
+    const rules = JSON.parse(localStorage.getItem('rules'));
+    if (rules && rules.length) {
+        rules.forEach(function (rule, idx) {
+            handleAddRule(null);
+            const ruleField = document.getElementById('rule-value-' + idx);
+            const hexField = document.getElementById('rule-hex-' + idx);
+            if (ruleField && hexField) {
+                ruleField.value = rule.num;
+                hexField.value = rule.hex;
+            }
+        });
+    } else {
+        handleAddRule(null);
+        const ruleField = document.getElementById('rule-value-0');
+        const hexField = document.getElementById('rule-hex-0');
+        if (ruleField && hexField) {
+            ruleField.value = '0';
+            hexField.value = '999999';
+        }
+    }
+
+    // Display the form
     ruleForm.classList.add('active');
 }
 
@@ -144,7 +204,9 @@ function closeRulesForm(evt) {
  * @param evt
  */
 function handleAddRule(evt) {
-    evt.preventDefault();
+    if (evt) {
+        evt.preventDefault();
+    }
 
     let idx = document.querySelectorAll('#rules-list .rule').length;
 
@@ -162,8 +224,20 @@ function handleAddRule(evt) {
     fieldHex += '<input type="text" name="rule-hex-' + idx + '" id="rule-hex-' + idx + '" value="" placeholder="999999">';
     fieldHex += '</div>';
 
-    ruleDiv.innerHTML = fieldTotal + fieldHex;
+    // let remove = '<a id="rule-remove-' + idx + '" class="btn btn-remove-rule" href="">X</a>';
+    let remove = '';
+
+    ruleDiv.innerHTML = fieldTotal + fieldHex + remove;
     rulesContainer.appendChild(ruleDiv);
+    // const removeBtn = document.getElementById('rule-remove-' + idx);
+    // removeBtn.addEventListener('click', handleRemoveRule, false);
+    totalRules++;
+}
+
+function handleRemoveRule(evt) {
+    if (evt) {
+        evt.preventDefault();
+    }
 }
 
 /**
@@ -189,13 +263,15 @@ function storeRules(evt) {
         for (let i = 0; i < rulesTotal; i++) {
             const ruleValue = document.getElementById('rule-value-' + i).value;
             const hexValue = document.getElementById('rule-hex-' + i).value;
-            if (ruleValue && hexValue) {
-                rulesArr.push({num: ruleValue, hex: hexValue});
+            if (ruleValue && hexValue && isHex(hexValue)) {
+                rulesArr.push({num: parseInt(ruleValue, 10), hex: hexValue});
             }
         }
     }
-    rulesArr.sortOn('num');
+    // Sort the rules in order and store
+    rulesArr.sort(compareValues('num'));
     localStorage.setItem('rules', JSON.stringify(rulesArr));
+    ruleForm.classList.remove('active');
 }
 
 // Functionality