Timer control added

src/Framework/Framework/Controls/Timer.cs

@@ -0,0 +1,74 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using DotVVM.Framework.Binding.Expressions;
+using DotVVM.Framework.Binding;
+using DotVVM.Framework.Hosting;
+
+namespace DotVVM.Framework.Controls
+{
+    /// <summary>
+    /// An invisible control that periodically invokes a command.
+    /// </summary>
+    public class Timer : DotvvmControl
+    {
+        /// <summary>
+        /// Gets or sets the command binding that will be invoked on every tick.
+        /// </summary>
+        [MarkupOptions(AllowHardCodedValue = false, Required = true)]
+        public ICommandBinding Command
+        {
+            get { return (ICommandBinding)GetValue(CommandProperty)!; }
+            set { SetValue(CommandProperty, value); }
+        }
+        public static readonly DotvvmProperty CommandProperty
+            = DotvvmProperty.Register<ICommandBinding, Timer>(c => c.Command, null);
+
+        /// <summary>
+        /// Gets or sets the interval in milliseconds.
+        /// </summary>
+        [MarkupOptions(AllowBinding = false)]
+        public int Interval
+        {
+            get { return (int)GetValue(IntervalProperty)!; }
+            set { SetValue(IntervalProperty, value); }
+        }
+        public static readonly DotvvmProperty IntervalProperty
+            = DotvvmProperty.Register<int, Timer>(c => c.Interval, 30000);
+
+        /// <summary>
+        /// Gets or sets whether the timer is enabled.
+        /// </summary>
+        public bool Enabled
+        {
+            get { return (bool)GetValue(EnabledProperty)!; }
+            set { SetValue(EnabledProperty, value); }
+        }
+        public static readonly DotvvmProperty EnabledProperty
+            = DotvvmProperty.Register<bool, Timer>(c => c.Enabled, true);
+
+        public Timer()
+        {
+            SetValue(Validation.EnabledProperty, false);
+            SetValue(PostBack.ConcurrencyProperty, PostbackConcurrencyMode.Queue);
+        }
+
+        protected override void RenderBeginTag(IHtmlWriter writer, IDotvvmRequestContext context)
+        {
+            var group = new KnockoutBindingGroup();
+            group.Add("command", KnockoutHelper.GenerateClientPostbackLambda("Command", Command, this));
+            group.Add("interval", Interval.ToString());
+            group.Add("enabled", this, EnabledProperty);
+            writer.WriteKnockoutDataBindComment("dotvvm-timer", group.ToString());
+
+            base.RenderBeginTag(writer, context);
+        }
+
+        protected override void RenderEndTag(IHtmlWriter writer, IDotvvmRequestContext context)
+        {
+            base.RenderEndTag(writer, context);
+
+            writer.WriteKnockoutDataBindEndComment();
+        }
+    }
+}

src/Framework/Framework/Resources/Scripts/binding-handlers/all-handlers.ts

@@ -12,6 +12,7 @@ import fileUpload from './file-upload'
 import jsComponents from './js-component'
 import modalDialog from './modal-dialog'
 import appendableDataPager from './appendable-data-pager'
