UI verbessert: Lange Listen werden ausgeblendet

This commit is contained in:
Michael Dollinger 2021-01-23 11:06:46 +01:00
parent 71275eea56
commit 4fe0bec4ae

View File

@ -5,6 +5,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{language}"> <html lang="{language}">
<jsp:include page="template/header.jsp"/> <jsp:include page="template/header.jsp"/>
<script type="text/javascript">
function showRows(classToHide) {
toggleRows("link_" + classToHide, "display:none");
toggleRows(classToHide, "");
}
function toggleRows(classToToggle, style) {
var titles = document.querySelectorAll("." + classToToggle);
var i = titles.length;
while (i--) {
titles[i].setAttribute("style", style);
}
}
</script>
<body> <body>
<jsp:include page="template/navbar.jsp"/> <jsp:include page="template/navbar.jsp"/>
<div class="container"> <div class="container">
@ -14,23 +29,45 @@
<a href="${newgroupurl}" class="btn btn-default pull-right additional-space-bottom"><fmt:message key="groups.create"/></a> <a href="${newgroupurl}" class="btn btn-default pull-right additional-space-bottom"><fmt:message key="groups.create"/></a>
</div> </div>
<table class="table table-hover"> <table class="table table-hover">
<tr><th><fmt:message key="groups.column.name"/></th><th><fmt:message key="groups.column.members"/></th><th><fmt:message key="groups.column.operations"/></th></tr> <tr>
<th><fmt:message key="groups.column.name"/></th>
<th><fmt:message key="groups.column.members"/>
<a class="link_hiddenLines" onclick="showRows('hiddenLines')" style="padding: 0px 0px 0px 100px;font-weight:normal;">... show all ...</a>
</th>
<th><fmt:message key="groups.column.operations"/></th>
</tr>
<c:forEach items="${groups}" var="groupentry"> <c:forEach items="${groups}" var="groupentry">
<tr> <tr>
<c:url var="updgroupurl" value="/group/${groupentry.key}?op=edit" /> <c:url var="updgroupurl" value="/group/${groupentry.key}?op=edit" />
<td><a href="${updgroupurl}">${groupentry.value.name}</a></td> <td><a href="${updgroupurl}">${groupentry.value.name}</a></td>
<td> <td>
<table> <table>
<c:forEach items="${groupentry.value.members}" var="userdn"> <tbody>
<c:url var="userurl" value="/user/${userdn}" /> <c:set var="count" value="0" scope="page" />
<tr> <c:set var="classHide" value="hiddenLines hiddenLines_${groupentry.value.name}"/>
<td style="padding: 0px 50px 0px 0px"> <c:set var="classRow" value=""/>
<a href="${userurl}">${users[userdn].login}</a> <c:set var="styleRow" value=""/>
</td> <c:forEach items="${groupentry.value.members}" var="userdn">
<td style="padding: 0px 10px 0px 0px">${users[userdn].firstname}</td> <c:url var="userurl" value="/user/${userdn}" />
<td>${users[userdn].lastname}</td> <c:set var="count" value="${count + 1}" scope="page"/>
</tr> <c:if test="${ count eq 10 }">
</c:forEach> <c:set var="classRow" value="${classHide}"/>
<c:set var="styleRow" value="display:none"/>
<tr class="link_hiddenLines link_hiddenLines_${groupentry.value.name}">
<td></td>
<td colspan="2">... <a onclick="showRows('hiddenLines_${groupentry.value.name}')">show more</a> ...</td>
<td></td>
</tr>
</c:if>
<tr class="${classRow}" style="${styleRow}">
<td style="padding: 0px 30px 0px 0px">
<a href="${userurl}">${users[userdn].login}</a>
</td>
<td style="padding: 0px 10px 0px 0px">${users[userdn].firstname}</td>
<td>${users[userdn].lastname}</td>
</tr>
</c:forEach>
</tbody>
</table> </table>
</td> </td>
<c:url var="delgroupurl" value="/group/${groupentry.key}?op=delete" /> <c:url var="delgroupurl" value="/group/${groupentry.key}?op=delete" />