Step 8 | Show data in a working app

src/main/java/org/vaadin/java_pwa/MyUI.java

@@ -8,6 +8,8 @@
 import javax.servlet.annotation.WebServlet;
 
 import org.apache.commons.io.IOUtils;
+import org.vaadin.java_pwa.backend.Workout;
+import org.vaadin.java_pwa.backend.WorkoutDataReader;
 import org.vaadin.leif.headertags.HeaderTagHandler;
 import org.vaadin.leif.headertags.Link;
 import org.vaadin.leif.headertags.Meta;
@@ -16,6 +18,7 @@
 import com.vaadin.annotations.JavaScript;
 import com.vaadin.annotations.Theme;
 import com.vaadin.annotations.VaadinServletConfiguration;
+import com.vaadin.data.util.BeanItemContainer;
 import com.vaadin.server.RequestHandler;
 import com.vaadin.server.ServiceException;
 import com.vaadin.server.SessionInitEvent;
@@ -24,11 +27,9 @@
 import com.vaadin.server.VaadinResponse;
 import com.vaadin.server.VaadinServlet;
 import com.vaadin.server.VaadinSession;
-import com.vaadin.ui.Button;
-import com.vaadin.ui.Label;
-import com.vaadin.ui.TextField;
+import com.vaadin.ui.Grid;
 import com.vaadin.ui.UI;