+import timer from './timer'
 
 type KnockoutHandlerDictionary = {
     [name: string]: KnockoutBindingHandler
@@ -30,7 +31,8 @@ const allHandlers: KnockoutHandlerDictionary = {
     ...fileUpload,
     ...jsComponents,
     ...modalDialog,
-    ...appendableDataPager
+    ...appendableDataPager,
+    ...timer
 }
 
 export default allHandlers

src/Framework/Framework/Resources/Scripts/binding-handlers/timer.ts

@@ -0,0 +1,42 @@
+type TimerProps = {
+    interval: number,
+    enabled: KnockoutObservable<boolean>,
+    command: () => Promise<DotvvmAfterPostBackEventArgs>
+}
+
+ko.virtualElements.allowedBindings["dotvvm-timer"] = true;
+
+export default {
+    "dotvvm-timer": {
+        init: (element: HTMLElement, valueAccessor: () => TimerProps) => {
+            const prop = valueAccessor();
+            let timer: number | null = null;
+
+            if (ko.isObservable(prop.enabled)) {
+                prop.enabled.subscribe(newValue => createOrDestroyTimer(newValue));
+            }
+            createOrDestroyTimer(ko.unwrap(prop.enabled));
+
+            function createOrDestroyTimer(enabled: boolean) {
+                if (enabled) {
+                    if (timer) {
+                        window.clearInterval(timer);
+                    }
+
+                    timer = window.setInterval(() => {
+                        prop.command.bind(element)();
+                    }, prop.interval);
+
+                } else if (timer) {
+                    window.clearInterval(timer);
+                }
+            };
+
+            ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                if (timer) {
+                    window.clearInterval(timer);
+                }
+            });
+        }
+    }
+};

src/Samples/Common/ViewModels/ControlSamples/Timer/TimerViewModel.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using DotVVM.Framework.ViewModel;
+using DotVVM.Framework.Hosting;
+
+namespace DotVVM.Samples.Common.ViewModels.ControlSamples.Timer
+{
+    public class TimerViewModel : DotvvmViewModelBase
+    {
+        public int Value1 { get; set; }
+        public int Value2 { get; set; }
+        public int Value3 { get; set; }
+
+        public bool Enabled1 { get; set; } = true;
+        public bool Enabled2 { get; set; } 
+    }
+}
+

src/Samples/Common/Views/ControlSamples/Timer/Timer.dothtml

@@ -0,0 +1,50 @@
+@viewModel DotVVM.Samples.Common.ViewModels.ControlSamples.Timer.TimerViewModel, DotVVM.Samples.Common
+
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+
+    <h1>Timer</h1>
+
+    <div>
+        <h2>Timer 1 - enabled from the start</h2>
+        <p>
+            Value: <span data-ui="value1">{{value: Value1}}</span>
+        </p>
+        <p>
+            <dot:CheckBox data-ui="enabled1" Checked="{value: Enabled1}" Text="Timer enabled" />
+        </p>
+
+        <dot:Timer Interval="1000" Command="{command: Value1 = Value1 + 1}" Enabled="{value: Enabled1}" />
+    </div>
+
+    <div>
+        <h2>Timer 2 - disabled from the start</h2>
+        <p>
+            Value: <span data-ui="value2">{{value: Value2}}</span>
+        </p>
+        <p>
+            <dot:CheckBox data-ui="enabled2" Checked="{value: Enabled2}" Text="Timer enabled" />
+        </p>
+
+        <dot:Timer Interval="2000" Command="{command: Value2 = Value2 + 1}" Enabled="{value: Enabled2}" />
+    </div>
+
+    <div>
+        <h2>Timer 3 - without Enabled property</h2>
+        <p>
+            Value: <span data-ui="value3">{{value: Value3}}</span>
+        </p>
+
+        <dot:Timer Interval="3000" Command="{command: Value3 = Value3 + 1}" />
+    </div>
+
+</body>
+</html>
+
+

src/Samples/Tests/Tests/Control/TimerTests.cs

