Improve UI of the website
authorSasha Sherstnev <a.sherstnev@dundee.ac.uk>
Mon, 2 Dec 2013 11:58:08 +0000 (11:58 +0000)
committerSasha Sherstnev <a.sherstnev@dundee.ac.uk>
Mon, 2 Dec 2013 11:58:08 +0000 (11:58 +0000)
Remove java code from JSP

12 files changed:
server/compbio/controllers/DBUpdateController.java
server/compbio/controllers/DailyStatisticsController.java
server/compbio/controllers/JobExecutionTimeController.java
webapp/view/fragments/header_database.jsp
webapp/view/fragments/mainmenu.jsp
webapp/view/queryIPStatistics.jsp
webapp/view/queryJobStatistics.jsp
webapp/view/queryProteinSequenceCounter.jsp
webapp/view/queryRemoveJobs.jsp
webapp/view/queryTimeExecution.jsp
webapp/view/reportJobStatistics.jsp
webapp/view/reportTimeExecution.jsp

index 1d84026..c5b2154 100644 (file)
@@ -1,5 +1,6 @@
 package compbio.controllers;
 
+import java.util.Calendar;
 import java.util.Map;
 
 import org.springframework.stereotype.Controller;
@@ -18,6 +19,17 @@ public class DBUpdateController {
 
        @RequestMapping(value = "/database/remove", method = RequestMethod.GET)
        public String initRemoveForm(Map<String, Object> model) {
+               Calendar cal = Calendar.getInstance();
+               String date2 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+               cal.add(Calendar.DATE, -3);
+               String date1 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+               String jobid = "jp_NzBOJKo";
+
+               model.put("samplejobid", jobid);
+               model.put("date1", date1);
+               model.put("date2", date2);
+               model.put("sampleip", "127.0.0.1");
+               model.put("sampleseq", "ATA");
                return "queryRemoveJobs";
        }
 
index fd7a0db..22df505 100644 (file)
@@ -26,6 +26,14 @@ public class DailyStatisticsController {
 
        @RequestMapping(value = "/stat", method = RequestMethod.GET)
        public String initFindForm(Map<String, Object> model) {
+               Calendar cal = Calendar.getInstance();
+               String date2 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+               cal.add(Calendar.DATE, -3);
+               String date1 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+
+               model.put("date1", date1);
+               model.put("date2", date2);
+               
                return "queryJobStatistics";
        }
 
@@ -40,13 +48,13 @@ public class DailyStatisticsController {
                        date1 = StatisticsProt.DateFormatYYMMDD(cr.earliestDate());
                        date2 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DAY_OF_MONTH);
                }
-               model.put("data1", date1);
-               model.put("data2", date2);
+               model.put("date1", date1);
+               model.put("date2", date2);
                List<DataBase> res = cr.countJobs(date1, date2);
                model.put("result", res);
                final long endTime = System.currentTimeMillis();
                model.put("timeExecution", (endTime - startTime));
-               model.put("flag", option);
+               model.put("option", option);
                return "/reportJobStatistics";
        }
        
index 0917bde..191a40c 100644 (file)
@@ -20,24 +20,31 @@ public class JobExecutionTimeController {
 
        @RequestMapping(value = "/exectime", method = RequestMethod.GET)
        public String initFindForm(Map<String, Object> model) {
+               Calendar cal = Calendar.getInstance();
+               String date2 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+               cal.add(Calendar.DATE, -3);
+               String date1 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DATE);
+
+               model.put("date1", date1);
+               model.put("date2", date2);
                return "queryTimeExecution";
        }
 
        @RequestMapping(value = "/exectime/query", method = RequestMethod.GET)
