display average rating

robfletcher · Apr 29, 2011 · c9a6987 · c9a6987
1 parent cd3cf1a
commit c9a6987
Show file tree

Hide file tree

Showing 14 changed files with 123 additions and 158 deletions.
diff --git a/grails-app/controllers/gr8/examples/forms/RatingController.groovy b/grails-app/controllers/gr8/examples/forms/RatingController.groovy
@@ -5,57 +5,55 @@ import static javax.servlet.http.HttpServletResponse.*
 
 class RatingController {
 
-    def album = {
-		def album = Album.read(params.id)
-		if (!album) {
+	def beforeInterceptor = {
+		params.album = Album.read(params.id)
+		if (!params.album) {
 			response.sendError SC_NOT_FOUND
-			return
+			return false
 		}
-
-		def model = [album: album]
-		model.rating = Rating.findByAlbumAndUserToken(album, userToken)
-		model.related = Album.list() - album
+	}
+
+    def album = {
+		def model = [album: params.album]
+		model.rating = Rating.findByAlbumAndUserToken(params.album, userToken)
+		model.related = Album.list() - params.album
 		model
 	}
 
 	def rate = {
-		def album = Album.read(params.id)
-		if (!album) {
-			response.sendError SC_NOT_FOUND
-			return
-		}
-
-		def cookie = request.cookies.find { it.name == "user-token" }
-
-		def rating = Rating.findByAlbumAndUserToken(album, userToken)
+		def rating = Rating.findByAlbumAndUserToken(params.album, userToken)
 		if (!rating) {
-			rating = new Rating(album: album, userToken: userToken, score: params.int("score"))
+			rating = new Rating(album: params.album, userToken: userToken, score: params.int("score"))
 		}
 
 		rating.score = params.int("score")
 		if (!rating.save()) {
-			def message = rating.errors.allErrors.collect {
-				message error: it
-			}.join(", ")
-			response.sendError SC_CONFLICT, message
+			response.sendError SC_CONFLICT, errorMessage(rating)
 			return
 		}
 
 		if (request.xhr) {
 			render contentType: "text/plain", text: "ok"
 		} else {
-			redirect action: "album", id: album.id
+			redirect action: "album", id: params.album.id
 		}
 	}
-	
+
 	private String getUserToken() {
 		def cookie = request.cookies.find { it.name == "user-token" }
 		if (!cookie) {
 			def token = UUID.randomUUID().toString()
 			cookie = new Cookie("user-token", token)
+			cookie.path = "/"
 			response.addCookie(cookie)
 		}
 		cookie.value
 	}
 
+	private String errorMessage(domainInstance) {
+		domainInstance.errors.allErrors.collect {
+			message error: it
+		}.join(", ")
+	}
+
 }
diff --git a/grails-app/domain/gr8/examples/forms/Album.groovy b/grails-app/domain/gr8/examples/forms/Album.groovy
@@ -18,5 +18,11 @@ class Album {
 	String toString() {
 		"$title by $artist"
 	}
+
+	static transients = ["averageRating"]
+
+	Double getAverageRating() {
+		Rating.average(this)
+	}
 
 }
diff --git a/grails-app/domain/gr8/examples/forms/Rating.groovy b/grails-app/domain/gr8/examples/forms/Rating.groovy
@@ -11,4 +11,13 @@ class Rating {
         userToken blank: false, unique: "album"
         score range: 1..5
     }
+
+	static Double average(Album album) {
+		Rating.withCriteria(uniqueResult: true) {
+			projections {
+				avg "score"
+			}
+			eq "album", album
+		}
+	}
 }
diff --git a/grails-app/views/layouts/main.gsp b/grails-app/views/layouts/main.gsp
@@ -3,33 +3,31 @@
 <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
 <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
 <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
-<head>
-	<meta charset="UTF-8">
-
-	<title><g:layoutTitle default="Building Progressive UIs With Grails" /></title>
-
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<r:resourceLink uri="/images/favicon.ico"/>
-	<r:resourceLink uri="/images/apple-touch-icon.png" type="appleicon"/>
-	<g:layoutHead />
-	<r:layoutResources/>
-</head>
-<body>
-	<div id="container">
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
+	<head>
+		<meta charset="UTF-8">
+
+		<title><g:layoutTitle default="Building Progressive UIs With Grails"/></title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<r:resourceLink uri="/images/favicon.ico"/>
+		<r:resourceLink uri="/images/apple-touch-icon.png" type="appleicon"/>
+		<g:layoutHead/>
+		<r:layoutResources/>
+	</head>
+	<body>
 		<header>
-			<h1><g:layoutTitle default="Building Progressive UIs With Grails" /></h1>
+			<h1><g:layoutTitle default="Building Progressive UIs With Grails"/></h1>
 		</header>
 
 		<div id="main" role="main">
-	        <g:layoutBody />
+			<g:layoutBody/>
 		</div>
-		
+
 		<footer>
 
 		</footer>
-	</div>
-	<r:layoutResources/>
-</body>
+		<r:layoutResources/>
+	</body>
 </html>
diff --git a/grails-app/views/rating/album.gsp b/grails-app/views/rating/album.gsp
@@ -19,16 +19,21 @@
 				</g:each>
 			</ol>
 
-			<g:form action="rate" class="rating">
-				<fieldset>
-					<legend>Rating:</legend>
+			<section id="average-rating">
+				<h3>Average rating:</h3>
+				<div class="rating">${album.averageRating}</div>
+			</section>
+
+			<section id="your-rating">
+				<h3>Your rating:</h3>
+				<g:form action="rate" class="rating">
 					<input type="hidden" name="id" value="${album.id}">
 					<g:radioGroup name="score" values="${1..5}" labels="${1..5}" value="${rating?.score}">
 						<label><span class="num">${it.label}</span>${it.radio}</label>
 					</g:radioGroup>
 					<input type="submit" value="Rate">
-				</fieldset>
-			</g:form>
+				</g:form>
+			</section>
 		</article>
 
 		<aside id="related">

diff --git a/test/unit/gr8/examples/TwitterSearchControllerTests.groovy b/test/unit/gr8/examples/TwitterSearchControllerTests.groovy
diff --git a/test/unit/gr8/examples/forms/AlbumTests.groovy b/test/unit/gr8/examples/forms/AlbumTests.groovy
diff --git a/test/unit/gr8/examples/forms/RatingControllerTests.groovy b/test/unit/gr8/examples/forms/RatingControllerTests.groovy
diff --git a/test/unit/gr8/examples/forms/RatingTests.groovy b/test/unit/gr8/examples/forms/RatingTests.groovy
diff --git a/test/unit/gr8/examples/graph/TwitterGraphControllerTests.groovy b/test/unit/gr8/examples/graph/TwitterGraphControllerTests.groovy
diff --git a/web-app/css/forms.less b/web-app/css/forms.less
@@ -96,10 +96,23 @@ em {
 	}
 }
 
