#41 - Added minimal web UI for Starbucks example app.

Added a minimalistic HTML5 web front-end based on Thymeleaf, Bootstrap, jQuery, URI.js and Google Maps JavaScript API. The required JavaScript dependencies are referenced via Webjars.

For details see the README.

Original pull request: #47.

rest/starbucks/README.md

@@ -7,15 +7,19 @@ This sample app exposes 10843 Starbucks coffee shops via a RESTful API that allo
 1. Install MongoDB (http://www.mongodb.org/downloads, unzip, run `bin/mongod --dbpath=data`)
 2. Build and run the app (`mvn spring-boot:run`)
 3. Access the root resource (`curl http://localhost:8080`) and traverse hyperlinks.
-4. Or access the location search directly (e.g. `localhost:8080/stores/search/findByAddressLocationNear?location=40.740337,-73.995146&distance=0.5miles`)
+4. Or access the location search directly (e.g. `http://localhost:8080/stores/search/findByAddressLocationNear?location=40.740337,-73.995146&distance=0.5miles`)
 
-## API exploration
+## Web UI
 
-The module uses the HAL Browser module of Spring Data REST which serves a UI to explore the resources exposed. Point your browser to `http://localhost:8080` to see it.
+The application provides a custom web UI using the exposed REST API to display the search result on a Google Map. Point you browser to `http://localhost:8080`. The UI is rendered using Thymeleaf, driven by the `StoresController`. A tiny JavaScript progressively enhances the view by picking up and enhancing a URI template rendered into the view (`<div id="map" data-uri="…" />`).
+
+![Starbucks Web UI](/webui.png "Starbucks Web UI")
+
+The API itself can be discovered using the HAL browser pulled in through the corresponding Spring Data REST module (`spring-data-rest-hal-browser`). It's exposed at the API root at `http://localhost:8080/api`.
 
 ## Technologies used
 
 - Spring Data REST & Spring Data MongoDB
 - MongoDB
 - Spring Batch (to read the CSV file containing the store data and pipe it into MongoDB)
-- Spring Boot
+- Spring Boot

rest/starbucks/pom.xml

@@ -40,6 +40,35 @@
 			<scope>runtime</scope>
 		</dependency>
 
+		<!-- Traditional frontend -->
+
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-thymeleaf</artifactId>
+			<scope>runtime</scope>
+		</dependency>
+
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>jquery</artifactId>
+			<version>2.1.3</version>
+			<scope>runtime</scope>
+		</dependency>
+
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>bootstrap</artifactId>
+			<version>3.3.4</version>
+			<scope>runtime</scope>
+		</dependency>
+
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>URI.js</artifactId>
+			<version>1.14.1</version>
+			<scope>runtime</scope>
+		</dependency>
+
 	</dependencies>
 
 	<build>
@@ -54,4 +83,4 @@
 		</plugins>
 	</build>
 
-</project>
+</project>

rest/starbucks/src/main/java/example/stores/Address.java

@@ -1,5 +1,5 @@
 /*
- * Copyright 2014 the original author or authors.
+ * Copyright 2014-2015 the original author or authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,4 +30,12 @@ public class Address {
 
 	private final String street, city, zip;
 	private final @GeoSpatialIndexed Point location;
+
+	/*
+	 * (non-Javadoc)
+	 * @see java.lang.Object#toString()
+	 */
+	public String toString() {
+		return String.format("%s, %s %s", street, zip, city);
+	}
 }

