Event overview stage - Initial implementation of countdown ticker

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/overview/EventOverviewStage.java

@@ -3,9 +3,11 @@ package com.sap.sailing.gwt.home.client.place.event.overview;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.home.client.place.event.partials.countdown.Countdown;
 import com.sap.sailing.gwt.home.client.place.event.partials.livestream.Livestream;
 import com.sap.sailing.gwt.home.client.place.event.regatta.tabs.reload.RefreshableWidget;
 import com.sap.sailing.gwt.ui.shared.dispatch.event.EventOverviewStageDTO;
+import com.sap.sailing.gwt.ui.shared.dispatch.event.EventOverviewTickerStageDTO;
 import com.sap.sailing.gwt.ui.shared.dispatch.event.EventOverviewVideoStageDTO;
 
 public class EventOverviewStage extends Composite implements RefreshableWidget<EventOverviewStageDTO> {
@@ -26,6 +28,12 @@ public class EventOverviewStage extends Composite implements RefreshableWidget<E
             }
             ((Livestream)lastContent).setData((EventOverviewVideoStageDTO) data);
         }
+        if (data instanceof EventOverviewTickerStageDTO) {
+            if (!(lastContent instanceof Countdown)) {
+                lastContent = new Countdown();
+            }
+            ((Countdown) lastContent).setData((EventOverviewTickerStageDTO) data);
+        }
         // TODO placeholder?
         content.setWidget(lastContent);
     }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/Countdown.gss

