Feedback (#1), client side work

slms4redd · Aug 1, 2012 · aa7350e · aa7350e
1 parent 85a168d
commit aa7350e
Show file tree

Hide file tree

Showing 15 changed files with 489 additions and 151 deletions.
diff --git a/pom.xml b/pom.xml
@@ -121,6 +121,13 @@
 			<scope>compile</scope>
 		</dependency>
 
+		<!-- ReCAPTCHA for Java -->
+		<dependency>
+			<groupId>net.tanesha.recaptcha4j</groupId>
+			<artifactId>recaptcha4j</artifactId>
+			<version>0.0.7</version>
+		</dependency>
+
 		<!-- Geostore -->
 		<dependency>
 			<groupId>it.geosolutions.geostore</groupId>

diff --git a/src/main/webapp/WEB-INF/default_config/messages/messages.properties b/src/main/webapp/WEB-INF/default_config/messages/messages.properties
@@ -26,7 +26,6 @@ redd_plus_registry = REDD+ Registry
 biodiversity = Biodiversity
 national_parks = National Parks
 vegetation = Vegetation
-feedback_button = Feedback
 statistics_button = Statistics
 download_button = Download
 identify_button = Identify
@@ -89,9 +88,21 @@ active_fire = Active fire
 burnt_area = Burnt area
 deforestation_drivers = Deforestation drivers
 satisfaction_survey = Satisfaction survey
-feedback_info = Please click on the map to start drawing a polygon. Double click to end drawing and post feedback.
 intact_forest = Intact Forest
 information_note = Information note
 statistics_info = Please click on the map to start drawing a polygon
-survey_url=https://www.surveymonkey.com/s/W8Y38ZZ
-nfms_mailing_list=NFMS mailing list
+survey_url = https://www.surveymonkey.com/s/W8Y38ZZ
+nfms_mailing_list = NFMS mailing list
+feedback = feedback
+feedback_info = Please click on the map to post feedback
+feedback_button = Feedback
+feedback_text = Use the tools to draw a geographic extent over the map.
+feedback_year = Year
+feedback_title = Send feedback on map contents
+feedback_drawing_tools = Drawing tools
+feedback_query_tooltip = Get features from the selected layer
+feedback_addfeature_tooltip = Add Polygon
+feedback_editfeature_tooltip = Edit Polygon
+feedback_deletepolygon_confirm = Deleting polygon, are you sure?
+invalid_email_title = Invalid e-mail
+invalid_email_text = Your e-mail address is not valid. Please use a valid e-mail address.
diff --git a/src/main/webapp/WEB-INF/default_config/messages/messages_en.properties b/src/main/webapp/WEB-INF/default_config/messages/messages_en.properties
@@ -25,7 +25,6 @@ redd_plus_registry = REDD+ Registry
 biodiversity = Biodiversity
 national_parks = National Parks
 vegetation = Vegetation
-feedback_button = Feedback
 statistics_button = Statistics
 download_button = Download
 identify_button = Identify
@@ -79,10 +78,8 @@ layer = Layer
 year = Year
 name = Name
 email = Email
-feedback = Feedback
 cancel = Cancel
 submit = Submit
-feedback_text = Please mind that feedback comments have to be written in French language to be considered.
 forest_area_and_forest_area_change = Forest area and forest area change
 forest_land_remaining_forest_land = Forest land remaining forest land
 degradation = Degradation
@@ -96,9 +93,19 @@ active_fire = Active fire
 burnt_area = Burnt area
 deforestation_drivers = Deforestation drivers
 satisfaction_survey = Satisfaction survey
-feedback_info = Please click on the map to start drawing a polygon. Double click to end drawing and post feedback.
 intact_forest = Intact Forest
 information_note = Information note
 statistics_info = Please click on the map to start drawing a polygon
 survey_url=https://www.surveymonkey.com/s/W8Y38ZZ
-nfms_mailing_list=NFMS mailing list
+nfms_mailing_list=NFMS mailing list
+feedback = feedback
+feedback_info = Please click on the map to post feedback
+feedback_button = Feedback
+feedback_text = Use the tools to draw a geographic extent over the map.
+feedback_year = Year
+feedback_title = Send feedback on map contents
+feedback_drawing_tools = Drawing tools
+feedback_query_tooltip = Get features from the selected layer
+feedback_addfeature_tooltip = Add Polygon
+feedback_editfeature_tooltip = Edit Polygon
+feedback_deletepolygon_confirm = Deleting polygon, are you sure?
diff --git a/src/main/webapp/WEB-INF/default_config/messages/messages_fr.properties b/src/main/webapp/WEB-INF/default_config/messages/messages_fr.properties
@@ -24,7 +24,6 @@ redd_plus_registry = Registre REDD+
 biodiversity = Biodiversit\u00e9
 national_parks = Parcs nationauxs
 vegetation = Vegetation
-feedback_button = Retour d'information
 statistics_button = Statistiques
 download_button = T\u00e9l\u00e9charger
 identify_button = Information
@@ -77,10 +76,8 @@ layer = Couche
 year = Ann\u00e9e
 name = Nom
 email = Courrier email
-feedback = Commentaires
 cancel = Annuler
 submit = Envoyer
-feedback_text = Merci de bien consid\u00e9rer que seuls les commentaires en Fran\u00e7ais pourront \u00eatre trait\u00e9es.
 forest_area_and_forest_area_change = Superficie foresti\u00e8re et variation de la superficie des for\u00eats
 forest_land_remaining_forest_land = Terres foresti\u00e8res restant terres foresti\u00e8res
 degradation = D\u00e9gradation
@@ -94,10 +91,13 @@ active_fire = Feux actifs
 burnt_area = Surface br\u00fbl\u00e9e
 deforestation_drivers = Causes de la d\u00e9forestation
 satisfaction_survey = Enqu\u00eate de satisfaction
-feedback_info = Cliquer sur la carte pour poster des commentaires
 intact_forest = For\u00eats Intactes
 information_note = Note d'information
 disclaimer = Disclaimer
 statistics_info = Please click on the map to start drawing a polygon
 survey_url=https://www.surveymonkey.com/s/FD7GRCB
-nfms_mailing_list=NFMS mailing list
+nfms_mailing_list=NFMS mailing list
+feedback_button = Retour d'information
+feedback = Commentaires
+feedback_info = Cliquer sur la carte pour poster des commentaires
+feedback_text = Merci de bien consid\u00e9rer que seuls les commentaires en Fran\u00e7ais pourront \u00eatre trait\u00e9es.
diff --git a/src/main/webapp/WEB-INF/default_config/static/unredd.css b/src/main/webapp/WEB-INF/default_config/static/unredd.css
@@ -673,4 +673,37 @@ div.checkbox.checked.in.mousedown {
 
 table.second_level td:first-child {
     padding-left: 12px;
+}
+
+table.feedback {
+	font-size: 12px;
+	color: white;
+}
+
+table.feedback th {
+	vertical-align: top;
+	font-weight: bold;
+	width: 100px;
+}
+
+table.feedback select,
+table.feedback input,
+table.feedback textarea {
+	width: 100%;
+}
+
+table.feedback textarea {
+	resize: none;
+	height: 82px;
+}
+
+.recaptcha {
+	padding: 10px 0;
+}
+
+#feedback_cancel,
+#feedback_submit {
+	width: 45%;
+	float: right;
+	margin-left: 5px;
 }
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -4,6 +4,9 @@
 <%@page session="true"%>
 <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
 <%@page contentType="text/html" pageEncoding="UTF-8"%>
+<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
+<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
+
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <!--
  nfms4redd Portal Interface - http://nfms4redd.org/
@@ -29,18 +32,21 @@
 
     <link type="text/css" href="css/custom-theme2/jquery-ui-1.8.16.custom.css" rel="stylesheet">
     <link rel="stylesheet" href="js/fancybox-2.0.5/source/jquery.fancybox.css" type="text/css" media="screen" />
-    <!-- link rel="stylesheet" href="js/OpenLayers-2.11/theme/default/style.css" type="text/css" /-->
+    <!--link rel="stylesheet" href="js/OpenLayers-2.11/theme/default/style.css" type="text/css" /-->
     <link rel="stylesheet" href="js/OpenLayers-2.12/theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="css/toolbar.css" type="text/css" />
     <link rel="stylesheet" href="static/unredd.css" type="text/css">
 
     <script type="text/javascript">
         var languageCode = "${pageContext.response.locale}";
+        var messages = <jsp:include page="messages.jsp"/>;
     </script>
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
     <script type="text/javascript" src="js/fancybox-2.0.5/source/jquery.fancybox.pack.js"></script>
-    <!-- script type="text/javascript" src="js/OpenLayers-2.11/OpenLayers.js"></script-->
+    <!--script type="text/javascript" src="js/OpenLayers-2.11/OpenLayers.js"></script-->
     <script type="text/javascript" src="js/OpenLayers-2.12/OpenLayers.debug.js"></script>
+    <script type='text/javascript' src='js/toolbar.js'></script>
     <script type='text/javascript' src='js/unredd.js?v=2'></script>
     <script type='text/javascript' src='static/custom.js'></script>
   </head>
@@ -59,6 +65,7 @@
           <div id="time_slider_label">2005</div>
         </div>
       </div>
+
     </div>
 
     <div id="layer_list_selector_pane">
@@ -87,69 +94,66 @@
     </div>
 
     <div id="info_popup"></div>
+	<div id="feedback-invalid-mail" title="<spring:message code="invalid_email_title"/>">
+		<p><spring:message code="invalid_email_text"/></p>
+	</div>
     <div id="feedback_popup" style="display:none;">
-      <table style="font-size:12px;color:white">
+      <table class="feedback">
         <tr>
-          <td></td>
+          <th>
+            <spring:message code="layer" />:
+          </th>
           <td>
-            Polygon: <span id="fb_polygon" style="display:none;"></span>
+            <select id="fb_layers"></select>
+            <div id="fb_time"></div>
           </td>
         </tr>
         <tr>
+          <th>
+            <spring:message code="feedback_drawing_tools" />:
+          </th>
           <td>
-            <b><spring:message code="layer" />:</b>
-          </td>
-          <td>
-            <select>
-              <option value="deforestation">Deforestation</option>
-            </select>
+             <div id="fb_toolbar" class="olControlPortalToolbar"></div>
+             <div style="margin-left:80px;"><i><spring:message code="feedback_text" /></i></div>
           </td>
         </tr>
         <tr>
+          <th>
+            <spring:message code="name" />:
+          </th>
           <td>
-            <b><spring:message code="year" />:</b>
-          </td>
-          <td>
-            <select>
-              <option value="2005">2000-2005</option>
-              <option value="2010">2005-2010</option>
-            </select>
+            <input name="name_" id="name_" type="text">
           </td>
         </tr>
         <tr>
+          <th>
+            <spring:message code="email" />:
+          </th>
           <td>
-            <span style="font-size:12px;color:white;font-weight:bold"><spring:message code="name" />:</span>
-          </td>
-          <td>
-            <input name="name_" id="name_" type="text" size="28">
+            <input name="email_" id="email_" type="text">
           </td>
         </tr>
         <tr>
+          <th>
+            <spring:message code="feedback" />:
+          </th>
           <td>
-            <span style="font-size:12px;color:white;font-weight:bold"><spring:message code="email" /></span>
-          </td>
-          <td>
-            <input name="email_" id="email_" type="text" size="28">
+            <textarea id="feedback_" name="feedback_text_"></textarea>
           </td>
         </tr>
-        <tr>
-          <td style="vertical-align: top">
-            <b><spring:message code="feedback" />:</b>
-          </td>
-          <td style="vertical-align: top">
-            <textarea id="feedback_" name="feedback_text_" rows="5" cols="28"></textarea>
+		<tr>
+          <td colspan="2" class="recaptcha">
+		    <%
+		        ReCaptcha c = ReCaptchaFactory.newReCaptcha("6Ld5ydQSAAAAAGtZJG67QkQM7Z13X6MGf72RtmDE", "6Ld5ydQSAAAAAJW3To_tN6czS7C-HCnsBVhENfD9", false);
+		        out.print(c.createRecaptchaHtml(null, null));
+		    %>
           </td>
         </tr>
         <tr>
           <td></td>
           <td colspan="2">
-            <input type="button" id="feedback_cancel" value="Cancel" />
-            <input id="feedback_submit" type="submit">
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <spring:message code="feedback_text" />
+            <input id="feedback_submit" type="submit" value="<spring:message code="submit" />" />
+            <input type="button" id="feedback_cancel" value="<spring:message code="cancel" />" />
           </td>
         </tr>
       </table>

diff --git a/src/main/webapp/WEB-INF/jsp/messages.jsp b/src/main/webapp/WEB-INF/jsp/messages.jsp
@@ -15,6 +15,6 @@
 --%><%@ page session="true"%><%@
 taglib uri="http://www.springframework.org/tags" prefix="spring"%><%@
 taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@
-page contentType="application/json" pageEncoding="UTF-8"%>"messages":{
+page contentType="application/json" pageEncoding="UTF-8"%>{
 <c:forEach var="message" items="${config.messages}" varStatus="status">  "${message.key}":"${message.value}"<c:if test="${!status.last}">,</c:if>
 </c:forEach>}
diff --git a/src/main/webapp/WEB-INF/unreddPortalApplicationContext.xml b/src/main/webapp/WEB-INF/unreddPortalApplicationContext.xml
@@ -81,5 +81,5 @@ default-autowire="autodetect">
         <property name="username" ref="geostoreUsername"/>
         <property name="password" ref="geostorePassword"/>
     </bean>
-     
+
 </beans>
diff --git a/src/main/webapp/css/toolbar.css b/src/main/webapp/css/toolbar.css
@@ -0,0 +1,42 @@
+.olControlPortalToolbar div {
+    float: left;
+    background-repeat: no-repeat;
+    margin: 2px;
+    width: 20px;
+    height: 20px;
+    background-position: center; 
+    cursor: pointer;
+    -moz-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.olControlPortalToolbarAddItemActive, .olControlPortalToolbarAddItemInactive {
+    background-image: url("../images/silk/add.png");
+    background-color: #555555;
+    border-color: #dddddd;
+}
+
+.olControlPortalToolbarEditItemActive, .olControlPortalToolbarEditItemInactive {
+    background-image: url("../images/silk/pencil.png");
+}
+
+.olControlPortalToolbarGetItemActive, .olControlPortalToolbarGetItemInactive {
+    background-image: url("../images/silk/down.png");
+}
+
+.olControlPortalToolbarAddItemInactive, .olControlPortalToolbarEditItemInactive, .olControlPortalToolbarGetItemInactive {
+    background-color: #445566;
+    border: 1px solid #444444;
+    display: ;
+}
+
+.olControlPortalToolbarAddItemActive, .olControlPortalToolbarEditItemActive, .olControlPortalToolbarGetItemActive {
+    background-color: #3388cc;
+    border: 1px solid #26b3f7;
+    display: ;
+}
+
+.olControlPortalToolbarGetItemHidden {
+    background-color: #ff0000;
+    display: none;
+}
diff --git a/src/main/webapp/images/silk/add.png b/src/main/webapp/images/silk/add.png
diff --git a/src/main/webapp/images/silk/down.png b/src/main/webapp/images/silk/down.png
diff --git a/src/main/webapp/images/silk/pencil.png b/src/main/webapp/images/silk/pencil.png
diff --git a/src/main/webapp/images/silk/readme.txt b/src/main/webapp/images/silk/readme.txt
@@ -0,0 +1,22 @@
+Silk icon set 1.3
+
+_________________________________________
+Mark James
+http://www.famfamfam.com/lab/icons/silk/
+_________________________________________
+
+This work is licensed under a
+Creative Commons Attribution 2.5 License.
+[ http://creativecommons.org/licenses/by/2.5/ ]
+
+This means you may use it for any purpose,
+and make any changes you like.
+All I ask is that you include a link back
+to this page in your credits.
+
+Are you using this icon set? Send me an email
+(including a link or picture if available) to
+mjames@gmail.com
+
+Any other questions about this icon set please
+contact mjames@gmail.com