-       public String findSequence(@RequestParam("data1") String date1, @RequestParam("data2") String date2,
+       public String findSequence(@RequestParam("date1") String date1, @RequestParam("date2") String date2,
                        @RequestParam(value="option", required=false) String option, Map<String, Object> model) {
                final long startTime = System.currentTimeMillis();
 
                CassandraRequester sp = new CassandraRequester();
-               if (option.equals("AllDates")) {
+               if (option.equals("AllDates,off")) {
                        Calendar cal = Calendar.getInstance();
                        date1 = StatisticsProt.DateFormatYYMMDD(sp.earliestDate());
                        date2 = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DAY_OF_MONTH);
                }
-               model.put("data1", date1);
-               model.put("data2", date2);
+               model.put("date1", date1);
+               model.put("date2", date2);
+               model.put("option", option);
                model.put("result", sp.extractExecutionTime(date1, date2));
-               model.put("flag", option);
                final long endTime = System.currentTimeMillis();
                model.put("timeExecution", (endTime - startTime));
                return "/reportTimeExecution";
index 02eb0ad..151b39a 100644 (file)
@@ -23,5 +23,8 @@
                function show(el, id) {
                        document.getElementById(id).style.visibility = (el.checked)?"visible":"hidden";
                }
-       </script>
+               function hide(el, id) {
+                       document.getElementById(id).style.visibility = (el.checked)?"hidden":"visible";
+               }
+               </script>
 </head>
index 56596dc..ed67bb7 100644 (file)
@@ -18,8 +18,9 @@
                        </li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-stats"></span> Statistics Servlets<b class="caret"></b></a>
                                <ul class="dropdown-menu">
-                                       <li><a href="<spring:url value="/exectime" htmlEscape="true" />">Job Time Execution</a></li>
                                        <li><a href="<spring:url value="/stat" htmlEscape="true" />">Daily Job Statistics</a></li>
+                                       <li class="divider"></li>
+                                       <li><a href="<spring:url value="/exectime" htmlEscape="true" />">Job Time Execution</a></li>
                                        <li><a href="<spring:url value="/ip/stat" htmlEscape="true" />">IPs by Job count</a></li>
                                        <li><a href="<spring:url value="/sequence/query2" htmlEscape="true" />">Proteins by Job count</a></li>
                                </ul>
index c0e9f5b..a5dd4d3 100644 (file)
 
        <div class="panel panel-default">
                <div class="panel-heading">
-                       <div style="font-weight:bold;">Enter a minimum number of jobs executed from a given IP</div>
+                       <div style="font-weight:bold;">IPs with multipled executed jobs</div>
                </div>
                <div class="panel-body">
        <spring:url value="/ip/stat/querycounter" var="formurl"/>
        <form method="get" action="${fn:escapeXml(formurl)}" role="form">
+               <div class="col-xs-2"> <!-- make the field shorter -->
+               <c:choose>
+                       <c:when test="${error == null}"><div class="form-group"></c:when>
+                       <c:otherwise><div class="form-group has-error"></c:otherwise>
+               </c:choose>
+               <label for="JobCounterinput">Number of jobs</label>
+               <input class="form-control" type="text" name="JobCounter" value ="${value}" id="JobCounterinput" style="width: 200 px">
                <c:if test="${error != null}">
-                       <div class="form-group has-error">
+                       <p class="help-block">${error}</p>
                </c:if>
-               <div class="form-group">
-                       <label for="JobCounterinput">Number of jobs</label>
-                       <input type="text" name="JobCounter" value ="${value}" id="JobCounterinput">
-                       <c:if test="${error != null}">
-                               <p class="help-block">${error}</p>
-                       </c:if>
                </div>
                <!-- <p><input type="text" name="JobCounter" value = 3></p>--> 
                <input type="submit" name="Search" value="Search"/>
+               </div>
        </form>
        </div>
        </div>
index 1d85253..dec5320 100644 (file)
@@ -1,6 +1,4 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8"
-       pageEncoding="UTF-8"%>
-<%@page import="java.util.Calendar"%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
@@ -9,36 +7,33 @@
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
 
 <html>
-<jsp:include page="fragments/header.jsp" />
+<jsp:include page="fragments/header_database.jsp" />
 <body>
        <div class="container">
-               <jsp:include page="fragments/mainmenu.jsp" />
+       <jsp:include page="fragments/mainmenu.jsp" />
 
-       <%
-               Calendar cal = Calendar.getInstance();
-               String datecalBegin = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/1";
-               String datecalEnd = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DAY_OF_MONTH);
-       %>
-
-               <div class="panel panel-default">
-                       <div class="panel-heading"><div style="font-weight:bold;">Enter time period for daily job statistics</div>
-                       </div>
-                       <div class="panel-body">
-                               <spring:url value="/stat/query" var="formurl" />
-                               <form method="get" action="${fn:escapeXml(formurl)}">
-                                       <p>
-                                               From <input type="text" name="date1" value=<%=datecalBegin%>
-                                                       style="width: 145px;" /> to <input type="text" name="date2"
-                                                       value=<%=datecalEnd%> style="width: 145px;" />
-                                       </p>
-                                       <p><input type="checkbox" name="option" value="AllDates"> Query for all dates<br>
-                                       <input type="hidden" name="option" value="off" /></p>
-                                       <input type="submit" name="Search" value="Search" />
-                               </form>
-                       </div>
+       <div class="panel panel-default">
+               <div class="panel-heading">
+                       <div style="font-weight:bold;">Enter time period for daily job statistics</div>
+               </div>
+               <div class="panel-body">
+                       <spring:url value="/stat/query" var="formurl" />
+                       <form method="get" action="${fn:escapeXml(formurl)}">
+                               <p><input type="checkbox" name="option" value="AllDates" checked="checked" onclick="hide(this, 'date');"> Query for all dates<br>
+                               <div id='date' style="visibility:hidden;">
+                               <p>
+                                       Jobs executed 
+                                       from <input type="text" name="date1" value="${date1}" style="width: 145px;" /> 
+                                       to <input type="text" name="date2" value="${date2}" style="width: 145px;" />
+                               </p>
+                               </div>
+                               <input type="hidden" name="option" value="off" />
+                               <input type="submit" name="Search" value="Search" />
+                       </form>
                </div>
+       </div>
 
-               <jsp:include page="fragments/footer.jsp" />
+       <jsp:include page="fragments/footer.jsp" />
        </div>
 </body>
 </html>
\ No newline at end of file
index dce9b49..00bb5d7 100644 (file)
 
        <div class="panel panel-default">
                <div class="panel-heading">
-                       <div style="font-weight:bold;">Enter minimum number of jobs executed with a given protein</div>
+                       <div style="font-weight:bold;">Proteins with multiple executed jobs</div>
                </div>
                <div class="panel-body">
                        <spring:url value="/sequence/querycounter" var="formurl"/>
                        <form method="get" action="${fn:escapeXml(formurl)}">
-                       <c:if test="${error != null}">
+                       <div class="col-xs-2"> <!-- make the field shorter -->
+                       <c:choose>
+                       <c:when test="${error == null}">
+                               <div class="form-group">
+                       </c:when>
+                       <c:otherwise>
                                <div class="form-group has-error">
-                       </c:if>
-                       <div class="form-group">
+                       </c:otherwise>
+                       </c:choose>
                                <label for="JobCounterinput">Number of jobs </label>
-                               <input type="text" name="counterJob" value ="${value}" id="JobCounterinput">
+                               <input class="form-control" type="text" name="counterJob" value ="${value}" id="JobCounterinput">
                                <c:if test="${error != null}">
                                        <p class="help-block">${error}</p>
                                </c:if>
                        </div>
                                <!-- <p><input type="text" name="counterJob" value = 3></p>-->
                        <input type="submit" name="Search" value="Search"/>
+                       </div>
                        </form>
                </div>
        </div>
index 1a06dde..41e0177 100644 (file)
        <jsp:include page="fragments/mainmenu.jsp" />
        <spring:url value="/database/remove/go" var="formurl"/>
 
-               <%
-                       Calendar cal = Calendar.getInstance();
-                       String currentdate = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DAY_OF_MONTH);
-               %>
-
        <div class="panel panel-default">
                <div class="panel-heading">
                        <div style="font-weight:bold;">Delete jobs with the following conditions:</div>
                </div>
                <div class="panel-body">
                        <form method="get" action="${fn:escapeXml(formurl)}">
