From ad6475d618b19ad452dea2690db3326d7c8c541e Mon Sep 17 00:00:00 2001
From: Thomas Gelf <thomas@gelf.net>
Date: Mon, 20 Oct 2014 19:01:32 +0200
Subject: [PATCH] test/layout: first experiments with new structure

---
 application/views/scripts/test/layout.phtml |  66 ++++++++++
 public/css/module.less                      | 130 ++++++++++++++++++++
 2 files changed, 196 insertions(+)

diff --git a/application/views/scripts/test/layout.phtml b/application/views/scripts/test/layout.phtml
index 08b92c0..39794ba 100644
--- a/application/views/scripts/test/layout.phtml
+++ b/application/views/scripts/test/layout.phtml
@@ -1,3 +1,69 @@
+<?php
+$bp = (object) [
+    'operator' => 'or',
+    'status'   => 'ok',
+    'handled'  => false,
+    'children' => [
+        'DNS Service' => (object) [
+            'status'   => 'ok',
+            'handled'  => false,
+            'children' => [],
+        ],
+        'Exchange' => (object) [
+            'operator' => 'and',
+            'status'   => 'critical',
+            'handled'  => false,
+            'children' => [
+                'Exchange 1' => (object) [
+                    'status'   => 'critical',
+                    'handled'  => false,
+                    'children' => [],
+                ],
+                'Exchange 2' => (object) [
+                    'status'   => 'warning',
+                    'handled'  => true,
+                    'children' => [],
+                ],
+                'Exchange 3' => (object) [
+                    'status'   => 'ok',
+                    'handled'  => false,
+                    'children' => [],
+                ]
+            ],
+        ]
+    ]
+];
+
+function renderProcess($name, $process)
+{
+    $html = sprintf('<table class="bp %s%s%s">
+  <tbody>
+    <tr><th%s><a href="#">%s</a></th><td><a href="#">%s</a></td></tr>
+',
+        $process->status,
+        $process->handled ? ' handled' : '',
+        empty($process->children) ? '' : ' operator',
+        empty($process->children) ? ' class="service"' : sprintf(' rowspan="%d"', count($process->children) + 1),
+        empty($process->children) ? '&nbsp;' : $process->operator,
+        $name
+    );
+    if (! empty($process->children)) {
+//        $html .= '<tbody>
+//';
+        foreach ($process->children as $name => $child) {
+            $html .= '<tr><td>' . renderProcess($name, $child) . '</td></tr>';
+        }
+//        $html .= '</tbody>';
+    }
+    $html .= '</tbody></table>';
+    return $html;
+}
+
+
+?>
 <div class="content">
 <h1>Testlayout</h1>
+
+<?= renderProcess('Mail Process', $bp) ?>
+
 </div>
diff --git a/public/css/module.less b/public/css/module.less
index 5a36ca4..bd9a693 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -190,3 +190,133 @@ span.collapsible {
     color: transparent;
 }
 
+
+table.bp {
+  width: 100%;
+}
+table.bp td {
+    margin-bottom: 2px;
+}
+
+table.bp {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+
+// TEST BORDER
+table.bp {
+  border-collapse: separate;
+  border-spacing: 2px;
+}
+
+table.bp th {
+  border: 3px solid black;
+}
+
+table.bp td {
+  border: 1px solid black;
+}
+
+*/
+
+table.bp {
+    margin: 0;
+    padding: 0;
+}
+
+table.bp table.bp {
+    margin-top: 0.5em;
+    margin-bottom: 0.2em;
+    margin-left: 0.2em;
+}
+
+table.bp td {
+  padding: 0;
+}
+
+table.bp > tbody > tr > th.service {
+  width: 1em;
+}
+
+
+table.bp th > a, table.bp td > a {
+  display: block;
+  text-decoration: none;
+  border: 1px solid transparent;
+}
+
+table.bp th > a {
+  width: 2em;
+  min-height: 1.6em;
+}
+
+table.bp td > a {
+  line-height: 1.6em;
+  padding-left: 0.2em;
+}
+
+table.bp th > a:hover, table.bp td > a:hover {
+  text-decoration: none;
+  display: block;
+  border: 1px solid black;
+}
+
+table.bp > tbody > tr > th {
+  color: white;
+  background-color: @colorUnknown;
+  border-left: 3px solid transparent;
+  width: 2em;
+}
+
+
+table.bp.ok > tbody > tr > th {
+  border-color: @colorOk;
+  background-color: transparent;
+}
+
+table.bp.warning > tbody > tr > th {
+  border-color: @colorWarning;
+  background-color: @colorWarning;
+}
+
+table.bp.critical > tbody > tr > th {
+  border-color: @colorCritical;
+  background-color: @colorCritical;
+}
+
+table.bp.handled > tbody > tr > th {
+  background-color: transparent;
+}
+
+table.bp > tbody > tr:first-child > * {
+  border-top: 3px solid transparent;
+}
+
+table.bp > tbody > tr > th {
+  border-left: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+}
+
+table.bp.operator > tbody > tr > th {
+  border-bottom: none;
+}
+
+table.bp.ok.operator > tbody > tr:first-child > * {
+  border-color: @colorOk;
+}
+
+table.bp.warning.operator > tbody > tr:first-child > * {
+  border-color: @colorWarning;
+}
+
+table.bp.critical.operator > tbody > tr:first-child > * {
+  border-color: @colorCritical;
+}
+
+.service {
+  background-image: url('../img/icons/host.png');
+  background-repeat: no-repeat;
+  background-position: 0.5em 0.5em;
+}
+