+#average-rating {
+	clear: both;
+	margin: 0.5em 0 0 0;
+
+	.star-rating {
+		opacity: 0.5;
+	}		
+}
+
+#your-rating {
+	margin: 0.5em 0 0 0;
+}
+
 .star-rating {
 	display: inline-block;
 	vertical-align: middle;
-	a {
+	a, .star {
 		background-image: url(../images/forms/stars.png);
 		background-position: 0 0;
 		background-repeat: no-repeat;
@@ -110,8 +123,8 @@ em {
 		&.on {
 			background-position: 0 -22px;
 		}
-		&.hovered {
-			background-position: 0 -44px;
-		}
+	}
+	a.hovered {
+		background-position: 0 -44px;
 	}
 }
diff --git a/web-app/css/style.css b/web-app/css/style.css
@@ -86,36 +86,39 @@ a:hover { color: #036; }
     \\ ========================================== //
 */
 
-body {
-  background-color: #999999;
-  background-image: -moz-linear-gradient(top, #444444, #999999); 
-  background-image: -ms-linear-gradient(top, #444444, #999999); 
-  background-image: -o-linear-gradient(top, #444444, #999999); 
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
-  background-image: -webkit-linear-gradient(top, #444444, #999999); 
-  background-image: linear-gradient(top, #444444, #999999);
-            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); 
-	background-repeat: no-repeat;
+html {
+	background-color: #999999;
+	background-image: -moz-linear-gradient(top, #444444, #999999);
+	background-image: -ms-linear-gradient(top, #444444, #999999);
+	background-image: -o-linear-gradient(top, #444444, #999999);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
+	background-image: -webkit-linear-gradient(top, #444444, #999999);
+	background-image: linear-gradient(top, #444444, #999999);
+			  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
+	  background-repeat: no-repeat;
+	height: 100%;
 }
 
-#container {
+body {
 	background-color: #fff;
 	margin: 0 auto;
 	max-width: 960px;
+	min-height: 100%;
+	padding-bottom: 1em;
 }
 
-#container > header {
+body > header {
 	background-color: rgba(0,0,0,0.5);
 	color: #fff;
 	padding: 1em;
 	text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
 }
 
-.no-rgba #container > header {
+.no-rgba body > header {
 	background-color: #7f7f7f;
 }
 
-#container > header h1 {
+body > header h1 {
 	font-size: 2em;
 	text-align: center;
 }

diff --git a/web-app/js/forms.js b/web-app/js/forms.js
@@ -1,3 +1,4 @@
 $(function() {
-	$('form.rating').starRating();
+	$('#average-rating .rating').starRating();
+	$('form.rating').starRatingInput();
 });