fix: add target used to display the timer value.

src/main/java/com/flowingcode/vaadin/addons/simpletimer/SimpleTimer.java

@@ -109,6 +109,10 @@ public void setDoubleDigitHours(final boolean doubleDigitHours) {
     getElement().setProperty("doubleDigitHours", doubleDigitHours);
   }
 
+  public void setTargetId(final String targetId) {
+    getElement().setProperty("targetId", targetId);
+  }
+
   /** Starts or stops the timer if it is already started */
   public void start() {
     getElement().callJsFunction("start");
@@ -167,8 +171,8 @@ public CompletableFuture<BigDecimal> getCurrentTimeAsync() {
    * @return this registration, for chaining
    */
   public Registration addCurrentTimeChangeListener(
-      PropertyChangeListener listener, long period, TimeUnit periodUnit) {
-    int millis = (int) Math.min(periodUnit.toMillis(period), Integer.MAX_VALUE);
+      PropertyChangeListener listener, final long period, final TimeUnit periodUnit) {
+    final int millis = (int) Math.min(periodUnit.toMillis(period), Integer.MAX_VALUE);
     if (listener == null) {
       listener = ev -> {};
     }
@@ -202,7 +206,7 @@ public boolean isVisible() {
   }
 
   @Override
-  public void setVisible(boolean visible) {
+  public void setVisible(final boolean visible) {
     getStyle().set(DISPLAY, visible ? INLINE : "none");
   }
 }

src/main/resources/META-INF/frontend/simple-timer/simple-timer.js

@@ -110,6 +110,10 @@ Polymer({
         	type: Boolean,
         	value: false
         },
+		targetId: {
+			type: String,
+			value: null,
+		},
         /**
         * Time the timer has spent running since it was started
         */
@@ -120,7 +124,8 @@ Polymer({
 
         _formattedTime: {
           type: String,
-          value: '0'
+          value: '0',
+		  observer: "_updateTarget",
         }
       },
 
@@ -153,8 +158,7 @@ Polymer({
       },
 
       _decreaseTimer: function(timestamp) {
-		console.error("_decreaseTimer  "+this.isRunning+" "+this.currentTime);  
-        if (!this.isRunning || !this.isAttached) {
+        if (!this.isRunning) {
           return;
         }
         if ((this.currentTime <= 0 && !this.countUp) 
@@ -199,13 +203,9 @@ Polymer({
 		}
         return (this.hours ? hours + ':' : '') + (this.minutes || this.hours ? minutes + ':' : '') + seconds + (this.fractions ? ('.' + timeString[1].substring(0,2)) : '') 
       },
-
-      detached: function() {
-        this.isAttached=false;  
-      },
-      attached: function() {
-        this.isAttached=true;
-        debugger;
-        if (this.isRunning) window.requestAnimationFrame(this._decreaseTimer.bind(this));
-      },
+	  _updateTarget: function(newValue, oldValue){
+  		if (document.getElementById(this.targetId)) {
+  			document.getElementById(this.targetId).innerText = newValue;	
+  		}
+  	  }
     });

src/test/java/com/flowingcode/addons/simpletimer/integration/IntegrationView.java

@@ -4,23 +4,30 @@
 import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Label;
 import com.vaadin.flow.router.Route;
 
 @Route("/it")
 public class IntegrationView extends Div implements IntegrationCallables {
 
-  private SimpleTimer timer = new SimpleTimer();
+  private final SimpleTimer timer = new SimpleTimer();
 
   private Dialog dialog;
+
+  private final Label timerTarget;
+
   public IntegrationView() {
     add(timer);
+    timerTarget = new Label();
+    timerTarget.setId("timerTarget");
+    timer.setTargetId("timerTarget");
   }
 
   @Override
   @ClientCallable
   public void openDialog() {
     if (dialog == null) {
-      dialog = new Dialog(timer);
+      dialog = new Dialog(timerTarget);
     }
     dialog.open();
   }
@@ -33,13 +40,13 @@ public void closeDialog() {
 
   @Override
   @ClientCallable
-  public void setStartTime(Integer startTime) {
+  public void setStartTime(final Integer startTime) {
     timer.setStartTime(startTime);
   }
 
   @Override
   @ClientCallable
-  public void setEndTime(Integer endTime) {
+  public void setEndTime(final Integer endTime) {
     timer.setEndTime(endTime);
   }
 

src/test/java/com/flowingcode/addons/simpletimer/integration/SimpleIT.java

@@ -1,15 +1,10 @@
 package com.flowingcode.addons.simpletimer.integration;
 
 import static org.hamcrest.MatcherAssert.assertThat;
-import static org.hamcrest.Matchers.equalTo;
-import static org.hamcrest.Matchers.greaterThan;
-import static org.hamcrest.Matchers.lessThan;
-import static org.hamcrest.Matchers.nullValue;
-import static org.junit.Assert.assertFalse;
-import static org.junit.Assert.assertTrue;
+import static org.hamcrest.Matchers.*;
+import static org.junit.Assert.*;
 import com.flowingcode.vaadin.testbench.rpc.HasRpcSupport;
 import java.util.concurrent.TimeUnit;
-import org.junit.Ignore;
 import org.junit.Test;
 
 public class SimpleIT extends AbstractViewTest implements HasRpcSupport {
@@ -20,10 +15,10 @@ public SimpleIT() {
     super("it");
   }
 
-  private static void sleep(long millis) {
+  private static void sleep(final long millis) {
     try {
       Thread.sleep(millis);
-    } catch (InterruptedException e) {
+    } catch (final InterruptedException e) {
       Thread.currentThread().interrupt();
     }
   }
@@ -42,8 +37,8 @@ public void countDown() {
 
     $server.start();
     assertTrue($server.isRunning());
-    double t0 = currentTime();
-    double t1 = currentTime();
+    final double t0 = currentTime();
+    final double t1 = currentTime();
     assertThat(t0, lessThan(1.0));
     assertThat(t1, lessThan(t0));
   }
@@ -58,33 +53,32 @@ public void countUp() {
 
     $server.start();
     assertTrue($server.isRunning());
-    double t0 = currentTime();
-    double t1 = currentTime();
+    final double t0 = currentTime();
+    final double t1 = currentTime();
     assertThat(t0, greaterThan(0.0));
     assertThat(t1, greaterThan(t0));
   }
 
   @Test
-  @Ignore
   public void countUpInDialog() {
     $server.openDialog();
     $server.setEndTime(100);
     assertThat(currentTime(), equalTo(0.0));
 
-    long w0 = System.nanoTime();
+    final long w0 = System.nanoTime();
     $server.start();
-    double t0 = currentTime();
+    final double t0 = currentTime();
     assertThat(t0, greaterThan(0.0));
-    long w1 = System.nanoTime();
+    final long w1 = System.nanoTime();
 
     $server.closeDialog();
     sleep(0);
     $server.openDialog();
 
-    long w2 = System.nanoTime();
+    final long w2 = System.nanoTime();
     // double delta = TimeUnit.NANOSECONDS.toMillis(System.nanoTime() - now) / 1000.0;
-    double t1 = currentTime();
-    long w3 = System.nanoTime();
+    final double t1 = currentTime();
+    final long w3 = System.nanoTime();
     // assertThat(t1, greaterThan(t0 + delta));
     System.out.println(TimeUnit.NANOSECONDS.toMillis(w3 - w0) / 1000.0);
     System.out.println(TimeUnit.NANOSECONDS.toMillis(w2 - w1) / 1000.0);

src/test/java/com/flowingcode/vaadin/addons/simpletimer/SimpletimerDemo2.java

@@ -24,6 +24,7 @@
 import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Label;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
@@ -52,7 +53,7 @@ public SimpletimerDemo2() {
     timer.getStyle().set("font-size", "40px");
     timer.setStartTime(60);
 
-    Span timerTitle = new Span("Simple Count Up Timer");
+    final Span timerTitle = new Span("Simple Count Up Timer");
 
     final TextField startTime =
         new TextField("Start Time", e -> {
@@ -109,10 +110,11 @@ public SimpletimerDemo2() {
 
     timer.addTimerEndEvent(e -> Notification.show("Timer Ended"));
 
-    final HorizontalLayout topLayout = new HorizontalLayout(timerTitle);
+    timer.setVisible(false);
+    final HorizontalLayout topLayout = new HorizontalLayout(timerTitle, timer);
     topLayout.setAlignItems(Alignment.CENTER);
 
-    HorizontalLayout options =
+    final HorizontalLayout options =
         new HorizontalLayout(countUp, fractions, minutes, hours, visible, doubleDigitHours);
     options.setAlignItems(Alignment.CENTER);
     options.getStyle().set("flex-wrap", "wrap");
@@ -122,7 +124,10 @@ public SimpletimerDemo2() {
 
     add(new VerticalLayout(topLayout, startTime, options, bottomLayout));
 
-    Dialog dlg = new Dialog(timer);
+    final Label timerTarget = new Label();
+    timerTarget.setId("timerTarget");
+
+    final Dialog dlg = new Dialog(timerTarget);
     dlg.setModal(false);
     dlg.setCloseOnOutsideClick(false);
     dlg.add(new Button("Close", ev -> dlg.close()));