From 16130f3305a435222765bf0a88a42827313465c7 Mon Sep 17 00:00:00 2001 From: Chris Moore Date: Thu, 28 Mar 2019 14:22:45 -0400 Subject: [PATCH] add range slider, look and feel updates --- index.html | 220 +++++++++++++++-------------------------------------- script.js | 64 ++++++++++++++++ styles.css | 39 ++++++++++ 3 files changed, 163 insertions(+), 160 deletions(-) create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html index 50b84e0..edc792e 100644 --- a/index.html +++ b/index.html @@ -1,199 +1,99 @@ - - PHP-FPM Process Caluculator - - - - - + - - - - - - - + + - - - -
-
+
+
+
+
+
+

PHP-FPM Process Calculator

+
-
-
+
+
- +
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
-
-
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
© Chris Moore
- - - - - -
- - - - - - - - - - - - - - - - - - -
Total Ram:GB
Reserved:GB
Buffer:%
Process size: MB
Available: Gb
Available: Mb
Max children:
Start servers:
Min spare:
Max spare:
-
- - - - - - +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d8eb212 --- /dev/null +++ b/script.js @@ -0,0 +1,64 @@ + +//range slider +var $element = $('input[type="range"]'); + +$element + .rangeslider({ + polyfill: false, + onInit: function() { + var $handle = $('.rangeslider__handle', this.$range); + updateHandle($handle[0], this.value); + } + }) + .on('input', function(e) { + var $handle = $('.rangeslider__handle', e.target.nextSibling); + updateHandle($handle[0], this.value); + }); + +function updateHandle(el, val) { + el.textContent = val; +} + +//calculator + +$(document).ready(function() { + //calculate values automatically + sum(); + $("#ram-total, #ram-reserved, #ram-buffer, #process-size").on("keydown keyup change", function() { + sum(); + }); +}); + +function sum() { + //inputs + var ramtotal = document.getElementById('ram-total').value; + var ramreserved = document.getElementById('ram-reserved').value; + var rambuffer = document.getElementById('ram-buffer').value; + var processsize = document.getElementById('process-size').value; + + + + var buffer = 1 - (rambuffer / 100) ; + + //[Total Available RAM] – [Reserved RAM] – [10% buffer] = [Available RAM for PHP] + var availableram = Math.round(((ramtotal - ramreserved) * buffer) * 10) / 10; + var availablerammb = Math.round(availableram * 1024); + + // [Average Process Size] / [Available RAM for PHP]= [max_children] + var maxchildren = Math.floor(availablerammb / processsize); + var startservers = Math.floor(maxchildren * 0.25); + var minspare = Math.floor(maxchildren * 0.25); + var maxspare = Math.floor(maxchildren * 0.75); + + + if (!isNaN(availableram)) { + //Outputs + //document.getElementById('ram-buffer-percent').value = buffer; + document.getElementById('ram-available').value = availableram; + document.getElementById('ram-available-mb').value = Math.round(availableram * 1024); + document.getElementById('max-children').value = maxchildren; + document.getElementById('start-servers').value = startservers; + document.getElementById('min-spare').value = minspare; + document.getElementById('max-spare').value = maxspare; + } + } \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b101aa5 --- /dev/null +++ b/styles.css @@ -0,0 +1,39 @@ + +body { + padding:20px; +} + +.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form { + font-family: Arial, Helvetica, sans-serif; + color: black; +} + +.bootstrap-iso form button, .bootstrap-iso form button:hover { + color: white !important; +} + +.rangeslider, +input[type='range'] { + max-width: 400px; +} + +.rangeslider__handle { + border-radius: 22px; + min-width: 62px; + line-height: 42px; + text-align: center; + background-image: none!important; +} + +.card { + padding: 15px; +} + +.form-container { + padding: 25px; + +} + +.footer .github { + float:right; +} \ No newline at end of file