+                               <!-- remove a particular job -->
+                               <p>
+                                       <input type="checkbox" name="byId" onclick="show(this, 'id');" /> Job with the job Id
+                                       <div id='id' style="visibility:hidden;">Job Id: <input type="text" name="id" value=">${samplejobid}" /></div>
+                               </p>
+
+                               <!-- remove jobs executed on the dates: -->
+                               <p>
+                                       <input type="checkbox" name="byDate" onclick="show(this, 'date');" /> Jobs for the period
+                                       <div id='date' style="visibility:hidden;">
+                                       From <input type="text" name="date1" value = "${date1}" style=" width : 145px;" />
+                                       to <input type="text" name="date2" value = "${date2}" /></div>
+                               </p>
+
+                               <!-- remove jobs executed from particular IP: -->
+                               <p>
+                                       <input type="checkbox" name="byIp" onclick="show(this, 'ip');" /> Jobs executed from the IP
+                                       <div id='ip' style="visibility:hidden;">IP: <input type="text" name="ip" value = '${sampleip}'/></div>
+                               </p>
+                               
+                               <!-- remove jobs with a particular protein subsiquence: -->
                                <p>
-                                       <input type="checkbox" name="byId" onclick="show(this, 'id');" />
-                                       Job with the job Id:
+                                       <input type="checkbox" name="bySequence"  onclick="show(this, 'seq');"> Jobs with the protein subsequence
+                                       <div id='seq' style="visibility:hidden;"> Sequence: <input type="text" name="seq" value = ">${sampleseq}"/></div>
                                </p>