@@ -0,0 +1,102 @@
+using System;
+using DotVVM.Samples.Tests.Base;
+using Riganti.Selenium.Core;
+using DotVVM.Testing.Abstractions;
+using Xunit;
+using Xunit.Abstractions;
+using OpenQA.Selenium.Interactions;
+using OpenQA.Selenium;
+using Riganti.Selenium.Core.Abstractions;
+
+namespace DotVVM.Samples.Tests.Control
+{
+    public class TimerTests : AppSeleniumTest
+    {
+        public TimerTests(ITestOutputHelper output) : base(output)
+        {
+        }
+
+        [Fact]
+        public void Control_Timer_Timer_Timer1()
+        {
+            RunInAllBrowsers(browser => {
+                browser.NavigateToUrl(SamplesRouteUrls.ControlSamples_Timer_Timer);
+
+                var value = browser.Single("[data-ui=value1]");
+
+                // ensure the first timer is running
+                Assert.True(EqualsWithTolerance(0, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(3, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(6, int.Parse(value.GetInnerText()), 1));
+
+                // stop the first timer
+                browser.Single("[data-ui=enabled1]").Click();
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(6, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(6, int.Parse(value.GetInnerText()), 1));
+
+                // restart the timer
+                browser.Single("[data-ui=enabled1]").Click();
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(9, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(12, int.Parse(value.GetInnerText()), 1));
+            });
+        }
+
+        [Fact]
+        public void Control_Timer_Timer_Timer2()
+        {
+            RunInAllBrowsers(browser => {
+                browser.NavigateToUrl(SamplesRouteUrls.ControlSamples_Timer_Timer);
+
+                var value = browser.Single("[data-ui=value2]");
+
+                // ensure the timer is not running
+                Assert.True(EqualsWithTolerance(0, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(0, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(0, int.Parse(value.GetInnerText()), 1));
+
+                // start the second timer
+                browser.Single("[data-ui=enabled2]").Click();
+                browser.Wait(4000);
+                Assert.True(EqualsWithTolerance(2, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(4000);
+                Assert.True(EqualsWithTolerance(4, int.Parse(value.GetInnerText()), 1));
+
+                // stop the second timer
+                browser.Single("[data-ui=enabled2]").Click();
+                browser.Wait(4000);
+                Assert.True(EqualsWithTolerance(4, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(4000);
+                Assert.True(EqualsWithTolerance(4, int.Parse(value.GetInnerText()), 1));
+            });
+        }
+
+
+        [Fact]
+        public void Control_Timer_Timer_Timer3()
+        {
+            RunInAllBrowsers(browser => {
+                browser.NavigateToUrl(SamplesRouteUrls.ControlSamples_Timer_Timer);
+
+                var value = browser.Single("[data-ui=value3]");
+
+                // ensure the timer is running
+                Assert.True(EqualsWithTolerance(0, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(1, int.Parse(value.GetInnerText()), 1));
+                browser.Wait(3000);
+                Assert.True(EqualsWithTolerance(2, int.Parse(value.GetInnerText()), 1));
+            });
+        }
+
+        private static bool EqualsWithTolerance(int expected, int actual, int tolerance)
+            => Math.Abs(expected - actual) <= tolerance;
+    }
+}

src/Tests/Runtime/config-tests/ConfigurationSerializationTests.SerializeDefaultConfig.json

@@ -1629,6 +1629,22 @@
         "onlyHardcoded": true
       }
     },
+    "DotVVM.Framework.Controls.Timer": {
+      "Command": {
+        "type": "DotVVM.Framework.Binding.Expressions.ICommandBinding, DotVVM.Framework",
+        "required": true,
+        "onlyBindings": true
+      },
+      "Enabled": {
+        "type": "System.Boolean",
+        "defaultValue": true
+      },
+      "Interval": {
+        "type": "System.Int32",
+        "defaultValue": 30000,
+        "onlyHardcoded": true
+      }
+    },
     "DotVVM.Framework.Controls.UITests": {
       "GenerateStub": {
         "type": "System.Boolean",
@@ -2327,6 +2343,9 @@
       "baseType": "DotVVM.Framework.Controls.HtmlGenericControl, DotVVM.Framework",
       "withoutContent": true
     },
+    "DotVVM.Framework.Controls.Timer": {
+      "baseType": "DotVVM.Framework.Controls.DotvvmControl, DotVVM.Framework"
+    },
     "DotVVM.Framework.Controls.UpdateProgress": {
       "baseType": "DotVVM.Framework.Controls.HtmlGenericControl, DotVVM.Framework"
     },