| 1 |
// tooltip https://github.com/chrisdavies/tlite |
| 2 |
function tlite(t){document.addEventListener("mouseover",function(e){var i=e.target,n=t(i);n||(n=(i=i.parentElement)&&t(i)),n&&tlite.show(i,n,!0)})}tlite.show=function(t,e,i){var n="data-tlite";e=e||{},(t.tooltip||function(t,e){function o(){tlite.hide(t,!0)}function l(){r||(r=function(t,e,i){function n(){o.className="tlite tlite-"+r+s;var e=t.offsetTop,i=t.offsetLeft;o.offsetParent===t&&(e=i=0);var n=t.offsetWidth,l=t.offsetHeight,d=o.offsetHeight,f=o.offsetWidth,a=i+n/2;o.style.top=("s"===r?e-d-10:"n"===r?e+l+10:e+l/2-d/2)+"px",o.style.left=("w"===s?i:"e"===s?i+n-f:"w"===r?i+n+10:"e"===r?i-f-10:a-f/2)+"px"}var o=document.createElement("span"),l=i.grav||t.getAttribute("data-tlite")||"n";o.innerHTML=e,t.appendChild(o);var r=l[0]||"",s=l[1]||"";n();var d=o.getBoundingClientRect();return"s"===r&&d.top<0?(r="n",n()):"n"===r&&d.bottom>window.innerHeight?(r="s",n()):"e"===r&&d.left<0?(r="w",n()):"w"===r&&d.right>window.innerWidth&&(r="e",n()),o.className+=" tlite-visible",o}(t,d,e))}var r,s,d;return t.addEventListener("mousedown",o),t.addEventListener("mouseleave",o),t.tooltip={show:function(){d=t.title||t.getAttribute(n)||d,t.title="",t.setAttribute(n,""),d&&!s&&(s=setTimeout(l,i?150:1))},hide:function(t){if(i===t){s=clearTimeout(s);var e=r&&r.parentNode;e&&e.removeChild(r),r=void 0}}}}(t,e)).show()},tlite.hide=function(t,e){t.tooltip&&t.tooltip.hide(e)},"undefined"!=typeof module&&module.exports&&(module.exports=tlite); |
| 3 |
|
| 4 |
window.onload = function() { |
| 5 |
// init tooltip with class js--tooltip |
| 6 |
tlite(el => { |
| 7 |
return { |
| 8 |
el: el.classList.contains('js--tooltip'), grav: 'sw', |
| 9 |
} |
| 10 |
}); |
| 11 |
|
| 12 |
var acc = document.getElementsByClassName("ww-collapse__head"); |
| 13 |
var i; |
| 14 |
|
| 15 |
for (i = 0; i < acc.length; i++) { |
| 16 |
acc[i].addEventListener("click", function () { |
| 17 |
this.classList.toggle("is--active"); |
| 18 |
}); |
| 19 |
} |
| 20 |
|
| 21 |
// config for graphics |
| 22 |
const circleChartNode = document.getElementById('circleChart'); |
| 23 |
const lineChartNode = document.getElementById('lineChart'); |
| 24 |
if (circleChartNode) { |
| 25 |
const ctx = circleChartNode.getContext('2d'); |
| 26 |
const colors = { |
| 27 |
'error': '#EE3F3F', |
| 28 |
'normal': '#3D50DF', |
| 29 |
'success': '#4BC374', |
| 30 |
}; |
| 31 |
|
| 32 |
function getColor(number) { |
| 33 |
switch (true) { |
| 34 |
case number <= 20: |
| 35 |
return colors.error; |
| 36 |
case number <= 80: |
| 37 |
return colors.normal; |
| 38 |
case number <= 100: |
| 39 |
return colors.success; |
| 40 |
} |
| 41 |
} |
| 42 |
|
| 43 |
let availability = 0; |
| 44 |
let max = 100; |
| 45 |
if(typeof availability_percent != "undefined"){ |
| 46 |
availability = parseInt(availability_percent); |
| 47 |
} |
| 48 |
let color = getColor(availability); |
| 49 |
document.querySelector(".ww-graph__percent").style.setProperty("color",color,'important'); |
| 50 |
document.querySelector(".ww-graph__title").style.setProperty("color",color,'important'); |
| 51 |
const config = { |
| 52 |
type: 'doughnut', |
| 53 |
data: { |
| 54 |
labels: ['', ''], |
| 55 |
datasets: [{ |
| 56 |
label: '', |
| 57 |
data: [availability, max-availability], |
| 58 |
backgroundColor: [ |
| 59 |
color, |
| 60 |
'#DFE0E9', |
| 61 |
], |
| 62 |
borderWidth: 0, |
| 63 |
weight: 1, |
| 64 |
}] |
| 65 |
}, |
| 66 |
options: { |
| 67 |
tooltips: { |
| 68 |
enabled: false, |
| 69 |
}, |
| 70 |
legend: { |
| 71 |
display: false, |
| 72 |
}, |
| 73 |
rotation: 1 * Math.PI, |
| 74 |
circumference: 1 * Math.PI, |
| 75 |
cutoutPercentage: 95, |
| 76 |
} |
| 77 |
}; |
| 78 |
new Chart(ctx, config); |
| 79 |
} |
| 80 |
|
| 81 |
if (lineChartNode) { |
| 82 |
const lineChart = document.getElementById('lineChart').getContext('2d'); |
| 83 |
let _data = []; |
| 84 |
let _days = []; |
| 85 |
for(let data of Object.keys(waf_chart)){ |
| 86 |
_data.push(waf_chart[data].count); |
| 87 |
} |
| 88 |
for(let days of Object.keys(waf_chart)){ |
| 89 |
_days.push(waf_chart[days].day); |
| 90 |
} |
| 91 |
const lineConfig = { |
| 92 |
type: 'line', |
| 93 |
data: { |
| 94 |
labels: _days, |
| 95 |
datasets: [{ |
| 96 |
borderColor: 'rgba(61, 80, 223)', |
| 97 |
data: _data, |
| 98 |
type: 'line', |
| 99 |
pointRadius: 0, |
| 100 |
fill: false, |
| 101 |
lineTension: 0, |
| 102 |
borderWidth: 2 |
| 103 |
}] |
| 104 |
}, |
| 105 |
options: { |
| 106 |
tooltips: { |
| 107 |
enabled: false, |
| 108 |
}, |
| 109 |
legend: { |
| 110 |
display: false, |
| 111 |
}, |
| 112 |
scales: { |
| 113 |
xAxes: [{ |
| 114 |
gridLines: { |
| 115 |
display: false, |
| 116 |
drawBorder: false |
| 117 |
}, |
| 118 |
ticks: { |
| 119 |
source: 'data', |
| 120 |
autoSkip: true, |
| 121 |
fontWeight: 500, |
| 122 |
fontSize: 10, |
| 123 |
fontColor: '#ACAFBF', |
| 124 |
} |
| 125 |
}], |
| 126 |
yAxes: [{ |
| 127 |
gridLines: { |
| 128 |
display: true, |
| 129 |
borderDash: [2], |
| 130 |
tickMarkLength: 3, |
| 131 |
color: ['', 'rgba(15,15,15, .4)', 'rgba(15,15,15, .4)', 'rgba(15,15,15, .4)'], |
| 132 |
drawBorder: false, |
| 133 |
}, |
| 134 |
ticks: { |
| 135 |
stepSize: 25, |
| 136 |
fontColor: 'rgba(61, 80, 223)', |
| 137 |
fontSize: 10, |
| 138 |
fontFamily: 'Roboto', |
| 139 |
}, |
| 140 |
position: 'right', |
| 141 |
scaleLabel: { |
| 142 |
display: true, |
| 143 |
} |
| 144 |
}] |
| 145 |
}, |
| 146 |
} |
| 147 |
}; |
| 148 |
new Chart(lineChart, lineConfig); |
| 149 |
} |
| 150 |
}; |
| 151 |
|
| 152 |
if (window.Element && !Element.prototype.closest) { |
| 153 |
Element.prototype.closest = |
| 154 |
function(s) { |
| 155 |
var matches = (this.document || this.ownerDocument).querySelectorAll(s), |
| 156 |
i, |
| 157 |
el = this; |
| 158 |
do { |
| 159 |
i = matches.length; |
| 160 |
while (--i >= 0 && matches.item(i) !== el) {}; |
| 161 |
} while ((i < 0) && (el = el.parentElement)); |
| 162 |
return el; |
| 163 |
}; |
| 164 |
} |
| 165 |
|
| 166 |
var btn = document.getElementsByClassName('v-pause'); |
| 167 |
var checkbox = document.getElementsByClassName('v-change'); |
| 168 |
for(b of btn){ |
| 169 |
b.addEventListener("click", function (e) { |
| 170 |
var $this = this; |
| 171 |
var selector = this.closest(".ww-main"); |
| 172 |
let params = '&action=change_status&host_id=' + this.getAttribute('data-host_id') + '&config_id=' + this.getAttribute('data-config_id'); |
| 173 |
function callback(http) { |
| 174 |
let data = JSON.parse(http.responseText); |
| 175 |
if (data.data.toggleServiceConfig !== null && data.data.toggleServiceConfig.isActive) { |
| 176 |
$this.classList.remove("ww-icon--play"); |
| 177 |
$this.classList.add("ww-icon--pause"); |
| 178 |
} else { |
| 179 |
$this.classList.add("ww-icon--play"); |
| 180 |
$this.classList.remove("ww-icon--pause"); |
| 181 |
} |
| 182 |
if(selector) { |
| 183 |
selector.classList.remove("is--loading"); |
| 184 |
} |
| 185 |
} |
| 186 |
|
| 187 |
if(selector){ |
| 188 |
selector.classList.add("is--loading"); |
| 189 |
} |
| 190 |
|
| 191 |
(new WTRequest(params, ajaxurl, 'POST', callback)).send(); |
| 192 |
}); |
| 193 |
} |
| 194 |
|
| 195 |
for(check of checkbox){ |
| 196 |
check.addEventListener("change", function (e) { |
| 197 |
var $this = this; |
| 198 |
var selector = this.closest(".ww-option"); |
| 199 |
let params = '&action=change_status&host_id=' + this.getAttribute('data-host_id') + '&config_id=' + this.getAttribute('data-config_id'); |
| 200 |
function callback(http) { |
| 201 |
let data = JSON.parse(http.responseText); |
| 202 |
if (data.data.toggleServiceConfig !== null && data.data.toggleServiceConfig.isActive) { |
| 203 |
$this.checked = true; |
| 204 |
} else { |
| 205 |
$this.checked = false; |
| 206 |
} |
| 207 |
if(selector) { |
| 208 |
selector.classList.remove("is--loading"); |
| 209 |
} |
| 210 |
} |
| 211 |
if(selector){ |
| 212 |
selector.classList.add("is--loading"); |
| 213 |
} |
| 214 |
|
| 215 |
(new WTRequest(params, ajaxurl, 'POST', callback)).send(); |
| 216 |
}); |
| 217 |
} |
| 218 |
|
| 219 |
window.WTRequest = function (params,url = '',method = '',callback = '') { |
| 220 |
if(url === ''){ |
| 221 |
url = ajaxurl; |
| 222 |
} |
| 223 |
if(method === ''){ |
| 224 |
method = 'POST'; |
| 225 |
} |
| 226 |
this.url = url; |
| 227 |
this.method = method; |
| 228 |
this.params = params; |
| 229 |
var defaultFunction = function (http) { |
| 230 |
if(http.status === 200){ |
| 231 |
location.reload(); |
| 232 |
} |
| 233 |
} |
| 234 |
this.send = function () { |
| 235 |
var http = new XMLHttpRequest(); |
| 236 |
http.open(this.method, this.url, true); |
| 237 |
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
| 238 |
http.onreadystatechange = function () { |
| 239 |
if(http.readyState === 4 && http.status === 200) { |
| 240 |
if(callback === ''){ |
| 241 |
defaultFunction(http); |
| 242 |
}else{ |
| 243 |
callback(http); |
| 244 |
} |
| 245 |
} |
| 246 |
} |
| 247 |
http.send(this.params); |
| 248 |
} |
| 249 |
} |
| 250 |
|
| 251 |
function removeAlert() { |
| 252 |
var alertNode = document.getElementById('ww-alert'); |
| 253 |
|
| 254 |
if (alertNode) { |
| 255 |
alertNode.parentNode.removeChild(alertNode); |
| 256 |
} |
| 257 |
} |
