From 08253a6b16e5abe09718e9a593f296c3a66b482b Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 27 Oct 2014 17:13:30 +0100
Subject: Show modules of sysconfig using fancy javascript mouseover effects

---
 modules/sysconfig.inc.php      |   7 +-
 style/default.css              |  19 +++-
 templates/sysconfig/_page.html | 193 ++++++++++++++++++++++++-----------------
 3 files changed, 138 insertions(+), 81 deletions(-)

diff --git a/modules/sysconfig.inc.php b/modules/sysconfig.inc.php
index dc2458de..6bb96c80 100644
--- a/modules/sysconfig.inc.php
+++ b/modules/sysconfig.inc.php
@@ -133,12 +133,17 @@ class Page_SysConfig extends Page
 	private function listConfigs()
 	{
 		// Configs
-		$res = Database::simpleQuery("SELECT configid, title, filepath FROM configtgz ORDER BY title ASC");
+		$res = Database::simpleQuery("SELECT configtgz.configid, configtgz.title, configtgz.filepath, GROUP_CONCAT(configtgz_x_module.moduleid) AS modlist"
+			. " FROM configtgz"
+			. " INNER JOIN configtgz_x_module USING (configid)"
+			. " GROUP BY configid"
+			. " ORDER BY title ASC");
 		$configs = array();
 		while ($row = $res->fetch(PDO::FETCH_ASSOC)) {
 			$configs[] = array(
 				'configid' => $row['configid'],
 				'config' => $row['title'],
+				'modlist' => $row['modlist'],
 				'current' => readlink(CONFIG_HTTP_DIR . '/default/config.tgz') === $row['filepath']
 			);
 		}
diff --git a/style/default.css b/style/default.css
index 1359c4ba..f16d35dd 100644
--- a/style/default.css
+++ b/style/default.css
@@ -148,5 +148,22 @@ body {
 }
 
 .slx-warning-badge {
-  color: #ff0;
+  color: #ff6;
 }
+
+.slx-footer {
+  color: #999;
+  padding: 5px;
+}
+
+.slx-bold {
+  font-weight: bold;
+}
+
+.slx-fade {
+  opacity: 0.5;
+}
+
+.slx-pointer {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/templates/sysconfig/_page.html b/templates/sysconfig/_page.html
index 0fe46d0b..c86c4b14 100644
--- a/templates/sysconfig/_page.html
+++ b/templates/sysconfig/_page.html
@@ -1,85 +1,89 @@
-<div class="panel panel-default">
-	<div class="panel-heading">
-		{{lang_availableSystem}}
-		<a class="btn btn-default" data-toggle="modal" data-target="#help-config"><span class="glyphicon glyphicon-question-sign"></span></a>
-	</div>
-	<div class="panel-body">
-		<form method="post" action="?do=SysConfig">
-			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="action" value="config">
-			<table class="slx-table">
-			{{#configs}}
-				<tr>
-					<td>{{config}}</td>
-					<td>
-						{{^current}}
-							<button class="btn btn-primary btn-xs" name="activate" value="{{configid}}">
-								<span class="glyphicon glyphicon-flag"></span>
-								{{lang_activate}}
-							</button>
-						{{/current}}
-						{{#current}}
-							<span class="btn btn-success btn-xs">
-								<span class="glyphicon glyphicon-ok"></span>
-								{{lang_active}}
-							</span>
-						{{/current}}
-					</td>
-					<td>
-						<button class="btn btn-default btn-xs" name="list" value="{{configid}}"><span class="glyphicon glyphicon-eye-open"></span> {{lang_show}}</button>
-					</td>
-					<td>
-						<button class="btn btn-danger btn-xs" name="del" value="{{configid}}"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
-					</td>
-				</tr>
-			{{/configs}}
-			</table>
-			{{^configs}}
-			<div class="alert alert-warning">
-				{{lang_systemConfigurationNotFound}}
+<div class="row">
+	<div class="col-md-6">
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				{{lang_availableSystem}}
+				<a class="btn btn-default" data-toggle="modal" data-target="#help-config"><span class="glyphicon glyphicon-question-sign"></span></a>
 			</div>
-			{{^modules}}
-			<div class="alert alert-danger">
-				{{lang_systemConfigurationAlert}}
+			<div class="panel-body">
+				<form method="post" action="?do=SysConfig">
+					<input type="hidden" name="token" value="{{token}}">
+					<input type="hidden" name="action" value="config">
+					<table class="slx-table">
+						{{#configs}}
+						<tr class="slx-pointer" data-modlist="{{modlist}}" onclick="showmod(this, 'bold')" onmouseover="showmod(this, 'fade')" onmouseout="showmod(this, 'reset')">
+							<td>{{config}}</td>
+							<td>
+								{{^current}}
+								<button class="btn btn-primary btn-xs" name="activate" value="{{configid}}">
+									<span class="glyphicon glyphicon-flag"></span>
+									{{lang_activate}}
+								</button>
+								{{/current}}
+								{{#current}}
+								<span class="btn btn-success btn-xs">
+									<span class="glyphicon glyphicon-ok"></span>
+									{{lang_active}}
+								</span>
+								{{/current}}
+							</td>
+							<td>
+								<button class="btn btn-danger btn-xs" name="del" value="{{configid}}"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
+							</td>
+						</tr>
+						{{/configs}}
+					</table>
+					{{^configs}}
+					<div class="alert alert-warning">
+						{{lang_systemConfigurationNotFound}}
+					</div>
+					{{^modules}}
+					<div class="alert alert-danger">
+						{{lang_systemConfigurationAlert}}
+					</div>
+					{{/modules}}
+					{{/configs}}
+				</form>
 			</div>
-			{{/modules}}
-			{{/configs}}
-		</form>
-	</div>
-	<div class="panel-footer">			
-		<a class="btn btn-primary" href="?do=SysConfig&amp;action=addconfig">{{lang_newConfiguration}}</a>
-	</div>
-</div>
-<div class="panel panel-default">
-	<div class="panel-heading">
-		{{lang_availableModules}}
-		<a class="btn btn-default" data-toggle="modal" data-target="#help-module"><span class="glyphicon glyphicon-question-sign"></span></a>
-	</div>
-	<div class="panel-body">
-		<form method="post" action="?do=SysConfig">
-			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="action" value="module">
-			<table class="slx-table">
-			{{#modules}}
-				<tr>
-					<td>{{module}}</td>
-					<td>
-						<button class="btn btn-default btn-xs" name="list" value="{{moduleid}}"><span class="glyphicon glyphicon-eye-open"></span> {{lang_show}}</button>
-						<!-- a class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit"></span> Bearbeiten</a -->
-					</td>
-					<td>
-						<button class="btn btn-danger btn-xs" name="del" value="{{moduleid}}"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
-					</td>
-				</tr>
-			{{/modules}}
-			</table>
-			{{^modules}}
-			<div class="alert alert-warning">{{lang_configurationModuleNotFound}}</div>
-			{{/modules}}
-		</form>
+			<div class="panel-footer">			
+				<a class="btn btn-primary" href="?do=SysConfig&amp;action=addconfig">{{lang_newConfiguration}}</a>
+			</div>
+		</div>
 	</div>
-	<div class="panel-footer">
-		<a class="btn btn-primary" href="?do=SysConfig&amp;action=addmodule">{{lang_newModule}}</a>
+
+	<div class="col-md-6">
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				{{lang_availableModules}}
+				<a class="btn btn-default" data-toggle="modal" data-target="#help-module"><span class="glyphicon glyphicon-question-sign"></span></a>
+			</div>
+			<div class="panel-body">
+				<form method="post" action="?do=SysConfig">
+					<input type="hidden" name="token" value="{{token}}">
+					<input type="hidden" name="action" value="module">
+					<table class="slx-table">
+						{{#modules}}
+						<tr>
+							<td data-id="{{moduleid}}" class="modrow">{{module}}</td>
+							<td>
+								<button class="btn btn-default btn-xs" name="list" value="{{moduleid}}"><span class="glyphicon glyphicon-eye-open"></span> {{lang_show}}</button>
+								<!-- a class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit"></span> Bearbeiten</a -->
+							</td>
+							<td>
+								<button class="btn btn-danger btn-xs" name="del" value="{{moduleid}}"><span class="glyphicon glyphicon-trash"></span> {{lang_delete}}</button>
+							</td>
+						</tr>
+						{{/modules}}
+					</table>
+					{{^modules}}
+					<div class="alert alert-warning">{{lang_configurationModuleNotFound}}</div>
+					{{/modules}}
+				</form>
+			</div>
+			<div class="panel-footer">
+				<a class="btn btn-primary" href="?do=SysConfig&amp;action=addmodule">{{lang_newModule}}</a>
+			</div>
+		</div>
 	</div>
 </div>
 
@@ -106,3 +110,34 @@
 		</div>
 	</div>
 </div>
+
+<script type="text/javascript"><!--
+	var boldItem = false;
+	function showmod(e, action) {
+		var list = $(e).attr('data-modlist');
+		list = list.split(',');
+		if (action === 'bold') {
+			$(boldItem).removeClass("slx-bold");
+			if (boldItem === e) {
+				action = 'fade';
+				boldItem = false;
+			}
+		} else if (boldItem !== false) {
+			return;
+		}
+		$('.modrow').each(function () {
+			var elem = $(this);
+			elem.removeClass("slx-fade slx-bold");
+			if (action === 'reset')
+				return;
+			if (action === 'bold' && list.indexOf(elem.attr('data-id')) !== -1)
+				elem.addClass("slx-bold");
+			if (list.indexOf(elem.attr('data-id')) === -1)
+				elem.addClass("slx-fade");
+		});
+		if (action === 'bold') {
+			boldItem = e;
+			$(e).addClass("slx-bold");
+		}
+	}
+// --></script>
\ No newline at end of file
-- 
cgit v1.2.3-55-g7522