end

public/assets/css/style.css

@@ -216,4 +216,177 @@ a.btn, a.btn:hover, a.btn:focus {
 select {
   height: 1.5rem;
   padding-left: 0 !important;
-}
+}
+
+.servers-tree * {
+  list-style-type: none;
+}
+
+.servers-tree {
+  margin: 0;
+  padding: 0;
+}
+
+.servers-tree-group {
+  cursor: pointer;
+  user-select: none;
+}
+
+.servers-tree-group::before {
+  content: " ";
+  display: inline-block;
+  margin-right: 6px;
+  border-top: .375rem solid transparent;
+  border-bottom: .375rem solid transparent;
+
+  border-left: .375rem solid black;
+}
+
+.servers-tree-group--down::before {
+  transform: rotate(90deg);
+}
+
+.servers-tree-group__list {
+  display: none;
+}
+
+.servers-tree-group__list--active {
+  display: block;
+}
+
+.modal {
+  display: none;
+}
+
+.modal--active {
+  display: block;
+}
+
+.modal__bg {
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, .3);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.modal__window {
+  width: 300px;
+  position: fixed;
+  top: calc(50% - 96px);
+  left: calc(50vw - 150px);
+  height: 190px;
+  z-index: 2;
+}
+
+.modal-window--spiner::before {
+  content: "";
+  display: block;
+  color: black;
+  font-size: .25rem;
+  margin: 0;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: absolute;
+  animation: wloadingkf 1.3s infinite linear;
+  transform: translate3d(0, -50%, 0);
+  font-family: monospace;
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+}
+
+.modal-window--spiner .modal-window__body {
+  display: none;
+}
+
+.modal-window {
+  border: 1px solid #666;
+  width: 100%;
+  position: relative;
+  height: 100%;
+  background: #eee;
+  z-index: 2;
+  border-radius: .325rem;
+  box-shadow: 0 .125rem .25rem #666;
+}
+
+.modal-window__title {
+  text-align: center;
+}
+
+.modal-window__close {
+  position: absolute;
+  right: 0;
+  top: .125rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.3;
+  cursor: pointer;
+}
+
+.modal-window__close:hover {
+  opacity: 1;
+}
+
+.modal-window__close:before,
+.modal-window__close:after {
+  position: absolute;
+  left: .25rem;
+  content: ' ';
+  height: 1.0625rem;
+  width: .125rem;
+  background-color: #333;
+}
+
+.modal-window__close:before {
+  transform: rotate(45deg);
+}
+
+.modal-window__close:after {
+  transform: rotate(-45deg);
+}
+
+@keyframes wloadingkf {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+.modal-window-body {
+  padding: 1.5rem 0;
+}
+
+.modal-window-body__label {
+  font-weight: 700;
+  padding: 0 .5rem;
+  font-size: 85%;
+  min-width: 7.5rem;
+  display: inline-block;
+}
+

public/assets/js/script.js

@@ -22,11 +22,55 @@ d.querySelectorAll(".js-server-btn-delete").forEach(v => {
   deleteEvent(v, "You're sure to delete this server?", "/servers/delete")
 });
 
-d.querySelector(".js-server-form-on-submit").addEventListener("submit", e=>{
-  let check_ip = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
-  let ip = e.target.ip;
-  if (!check_ip.exec(ip.value)){
-    e.preventDefault()
-    ip.focus()
-  }
+let serverFormOnSubmit;
+serverFormOnSubmit = d.querySelector(".js-server-form-on-submit");
+if (serverFormOnSubmit) {
+  serverFormOnSubmit.addEventListener("submit", e => {
+    let check_ip = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    let ip = e.target.ip;
+    if (!check_ip.exec(ip.value)) {
+      e.preventDefault();
+      ip.focus()
+    }
+  });
+}
+
+d.querySelectorAll(".js-servers-tree-group").forEach(v => {
+  v.addEventListener("click", e => {
+    let parent = e.target.parentElement.querySelector(".js-servers-tree-group-list");
+    if (parent) {
+      parent.classList.toggle("servers-tree-group__list--active");
+    }
+    e.target.classList.toggle("servers-tree-group--down");
+
+  })
+});
+
+d.querySelectorAll(".js-modal-close").forEach(v => {
+  v.addEventListener("click", () => {
+    d.querySelector(".modal").classList.remove("modal--active")
+  })
+});
+
+d.querySelectorAll(".js-ping").forEach(v => {
+  v.addEventListener("click", e => {
+    d.querySelector(".modal").classList.add("modal--active");
+    let mwClass = d.querySelector(".modal-window").classList;
+    mwClass.add("modal-window--spiner");
+
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", "/ping/" + e.target.dataset.id);
+    xhr.send();
+    xhr.onload = () => {
+      let resp = JSON.parse(xhr.response);
+
+      if (resp.status === 'ok') {
+        ['name', 'ip', 'lost', 'transmitted', 'received'].map(i => {
+          d.querySelector('.js-ping-result-' + i).innerHTML = resp[i]
+        })
+      }
+      mwClass.remove("modal-window--spiner");
+
+    };
+  })
 });