rest/starbucks/src/main/java/example/stores/web/StoresController.java

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2014-2015 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package example.stores.web;
+
+import static org.springframework.data.geo.Metrics.*;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+
+import lombok.RequiredArgsConstructor;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.geo.Distance;
+import org.springframework.data.geo.Metrics;
+import org.springframework.data.geo.Point;
+import org.springframework.data.rest.webmvc.support.RepositoryEntityLinks;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import example.stores.Store;
+import example.stores.StoreRepository;
+
+/**
+ * A Spring MVC controller to produce an HTML frontend.
+ * 
+ * @author Oliver Gierke
+ */
+@Controller
+@RequiredArgsConstructor(onConstructor = @__(@Autowired))
+class StoresController {
+
+	private static final List<Distance> DISTANCES = Arrays.asList(new Distance(0.5, MILES), new Distance(1, MILES),
+			new Distance(2, MILES));
+	private static final Distance DEFAULT_DISTANCE = new Distance(1, Metrics.MILES);
+	private static final Map<String, Point> KNOWN_LOCATIONS;
+
+	static {
+
+		Map<String, Point> locations = new HashMap<>();
+
+		locations.put("Pivotal SF", new Point(-122.4041764, 37.7819286));
+		locations.put("Timesquare NY", new Point(-73.995146, 40.740337));
+
+		KNOWN_LOCATIONS = Collections.unmodifiableMap(locations);
+	}
+
+	private final StoreRepository repository;
+	private final RepositoryEntityLinks entityLinks;
+
+	/**
+	 * Looks up the stores in the given distance around the given location.
+	 * 
+	 * @param model the {@link Model} to populate.
+	 * @param location the optional location, if none is given, no search results will be returned.
+	 * @param distance the distance to use, if none is given the {@link #DEFAULT_DISTANCE} is used.
+	 * @param pageable the pagination information
+	 * @return
+	 */
+	@RequestMapping(value = "/", method = RequestMethod.GET)
+	String index(Model model, @RequestParam Optional<Point> location, @RequestParam Optional<Distance> distance,
+			Pageable pageable) {
+
+		Point point = location.orElse(KNOWN_LOCATIONS.get("Timesquare NY"));
+
+		Page<Store> stores = repository.findByAddressLocationNear(point, distance.orElse(DEFAULT_DISTANCE), pageable);
+
+		model.addAttribute("stores", stores);
+		model.addAttribute("distances", DISTANCES);
+		model.addAttribute("selectedDistance", distance.orElse(DEFAULT_DISTANCE));
+		model.addAttribute("location", point);
+		model.addAttribute("locations", KNOWN_LOCATIONS);
+		model.addAttribute("api", entityLinks.linkToSearchResource(Store.class, "by-location", pageable).getHref());
+
+		return "index";
+	}
+}

rest/starbucks/src/main/resources/application.properties

@@ -0,0 +1 @@
+spring.data.rest.base-path=/api

