From f8ed315e2d7fe0e7f47142836d66a8852637e862 Mon Sep 17 00:00:00 2001 From: Benjamin Barth Date: Mon, 19 Oct 2015 10:35:13 +0200 Subject: [PATCH] Implemented partials for mobile search results --- .../images/mobile/search-icon-yellow.svg | 1 + .../partials/searchresult/SearchResult.gss | 79 ++++++++++++++++++ .../partials/searchresult/SearchResult.java | 64 +++++++++++++++ .../partials/searchresult/SearchResult.ui.xml | 29 +++++++ .../searchresult/SearchResultItem.java | 43 ++++++++++ .../searchresult/SearchResultItem.ui.xml | 15 ++++ .../searchresult/SearchResultResources.java | 27 +++++++ .../dispatch/search/SearchResultDTO.java | 80 +++++++++++++++++++ 8 files changed, 338 insertions(+) create mode 100644 java/com.sap.sailing.gwt.ui/images/mobile/search-icon-yellow.svg create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.gss create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.java create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.ui.xml create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.java create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.ui.xml create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultResources.java create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/search/SearchResultDTO.java diff --git a/java/com.sap.sailing.gwt.ui/images/mobile/search-icon-yellow.svg b/java/com.sap.sailing.gwt.ui/images/mobile/search-icon-yellow.svg new file mode 100644 index 00000000000..6ef96c3805d --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/images/mobile/search-icon-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.gss b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.gss new file mode 100644 index 00000000000..21ea04859c6 --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.gss @@ -0,0 +1,79 @@ +.searchresult { + font-size: 1rem; +} +.searchresult_header { + background: #f2f2f2; + margin: 0; + padding: 0; +} +.searchresult_header_form { + height: 100%; +} +.searchresult_header_form_label { + display: block; + font-size: 1.2em; + padding: 0 0.833333333333333em; + margin: 1.111111111111111em 0; + font-weight: 700; + color: #0a0a0a; +} +.searchresult_header_form_inputwrapper { + padding: 0.333333333333333em; +} +.searchresult_header_form_input { + float: left; + display: block; + font-weight: 600; + padding: 0 2.333333333333333em 0 0.666666666666667em; + width: 100%; + height: 2.666666666666667em; + border: none; + vertical-align: middle; +} +.searchresult_header_form_button { + float: left; + width: 2.333333333333333em; + height: 2.666666666666667em; + margin-left: -2.333333333333333em; + border: none; + vertical-align: middle; + background: url("images/mobile/search-icon-yellow.svg") no-repeat; + background-size: 1.333333333333333em 1.333333333333333em; + background-position: center; +} +.searchresult_amount { + font-size: 0.866666666666667em; + font-weight: 600; + color: #0a0a0a; + padding: 1.153846153846154em; + border-bottom: 1px solid #ccc; +} +.searchresult_item { + padding: 1.333333333333333em 1em; + border-bottom: 1px solid #ccc; +} +.searchresult_item_headline { + font-size: 1.066666666666667em; + font-weight: 700; +} +.searchresult_item_event { + font-size: 0.866666666666667em; + color: #0a0a0a; +} +.searchresult_item_event_link { + color: #0a0a0a; +} +.searchresult_item_event_link:visited, +.searchresult_item_event_link:active { + color: #0a0a0a; +} +.searchresult_item_event > *:after { + content: "|"; + margin: 0 0.384615384615385em; + color: #ccc; + text-decoration: none; +} +.searchresult_item_event > *:last-child:after { + content: ""; + margin: 0; +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.java new file mode 100644 index 00000000000..19d1c33ddaa --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.java @@ -0,0 +1,64 @@ +package com.sap.sailing.gwt.home.mobile.partials.searchresult; + +import java.util.Collection; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.SpanElement; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.KeyCodes; +import com.google.gwt.event.dom.client.KeyPressEvent; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.uibinder.client.UiHandler; +import com.google.gwt.user.client.ui.Button; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.TextBox; +import com.google.gwt.user.client.ui.Widget; +import com.sap.sailing.gwt.home.mobile.places.searchresult.SearchResultView.Presenter; +import com.sap.sailing.gwt.ui.shared.dispatch.search.SearchResultDTO; + +public class SearchResult extends Composite { + + private static SearchResultUiBinder uiBinder = GWT.create(SearchResultUiBinder.class); + + interface SearchResultUiBinder extends UiBinder { + } + + @UiField TextBox searchInputUi; + @UiField Button searchButtonUi; + @UiField SpanElement searchResultCountUi; + @UiField SpanElement searchResultForUi; + @UiField FlowPanel searchResultContainerUi; + + private final Presenter presenter; + + public SearchResult(Presenter presenter) { + SearchResultResources.INSTANCE.css().ensureInjected(); + this.presenter = presenter; + initWidget(uiBinder.createAndBindUi(this)); + } + + public void updateSearchResult(String searchText, Collection searchResultItems) { + searchResultContainerUi.clear(); + searchInputUi.setValue(searchText); + searchResultCountUi.setInnerText(String.valueOf(searchResultItems.size())); + searchResultForUi.setInnerText(searchText); + for (SearchResultDTO searchResult : searchResultItems) { + searchResultContainerUi.add(new SearchResultItem(presenter.getNavigator(), searchResult)); + } + } + + @UiHandler("searchInputUi") + void onSearchInputEnter(KeyPressEvent event) { + if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ENTER) { + presenter.doSearch(searchInputUi.getValue()); + } + } + + @UiHandler("searchButtonUi") + void onSearchButtonClicked(ClickEvent event) { + presenter.doSearch(searchInputUi.getValue()); + } + +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.ui.xml b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.ui.xml new file mode 100644 index 00000000000..927a0c6b9de --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResult.ui.xml @@ -0,0 +1,29 @@ + + + + + + +
+
+
+
+ +
+ + + +
+
+
+
+   ''. +
+ +
+
+ + \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.java new file mode 100644 index 00000000000..d609814db72 --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.java @@ -0,0 +1,43 @@ +package com.sap.sailing.gwt.home.mobile.partials.searchresult; + +import static com.sap.sailing.gwt.home.shared.utils.EventDatesFormatterUtil.formatDateRangeWithYear; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.AnchorElement; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.SpanElement; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.ui.Widget; +import com.sap.sailing.gwt.home.mobile.app.MobilePlacesNavigator; +import com.sap.sailing.gwt.home.shared.app.PlaceNavigation; +import com.sap.sailing.gwt.ui.shared.dispatch.search.SearchResultDTO; + +public class SearchResultItem extends Widget { + + private static SearchResultItemUiBinder uiBinder = GWT.create(SearchResultItemUiBinder.class); + + interface SearchResultItemUiBinder extends UiBinder { + } + + @UiField AnchorElement resultLinkUi; + @UiField AnchorElement eventLinkUi; + @UiField SpanElement eventVenueUi; + @UiField SpanElement eventDateUi; + + public SearchResultItem(MobilePlacesNavigator navigator, SearchResultDTO result) { + setElement(uiBinder.createAndBindUi(this)); + resultLinkUi.setInnerText(result.getDisplayName()); + String eventId = result.getEventId().toString(), baseUrl = result.getBaseUrl(); + PlaceNavigation regattaNavigation = navigator.getRegattaOverviewNavigation(eventId, result.getLeaderboardName(), baseUrl, result.isOnRemoteServer()); + regattaNavigation.configureAnchorElement(resultLinkUi); + eventLinkUi.setInnerText(result.getEventName()); + PlaceNavigation eventNavigation = navigator.getEventNavigation(eventId, baseUrl, result.isOnRemoteServer()); + eventNavigation.configureAnchorElement(eventLinkUi); + eventVenueUi.setInnerText(result.getEventVenueName()); + if (result.getEventStartDate() != null) { + eventDateUi.setInnerText(formatDateRangeWithYear(result.getEventStartDate(), result.getEventEndDate())); + } + } + +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.ui.xml b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.ui.xml new file mode 100644 index 00000000000..d8cd4f23579 --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultItem.ui.xml @@ -0,0 +1,15 @@ + + + + + +
+ +
+ + + +
+
+ \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultResources.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultResources.java new file mode 100644 index 00000000000..c68fb3d38c1 --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/mobile/partials/searchresult/SearchResultResources.java @@ -0,0 +1,27 @@ +package com.sap.sailing.gwt.home.mobile.partials.searchresult; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.resources.client.ClientBundle; +import com.google.gwt.resources.client.CssResource; + +public interface SearchResultResources extends ClientBundle { + public static final SearchResultResources INSTANCE = GWT.create(SearchResultResources.class); + + @Source("SearchResult.gss") + LocalCss css(); + + public interface LocalCss extends CssResource { + String searchresult(); + String searchresult_header(); + String searchresult_header_form(); + String searchresult_header_form_label(); + String searchresult_header_form_inputwrapper(); + String searchresult_header_form_input(); + String searchresult_header_form_button(); + String searchresult_amount(); + String searchresult_item(); + String searchresult_item_headline(); + String searchresult_item_event(); + String searchresult_item_event_link(); + } +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/search/SearchResultDTO.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/search/SearchResultDTO.java new file mode 100644 index 00000000000..b31074e0bcc --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/search/SearchResultDTO.java @@ -0,0 +1,80 @@ +package com.sap.sailing.gwt.ui.shared.dispatch.search; + +import java.net.URL; +import java.util.Date; +import java.util.UUID; + +import com.google.gwt.core.shared.GwtIncompatible; +import com.sap.sailing.domain.base.EventBase; +import com.sap.sailing.domain.base.LeaderboardSearchResultBase; +import com.sap.sailing.gwt.ui.shared.dispatch.DTO; + +public class SearchResultDTO implements DTO { + + private String displayName; + + private UUID eventId; + private String eventName; + private String eventVenueName; + private Date eventStartDate; + private Date eventEndDate; + + private String leaderboardName; + private String baseUrl; + private boolean isOnRemoteServer; + + protected SearchResultDTO() { + } + + @GwtIncompatible + public SearchResultDTO(LeaderboardSearchResultBase hit, URL baseUrl, boolean isOnRemoteServer) { + this.leaderboardName = hit.getLeaderboard().getName(); + this.displayName = hit.getLeaderboard().getDisplayName() != null ? hit.getLeaderboard().getDisplayName() : + (hit.getRegattaName() != null ? hit.getRegattaName() : leaderboardName); + EventBase event = hit.getEvent(); + this.eventId = (UUID) event.getId(); + this.eventName = event.getName(); + this.eventVenueName = event.getVenue() != null ? event.getVenue().getName() : null; + this.eventStartDate = event.getStartDate() != null ? event.getStartDate().asDate() : null; + this.eventEndDate = event.getEndDate() != null ? event.getEndDate().asDate() : null; + this.baseUrl = baseUrl.toString(); + this.isOnRemoteServer = isOnRemoteServer; + } + + public String getDisplayName() { + return displayName; + } + + public UUID getEventId() { + return eventId; + } + + public String getEventName() { + return eventName; + } + + public String getEventVenueName() { + return eventVenueName; + } + + public Date getEventStartDate() { + return eventStartDate; + } + + public Date getEventEndDate() { + return eventEndDate; + } + + public String getLeaderboardName() { + return leaderboardName; + } + + public String getBaseUrl() { + return baseUrl; + } + + public boolean isOnRemoteServer() { + return isOnRemoteServer; + } + +}