-                               <p><div id='id' class="row" style="visibility:hidden;">Job Id: <input type="text" name="id" /></div></p>
-                               <p><input type="checkbox" name="byDate" onclick="show(this, 'date');" /> Jobs for the period:</p>
-                               <p><div id='date' class="row" style="visibility:hidden;">
-                               From <input type="text" name="date1" value = "<%= currentdate%>" style=" width : 145px;" />
-                                       to <input type="text" name="date2" value = "<%= currentdate%>" />
-                               </div></p>
-                               <p><input type="checkbox" name="byIp" onclick="show(this, 'ip');" /> Jobs executed from the IP:</p>
-                               <p><div id='ip' class="row" style="visibility:hidden;">IP: <input type="text" name="ip" value = '127.0.0.1'/></div></p>
-                               <p><input type="checkbox" name="bySequence"  onclick="show(this, 'seq');"> Jobs for the protein sequence</p>
-                               <p><div id='seq' class="row" style="visibility:hidden;"> Sequence: <input type="text" name="seq" value = "ATA"/></div></p>
+                               
                                <p><input type="submit" name="Delete" value="Delete"/></p>
                        </form>
                </div>
index 3722fe3..719073c 100644 (file)
@@ -5,19 +5,13 @@
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
-<%@page import="java.util.Calendar"%>
 
 <html>
-<jsp:include page="fragments/header.jsp" />
+<jsp:include page="fragments/header_database.jsp" />
 <body>
        <div class="container">
        <jsp:include page="fragments/mainmenu.jsp" />
 
-       <% Calendar cal = Calendar.getInstance();
-               String datecalBegin = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/1";
-               String datecalEnd = cal.get(Calendar.YEAR) + "/" + (cal.get(Calendar.MONTH) + 1) + "/" + cal.get(Calendar.DAY_OF_MONTH);
-       %>
-
        <div class="panel panel-default">
                <div class="panel-heading">
                        <div style="font-weight:bold;">Enter time period for execution statistics</div>
                <div class="panel-body">
                        <spring:url value="/exectime/query" var="formurl"/>
                        <form method="get" action="${fn:escapeXml(formurl)}">
-                               <p>From <input type="text" name="data1" value = <%= datecalBegin%> style=" width : 145px;"/>
-                               to <input type="text" name="data2" value = <%= datecalEnd%> style=" width : 145px;"/></p>
-                               <p><input type="checkbox" name="option" value="AllDates"> Query for all dates<br>
-                               <input type="hidden" name="option" value="off"/></p>
+                               <p><input type="checkbox" name="option" value="AllDates" checked="checked" onclick="hide(this, 'date');"> Query for all dates</p>
+                                       <div id='date' style="visibility:hidden;">
+                                       <p>
+                                               Jobs executed 
+                                               from <input type="text" name="date1" value="${date1}" style="width: 145px;" /> 
+                                               to <input type="text" name="date2" value="${date2}" style="width: 145px;" />
+                                       </p>
+                                       </div>
+
+                               <input type="hidden" name="option" value="off"/>
                                <input type="submit" name="Search" value="Search"/>
                        </form>
                </div>
index 0ce608c..da4bec2 100644 (file)
        <div class="container">
                <jsp:include page="fragments/mainmenu.jsp" />
                <spring:url value="/stat/oneday" var="onedayquery" />
+               <spring:url value="/stat/query?date1=${date1}&date2=${date2}&option=${option}" var="thequery" />
+
+               <ul class="nav navbar-nav navbar-right">
+                       <li>
+                       <a href="${thequery}" class="btn btn-default active" role="button">Reload</a>
+                       </li>
+               </ul>
 
        <div class="panel panel-default">
        <div class="panel-heading">
-
                <c:choose>