@@ -0,0 +1,138 @@
+.countdown {
+  font-size: 1rem;
+}
+.countdown_content {
+  font-size: inherit;
+}
+.countdown_content_panewrapper {
+  font-size: 0;
+}
+.countdown_content_pane {
+  border: 0.2em solid #fff;
+  background: #008fcc;
+  color: #fff;
+  text-align: center;
+  display: inline-block;
+  margin-right: 0.333333333333333em;
+  padding: 0.666666666666667em 0.333333333333333em;
+  border-radius: 0.666666666666667em;
+  width: 4.666666666666667em;
+  height: 4.666666666666667em;
+  text-shadow: none;
+  box-shadow: 0 0 18px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.25);
+}
+.countdown_content_panefirst,
+.countdown_content_panesecond,
+.countdown_content_panethird,
+.countdown_content_panefourth {
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+.countdown_content_pane_count {
+  font-weight: bold;
+  font-size: 2em;
+  line-height: 1em;
+}
+.countdown_content_pane_unit {
+  font-size: 0.8em;
+}
+.countdown {
+  font-size: 1rem;
+  position: relative;
+  height: 28.333333333333332em;
+  margin-top: 1.333333333333333em;
+}
+@media (max-width: 976px) {
+  .countdown {
+    height: 22em;
+  }
+}
+.countdown_content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  text-align: center;
+  -webkit-transform: translate(-50%, -80%);
+     -moz-transform: translate(-50%, -80%);
+      -ms-transform: translate(-50%, -80%);
+          transform: translate(-50%, -80%);
+}
+.countdown_content_title {
+  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
+  font-size: 1.466666666666667em;
+  color: #f6f9fc;
+}
+.countdown_image {
+  width: 100%;
+  height: 100%;
+  background-size: 67.8em 50.46666666666667em;
+  background-position: center -0.933333333333333em;
+  background-image: url("images/home/countdown-thumbnail.png");
+}
+.countdown_info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #f6f9fc;
+  padding: 1.333333333333333em;
+  background: rgba(0,0,0,0.5);
+}
+.countdown_info_text {
+  display: inline-block;
+  padding-left: 0.666666666666667em;
+}
+@media (max-width: 976px) {
+  .countdown_info_text {
+    padding-left: 0;
+  }
+}
+.countdown_info_text_title {
+  margin: 0;
+  padding: 0;
+  font-size: 1.466666666666667em;
+  display: inline-block;
+  margin-top: 0.181818181818182em;
+}
+.countdown_info_lable {
+  width: 3.333333333333333em;
+  display: inline-block;
+  padding-left: 0.4em;
+  margin-left: 1.333333333333333em;
+}
+@media (max-width: 976px) {
+  .countdown_info_lable {
+    display: none;
+  }
+}
+@media (max-width: 720px) {
+  .countdown_info_lable {
+    display: inline-block;
+  }
+}
+.countdown_info_button {
+  float: right;
+  text-align: right;
+  white-space: nowrap;
+  padding-right: 0;
+}
+@media (max-width: 976px) {
+  .countdown_info_button {
+    margin-left: -1.333333333333333em;
+  }
+}
+@media (max-width: 930px) {
+  .countdown_info_button {
+    font-size: 0.866666666666667em;
+    padding-left: 0.769230769230769em;
+  }
+}
+@media (max-width: 720px) {
+  .countdown_info_button {
+    font-size: 1em;
+  }
+}
+.countdown_info_button .button {
+  padding: 0.666666666666667em 1em;
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/Countdown.java

@@ -0,0 +1,31 @@
+package com.sap.sailing.gwt.home.client.place.event.partials.countdown;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.SimplePanel;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.home.client.place.event.partials.countdown.CountdownResources.LocalCss;
+import com.sap.sailing.gwt.ui.shared.dispatch.event.EventOverviewTickerStageDTO;
+
+public class Countdown extends Composite {
+
+    private static CountdownUiBinder uiBinder = GWT.create(CountdownUiBinder.class);
+
+    interface CountdownUiBinder extends UiBinder<Widget, Countdown> {
+    }
+
+    private static final LocalCss CSS = CountdownResources.INSTANCE.css();
+    
+    @UiField SimplePanel tickerContainer;
+
+    public Countdown() {
+        CSS.ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+
+    public void setData(EventOverviewTickerStageDTO data) {
+        this.tickerContainer.setWidget(new CountdownTicker(data.getStartTime()));
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/Countdown.ui.xml

@@ -0,0 +1,35 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
+	xmlns:g="urn:import:com.google.gwt.user.client.ui" 
+	xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
+  <ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
+  <ui:with field="i18n_ubi" type="com.sap.sailing.gwt.common.client.i18n.TextMessages" />
+  <ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
+  <ui:with field="local_res" type="com.sap.sailing.gwt.home.client.place.event.partials.countdown.CountdownResources" />
+  <g:HTMLPanel addStyleNames="{local_res.css.countdown}">
+      <div class="{local_res.css.countdown_image}"></div>
+      <div class="{local_res.css.countdown_content}">
+        <h3 class="{local_res.css.countdown_content_title}">
+			TODO Next Race starting in<!-- <ui:text from='{i18n.nextRace}' /> -->
+        </h3>
+        <g:SimplePanel ui:field="tickerContainer"/>
+      </div>
+      <div class="{res.mediaCss.grid}">
+        <div class="{local_res.css.countdown_info}">
+          <div class="{res.mediaCss.small7} {res.mediaCss.large8} {res.mediaCss.columns} {local_res.css.countdown_info_text}">
+            <h3 class="{local_res.css.countdown_info_text_title}">
+              TODO This is the next races title
+            </h3>
+            <div data-labeltype="next" class="{local_res.css.countdown_info_lable} {res.mainCss.label}">
+               TODONext<!-- <ui:text from='{i18n.playModeNext}' /> -->
+            </div>
+          </div>
+          <div class="{res.mediaCss.small5} {res.mediaCss.large4} {res.mediaCss.columns} {local_res.css.countdown_info_button}">
+            <a href="#" class="{res.mainCss.button} {res.mainCss.buttonsmall} {res.mainCss.buttonred} {res.mainCss.buttonstrong} {res.mainCss.buttonarrowrightwhite}">
+              <ui:text from='{i18n_ubi.watchNow}' />
+            </a>
+          </div>
+        </div>
+      </div>
+  </g:HTMLPanel>
+</ui:UiBinder>

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/CountdownResources.java

@@ -0,0 +1,33 @@
+package com.sap.sailing.gwt.home.client.place.event.partials.countdown;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+
+public interface CountdownResources extends ClientBundle {
+    public static final CountdownResources INSTANCE = GWT.create(CountdownResources.class);
+
+    @Source("Countdown.gss")
+    LocalCss css();
+
+    public interface LocalCss extends CssResource {
+        String countdown();
+        String countdown_content();
+        String countdown_content_panewrapper();
+        String countdown_content_pane();
+        String countdown_content_panefirst();
+        String countdown_content_panesecond();
+        String countdown_content_panethird();
+        String countdown_content_panefourth();
+        String countdown_content_pane_count();
+        String countdown_content_pane_unit();
+        String countdown_content_title();
+        String countdown_image();
+        String countdown_info();
+        String countdown_info_text();
+        String countdown_info_text_title();
+        String countdown_info_lable();
+        String countdown_info_button();
+        String button();
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/CountdownTicker.java

@@ -0,0 +1,60 @@
+package com.sap.sailing.gwt.home.client.place.event.partials.countdown;
+
+import java.util.Date;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.dom.client.Style.Display;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.home.client.shared.Countdown;
+import com.sap.sailing.gwt.home.client.shared.Countdown.CountdownListener;
+import com.sap.sailing.gwt.home.client.shared.Countdown.RemainingTime;
+import com.sap.sse.common.impl.MillisecondsTimePoint;
+
+public class CountdownTicker extends Composite {
+
+    private static CountdownTickerUiBinder uiBinder = GWT.create(CountdownTickerUiBinder.class);
+
+    interface CountdownTickerUiBinder extends UiBinder<Widget, CountdownTicker> {
+    }
+    
+    @UiField DivElement majorContainer, majorValue, majorUnit;
+    @UiField DivElement minorContainer, minorValue, minorUnit;
+
+    private final Countdown countdown;
+
+    public CountdownTicker(Date startTime) {
+        initWidget(uiBinder.createAndBindUi(this));
+        this.countdown = new Countdown(new MillisecondsTimePoint(startTime), new CountdownTickerListener());
+    }
+
+    private class CountdownTickerListener implements CountdownListener {
+        @Override
+        public void changed(RemainingTime major, RemainingTime minor) {
+            update(major, majorContainer, majorValue, majorUnit);
+            update(minor, minorContainer, minorValue, minorUnit);
+        }
+
+        private void update(RemainingTime time, DivElement container, DivElement value, DivElement unit) {
+            if (time == null) {
+                container.getStyle().setDisplay(Display.NONE);
+                value.setInnerText(null);
+                unit.setInnerText(null);
+            } else {
+                container.getStyle().clearDisplay();
+                value.setInnerText(String.valueOf(time.value));
+                unit.setInnerText(time.unitI18n());
+            }
+        }
+    }
+
+    @Override
+    protected void onUnload() {
+        countdown.cancel();
+        super.onUnload();
+    }
+
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/event/partials/countdown/CountdownTicker.ui.xml

@@ -0,0 +1,16 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+		xmlns:g="urn:import:com.google.gwt.user.client.ui" >
+	<ui:with field="local_res" type="com.sap.sailing.gwt.home.client.place.event.partials.countdown.CountdownResources" />
+	<g:HTMLPanel ui:field="countdown"
+		addStyleNames="{local_res.css.countdown_content_panewrapper}">
+		<div ui:field="majorContainer" class="{local_res.css.countdown_content_pane} {local_res.css.countdown_content_panefirst}">
+			<div ui:field="majorValue" class="{local_res.css.countdown_content_pane_count}"></div>
+			<div ui:field="majorUnit" class="{local_res.css.countdown_content_pane_unit}"></div>
+		</div>
+		<div ui:field="minorContainer" class="{local_res.css.countdown_content_pane} {local_res.css.countdown_content_panesecond}">
+			<div ui:field="minorValue" class="{local_res.css.countdown_content_pane_count}"></div>
+			<div ui:field="minorUnit" class="{local_res.css.countdown_content_pane_unit}"></div>
+		</div>
+	</g:HTMLPanel>
+</ui:UiBinder>

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/event/EventOverviewTickerStageDTO.java

@@ -1,5 +1,11 @@
 package com.sap.sailing.gwt.ui.shared.dispatch.event;
 
+import java.util.Date;
+
 public class EventOverviewTickerStageDTO implements EventOverviewStageDTO {
 
+    public Date getStartTime() {
+        return new Date(new Date().getTime() + 62500);
+    }
+
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/dispatch/event/GetEventOverviewStageAction.java

@@ -6,7 +6,6 @@ import com.google.gwt.core.shared.GwtIncompatible;
 import com.sap.sailing.gwt.ui.shared.dispatch.Action;
 import com.sap.sailing.gwt.ui.shared.dispatch.DispatchContext;
 import com.sap.sailing.gwt.ui.shared.dispatch.ResultWithTTL;
-import com.sap.sailing.gwt.ui.shared.dispatch.event.RacesActionUtil.RaceCallback;
 
 public class GetEventOverviewStageAction implements Action<ResultWithTTL<EventOverviewStageDTO>> {
     private UUID eventId;
@@ -22,6 +21,6 @@ public class GetEventOverviewStageAction implements Action<ResultWithTTL<EventOv
     @GwtIncompatible
     public ResultWithTTL<EventOverviewStageDTO> execute(DispatchContext context) {
         // TODO proper implementation
-        return new ResultWithTTL<EventOverviewStageDTO>(5000, new EventOverviewVideoStageDTO());
+        return new ResultWithTTL<EventOverviewStageDTO>(5000, new EventOverviewTickerStageDTO());
     }
 }