-import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.renderers.ImageRenderer;
 
 /**
  * This UI is the application entry point. A UI may either represent a browser window 
@@ -41,29 +42,23 @@
 @JavaScript("vaadin://js/app.js")
 @MetaTags({
 	@Meta(name="viewport", content="width=device-width, initial-scale=1"),
-	@Meta(name="theme-color", content="#00b4f0")
+	@Meta(name="theme-color", content="#404549")
 })
 @Link(rel="manifest", href="VAADIN/manifest.json")
 public class MyUI extends UI {
 
     @Override
     protected void init(VaadinRequest vaadinRequest) {
-        final VerticalLayout layout = new VerticalLayout();
-
-        final TextField name = new TextField();
-        name.setCaption("Type your name here:");
-
-        Button button = new Button("Click Me");
-        button.addClickListener( e -> {
-            layout.addComponent(new Label("Thanks " + name.getValue() 
-                    + ", it works!"));
-        });
-
-        layout.addComponents(name, button);
-        layout.setMargin(true);
-        layout.setSpacing(true);
-
-        setContent(layout);
+
+    	BeanItemContainer<Workout> container = new BeanItemContainer<>(
+    			Workout.class, new WorkoutDataReader().run());
+
+    	Grid grid = new Grid();
+    	grid.setContainerDataSource(container);
+    	grid.getColumn("sport").setRenderer(new ImageRenderer());
+    	grid.setSizeFull();
+
+        setContent(grid);
     }
 
     @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)

src/main/java/org/vaadin/java_pwa/backend/Sport.java

@@ -0,0 +1,9 @@
+package org.vaadin.java_pwa.backend;
+
+public enum Sport {
+    RUNNING, SWIMMING, TENNIS;
+
+	public String getFilename() {
+		return "images/" + this.name().toLowerCase() + "-15.png";
+	}
+}

src/main/java/org/vaadin/java_pwa/backend/Workout.java

@@ -0,0 +1,64 @@
+package org.vaadin.java_pwa.backend;
+
+import java.time.LocalDate;
+
+import com.vaadin.server.Resource;
+import com.vaadin.server.ThemeResource;
+
+public class Workout {
+
+	private Long id;
+
+	private LocalDate date;
+	private Resource sport;
+	private Integer duration;
+	private Integer calories;
+
+	public Workout() {
+	}
+
+	public Workout(LocalDate date, Sport sport, Integer duration, Integer calories) {
+		this.date = date;
+		setSport(sport);
+		this.duration = duration;
+		this.calories = calories;
+	}
+
+	public LocalDate getDate() {
+		return date;
+	}
+
+	public void setDate(LocalDate date) {
+		this.date = date;
+	}
+
+	public Resource getSport() {
+		return sport;
+	}
+
+	public void setSport(Sport sport) {
+		this.sport = new ThemeResource(sport.getFilename());
+	}
+
+	public Integer getDuration() {
+		return duration;
+	}
+
+	public void setDuration(Integer duration) {
+		this.duration = duration;
+	}
+
+	public Integer getCalories() {
+		return calories;
+	}
+
+	public void setCalories(Integer calories) {
+		this.calories = calories;
+	}
+
+	@Override
+	public String toString() {
+		return "{ Date: " + getDate().toString() + ", Sport: " + getSport() + ", Duration: " + getDuration()
+				+ ", Calories: " + getCalories() + " }";
+	}
+}

src/main/java/org/vaadin/java_pwa/backend/WorkoutDataReader.java

@@ -0,0 +1,44 @@
+package org.vaadin.java_pwa.backend;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.time.LocalDate;
+import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Stream;
+
+import org.apache.commons.io.IOUtils;
+
+import elemental.json.Json;
+import elemental.json.JsonObject;
+
+public class WorkoutDataReader {
+
+	public List<Workout> run() {
+		List<Workout> workouts = new ArrayList<>();
+		Stream.of(38, 39, 40, 41).map(i -> "data/week-" + i + ".json").map(this::readFile).map(Json::parse)
+				.map(json -> json.getArray("workouts")).forEach(jsonArray -> {
+					for (int i = 0; i < jsonArray.length(); ++i) {
+						JsonObject workout = jsonArray.get(i);
+						LocalDate date = LocalDate.parse(workout.getString("date"),
+								DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"));
+						Sport sport = Sport.valueOf(workout.getString("sport").toUpperCase());
+						Integer duration = (int) workout.getNumber("duration");
+						Integer calories = (int) workout.getNumber("calories");
+						workouts.add(new Workout(date, sport, duration, calories));
+					}
+				});
+		return workouts;
+	}
+
+	private String readFile(String file) {
+		try {
+			InputStream resourceAsStream = getClass().getClassLoader().getResourceAsStream(file);
+			return IOUtils.toString(resourceAsStream);
+		} catch (IOException e) {
+			return "{}";
+		}
+	}
+
+}

src/main/resources/data/week-38.json

@@ -0,0 +1 @@
+{"weekNumber":"38","workouts":[{"date":"2015-09-19T13:54:32.336Z","sport":"running","distance":15466,"duration":1888,"weather":"Dry","humidity":5,"temperature":17,"calories":472,"avgPace":122,"maxPace":124,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[11,9,8,10,10,11,9],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","2.6 km","5.2 km","7.7 km","10.3 km","12.9 km","15.5 km"]}},{"date":"2015-09-17T11:18:28.354Z","sport":"swimming","distance":500,"duration":3028,"weather":"Dry","humidity":5,"temperature":17,"calories":421,"avgPace":6056,"maxPace":6086,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-18T21:40:44.769Z","sport":"tennis","distance":0,"duration":1500,"weather":"Dry","humidity":5,"temperature":17,"calories":238,"avgPace":0,"maxPace":59,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-15T17:03:06.008Z","sport":"tennis","distance":0,"duration":2852,"weather":"Dry","humidity":5,"temperature":16,"calories":452,"avgPace":0,"maxPace":6,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-16T14:08:37.400Z","sport":"swimming","distance":500,"duration":2202,"weather":"Dry","humidity":5,"temperature":17,"calories":306,"avgPace":4404,"maxPace":4463,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-17T09:58:14.416Z","sport":"swimming","distance":540,"duration":1800,"weather":"Rain","humidity":5,"temperature":17,"calories":250,"avgPace":3333,"maxPace":3361,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-14T01:21:01.057Z","sport":"tennis","distance":0,"duration":1500,"weather":"Rain","humidity":5,"temperature":19,"calories":238,"avgPace":0,"maxPace":50,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-14T03:55:04.523Z","sport":"tennis","distance":0,"duration":2462,"weather":"Dry","humidity":5,"temperature":20,"calories":390,"avgPace":0,"maxPace":1,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-15T00:30:23.349Z","sport":"swimming","distance":500,"duration":3254,"weather":"Rain","humidity":5,"temperature":20,"calories":452,"avgPace":6508,"maxPace":6537,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-17T17:33:37.194Z","sport":"tennis","distance":0,"duration":1500,"weather":"Fog","humidity":5,"temperature":18,"calories":238,"avgPace":0,"maxPace":55,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-20T07:41:16.391Z","sport":"swimming","distance":500,"duration":1800,"weather":"Dry","humidity":5,"temperature":18,"calories":250,"avgPace":3600,"maxPace":3621,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-20T14:07:12.678Z","sport":"tennis","distance":0,"duration":1500,"weather":"Dry","humidity":5,"temperature":16,"calories":238,"avgPace":0,"maxPace":9,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-20T06:51:59.493Z","sport":"swimming","distance":500,"duration":3541,"weather":"Rain","humidity":5,"temperature":19,"calories":492,"avgPace":7082,"maxPace":7119,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-14T04:47:19.362Z","sport":"running","distance":17246,"duration":5030,"weather":"Rain","humidity":5,"temperature":20,"calories":1258,"avgPace":292,"maxPace":299,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[9,9,8,10,10,11,9],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","2.9 km","5.7 km","8.6 km","11.5 km","14.4 km","17.2 km"]}},{"date":"2015-09-15T05:18:13.994Z","sport":"tennis","distance":0,"duration":1500,"weather":"Fog","humidity":5,"temperature":18,"calories":238,"avgPace":0,"maxPace":34,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-16T08:22:39.734Z","sport":"swimming","distance":558,"duration":1800,"weather":"Dry","humidity":5,"temperature":17,"calories":250,"avgPace":3226,"maxPace":3238,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-17T14:32:00.746Z","sport":"swimming","distance":637,"duration":1800,"weather":"Fog","humidity":5,"temperature":19,"calories":250,"avgPace":2826,"maxPace":2837,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-19T19:39:11.894Z","sport":"swimming","distance":583,"duration":2181,"weather":"Fog","humidity":5,"temperature":15,"calories":303,"avgPace":3741,"maxPace":3758,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-18T20:32:38.466Z","sport":"swimming","distance":500,"duration":2003,"weather":"Dry","humidity":5,"temperature":18,"calories":278,"avgPace":4006,"maxPace":4008,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-14T04:10:55.786Z","sport":"swimming","distance":527,"duration":1800,"weather":"Fog","humidity":5,"temperature":19,"calories":250,"avgPace":3416,"maxPace":3441,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-15T16:16:14.177Z","sport":"swimming","distance":566,"duration":2632,"weather":"Fog","humidity":5,"temperature":18,"calories":366,"avgPace":4650,"maxPace":4678,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-17T00:50:29.875Z","sport":"swimming","distance":500,"duration":2731,"weather":"Dry","humidity":5,"temperature":20,"calories":379,"avgPace":5462,"maxPace":5468,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-20T19:44:49.362Z","sport":"swimming","distance":500,"duration":1800,"weather":"Dry","humidity":5,"temperature":19,"calories":250,"avgPace":3600,"maxPace":3605,"minAlt":103,"maxAlt":122,"ascent":-19}]}

src/main/resources/data/week-39.json

@@ -0,0 +1 @@
+{"weekNumber":"39","workouts":[{"date":"2015-09-25T23:25:56.726Z","sport":"running","distance":19738,"duration":1500,"weather":"Fog","humidity":5,"temperature":18,"calories":375,"avgPace":76,"maxPace":117,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[10,9,8,9,10,11,12],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","3.3 km","6.6 km","9.9 km","13.2 km","16.4 km","19.7 km"]}},{"date":"2015-09-24T02:07:44.580Z","sport":"swimming","distance":664,"duration":1800,"weather":"Dry","humidity":5,"temperature":17,"calories":250,"avgPace":2711,"maxPace":2769,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-26T09:06:56.144Z","sport":"tennis","distance":0,"duration":1874,"weather":"Dry","humidity":5,"temperature":17,"calories":297,"avgPace":0,"maxPace":7,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-22T19:26:32.399Z","sport":"swimming","distance":706,"duration":1901,"weather":"Dry","humidity":5,"temperature":16,"calories":264,"avgPace":2693,"maxPace":2722,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-24T23:51:48.389Z","sport":"running","distance":7869,"duration":5562,"weather":"Rain","humidity":5,"temperature":17,"calories":1391,"avgPace":707,"maxPace":767,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[8,9,8,9,10,11,10],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","1.3 km","2.6 km","3.9 km","5.2 km","6.6 km","7.9 km"]}},{"date":"2015-09-27T01:52:09.497Z","sport":"swimming","distance":528,"duration":3437,"weather":"Rain","humidity":5,"temperature":20,"calories":477,"avgPace":6509,"maxPace":6554,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-27T06:36:12.812Z","sport":"swimming","distance":500,"duration":2781,"weather":"Rain","humidity":5,"temperature":18,"calories":386,"avgPace":5562,"maxPace":5599,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-26T00:59:11.878Z","sport":"swimming","distance":710,"duration":2257,"weather":"Dry","humidity":5,"temperature":16,"calories":313,"avgPace":3179,"maxPace":3197,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-22T08:43:12.514Z","sport":"swimming","distance":628,"duration":2587,"weather":"Dry","humidity":5,"temperature":16,"calories":359,"avgPace":4119,"maxPace":4168,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-26T19:27:42.889Z","sport":"running","distance":20508,"duration":1673,"weather":"Dry","humidity":5,"temperature":19,"calories":418,"avgPace":82,"maxPace":140,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[9,9,8,9,10,11,9],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","3.4 km","6.8 km","10.3 km","13.7 km","17.1 km","20.5 km"]}},{"date":"2015-09-24T18:38:53.148Z","sport":"swimming","distance":500,"duration":1800,"weather":"Dry","humidity":5,"temperature":19,"calories":250,"avgPace":3600,"maxPace":3633,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-23T04:00:26.065Z","sport":"swimming","distance":500,"duration":1800,"weather":"Dry","humidity":5,"temperature":19,"calories":250,"avgPace":3600,"maxPace":3631,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-25T18:36:53.207Z","sport":"swimming","distance":500,"duration":1800,"weather":"Dry","humidity":5,"temperature":19,"calories":250,"avgPace":3600,"maxPace":3606,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-23T12:59:27.832Z","sport":"tennis","distance":0,"duration":1500,"weather":"Dry","humidity":5,"temperature":19,"calories":238,"avgPace":0,"maxPace":16,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-25T20:14:49.658Z","sport":"swimming","distance":500,"duration":3563,"weather":"Dry","humidity":5,"temperature":19,"calories":495,"avgPace":7126,"maxPace":7151,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-26T10:12:52.676Z","sport":"tennis","distance":0,"duration":1872,"weather":"Fog","humidity":5,"temperature":17,"calories":296,"avgPace":0,"maxPace":34,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-24T02:00:42.912Z","sport":"swimming","distance":500,"duration":2964,"weather":"Fog","humidity":5,"temperature":15,"calories":412,"avgPace":5928,"maxPace":5948,"minAlt":103,"maxAlt":122,"ascent":-19}]}

src/main/resources/data/week-40.json

@@ -0,0 +1 @@
+{"weekNumber":"40","workouts":[{"date":"2015-09-27T22:50:42.007Z","sport":"running","distance":20083,"duration":2790,"weather":"Rain","humidity":5,"temperature":17,"calories":698,"avgPace":139,"maxPace":173,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[9,9,8,11,10,11,11],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","3.3 km","6.7 km","10.0 km","13.4 km","16.7 km","20.1 km"]}},{"date":"2015-10-01T15:26:22.105Z","sport":"swimming","distance":500,"duration":1800,"weather":"Rain","humidity":5,"temperature":16,"calories":250,"avgPace":3600,"maxPace":3612,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-10-01T01:19:18.520Z","sport":"tennis","distance":0,"duration":2547,"weather":"Fog","humidity":5,"temperature":16,"calories":403,"avgPace":0,"maxPace":8,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-10-04T04:44:19.692Z","sport":"tennis","distance":0,"duration":1500,"weather":"Dry","humidity":5,"temperature":19,"calories":238,"avgPace":0,"maxPace":51,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-10-03T00:38:33.221Z","sport":"swimming","distance":502,"duration":1800,"weather":"Dry","humidity":5,"temperature":20,"calories":250,"avgPace":3586,"maxPace":3621,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-27T23:37:12.897Z","sport":"swimming","distance":500,"duration":1961,"weather":"Rain","humidity":5,"temperature":17,"calories":272,"avgPace":3922,"maxPace":3946,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-10-02T19:18:44.965Z","sport":"tennis","distance":0,"duration":1602,"weather":"Dry","humidity":5,"temperature":17,"calories":254,"avgPace":0,"maxPace":8,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-27T23:50:24.357Z","sport":"tennis","distance":0,"duration":1500,"weather":"Fog","humidity":5,"temperature":16,"calories":238,"avgPace":0,"maxPace":58,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-28T08:05:08.268Z","sport":"swimming","distance":723,"duration":2099,"weather":"Fog","humidity":5,"temperature":18,"calories":292,"avgPace":2903,"maxPace":2951,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-10-02T20:46:03.843Z","sport":"swimming","distance":743,"duration":1800,"weather":"Dry","humidity":5,"temperature":18,"calories":250,"avgPace":2423,"maxPace":2450,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-28T08:08:50.530Z","sport":"running","distance":5766,"duration":1500,"weather":"Dry","humidity":5,"temperature":18,"calories":375,"avgPace":260,"maxPace":320,"minAlt":103,"maxAlt":122,"ascent":-19,"speedData":{"speed":[9,9,8,8,10,11,10],"altitude":[100,103,104,113,103,92,81],"labels":["0.0 km","1.0 km","1.9 km","2.9 km","3.8 km","4.8 km","5.8 km"]}},{"date":"2015-10-01T09:03:50.022Z","sport":"tennis","distance":0,"duration":2801,"weather":"Fog","humidity":5,"temperature":18,"calories":443,"avgPace":0,"maxPace":18,"minAlt":103,"maxAlt":122,"ascent":-19},{"date":"2015-09-30T09:00:39.045Z","sport":"tennis","distance":0,"duration":2213,"weather":"Dry","humidity":5,"temperature":18,"calories":350,"avgPace":0,"maxPace":12,"minAlt":103,"maxAlt":122,"ascent":-19}]}