router: add countdown timer for next route-update cycle

router/route-web-api.py

@@ -271,7 +271,7 @@ HTML_PAGE = """\
     <div id="list-direct"></div>
   </div>
 </div>
-<p class="note">Изменения применятся в течение 5 минут · <a href="/swagger">API docs</a></p>
+<p class="note"><span id="countdown">Изменения применятся в течение 5 минут</span> · <a href="/swagger">API docs</a></p>
 <script>
 const $ = id => document.getElementById(id);
 
@@ -388,13 +388,40 @@ $('domain').addEventListener('keydown', e => {
 });
 
 refresh();
-fetch('/api/active').then(r=>r.json()).then(d=>{
-  if(d.updated){
-    const ts=new Date(d.updated*1000);
-    document.querySelector('.note').insertAdjacentHTML('beforeend',
-      ' · правила применены '+ts.toLocaleString('ru'));
+
+(function(){
+  const INTERVAL = 300;
+  const el = $('countdown');
+  let nextUpdate = null;
+
+  function fmt(sec) {
+    const m = Math.floor(sec / 60), s = sec % 60;
+    return m > 0 ? m + ' мин ' + (s > 0 ? s + ' сек' : '') : s + ' сек';
+  }
+
+  function tick() {
+    if (!nextUpdate) return;
+    const left = Math.round((nextUpdate - Date.now()) / 1000);
+    if (left > 0) {
+      el.textContent = 'Применение через ' + fmt(left);
+    } else {
+      el.textContent = 'Применение сейчас\u2026';
+      setTimeout(poll, 10000);
+    }
   }
-}).catch(()=>{});
+
+  function poll() {
+    fetch('/api/active').then(r => r.json()).then(d => {
+      if (d.updated) nextUpdate = (d.updated + INTERVAL) * 1000;
+      tick();
+    }).catch(() => {
+      el.textContent = 'Изменения применятся в течение 5 минут';
+    });
+  }
+
+  poll();
+  setInterval(tick, 1000);
+})();
 </script>
 </body>
 </html>