Spring/spring-data-examples
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Oliver Gierke
2014-12-31 02:03:46 +01:00
parent b7263b4ed6
commit 19bb907815
8 changed files with 343 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
rest/starbucks/README.md
View File

@@ -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

31
rest/starbucks/pom.xml
View File

@@ -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>

10
rest/starbucks/src/main/java/example/stores/Address.java
View File

@@ -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);
}
}

98
rest/starbucks/src/main/java/example/stores/web/StoresController.java Normal file
View File

@@ -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";
}
}

1
rest/starbucks/src/main/resources/application.properties Normal file
View File

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

BIN
rest/starbucks/src/main/resources/static/img/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

197
rest/starbucks/src/main/resources/templates/index.html Normal file
View File

@@ -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>

BIN
rest/starbucks/webui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 KiB