rest/starbucks/src/main/resources/templates/index.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" >
+<head>
+    <title>Starbucks Storefinder</title>
+
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="/webjars/bootstrap/3.3.4/css/bootstrap.min.css"/>
+
+    <style type="text/css">
+
+        #map {
+            height: 400px;
+            width: 400px;
+            background-image: url("/img/map.png");
+            background-size: 400px 300px;
+            background-repeat: no-repeat;
+        }
+
+    </style>
+</head>
+
+<body>
+
+	<div class="container-fluid">
+
+		<h1>Starbucks Storefinder</h1>
+
+	    <div class="panel panel-default">
+			<div class="panel-heading">
+	    		<h3 class="panel-title">Search</h3>
+	  		</div>
+	  		<div class="panel-body">
+
+	   			<form action="/" class="form-horizontal">
+
+	   				<div class="form-group">
+		            	<label class="col-sm-2 control-label">Predefined locations:</label>
+		            	<div class="col-sm-10">
+		            		<a class="btn btn-default" th:each="location : ${locations}" th:href="@{/(location=${{location.value}},distance=${{selectedDistance}})}" th:text="${location.key}">Foo</a>
+		            	</div>
+		            </div>
+
+	       			<div class="form-group">
+	        			<label for="location" class="col-sm-2 control-label">Location:</label>
+	        			<div class="col-sm-2">
+		           			<input id="location" name="location" th:value="${{location}}" type="text" class="form-control" placeholder="lat,long" />
+		           		</div>
+		            </div>
+
+
+		            <div class="form-group">
+				        <label for="distance" class="col-sm-2 control-label">Distance:</label>
+				        <div class="col-sm-2">
+				            <select id="distance" name="distance" class="form-control">
+				                <option th:each="distance : ${distances}" th:value="${{distance}}" th:text="${distance}" th:selected="${distance == selectedDistance}">
+				                	Distance
+				                </option>
+				            </select>
+			            </div>
+		            </div>
+
+		            <div class="form-group">
+		            	<div class="col-sm-offset-2 col-sm-10">
+		            		<button id="submit" type="submit" class="btn btn-default">Submit</button>
+		            	</div>
+		            </div>
+
+	           	</form>
+	  		</div>
+		</div>
+
+	    <div class="panel panel-default">
+
+			<div id="resultList" class="panel-heading">
+	        	<h3 class="panel-title">Results</h3>
+	        </div>
+
+	        <div class="panel-body">
+
+	        	<div id="map" class="col-md-4" th:attr="data-uri=${api}"></div>
+
+	        	<div class="col-sm-8" style="margin-left: 1em">
+	        		<div th:if="${stores.hasContent()}">
+					    <p th:text="'Showing ' + ${stores.numberOfElements} + ' of ' + ${stores.totalElements} + ' results.'">Found 1 results.</p>
+					    <ol class="search-results">
+					        <li class="search-result" th:each="store : ${stores}" th:text="${store.name} + ' - ' + ${store.address}">Store name</li>
+					    </ol>
+				    </div>
+			        <p class="search-result no-results" th:unless="${stores.hasContent()}">No Results</p>
+			    </div>
+
+	        </div>
+
+	    </div>
+	</div>
+
+<script type="text/javascript"
+        src="/webjars/jquery/2.1.3/jquery.min.js"></script>
+
+<script type="text/javascript"
+        src="/webjars/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+<script type="text/javascript"
+        src="/webjars/URI.js/1.14.1/URI.min.js"></script>
+
+<script type="text/javascript"
+        src="//maps.google.com/maps/api/js?sensor=false"></script>
+
+<script type="text/javascript">
+    (function () {
+        "use strict";
+
+        function initApp() {
+
+            function handleSearchResult(searchResponse) {
+
+
+            }
+
+            window.starbucks = {
+
+                ui: {
+                    markers: [],
+                    map: null
+                },
+
+                performStoreSearch: function () {
+
+                	// Maps enabled (online)?
+
+                	if (!starbucks.ui.map) {
+                        return;
+                    }
+
+                	// Get location
+
+                	var location = $("#location").val();
+
+                	// Center map
+
+                	var coordinate = {
+                   		lat: parseFloat(location.split(",")[0]),
+                   		lng: parseFloat(location.split(",")[1])
+                   	}
+
+                	starbucks.ui.map.setCenter(coordinate);
+
+                	new google.maps.Marker({
+                    	position: coordinate,
+                    	map: starbucks.ui.map
+                    });
+
+                	// Expand template and execute search
+
+                    var template = new URITemplate($("#map").attr("data-uri"));
+
+                    $.get(template.expand({
+                        "location": location,
+                        "distance": $("#distance").val(),
+                        "size": 100,
+                        "page": 0
+                    }), function(response) {
+
+                    	while (starbucks.ui.markers.length) {
+                            starbucks.ui.markers.pop().setMap(null);
+                        }
+
+                    	// Create marker for store
+
+                    	response._embedded["stores"].forEach(function (store) {
+                            starbucks.ui.markers.push(new google.maps.Marker({
+                            	position: {
+                            		lat: store.address.location.y,
+                            		lng: store.address.location.x
+                            	},
+                            	map: starbucks.ui.map
+                            }));
+                        });
+                    })
+                },
+
+                init: function() {
+                    starbucks.ui.map = new google.maps.Map($("#map")[0], { zoom: 14 });
+                    starbucks.performStoreSearch();
+                }
+            };
+
+            window.starbucks.init();
+        }
+
+        $(initApp);
+    })();
+</script>
+</body>
+</html>