From 67eb2981312a42e9ec6b15ea6d73f2dfbd6c8f6e Mon Sep 17 00:00:00 2001 From: Dave Elsensohn Date: Fri, 1 Jun 2018 18:23:20 -0700 Subject: [PATCH 1/5] Created color icon functionality for form inputs. --- www/main.css | 10 ++++++++ www/main.js | 69 ++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 69 insertions(+), 10 deletions(-) diff --git a/www/main.css b/www/main.css index 84b1fdd..6a83040 100644 --- a/www/main.css +++ b/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; diff --git a/www/main.js b/www/main.js index 8b18306..a712490 100644 --- a/www/main.js +++ b/www/main.js @@ -173,6 +173,7 @@ function createRulesForm() { if (ruleField && hexField) { ruleField.value = rule.num; hexField.value = rule.hex; + setHexChange('rule-hex-' + idx, rule.hex); } }); } else { @@ -182,6 +183,7 @@ function createRulesForm() { if (ruleField && hexField) { ruleField.value = '0'; hexField.value = '999999'; + setHexChange('rule-hex-0', '999999'); } } @@ -210,30 +212,77 @@ 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 = '
'; - fieldTotal += ''; - fieldTotal += ''; - fieldTotal += '
'; + // Create number value label & input + const numDiv = document.createElement('div'); + numDiv.className = 'field 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'); + numDiv.appendChild(numLabel); + numDiv.appendChild(numInput); - let fieldHex = '
'; - fieldHex += ''; - fieldHex += ''; - fieldHex += '
'; + // Create hex value label & input + const hexDiv = document.createElement('div'); + hexDiv.className = 'field 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'); + hexDiv.appendChild(hexLabel); + hexDiv.appendChild(hexInput); + hexInput.addEventListener('change', function(evt) { + setHexChange(this.id, this.value); + }); + + // Create a color icon + const colorDiv = document.createElement('div'); + colorDiv.className = 'icon-hex-color'; // let remove = 'X'; - let remove = ''; - ruleDiv.innerHTML = fieldTotal + fieldHex + remove; + ruleDiv.appendChild(numDiv); + ruleDiv.appendChild(hexDiv); + ruleDiv.appendChild(colorDiv); rulesContainer.appendChild(ruleDiv); + setHexChange('rule-hex-' + idx, '999999'); // const removeBtn = document.getElementById('rule-remove-' + idx); // removeBtn.addEventListener('click', handleRemoveRule, false); totalRules++; } +/** + * Set hex color squares + * + * @param id + * @param hex + */ +function setHexChange(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 evt + */ function handleRemoveRule(evt) { if (evt) { evt.preventDefault(); From a8633233ebc85fc021a4243cdd4ced84ddbed31b Mon Sep 17 00:00:00 2001 From: Dave Elsensohn Date: Fri, 1 Jun 2018 19:07:37 -0700 Subject: [PATCH 2/5] Added hex validation for input change events. --- www/main.js | 42 ++++++++++++++++++++++++++++++++---------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/www/main.js b/www/main.js index a712490..388ee47 100644 --- a/www/main.js +++ b/www/main.js @@ -173,7 +173,7 @@ function createRulesForm() { if (ruleField && hexField) { ruleField.value = rule.num; hexField.value = rule.hex; - setHexChange('rule-hex-' + idx, rule.hex); + setHexColor('rule-hex-' + idx, rule.hex); } }); } else { @@ -183,7 +183,7 @@ function createRulesForm() { if (ruleField && hexField) { ruleField.value = '0'; hexField.value = '999999'; - setHexChange('rule-hex-0', '999999'); + setHexColor('rule-hex-0', '999999'); } } @@ -246,33 +246,53 @@ function handleAddRule(evt) { hexInput.setAttribute('placeholder', '999999'); hexDiv.appendChild(hexLabel); hexDiv.appendChild(hexInput); - hexInput.addEventListener('change', function(evt) { - setHexChange(this.id, this.value); + hexInput.addEventListener('keyup', function(evt) { + handleHexChange(this.id, this.value, evt); }); // Create a color icon const colorDiv = document.createElement('div'); colorDiv.className = 'icon-hex-color'; - // let remove = 'X'; + // Create a remove button (pending) + 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); - setHexChange('rule-hex-' + idx, '999999'); - // const removeBtn = document.getElementById('rule-remove-' + idx); - // removeBtn.addEventListener('click', handleRemoveRule, false); + setHexColor('rule-hex-' + idx, '999999'); totalRules++; } +/** + * 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); + } +} + /** * Set hex color squares * * @param id * @param hex */ -function setHexChange(id, 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; @@ -281,9 +301,11 @@ function setHexChange(id, hex) { /** * Remove rule from form * + * @param id * @param evt */ -function handleRemoveRule(evt) { +function handleRemoveRule(id, evt) { + //console.log('remove: ', id); if (evt) { evt.preventDefault(); } From 79aa2d3fd288a85355efa60282c6727acfce638f Mon Sep 17 00:00:00 2001 From: Dave Elsensohn Date: Fri, 1 Jun 2018 19:08:33 -0700 Subject: [PATCH 3/5] Removed delete button. --- www/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/main.js b/www/main.js index 388ee47..fc0b653 100644 --- a/www/main.js +++ b/www/main.js @@ -267,7 +267,7 @@ function handleAddRule(evt) { ruleDiv.appendChild(numDiv); ruleDiv.appendChild(hexDiv); ruleDiv.appendChild(colorDiv); - ruleDiv.appendChild(removeBtn); + //ruleDiv.appendChild(removeBtn); rulesContainer.appendChild(ruleDiv); setHexColor('rule-hex-' + idx, '999999'); totalRules++; From cba4d830bdab422114c03b15c25ff3249dd492b8 Mon Sep 17 00:00:00 2001 From: Dave Elsensohn Date: Fri, 1 Jun 2018 19:21:37 -0700 Subject: [PATCH 4/5] Added removal functionality. --- www/main.css | 2 +- www/main.js | 35 +++++++++++++++++++++++++---------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/www/main.css b/www/main.css index 6a83040..9872f30 100644 --- a/www/main.css +++ b/www/main.css @@ -143,7 +143,7 @@ body { border-radius: 3px; } -.rule .field { +.rule .field-container { display: inline-block; margin: 0 10px 0 0; } \ No newline at end of file diff --git a/www/main.js b/www/main.js index fc0b653..c14d003 100644 --- a/www/main.js +++ b/www/main.js @@ -219,7 +219,7 @@ function handleAddRule(evt) { // Create number value label & input const numDiv = document.createElement('div'); - numDiv.className = 'field total'; + numDiv.className = 'field-container total'; const numLabel = document.createElement('label'); numLabel.setAttribute('for', 'rule-value-' + idx); numLabel.innerHTML = 'Minimum Value'; @@ -229,12 +229,13 @@ function handleAddRule(evt) { numInput.setAttribute('name', 'rule-value-' + idx); numInput.setAttribute('value', ''); numInput.setAttribute('placeholder', '0'); + numInput.className = 'field num'; numDiv.appendChild(numLabel); numDiv.appendChild(numInput); // Create hex value label & input const hexDiv = document.createElement('div'); - hexDiv.className = 'field hex'; + hexDiv.className = 'field-container hex'; const hexLabel = document.createElement('label'); hexLabel.setAttribute('for', 'rule-hex-' + idx); hexLabel.innerHTML = 'Hex Color'; @@ -244,6 +245,7 @@ function handleAddRule(evt) { 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) { @@ -254,7 +256,7 @@ function handleAddRule(evt) { const colorDiv = document.createElement('div'); colorDiv.className = 'icon-hex-color'; - // Create a remove button (pending) + // Create a remove button const removeBtn = document.createElement('a'); removeBtn.setAttribute('id', 'rule-remove-' + idx); removeBtn.setAttribute('href', ''); @@ -267,7 +269,7 @@ function handleAddRule(evt) { ruleDiv.appendChild(numDiv); ruleDiv.appendChild(hexDiv); ruleDiv.appendChild(colorDiv); - //ruleDiv.appendChild(removeBtn); + ruleDiv.appendChild(removeBtn); rulesContainer.appendChild(ruleDiv); setHexColor('rule-hex-' + idx, '999999'); totalRules++; @@ -304,20 +306,29 @@ function setHexColor(id, hex) { * @param id * @param evt */ -function handleRemoveRule(id, evt) { - //console.log('remove: ', id); +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; @@ -343,12 +354,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(); \ No newline at end of file From d794f9ba02001a4cdc8d3c4be7fe9a21da7d2e18 Mon Sep 17 00:00:00 2001 From: Dave Elsensohn Date: Fri, 1 Jun 2018 19:23:37 -0700 Subject: [PATCH 5/5] Removed extraneous code. --- www/main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/www/main.js b/www/main.js index c14d003..9f2fa57 100644 --- a/www/main.js +++ b/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 @@ -272,7 +271,6 @@ function handleAddRule(evt) { ruleDiv.appendChild(removeBtn); rulesContainer.appendChild(ruleDiv); setHexColor('rule-hex-' + idx, '999999'); - totalRules++; } /**