Browse Source

Date range into example index page

jasper tredgold 7 years ago
parent
commit
d7c8efff25

+ 91 - 64
caboto-web/src/main/webapp/index.jsp

@@ -1,83 +1,110 @@
 <?xml version="1.0"?>
 <%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:security="http://www.springframework.org/security/tags">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta name="caboto-annotation" content="http://caboto.org"/>
-    <style type="text/css" media="screen">@import "./style.css";</style>
-    <script type="text/javascript" src="./js/prototype.js"></script>
-    <script type="text/javascript" src="./js/annotations.js"></script>
-    <title>Caboto Test Example</title>
-</head>
-<body onload="initializeAnnotations();">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta name="caboto-annotation" content="http://caboto.org"/>
+        <style type="text/css" media="screen">@import "./style.css";</style>
+        <script type="text/javascript" src="./js/prototype.js"></script>
+        <script type="text/javascript" src="./js/annotations.js"></script>
+        <script language="javascript" src="./js/protoplasm.js"></script>
+        <script language="javascript">
+            // transform() calls can be chained together
+            Protoplasm.use('datepicker')
+            .transform('input.datepicker', { 'locale': 'en_GB' });
+        </script>    
+        <title>Caboto Test Example</title>
+    </head>
+    <body onload="initializeAnnotations();">
 
-<security:authorize ifAnyGranted="ROLE_USER,ROLE_ADMIN">
-    <h3 class="logout"><a href="./logout.jsp">Logout</a></h3>
-</security:authorize>
+        <security:authorize ifAnyGranted="ROLE_USER,ROLE_ADMIN">
+            <h3 class="logout"><a href="./logout.jsp">Logout</a></h3>
+        </security:authorize>
 
-<%
-    Cookie uid = new Cookie("uid", null);
-    Cookie admin = new Cookie("admin", null);
+        <%
+            Cookie uid = new Cookie("uid", null);
+            Cookie admin = new Cookie("admin", null);
 
-    if (request.getUserPrincipal() != null) {
-        uid.setValue(request.getUserPrincipal().getName());
-        if (request.isUserInRole("ADMIN")) {
-            admin.setValue("true");
-        }
-    }
+            if (request.getUserPrincipal() != null) {
+                uid.setValue(request.getUserPrincipal().getName());
+                if (request.isUserInRole("ADMIN")) {
+                    admin.setValue("true");
+                }
+            }
 
-    response.addCookie(uid);
-    response.addCookie(admin);
-%>
+            response.addCookie(uid);
+            response.addCookie(admin);
+        %>
 
-<div class="annotations">
+        <div class="annotations">
 
-    <fieldset class="fieldSet">
-        <legend>Annotations</legend>
-        <div id="annotations-results"><p>Sorry, you need a JavaScript enabled browser.</p></div>
+            <fieldset class="fieldSet">
+                <legend>Annotations</legend>
 
+                <%-- show form if they are logged in --%>
+                <security:authorize ifAnyGranted="ROLE_USER,ROLE_ADMIN">
+                    Filter by date:
+                    <form id="date-query-form"
+                          action="javascript:processDateForm()"
+                          method="get">
+                        <p>
+                            <label><strong>Start Date:</strong></label>
+                            <input id="start-date" type="text" name="from" class="datepicker"/>
+                            <label><strong>End Date:</strong></label>
+                            <input id="end-date" type="text" name="to" class="datepicker"/>
+                            <input id="date-query-submit" type="submit" name="submit" value="Submit"
+                                   disabled="disabled"/>
+                        </p>
+                    </form>
+                    <a href="#" onclick="clearDateForm();">clear</a>
 
-        <p>Add your own annotation...</p>
 
-        <div id="annotation-messages"></div>
+                </security:authorize>
 
