end

src/templates/default/index.tpl.php

@@ -1,5 +1,70 @@
 <?php
-require __DIR__ . '/../shared/head.php'; ?>
+require __DIR__.'/../shared/head.php'; ?>
+<?php if (count($this->tree)): ?>
+  <ul class="servers-tree">
+      <?php
 
+      (new class() {
+          public function __invoke($tree)
+          {
+              foreach ($tree as $item) {
+                  echo '<li>';
+                  if ('group' === $item['type']) {
+                      ?>
+                    <span
+                        class="servers-tree__group servers-tree-group js-servers-tree-group"><?php echo $item['name']; ?></span>
+                      <?php
+                      if (count($item['items'])) {
+                          ?>
+                        <ul class="servers-tree-group__list js-servers-tree-group-list">
+                            <?php $this($item['items']); ?>
+                        </ul>
+                          <?php
+                      }
+                  } else {
+                      ?>
+                      <?php echo $item['name']; ?>
+                    <div class="btn d-inline-block js-ping"
+                         data-id="<?= $item['id']; ?>">ping
+                    </div>
+                    <a href="/ping/history/<?= $item['id']; ?>">ping history</a>
+                      <?php
+                  }
+                  echo '</li>';
+              }
+          }
+      })($this->tree);
+      ?>
+  </ul>
+<?php endif; ?>
+  <div class="modal">
+    <div class="modal__bg js-modal-close">
+    </div>
+    <div class="modal__window">
+      <div class="modal-window">
+        <div class="modal-window__title">
+          Ping
+        </div>
+        <div class="modal-window__close js-modal-close"></div>
+        <div class="modal-window__body modal-window-body js-modal-body">
+          <div><span class="modal-window-body__label">Server:</span> <span
+                class="modal-window-body__result js-ping-result-name"></span>
+          </div>
+          <div><span class="modal-window-body__label">IP Address:</span> <span
+                class="modal-window-body__result js-ping-result-ip"></span>
+          </div>
+          <div><span class="modal-window-body__label">Transmitted:</span> <span
+                class="modal-window-body__result js-ping-result-transmitted"></span>
+          </div>
+          <div><span class="modal-window-body__label">Received:</span> <span
+                class="modal-window-body__result js-ping-result-received"></span>
+          </div>
+          <div><span class="modal-window-body__label">Lost %:</span> <span
+                class="modal-window-body__result js-ping-result-lost"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 <?php
-require __DIR__ . '/../shared/footer.php';
+require __DIR__.'/../shared/footer.php';