Merge pull request #1902 from riganti/feature/timer

Timer control added

Author: tomasherceg

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, Required = true)]
+        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,46 @@
+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;
+
+            const observable = ko.isObservable(prop.enabled) ? prop.enabled : ko.pureComputed(() => ko.unwrap(valueAccessor().enabled));
+            const subscription = observable.subscribe(newValue => createOrDestroyTimer(newValue));
+            createOrDestroyTimer(ko.unwrap(prop.enabled));
+
+            function createOrDestroyTimer(enabled: boolean) {
+                if (enabled) {
+                    if (timer) {
+                        window.clearTimeout(timer);
+                    }
+
+                    const callback = async () => {
+                        try {
+                            await prop.command.bind(element)();
+                        } catch (err) {
+                            dotvvm.log.logError("postback", err);
+                        }
+                        timer = window.setTimeout(callback, prop.interval);
+                    };
+                    timer = window.setTimeout(callback, prop.interval);
+
+                } else if (timer) {
+                    window.clearTimeout(timer);
+                }
+            };
+
+            ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                subscription.dispose();
+                createOrDestroyTimer(false);
+            });
+        }
+    }
+};

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

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading;
+using System.Threading.Tasks;
+using DotVVM.Framework.ViewModel;
+using DotVVM.Framework.Hosting;
+
+namespace DotVVM.Samples.Common.ViewModels.ControlSamples.Timer
+{
+	public class LongCommandViewModel : DotvvmViewModelBase
+	{
+		public int Value { get; set; }
+
+        public async Task LongCommand()
+        {
+            await Task.Delay(3000);
+            Value++;
+        }
+	}
+}
+

src/Samples/Common/ViewModels/ControlSamples/Timer/RemovalViewModel.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 RemovalViewModel : DotvvmViewModelBase
+    {
+        public bool Disabled { get; set; } = false;
+
+        public int Value { get; set; }
+
+        public bool IsRemoved { get; set; } = false;
+
+    }
+}
+

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/LongCommand.dothtml

@@ -0,0 +1,20 @@
+@viewModel DotVVM.Samples.Common.ViewModels.ControlSamples.Timer.LongCommandViewModel, 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 with long command</h1>
+
+    <p class="result">{{value: Value}}</p>
+    <dot:Timer Command="{command: LongCommand()}" Interval="1000" />
+
+</body>
+</html>
+
+

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

@@ -0,0 +1,23 @@
+@viewModel DotVVM.Samples.Common.ViewModels.ControlSamples.Timer.RemovalViewModel, 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>Making sure that removing timer disposes the callback</h1>
+
+    <p class="result">{{value: Value}}</p>
+    <dot:CheckBox Text="Disabled" data-ui="disabled" Checked="{value: Disabled}" />
+    
+    <dot:Timer Command="{staticCommand: Value = Value + 1}" Interval="1000" Enabled="{value: !Disabled}"
+               IncludeInPage="{value: !IsRemoved}"/>
+    <dot:Button Text="Remove timer from DOM" data-ui="remove" Click="{staticCommand: IsRemoved = true}" />
+
+</body>
+</html>
+
+

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>
+
+