-        <%-- show form if they are logged in --%>
-        <security:authorize ifAnyGranted="ROLE_USER,ROLE_ADMIN">
-            <form id="annotation-comment-form"
-                  action="javascript:processForm('<%=request.getUserPrincipal().getName()%>')"
-                  method="post">
-                <p>
-                    <label><strong>Title:</strong></label><br/>
-                    <input id="annotation-title" type="text" name="title" size="50"/><br/>
-                    <label><strong>Description:</strong></label><br/>
-                    <textarea id="annotation-description1" rows="5" cols="50"
-                              name="description"></textarea><br/>
-                    <label><strong>Description (repeated field):</strong></label><br/>
-                    <textarea id="annotation-description2" rows="5" cols="50"
-                              name="description"></textarea><br/>
-                    <input type="radio" name="privacy" value="public" checked="checked"> Public
-                    <input type="radio" name="privacy" value="private"> Private
-                    <input type="hidden" name="type" value="SimpleComment"/>
-                    <input type="hidden" name="annotates" value="http://caboto.org"/><br />
-                    <input id="annotation-submit" type="submit" name="submit" value="Submit"
-                           disabled="disabled"/>
-                </p>
-            </form>
-        </security:authorize>
+                <div id="annotations-results"><p>Sorry, you need a JavaScript enabled browser.</p></div>
 
-        <%-- message if not logged in --%>
-        <security:authorize ifNotGranted="ROLE_USER,ROLE_ADMIN">
-            <p>You must be <a href="secured/">logged in</a> to add an annotation.</p>
+                <p>Add your own annotation...</p>
 
-            <p>The test accounts are mike/potato, damian/carrot, jasper/turnip, nikki/pea,
-                simon/radish and admin/boss</p>
+                <div id="annotation-messages"></div>
 
-        </security:authorize>
+                <%-- show form if they are logged in --%>
+                <security:authorize ifAnyGranted="ROLE_USER,ROLE_ADMIN">
+                    <form id="annotation-comment-form"
+                          action="javascript:processForm('<%=request.getUserPrincipal().getName()%>')"
+                          method="post">
+                        <p>
+                            <label><strong>Title:</strong></label><br/>
+                            <input id="annotation-title" type="text" name="title" size="50"/><br/>
+                            <label><strong>Description:</strong></label><br/>
+                            <textarea id="annotation-description1" rows="5" cols="50"
+                                      name="description"></textarea><br/>
+                            <label><strong>Description (repeated field):</strong></label><br/>
+                            <textarea id="annotation-description2" rows="5" cols="50"
+                                      name="description"></textarea><br/>
+                            <input type="radio" name="privacy" value="public" checked="checked"> Public
+                                <input type="radio" name="privacy" value="private"> Private
+                                    <input type="hidden" name="type" value="SimpleComment"/>
+                                    <input type="hidden" name="annotates" value="http://caboto.org"/><br />
+                                    <input id="annotation-submit" type="submit" name="submit" value="Submit"
+                                           disabled="disabled"/>
+                                    </p>
+                                    </form>
+
+                                </security:authorize>
+
+                                <%-- message if not logged in --%>
+                                <security:authorize ifNotGranted="ROLE_USER,ROLE_ADMIN">
+                                    <p>You must be <a href="secured/">logged in</a> to add an annotation.</p>
+
+                                    <p>The test accounts are mike/potato, damian/carrot, jasper/turnip, nikki/pea,
+                                        simon/radish and admin/boss</p>
+
+                                </security:authorize>
 
-    </fieldset>
-</div>
+                                </fieldset>
+                                </div>
 
-</body>
-</html>
+                                </body>
+                                </html>

+ 84 - 2
caboto-web/src/main/webapp/js/annotations.js