-                       <c:when test="${flag == 'AllDates,off'}">
+                       <c:when test="${option == 'AllDates,off'}">
                                <p style="font-weight:bold;">Jobs statistics for the whole period</p>
                        </c:when>
                        <c:otherwise>
                                <p style="font-weight:bold;">
-                                       Jobs statistics for the time period: <c:out value="${data1}" /> to <c:out value="${data2}"/>
+                               Jobs statistics for the time period: <c:out value="${date1}" /> to <c:out value="${date2}"/>
                                </p>
                        </c:otherwise>
                </c:choose>
-
        </div>
-       <div class="panel-body">
 
+
+       <div class="panel-body">
                <c:choose>
                        <c:when test="${result == null}">
                                <p>No jobs for this period</p>
                                        <thead>
                                                <tr style="text-align: center">
                                                        <th rowspan="2" style="text-align: center">Date</th>
-                                                       <th rowspan="2" style="text-align: center">Total <br/>number of jobs</th>
-                                                       <th colspan="5" style="text-align: center">Number of jobs</th>
+                                                       <th rowspan="2" style="text-align: center">Total number<br/> of jobs</th>
+                                                       <th colspan="5" style="text-align: center">Job Statistics</th>
                                                </tr>
                                                <tr>
                                                        <th style="text-align: center">Status "OK"</th>
                                                        <th style="text-align: center">Status "Stopped"</th>
-                                                       <th style="text-align: center">Status "Error"</th>
+                                                       <th style="text-align: center">Status "Internal Error"</th>
                                                        <th style="text-align: center">Status "Time out"</th>
                                                </tr>
                                        </thead>
index 14b4dac..d711c05 100644 (file)
 <body>
        <div class="container">
                <jsp:include page="fragments/mainmenu.jsp" />
+               <spring:url value="/exectime/query?date1=${date1}&date2=${date2}&option=${option}" var="thequery" />
+
+       <!-- reload button  -->
+       <ul class="nav navbar-nav navbar-right">
+               <li>
+               <a href="${thequery}" class="btn btn-default active" role="button">Reload</a>
+               </li>
+       </ul>
 
        <div class="panel panel-default">
        <div class="panel-heading">
-
                <c:choose>
-                       <c:when test="${flag == 'AllDate'}">
+                       <c:when test="${option == 'AllDates,off'}">
                                <p style="font-weight:bold;">Time execution for the whole period</p>
                        </c:when>
                        <c:otherwise>
-                               <p style="font-weight:bold;">Time execution for the interval: ${data1} - ${data2}</p>
+                               <p style="font-weight:bold;">Time execution for the interval: ${date1} - ${date2}</p>
                        </c:otherwise>
                </c:choose>
-
        </div>
+       
        <div class="panel-body">
-
                <c:set var="sum" value="0" />
                <c:forEach items="${result}" var="res" varStatus="loop">
                        <c:choose>
@@ -46,6 +52,7 @@
                        <thead>
                                <tr>
                                        <th style="text-align: center; width: 150px">Date</th>
+                                       <th style="text-align: center; width: 150px">Total</th>
                                        <th style="text-align: center; width: 150px">0 - 30 s</th>
                                        <th style="text-align: center; width: 150px">30 - 60 s</th>
                                        <th style="text-align: center; width: 150px">1 - 2 min</th>
@@ -58,7 +65,8 @@
                                        <c:choose>
                                                <c:when test="${loop.last}">
                                                        <tr style="font-weight: bolder;">
-                                                               <td>Total:</td>
+                                                               <td style="text-align: right">Total numbers:</td>
+                                                               <td style="text-align: right">0</td>
                                                                <c:forEach items="${res.timeTotalExec}" var="total">
                                                                        <td style="text-align: right">${total}</td>
                                                                </c:forEach>
@@ -71,7 +79,8 @@
                                        <c:choose>
                                                <c:when test="${not loop.last}">
                                                        <tr>
-                                                               <td>${res.date}</td>
+                                                               <td style="text-align: center">${res.date}</td>
+                                                               <td style="text-align: right">0</td>
                                                                <c:forEach items="${res.timeRez}" var="time">
                                                                        <td style="text-align: right">${time}</td>
                                                                </c:forEach>
                                </c:forEach>
                        </tbody>
                </table>
-
        </div>
        </div>
 
-               <jsp:include page="fragments/footer.jsp" />
+       <jsp:include page="fragments/footer.jsp" />
        </div>
 </body>
 </html>
\ No newline at end of file