+ UI CustomTag p5:Alert, p5:Details with theme dark

SE/se-lib/Route/AsyncJobs.php

@@ -296,32 +296,31 @@ class Route_AsyncJobs extends RouteBase {
 		$seBinPath = $this->getSbinPath();
 
 		$listTest = []; // [ [ ret_code, cmd ], ... ]
+		$listTest[] = [ 1, "cd '{$seBinPath}' && bash ./se.sh" ]; // expected usage
+		$listTest[] = [ 1, "cd '{$seBinPath}' && bash ./se.sh non-existing-script" ]; // expected Module not exists + usage
+		$listTest[] = [ 1, "cd '{$seBinPath}' && bash ./se.sh --sudo" ]; // expected Missing script name + usage
 		$listTest[] = [ 0, "cd '{$seBinPath}' && bash ./se.sh test-exit-0" ];
 		$listTest[] = [ 1, "cd '{$seBinPath}' && bash ./se.sh test-exit-1" ];
 		$listTest[] = [ 1, "cd '{$seBinPath}' && bash ./se.sh test-sudo" ];
 		$listTest[] = [ 0, "cd '{$seBinPath}' && bash ./se.sh --sudo test-sudo" ];
 
-		// $cmd = "cd '{$seBinPath}' && bash se.sh install-pm2-www"; // DBG: require root, add prefix 'sudo--'
-		// $cmd = "cd '{$seBinPath}' && bash ./se.sh --sudo install-pm2-www";
-		// $cmd = "cd '{$seBinPath}' && bash se.sh install-pm2-www"; // expected Permission denied - missing sudo
-		// $cmd = "cd '{$seBinPath}' && bash se.sh sudo "; // expected Missing script name + usage
-		// $cmd = "cd '{$seBinPath}' && bash se.sh non-existing-script"; // expecte Module not exists + usage
-		// $cmd = "cd '{$seBinPath}' && bash se.sh "; // expected usage
-
 		foreach ($listTest as $idx => $test) {
 			list($expected, $cmd) = $test;
 			$out = [];
 			V::exec($cmd = "{$cmd} 2>&1", $out, $ret);
-			echo UI::h('details', [], [
-				UI::h('summary', [], "test {$idx} " . (($expected === $ret) ? "SUCCESS" : "FAILED")),
-				UI::h('div', [], [
-					UI::h('pre', [], "RET({$ret}). OUTPUT:" . "\n" . implode("\n", $out)),
-					UI::h('div', [ 'class' => "alert alert-info" ], "test ({$ret})" . "\n<br>" . implode("\n<br>", $out) ),
-					($expected === $ret)
-					?	UI::h('div', [ 'class' => 'alert alert-success' ], "OK: script return as expected!")
-					:	UI::h('div', [ 'class' => 'alert alert-danger' ], "FAIL: script return '{$ret}' but expected '{$expected}'!")
-					,
-				]),
+			echo UI::h('p5:Details', [
+				'theme' => 'dark',
+				'summary' => "test {$idx} " . (($expected === $ret) ? "SUCCESS" : "FAILED"),
+				'summary.style' => "font-size:small",
+				'body.style' => "font-size:small",
+			], [
+				UI::h('pre', [], $cmd),
+				UI::h('pre', [], "RET({$ret}). OUTPUT:" . "\n" . implode("\n", $out)),
+				UI::h('p5:Alert', [ 'type' => 'info' ], "test ({$ret})" . "\n<br>" . implode("\n<br>", $out) ),
+				($expected === $ret)
+				?	UI::h('p5:Alert', [ 'type' => 'success' ], "OK: script return as expected!")
+				:	UI::h('p5:Alert', [ 'type' => 'danger' ], "FAIL: script return '{$ret}' but expected '{$expected}'!")
+				,
 			]);
 		}
 

SE/se-lib/UI.php

@@ -520,7 +520,10 @@ class UI {
 		foreach ($params as $k => $v) {
 			if (is_array($v)) {
 				$attr[] = "{$k}=\"" . implode(" ", $v) . "\"";
-			} else {
+			} else if (true === $v) { // eg. open => true : 'open'
+				$attr[] = $k;
+			} else if (false === $v) { // skip if false value
+			} else if (!empty($v)) {
 				$attr[] = "{$k}=\"{$v}\"";
 			}
 		}

SE/se-lib/UI/Alert.php

@@ -0,0 +1,37 @@
+<?php
+
+// UI::hAttributes($params);
+// UI::hChildrens($childrens);
+
+// - props[type] - string success|info|warning|danger|error
+// <div class="alert alert-success" role="alert">...</div>
+// <div class="alert alert-info" role="alert">...</div>
+// <div class="alert alert-warning" role="alert">...</div>
+// <div class="alert alert-danger" role="alert">...</div>
+
+class UI_Alert implements UITagInterface {
+
+	/**
+	 * @param string $tagName = 'p5:Alert'
+	 * @param array $props
+	 * @param array $childrens
+	 * 
+	 * @return string html code
+	 */
+	static function h($tagName, $props = [], $childrens = []) {
+		$type = self::convertType($props['type']);
+		return UI::h('div', [ 'class' => "alert alert-{$type}" ], $childrens);
+	}
+
+	static function convertType($type) {
+		switch (strtolower($type)) {
+			case 'success': return 'success';
+			case 'info': return 'info';
+			case 'warning': return 'warning';
+			case 'danger': return 'danger';
+			case 'error': return 'danger';
+			default: return 'info';
+		}
+	}
+
+}

SE/se-lib/UI/Details.php

@@ -0,0 +1,51 @@
+<?php
+
+// UI::hAttributes($params);
+// UI::hChildrens($childrens);
+
+// <details class="p5-details p5-details--{$props['theme']}">
+//   <summary class="p5-details__summary">{$props['summary']}</summary>
+//   <div class="p5-details__body">{$props['summary']}</div>
+// </details>
+
+// - props[summary] - mixed string|array passed to UI::hChildrens($params)
+// - props[type] - string success|info|warning|danger|error
+// - props[open] - boolean
+// - props[style] - string <details> style attribute value
+// - props[summary.style] - string <summary> style attribute value
+// - props[body.style] - string .p5-details__body style attribute value
+
+
+class UI_Details implements UITagInterface {
+
+	/**
+	 * @param string $tagName = 'p5:Details'
+	 * @param array $props
+	 * @param array $childrens
+	 * 
+	 * @return string html code
+	 */
+	static function h($tagName, $props = [], $childrens = []) {
+		if (empty($props['summary'])) throw new Exception("Missing details summary");
+		$thisProps = [];
+		$thisProps['style'] = (!empty($props['style'])) ? [ 'style' => $props['style'] ] : [];
+
+		return UI::h('details', [
+			'class' => "p5-details" . (!empty($props['theme']) ? " p5-details--{$props['theme']}" : ""),
+			'style' => V::get('style', '', $props),
+			'open' => (true === $props['open']) ? true : false,
+			'test-attr-true' => true,
+			'test-attr-false' => false,
+		], [
+			UI::h('summary', [
+				'class' => "p5-details__summary",
+				'style' => V::get('summary.style', '', $props),
+			], $props['summary']),
+			UI::h('div', [
+				'class' => "p5-details__body",
+				'style' => V::get('body.style', '', $props),
+			], $childrens),
+		]);
+	}
+
+}

SE/se-lib/UI/Details.php.style.css

@@ -0,0 +1,35 @@
+/* // theme datk:
+// <details style="max-width:800px" open="">
+// <summary style="padding:3px 8px;border:1px solid #ccc;background-color:#282c34;color:#abb2bf;font-size:small">
+// <b style="color:#de6b74">Config::getConfFile()</b> =&gt; Array</summary>
+// <pre style="background-color:#282c34;color:#abb2bf;border:1px solid #ccc;border-radius:0;font-size:x-small;max-height:400px;overflow:scroll"> */
+
+/* .p5-details {} */
+.p5-details__summary { cursor:pointer }
+/* .p5-details__body {} */
+
+
+
+/* .p5-details--dark {} */
+.p5-details--dark .p5-details__summary {
+	padding: 3px 8px;
+	border: 1px solid #000;
+	background-color: #282c34;
+	color: #abb2bf;
+	font-size: medium;
+	line-height: 1.6em;
+	outline: none;
+}
+.p5-details--dark .p5-details__summary:hover { color: #fff }
+.p5-details--dark .p5-details__body {
+	padding: 22px;
+	background-color: #f5f5f5;
+	color: #000;
+	border: 1px solid #000;
+	border-radius: 0;
+	font-size: small;
+	max-height: 400px;
+	overflow-y: scroll;
+}
+.p5-details--dark .p5-details__body pre { background-color:#fff; }
+.p5-details--dark .p5-details__body > :last-child { margin-bottom: 0 !important; }

SE/se-lib/tmpl/_layout_gora.php

@@ -11,6 +11,10 @@
 	<link rel="stylesheet" href="static/jquery-ui-smoothness/jquery-ui-1.10.4.custom.min.css" type="text/css">
 <?php
 	UI::inlineCSS(APP_PATH_WWW . '/static/p5UI/main.css');
+
+	// p5:CustomTag styles
+	UI::inlineCSS(APP_PATH_WWW . '/se-lib/UI/Details.php.style.css');
+
 	UI::inlineRawCSS(UI::fixFooterPosition('body_css_style'));
 	UI::inlineRawJS(APP_PATH_WWW . '/static/object-assign-polyfill.js');
 	UI::inlineRawJS(APP_PATH_WWW . '/static/fetch-polyfill.min.js');

sbin/se.sh

@@ -8,13 +8,15 @@ set -e
 # set -e stops the execution of a script if a command or pipeline has an error
 
 function usage {
-  echo "usage se.sh [--sudo] script_name"
+  echo "usage se.sh [--sudo] module_name"
   exit 1
 }
 
 [ -z "$1" ] && usage
 
 [ "$1" = "--sudo" ] && {
+    [ -z "$2" ] && echo "Missing module name"
+    [ -z "$2" ] && usage
     sudo ./se.sh "$2"
     exit 0
 }
@@ -28,7 +30,7 @@ echo "DBG: module_name: ${module_name}"
     usage
 }
 
-echo "DBG: starting module: [${module_name}'"
+echo "DBG: starting module: [${module_name}]"
 /bin/bash module/${module_name}.sh "${@:2}"
 module_exit=$?
 echo "DBG: module exited with code [${module_exit}] - module: [${module_name}]"