@@ -123,6 +123,16 @@ function formatAnnotation(annotation, uid, admin) {
 
 function clearForm() {
 
+    if (document.getElementById('search-query-form')) {
+        Form.Element.enable('search-query-submit');
+        Form.Element.clear('search-term');
+    }
+    if (document.getElementById('date-query-form')) {
+        Form.Element.enable('date-query-submit');
+        Form.Element.clear('start-date');
+        Form.Element.clear('end-date');
+    }
+
     if (document.getElementById('annotation-comment-form')) {
         Form.Element.enable('annotation-submit');
         Form.Element.clear('annotation-title');
@@ -132,6 +142,16 @@ function clearForm() {
     document.getElementById("annotation-messages").innerHTML = "";
 }
 
+function clearDateForm() {
+
+    if (document.getElementById('date-query-form')) {
+        Form.Element.enable('date-query-submit');
+        Form.Element.clear('start-date');
+        Form.Element.clear('end-date');
+    }
+    findAnnotations();
+}
+
 /*
  Display annotations - they are received in JSON format.
  */
@@ -157,9 +177,7 @@ function displayAnnotations(transport) {
         output = "<p>There are no annotations.</p>";
     }
 
-
     displayMessage(output);
-    clearForm();
 }
 
 
@@ -262,6 +280,70 @@ function processForm(username) {
 
 }
 
+function processSearchForm() {
+
+    var uri = "./annotation/about/";
+
+    var message = "";
+
+    if (!Form.Element.present("search-term")) {
+        message += "You need to provide a search term.";
+    }
+
+    if (message.length > 0) {
+        document.getElementById("annotation-messages").innerHTML = "<p>" + message + "</p>";
+        return;
+    }
+
+    // serialize the form data
+    var s = Form.serialize("search-query-form", true);
+
+    // we don't need to send the submit
+    delete s.submit;
+
+    // send the form details
+    var req = new Ajax.Request(uri, {
+        method:'get',
+        parameters: s,
+        requestHeaders: {Accept: APPLICATION_JSON},
+        onSuccess: displayAnnotations,
+        onFailure: annotationFailure
+    });
+
+}
+
+function processDateForm() {
+
+    var uri = "./annotation/about/";
+
+    var message = "";
+
+    if (!Form.Element.present("start-date") && !Form.Element.present("end-date")) {
+        message += "You need to provide at least one of start date and end date.";
+    }
+
+    if (message.length > 0) {
+        document.getElementById("annotation-messages").innerHTML = "<p>" + message + "</p>";
+        return;
+    }
+
+    // serialize the form data
+    var s = Form.serialize("date-query-form", true);
+
+    // we don't need to send the submit
+    delete s.submit;
+
+    // send the form details
+    var req = new Ajax.Request(uri, {
+        method:'get',
+        parameters: s,
+        requestHeaders: {Accept: APPLICATION_JSON},
+        onSuccess: displayAnnotations,
+        onFailure: annotationFailure
+    });
+
+}
+
 function initializeAnnotations() {
 
     // hides the js support message..

+ 122 - 0
caboto-web/src/main/webapp/js/protoplasm.css

@@ -0,0 +1,122 @@
+._pp_frame {
+	border: 1px solid #999;
+	background-color: #EEE;
+	padding: 3px;
+}
+
+._pp_frame_small {
+	border: 1px solid #999;
+	background-color: #EEE;
+	padding: 2px;
+	font-size: 11px;
+	border-radius: 4px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+}
+._pp_frame_small input,
+._pp_frame_small button,
+._pp_frame_small select,
+._pp_frame_small td, {
+	font-size: 11px;
+}
+
+._pp_flush {
+	padding: 0;
+}
+
+._pp_dialog {
+	border: 2px solid #DDD;
+	background-color: #EEE;
+}
+
+._pp_title {
+	background-color: #4E799B;
+	color: #FFF;
+	padding: 3px;
+	font-weight: bold;
+}
+
+._pp_heading {
+	background-color: #FFF;
+	padding: 3px;
+	font-weight: bold;
+	border: 1px solid #999;
+}
+
+._pp_panel {
+	background-color: #FFF;
+}
+
+._pp_button {
+	border: 1px solid #999;
+	border-radius: 4px;
+	padding: 2px 8px;
+	background-color: #DDD;
+	cursor: pointer;
+	text-decoration: none;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+}
+._pp_button:hover {
+	background-color: #EEE;
+}
+
+._pp_disabled {
+	color: #999;
+}
+
+hr._pp_line {
+	height: 1px;
+	background-color: #999;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+._pp_highlight {
+	background-color: #B4CEFF;
+}
+
+._pp_small_text,
+._pp_small_text input,
+._pp_small_text select {
+	font-size: 10px;
+}
+
+._pp_inset {
+	border-top: 1px solid #CCC;
+	border-left: 1px solid #CCC;
+	border-bottom: 1px solid #FFF;
+	border-right: 1px solid #FFF;
+}
+
+._pp_outset {
+	border-top: 1px solid #FFF;
+	border-left: 1px solid #FFF;
+	border-bottom: 1px solid #CCC;
+	border-right: 1px solid #CCC;
+}
+
+._pp_focused {
+	border: 1px dotted #999;
+}
+
+input[type=text]._pp_input,
+textarea._pp_input {
+}
+
+table._pp_table {
+	border-collapse: collapse;
+}
+
+table._pp_table th {
+}
+
+table._pp_table td {
+}
+
+table._pp_table td.odd {
+}
+
+table._pp_table td.even {
+}