added sortable columns in docker plugin

7 files changed, 178 insertions, 95 deletions

diff --git a/glances/outputs/static/js/App.vue b/glances/outputs/static/js/App.vue
index f80d50a1..7911fdc8 100644
--- a/glances/outputs/static/js/App.vue
+++ b/glances/outputs/static/js/App.vue
@@ -234,6 +234,41 @@ export default {
     },
     methods: {
         setupHotKeys() {
+            // a => Sort processes/docker automatically
+            hotkeys('a', () => {
+                this.store.args.sort_processes_key = null;
+            });
+
+            // c => Sort processes/docker by CPU%
+            hotkeys('c', () => {
+                this.store.args.sort_processes_key = 'cpu_percent';
+            });
+
+            // m => Sort processes/docker by MEM%
+            hotkeys('m', () => {
+                this.store.args.sort_processes_key = 'memory_percent';
+            });
+
+            // u => Sort processes/docker by user
+            hotkeys('u', () => {
+                this.store.args.sort_processes_key = 'username';
+            });
+
+            // p => Sort processes/docker by name
+            hotkeys('p', () => {
+                this.store.args.sort_processes_key = 'name';
+            });
+
+            // i => Sort processes/docker by I/O rate
+            hotkeys('i', () => {
+                this.store.args.sort_processes_key = 'io_counters';
+            });
+
+            // t => Sort processes/docker by time
+            hotkeys('t', () => {
+                this.store.args.sort_processes_key = 'timemillis';
+            });
+        
             // A => Enable/disable AMPs
             hotkeys('shift+A', () => {
                 this.store.args.disable_amps = !this.store.args.disable_amps;
diff --git a/glances/outputs/static/js/components/plugin-docker.vue b/glances/outputs/static/js/components/plugin-docker.vue
index aa6bb6e1..de3468ab 100644
--- a/glances/outputs/static/js/components/plugin-docker.vue
+++ b/glances/outputs/static/js/components/plugin-docker.vue
@@ -1,14 +1,32 @@
 <template>
     <section id="containers-plugin" class="plugin" v-if="containers.length">
         <span class="title">CONTAINERS</span>
-        {{ containers.length }} (served by Docker {{ version }})
+        {{ containers.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}
         <div class="table">
             <div class="table-row">
-                <div class="table-cell text-left">Name</div>
+                <div
+                    class="table-cell text-left"
+                    :class="['sortable', sorter.column === 'name' && 'sort']"
+                    @click="args.sort_processes_key = 'name'"
+                >
+                    Name
+                </div>
                 <div class="table-cell">Status</div>
                 <div class="table-cell">Uptime</div>
-                <div class="table-cell">CPU%</div>
-                <div class="table-cell">MEM</div>
+                <div
+                    class="table-cell"
+                    :class="['sortable', sorter.column === 'cpu_percent' && 'sort']"
+                    @click="args.sort_processes_key = 'cpu_percent'"
+                >
+                    CPU%
+                </div>
+                <div
+                    class="table-cell"
+                    :class="['sortable', sorter.column === 'memory_percent' && 'sort']"
+                    @click="args.sort_processes_key = 'memory_percent'"
+                >
+                    MEM
+                </div>
                 <div class="table-cell">/MAX</div>
                 <div class="table-cell">IOR/s</div>
                 <div class="table-cell">IOW/s</div>
@@ -29,10 +47,10 @@
                     {{ container.uptime }}
                 </div>
                 <div class="table-cell">
-                    {{ $filters.number(container.cpu, 1) }}
+                    {{ $filters.number(container.cpu_percent, 1) }}
                 </div>
                 <div class="table-cell">
-                    {{ $filters.bytes(container.memory) }}
+                    {{ $filters.bytes(container.memory_usage) }}
                 </div>
                 <div class="table-cell">
                     {{ $filters.bytes(container.limit) }}
@@ -58,26 +76,42 @@
 </template>
 
 <script>
+import { orderBy } from 'lodash';
+import { store } from '../store.js';
+
 export default {
     props: {
         data: {
             type: Object
         }
     },
+    data() {
+        return {
+            store,
+            sorter: undefined
+        };
+    },
     computed: {
+        args() {
+            return this.store.args || {};
+        },
+        sortProcessesKey() {
+            return this.args.sort_processes_key;
+        },
         stats() {
             return this.data.stats['docker'];
         },
         containers() {
-            return (this.stats.containers || []).map((containerData) => {
+            const { sorter } = this;
+            const containers = (this.stats.containers || []).map((containerData) => {
                 // prettier-ignore
                 return {
                     'id': containerData.Id,
                     'name': containerData.name,
                     'status': containerData.Status,
                     'uptime': containerData.Uptime,
-                    'cpu': containerData.cpu.total,
-                    'memory': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
+                    'cpu_percent': containerData.cpu.total,
+                    'memory_usage': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
                     'limit': containerData.memory.limit != undefined ? containerData.memory.limit : '?',
                     'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
                     'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
@@ -87,11 +121,48 @@ export default {
                     'net_time_since_update': containerData.network.time_since_update,
                     'command': containerData.Command.join(' '),
                     'image': containerData.Image
-            };
+                };
             });
-        },
-        version() {
-            return (this.stats['version'] || {})['Version'];
+            return orderBy(
+                containers,
+                [sorter.column].reduce((retval, col) => {
+                    if (col === 'memory_percent') {
+                        col = ['memory_usage'];
+                    }
+                    return retval.concat(col);
+                }, []),
+                [sorter.isReverseColumn(sorter.column) ? 'desc' : 'asc']
+            );
+        }
+    },
+    watch: {
+        sortProcessesKey: {
+            immediate: true,
+            handler(sortProcessesKey) {
+                const sortable = ['cpu_percent', 'memory_percent', 'name'];
+                function isReverseColumn(column) {
+                    return !['name'].includes(column);
+                }
+                function getColumnLabel(value) {
+                    const labels = {
+                        io_counters: 'disk IO',
+                        cpu_percent: 'CPU consumption',
+                        memory_usage: 'memory consumption',
+                        cpu_times: 'uptime',
+                        name: 'container name',
+                        None: 'None'
+                    };
+                    return labels[value] || value;
+                }
+                if (!sortProcessesKey || sortable.includes(sortProcessesKey)) {
+                    this.sorter = {
+                        column: this.args.sort_processes_key || 'cpu_percent',
+                        auto: !this.args.sort_processes_key,
+                        isReverseColumn,
+                        getColumnLabel
+                    };
+                }
+            }
         }
     }
 };
diff --git a/glances/outputs/static/js/components/plugin-ports.vue b/glances/outputs/static/js/components/plugin-ports.vue
index 4156189a..c2801c6a 100644
--- a/glances/outputs/static/js/components/plugin-ports.vue
+++ b/glances/outputs/static/js/components/plugin-ports.vue
@@ -10,7 +10,7 @@
                 <span v-if="port.status == 'null'">Scanning</span>
                 <span v-else-if="port.status == 'false'">Timeout</span>
                 <span v-else-if="port.status == 'true'">Open</span>
-                <span v-else> {{ $filters.number(numberport.status * 1000.0, 0) }}ms </span>
+                <span v-else>{{ $filters.number(port.status * 1000.0, 0) }}ms</span>
             </div>
             <div :class="getWebDecoration(port)" class="table-cell" v-if="port.url">
                 <span v-if="port.status == 'null'">Scanning</span>
diff --git a/glances/outputs/static/js/components/plugin-process.vue b/glances/outputs/static/js/components/plugin-process.vue
index 6301500d..36cf2500 100644
--- a/glances/outputs/static/js/components/plugin-process.vue
+++ b/glances/outputs/static/js/components/plugin-process.vue
@@ -10,13 +10,12 @@
         <glances-plugin-processlist
             :sorter="sorter"
             :data="data"
-            @update:sorter="sorter.column = $event"
+            @update:sorter="args.sort_processes_key = $event"
         ></glances-plugin-processlist>
     </div>
 </template>
 
 <script>
-import hotkeys from 'hotkeys-js';
 import { store } from '../store.js';
 import GlancesPluginAmps from './plugin-amps.vue';
 import GlancesPluginProcesscount from './plugin-processcount.vue';
@@ -36,83 +35,56 @@ export default {
     data() {
         return {
             store,
-            sorter: {
-                column: 'cpu_percent',
-                auto: true,
-                isReverseColumn(column) {
-                    return !(column === 'username' || column === 'name');
-                },
-                getColumnLabel(column) {
-                    if (column === 'io_read' || column === 'io_write') {
-                        return 'io_counters';
-                    } else {
-                        return column;
-                    }
-                }
-            }
+            sorter: undefined
         };
     },
     computed: {
         args() {
             return this.store.args || {};
+        },
+        sortProcessesKey() {
+            return this.args.sort_processes_key;
         }
     },
-    methods: {
-        setupHotKeys() {
-            // a => Sort processes automatically
-            hotkeys('a', () => {
-                this.sorter.column = 'cpu_percent';
-                this.sorter.auto = true;
-            });
-
-            // c => Sort processes by CPU%
-            hotkeys('c', () => {
-                this.sorter.column = 'cpu_percent';
-                this.sorter.auto = false;
-            });
-
-            // m => Sort processes by MEM%
-            hotkeys('m', () => {
-                this.sorter.column = 'memory_percent';
-                this.sorter.auto = false;
-            });
-
-            // u => Sort processes by user
-            hotkeys('u', () => {
-                this.sorter.column = 'username';
-                this.sorter.auto = false;
-            });
-
-            // p => Sort processes by name
-            hotkeys('p', () => {
-                this.sorter.column = 'name';
-                this.sorter.auto = false;
-            });
-
-            // i => Sort processes by I/O rate
-            hotkeys('i', () => {
-                this.sorter.column = ['io_read', 'io_write'];
-                this.sorter.auto = false;
-            });
-
-            // t => Sort processes by time
-            hotkeys('t', () => {
-                this.sorter.column = 'timemillis';
-                this.sorter.auto = false;
-            });
+    watch: {
+        sortProcessesKey: {
+            immediate: true,
+            handler(sortProcessesKey) {
+                const sortable = [
+                    'cpu_percent',
+                    'memory_percent',
+                    'username',
+                    'timemillis',
+                    'num_threads',
+                    'io_counters',
+                    'name'
+                ];
+                function isReverseColumn(column) {
+                    return !['username', 'name'].includes(column);
+                }
+                function getColumnLabel(value) {
+                    const labels = {
+                        io_counters: 'disk IO',
+                        cpu_percent: 'CPU consumption',
+                        memory_percent: 'memory consumption',
+                        cpu_times: 'process time',
+                        username: 'user name',
+                        name: 'process name',
+                        timemillis: 'process time',
+                        None: 'None'
+                    };
+                    return labels[value] || value;
+                }
+                if (!sortProcessesKey || sortable.includes(sortProcessesKey)) {
+                    this.sorter = {
+                        column: this.args.sort_processes_key || 'cpu_percent',
+                        auto: !this.args.sort_processes_key,
+                        isReverseColumn,
+                        getColumnLabel
+                    };
+                }
+            }
         }
-    },
-    mounted() {
-        this.setupHotKeys();
-    },
-    beforeUnmount() {
-        hotkeys.unbind('a');
-        hotkeys.unbind('c');
-        hotkeys.unbind('m');
-        hotkeys.unbind('u');
-        hotkeys.unbind('p');
-        hotkeys.unbind('i');
-        hotkeys.unbind('t');
     }
 };
 </script>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-processcount.vue b/glances/outputs/static/js/components/plugin-processcount.vue
index 08d8ae6c..a331ef87 100644
--- a/glances/outputs/static/js/components/plugin-processcount.vue
+++ b/glances/outputs/static/js/components/plugin-processcount.vue
@@ -5,7 +5,7 @@
         <span>{{ running }} run,</span>
         <span>{{ sleeping }} slp,</span>
         <span>{{ stopped }} oth</span>
-        <span class="title">sorted {{ sorter.auto ? 'automatically' : '' }}</span>
+        <span class="title">{{ sorter.auto ? 'sorted automatically' : 'sorted' }}</span>
         <span>by {{ sorter.getColumnLabel(sorter.column) }}</span>
     </section>
 </template>
diff --git a/glances/outputs/static/js/components/plugin-processlist.vue b/glances/outputs/static/js/components/plugin-processlist.vue
index 47ec71c1..6b52b96b 100644
--- a/glances/outputs/static/js/components/plugin-processlist.vue
+++ b/glances/outputs/static/js/components/plugin-processlist.vue
@@ -46,16 +46,16 @@
                 <div
                     v-show="ioReadWritePresent"
                     class="table-cell hidden-xs hidden-sm"
-                    :class="['sortable', sorter.column === 'io_read' && 'sort']"
-                    @click="$emit('update:sorter', 'io_read')"
+                    :class="['sortable', sorter.column === 'io_counters' && 'sort']"
+                    @click="$emit('update:sorter', 'io_counters')"
                 >
                     IOR/s
                 </div>
                 <div
                     v-show="ioReadWritePresent"
                     class="table-cell text-left hidden-xs hidden-sm"
-                    :class="['sortable', sorter.column === 'io_write' && 'sort']"
-                    @click="$emit('update:sorter', 'io_write')"
+                    :class="['sortable', sorter.column === 'io_counters' && 'sort']"
+                    @click="$emit('update:sorter', 'io_counters')"
                 >
                     IOW/s
                 </div>
@@ -215,7 +215,12 @@ export default {
 
             return orderBy(
                 processes,
-                [sorter.column],
+                [sorter.column].reduce((retval, col) => {
+                    if (col === 'io_counters') {
+                        col = ['io_read', 'io_write']
+                    }
+                    return retval.concat(col);
+                }, []),
                 [sorter.isReverseColumn(sorter.column) ? 'desc' : 'asc']
             ).slice(0, this.limit);
         },
diff --git a/glances/outputs/static/public/glances.js b/glances/outputs/static/public/glances.js
index 65dec620..e5fb4e2e 100644
--- a/glances/outputs/static/public/glances.js
+++ b/glances/outputs/static/public/glances.js
@@ -4,7 +4,7 @@
  * @fileOverview Favico animations
  * @author Miroslav Magda, http://blog.ejci.net
  * @version 0.3.10
- */r=function(t){"use strict";t=t||{};var e,n,r,i,s,o,a,l,c,u,d,f,p,h,g,m,b={bgColor:"#d00",textColor:"#fff",fontFamily:"sans-serif",fontStyle:"bold",type:"circle",position:"down",animation:"slide",elementId:!1,dataUrl:!1,win:window};(p={}).ff="undefined"!=typeof InstallTrigger,p.chrome=!!window.chrome,p.opera=!!window.opera||navigator.userAgent.indexOf("Opera")>=0,p.ie=/*@cc_on!@*/!1,p.safari=Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor")>0,p.supported=p.chrome||p.ff||p.opera;var v=[];d=function(){},l=f=!1;var y={ready:function(){l=!0,y.reset(),d()},reset:function(){l&&(v=[],c=!1,u=!1,o.clearRect(0,0,i,r),o.drawImage(a,0,0,i,r),k.setIcon(s),window.clearTimeout(h),window.clearTimeout(g))},start:function(){if(l&&!u&&v.length>0){u=!0;var t=function(){["type","animation","bgColor","textColor","fontFamily","fontStyle"].forEach((function(t){t in v[0].options&&(e[t]=v[0].options[t])})),T.run(v[0].options,(function(){c=v[0],u=!1,v.length>0&&(v.shift(),y.start())}),!1)};c?T.run(c.options,(function(){t()}),!0):t()}}},w={},_=function(t){return t.n="number"==typeof t.n?Math.abs(0|t.n):t.n,t.x=i*t.x,t.y=r*t.y,t.w=i*t.w,t.h=r*t.h,t.len=(""+t.n).length,t};function x(t){if(t.paused||t.ended||f)return!1;try{o.clearRect(0,0,i,r),o.drawImage(t,0,0,i,r)}catch(t){}g=setTimeout((function(){x(t)}),T.duration),k.setIcon(s)}w.circle=function(t){var n=!1;2===(t=_(t)).len?(t.x=t.x-.4*t.w,t.w=1.4*t.w,n=!0):t.len>=3&&(t.x=t.x-.65*t.w,t.w=1.65*t.w,n=!0),o.clearRect(0,0,i,r),o.drawImage(a,0,0,i,r),o.beginPath(),o.font=e.fontStyle+" "+Math.floor(t.h*(t.n>99?.85:1))+"px "+e.fontFamily,o.textAlign="center",n?(o.moveTo(t.x+t.w/2,t.y),o.lineTo(t.x+t.w-t.h/2,t.y),o.quadraticCurveTo(t.x+t.w,t.y,t.x+t.w,t.y+t.h/2),o.lineTo(t.x+t.w,t.y+t.h-t.h/2),o.quadraticCurveTo(t.x+t.w,t.y+t.h,t.x+t.w-t.h/2,t.y+t.h),o.lineTo(t.x+t.h/2,t.y+t.h),o.quadraticCurveTo(t.x,t.y+t.h,t.x,t.y+t.h-t.h/2),o.lineTo(t.x,t.y+t.h/2),o.quadraticCurveTo(t.x,t.y,t.x+t.h/2,t.y)):o.arc(t.x+t.w/2,t.y+t.h/2,t.h/2,0,2*Math.PI),o.fillStyle="rgba("+e.bgColor.r+","+e.bgColor.g+","+e.bgColor.b+","+t.o+")",o.fill(),o.closePath(),o.beginPath(),o.stroke(),o.fillStyle="rgba("+e.textColor.r+","+e.textColor.g+","+e.textColor.b+","+t.o+")","number"==typeof t.n&&t.n>999?o.fillText((t.n>9999?9:Math.floor(t.n/1e3))+"k+",Math.floor(t.x+t.w/2),Math.floor(t.y+t.h-.2*t.h)):o.fillText(t.n,Math.floor(t.x+t.w/2),Math.floor(t.y+t.h-.15*t.h)),o.closePath()},w.rectangle=function(t){2===(t=_(t)).len?(t.x=t.x-.4*t.w,t.w=1.4*t.w):t.len>=3&&(t.x=t.x-.65*t.w,t.w=1.65*t.w),o.clearRect(0,0,i,r),o.drawImage(a,0,0,i,r),o.beginPath(),o.font=e.fontStyle+" "+Math.floor(t.h*(t.n>99?.9:1))+"px "+e.fontFamily,o.textAlign="center",o.fillStyle="rgba("+e.bgColor.r+","+e.bgColor.g+","+e.bgColor.b+","+t.o+")",o.fillRect(t.x,t.y,t.w,t.h),o.fillStyle="rgba("+e.textColor.r+","+e.textColor.g+","+e.textColor.b+","+t.o+")","number"==typeof t.n&&t.n>999?o.fillText((t.n>9999?9:Math.floor(t.n/1e3))+"k+",Math.floor(t.x+t.w/2),Math.floor(t.y+t.h-.2*t.h)):o.fillText(t.n,Math.floor(t.x+t.w/2),Math.floor(t.y+t.h-.15*t.h)),o.closePath()};var k={};function C(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return!!e&&{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}}function S(t,e){var n,r={};for(n in t)r[n]=t[n];for(n in e)r[n]=e[n];return r}k.getIcon=function(){var t=!1;return e.element?t=e.element:e.elementId?(t=m.getElementById(e.elementId)).setAttribute("href",t.getAttribute("src")):(t=function(){for(var t=m.getElementsByTagName("head")[0].getElementsByTagName("link"),e=t.length-1;e>=0;e--)if(/(^|\s)icon(\s|$)/i.test(t[e].getAttribute("rel")))return t[e];return!1}(),!1===t&&((t=m.createElement("link")).setAttribute("rel","icon"),m.getElementsByTagName("head")[0].appendChild(t))),t.setAttribute("type","image/png"),t},k.setIcon=function(t){var r=t.toDataURL("image/png");if(e.dataUrl&&e.dataUrl(r),e.element)e.element.setAttribute("href",r),e.element.setAttribute("src",r);else if(e.elementId){var i=m.getElementById(e.elementId);i.setAttribute("href",r),i.setAttribute("src",r)}else if(p.ff||p.opera){var s=n;n=m.createElement("link"),p.opera&&n.setAttribute("rel","icon"),n.setAttribute("rel","icon"),n.setAttribute("type","image/png"),m.getElementsByTagName("head")[0].appendChild(n),n.setAttribute("href",r),s.parentNode&&s.parentNode.removeChild(s)}else n.setAttribute("href",r)};var T={duration:40,types:{}};return T.types.fade=[{x:.4,y:.4,w:.6,h:.6,o:0},{x:.4,y:.4,w:.6,h:.6,o:.1},{x:.4,y:.4,w:.6,h:.6,o:.2},{x:.4,y:.4,w:.6,h:.6,o:.3},{x:.4,y:.4,w:.6,h:.6,o:.4},{x:.4,y:.4,w:.6,h:.6,o:.5},{x:.4,y:.4,w:.6,h:.6,o:.6},{x:.4,y:.4,w:.6,h:.6,o:.7},{x:.4,y:.4,w:.6,h:.6,o:.8},{x:.4,y:.4,w:.6,h:.6,o:.9},{x:.4,y:.4,w:.6,h:.6,o:1}],T.types.none=[{x:.4,y:.4,w:.6,h:.6,o:1}],T.types.pop=[{x:1,y:1,w:0,h:0,o:1},{x:.9,y:.9,w:.1,h:.1,o:1},{x:.8,y:.8,w:.2,h:.2,o:1},{x:.7,y:.7,w:.3,h:.3,o:1},{x:.6,y:.6,w:.4,h:.4,o:1},{x:.5,y:.5,w:.5,h:.5,o:1},{x:.4,y:.4,w:.6,h:.6,o:1}],T.types.popFade=[{x:.75,y:.75,w:0,h:0,o:0},{x:.65,y:.65,w:.1,h:.1,o:.2},{x:.6,y:.6,w:.2,h:.2,o:.4},{x:.55,y:.55,w:.3,h:.3,o:.6},{x:.5,y:.5,w:.4,h:.4,o:.8},{x:.45,y:.45,w:.5,h:.5,o:.9},{x:.4,y:.4,w:.6,h:.6,o:1}],T.types.slide=[{x:.4,y:1,w:.6,h:.6,o:1},{x:.4,y:.9,w:.6,h:.6,o:1},{x:.4,y:.9,w:.6,h:.6,o:1},{x:.4,y:.8,w:.6,h:.6,o:1},{x:.4,y:.7,w:.6,h:.6,o:1},{x:.4,y:.6,w:.6,h:.6,o:1},{x:.4,y:.5,w:.6,h:.6,o:1},{x:.4,y:.4,w:.6,h:.6,o:1}],T.run=function(t,n,r,i){var o=T.types[m.hidden||m.msHidden||m.webkitHidden||m.mozHidden?"none":e.animation];i=!0===r?void 0!==i?i:o.length-1:void 0!==i?i:0,n=n||function(){},i<o.length&&i>=0?(w[e.type](S(t,o[i])),h=setTimeout((function(){r?i-=1:i+=1,T.run(t,n,r,i)}),T.duration),k.setIcon(s)):n()},function(){(e=S(b,t)).bgColor=C(e.bgColor),e.textColor=C(e.textColor),e.position=e.position.toLowerCase(),e.animation=T.types[""+e.animation]?e.animation:b.animation,m=e.win.document;var l=e.position.indexOf("up")>-1,c=e.position.indexOf("left")>-1;if(l||c)for(var u=0;u<T.types[""+e.animation].length;u++){var d=T.types[""+e.animation][u];l&&(d.y<.6?d.y=d.y-.4:d.y=d.y-2*d.y+(1-d.w)),c&&(d.x<.6?d.x=d.x-.4:d.x=d.x-2*d.x+(1-d.h)),T.types[""+e.animation][u]=d}e.type=w[""+e.type]?e.type:b.type,n=k.getIcon(),s=document.createElement("canvas"),a=document.createElement("img"),n.hasAttribute("href")?(a.setAttribute("crossOrigin","anonymous"),a.onload=function(){r=a.height>0?a.height:32,i=a.width>0?a.width:32,s.height=r,s.width=i,o=s.getContext("2d"),y.ready()},a.setAttribute("src",n.getAttribute("href"))):(a.onload=function(){r=32,i=32,a.height=r,a.width=i,s.height=r,s.width=i,o=s.getContext("2d"),y.ready()},a.setAttribute("src",""))}(),{badge:function(t,e){e=("string"==typeof e?{animation:e}:e)||{},d=function(){try{if("number"==typeof t?t>0:""!==t){var n={type:"badge",options:{n:t}};if("animation"in e&&T.types[""+e.animation]&&(n.options.animation=""+e.animation),"type"in e&&w[""+e.type]&&(n.options.type=""+e.type),["bgColor","textColor"].forEach((function(t){t in e&&(n.options[t]=C(e[t]))})),["fontStyle","fontFamily"].forEach((function(t){t in e&&(n.options[t]=e[t])})),v.push(n),v.length>100)throw new Error("Too many badges requests in queue.");y.start()}else y.reset()}catch(t){throw new Error("Error setting badge. Message: "+t.message)}},l&&d()},video:function(t){d=function(){try{if("stop"===t)return f=!0,y.reset(),void(f=!1);t.addEventListener("play",(function(){x(this)}),!1)}catch(t){throw new Error("Error setting video. Message: "+t.message)}},l&&d()},image:function(t){d=function(){try{var e=t.width,n=t.height,a=document.createElement("img"),l=e/i<n/r?e/i:n/r;a.setAttribute("crossOrigin","anonymous"),a.onload=function(){o.clearRect(0,0,i,r),o.drawImage(a,0,0,i,r),k.setIcon(s)},a.setAttribute("src",t.getAttribute("src")),a.height=n/l,a.width=e/l}catch(t){throw new Error("Error setting image. Message: "+t.message)}},l&&d()},webcam:function(t){if(window.URL&&window.URL.createObjectURL||(window.URL=window.URL||{},window.URL.createObjectURL=function(t){return t}),p.supported){var e=!1;navigator.getUserMedia=navigator.getUserMedia||navigator.oGetUserMedia||navigator.msGetUserMedia||navigator.mozGetUserMedia||navigator.webkitGetUserMedia,d=function(){try{if("stop"===t)return f=!0,y.reset(),void(f=!1);(e=document.createElement("video")).width=i,e.height=r,navigator.getUserMedia({video:!0,audio:!1},(function(t){e.src=URL.createObjectURL(t),e.play(),x(e)}),(function(){}))}catch(t){throw new Error("Error setting webcam. Message: "+t.message)}},l&&d()}},reset:y.reset,browser:{supported:p.supported}}},void 0===(n=function(){return r}.apply(e,[]))||(t.exports=n)},3870:function(t,e,n){"use strict";var r,i=this&&this.__extends||(r=function(t,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},r(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),s=this&&this.__createBinding||(Object.create?function(t,e,n,r){void 0===r&&(r=n),Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[n]}})}:function(t,e,n,r){void 0===r&&(r=n),t[r]=e[n]}),o=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),a=this&&this.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)"default"!==n&&Object.prototype.hasOwnProperty.call(t,n)&&s(e,t,n);return o(e,t),e},l=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.parseFeed=e.FeedHandler=void 0;var c,u,d=l(n(7915)),f=a(n(9432)),p=n(763);!function(t){t[t.image=0]="image",t[t.audio=1]="audio",t[t.video=2]="video",t[t.document=3]="document",t[t.executable=4]="executable"}(c||(c={})),function(t){t[t.sample=0]="sample",t[t.full=1]="full",t[t.nonstop=2]="nonstop"}(u||(u={}));var h=function(t){function e(e,n){return"object"==typeof e&&(n=e=void 0),t.call(this,e,n)||this}return i(e,t),e.prototype.onend=function(){var t,e,n=b(_,this.dom);if(n){var r={};if("feed"===n.name){var i=n.children;r.type="atom",w(r,"id","id",i),w(r,"title","title",i);var s=y("href",b("link",i));s&&(r.link=s),w(r,"description","subtitle",i),(o=v("updated",i))&&(r.updated=new Date(o)),w(r,"author","email",i,!0),r.items=m("entry",i).map((function(t){var e={},n=t.children;w(e,"id","id",n),w(e,"title","title",n);var r=y("href",b("link",n));r&&(e.link=r);var i=v("summary",n)||v("content",n);i&&(e.description=i);var s=v("updated",n);return s&&(e.pubDate=new Date(s)),e.media=g(n),e}))}else{var o;i=null!==(e=null===(t=b("channel",n.children))||void 0===t?void 0:t.children)&&void 0!==e?e:[];r.type=n.name.substr(0,3),r.id="",w(r,"title","title",i),w(r,"link","link",i),w(r,"description","description",i),(o=v("lastBuildDate",i))&&(r.updated=new Date(o)),w(r,"author","managingEditor",i,!0),r.items=m("item",n.children).map((function(t){var e={},n=t.children;w(e,"id","guid",n),w(e,"title","title",n),w(e,"link","link",n),w(e,"description","description",n);var r=v("pubDate",n);return r&&(e.pubDate=new Date(r)),e.media=g(n),e}))}this.feed=r,this.handleCallback(null)}else this.handleCallback(new Error("couldn't find root of feed"))},e}(d.default);function g(t){return m("media:content",t).map((function(t){var e={medium:t.attribs.medium,isDefault:!!t.attribs.isDefault};return t.attribs.url&&(e.url=t.attribs.url),t.attribs.fileSize&&(e.fileSize=parseInt(t.attribs.fileSize,10)),t.attribs.type&&(e.type=t.attribs.type),t.attribs.expression&&(e.expression=t.attribs.expression),t.attribs.bitrate&&(e.bitrate=parseInt(t.attribs.bitrate,10)),t.attribs.framerate&&(e.framerate=parseInt(t.attribs.framerate,10)),t.attribs.samplingrate&&(e.samplingrate=parseInt(t.attribs.samplingrate,10)),t.attribs.channels&&(e.channels=parseInt(t.attribs.channels,10)),t.attribs.duration&&(e.duration=parseInt(t.attribs.duration,10)),t.attribs.height&&(e.height=parseInt(t.attribs.height,10)),t.attribs.width&&(e.width=parseInt(t.attribs.width,10)),t.attribs.lang&&(e.lang=t.attribs.lang),e}))}function m(t,e){return f.getElementsByTagName(t,e,!0)}function b(t,e){return f.getElementsByTagName(t,e,!0,1)[0]}function v(t,e,n){return void 0===n&&(n=!1),f.getText(f.getElementsByTagName(t,e,n,1)).trim()}function y(t,e){return e?e.attribs[t]:null}function w(t,e,n,r,i){void 0===i&&(i=!1);var s=v(n,r,i);s&&(t[e]=s)}function _(t){return"rss"===t||"feed"===t||"rdf:RDF"===t}e.FeedHandler=h,e.parseFeed=function(t,e){void 0===e&&(e={xmlMode:!0});var n=new h(e);return new p.Parser(n,e).end(t),n.feed}},763:function(t,e,n){"use strict";var r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.Parser=void 0;var i=r(n(9889)),s=new Set(["input","option","optgroup","select","button","datalist","textarea"]),o=new Set(["p"]),a={tr:new Set(["tr","th","td"]),th:new Set(["th"]),td:new Set(["thead","th","td"]),body:new Set(["head","link","script"]),li:new Set(["li"]),p:o,h1:o,h2:o,h3:o,h4:o,h5:o,h6:o,select:s,input:s,output:s,button:s,datalist:s,textarea:s,option:new Set(["option"]),optgroup:new Set(["optgroup","option"]),dd:new Set(["dt","dd"]),dt:new Set(["dt","dd"]),address:o,article:o,aside:o,blockquote:o,details:o,div:o,dl:o,fieldset:o,figcaption:o,figure:o,footer:o,form:o,header:o,hr:o,main:o,nav:o,ol:o,pre:o,section:o,table:o,ul:o,rt:new Set(["rt","rp"]),rp:new Set(["rt","rp"]),tbody:new Set(["thead","tbody"]),tfoot:new Set(["thead","tbody"])},l=new Set(["area","base","basefont","br","col","command","embed","frame","hr","img","input","isindex","keygen","link","meta","param","source","track","wbr"]),c=new Set(["math","svg"]),u=new Set(["mi","mo","mn","ms","mtext","annotation-xml","foreignObject","desc","title"]),d=/\s|\//,f=function(){function t(t,e){var n,r,s,o,a;void 0===e&&(e={}),this.startIndex=0,this.endIndex=null,this.tagname="",this.attribname="",this.attribvalue="",this.attribs=null,this.stack=[],this.foreignContext=[],this.options=e,this.cbs=null!=t?t:{},this.lowerCaseTagNames=null!==(n=e.lowerCaseTags)&&void 0!==n?n:!e.xmlMode,this.lowerCaseAttributeNames=null!==(r=e.lowerCaseAttributeNames)&&void 0!==r?r:!e.xmlMode,this.tokenizer=new(null!==(s=e.Tokenizer)&&void 0!==s?s:i.default)(this.options,this),null===(a=(o=this.cbs).onparserinit)||void 0===a||a.call(o,this)}return t.prototype.updatePosition=function(t){null===this.endIndex?this.tokenizer.sectionStart<=t?this.startIndex=0:this.startIndex=this.tokenizer.sectionStart-t:this.startIndex=this.endIndex+1,this.endIndex=this.tokenizer.getAbsoluteIndex()},t.prototype.ontext=function(t){var e,n;this.updatePosition(1),this.endIndex--,null===(n=(e=this.cbs).ontext)||void 0===n||n.call(e,t)},t.prototype.onopentagname=function(t){var e,n;if(this.lowerCaseTagNames&&(t=t.toLowerCase()),this.tagname=t,!this.options.xmlMode&&Object.prototype.hasOwnProperty.call(a,t))for(var r=void 0;this.stack.length>0&&a[t].has(r=this.stack[this.stack.length-1]);)this.onclosetag(r);!this.options.xmlMode&&l.has(t)||(this.stack.push(t),c.has(t)?this.foreignContext.push(!0):u.has(t)&&this.foreignContext.push(!1)),null===(n=(e=this.cbs).onopentagname)||void 0===n||n.call(e,t),this.cbs.onopentag&&(this.attribs={})},t.prototype.onopentagend=function(){var t,e;this.updatePosition(1),this.attribs&&(null===(e=(t=this.cbs).onopentag)||void 0===e||e.call(t,this.tagname,this.attribs),this.attribs=null),!this.options.xmlMode&&this.cbs.onclosetag&&l.has(this.tagname)&&this.cbs.onclosetag(this.tagname),this.tagname=""},t.prototype.onclosetag=function(t){if(this.updatePosition(1),this.lowerCaseTagNames&&(t=t.toLowerCase()),(c.has(t)||u.has(t))&&this.foreignContext.pop(),!this.stack.length||!this.options.xmlMode&&l.has(t))this.options.xmlMode||"br"!==t&&"p"!==t||(this.onopentagname(t),this.closeCurrentTag());else{var e=this.stack.lastIndexOf(t);if(-1!==e)if(this.cbs.onclosetag)for(e=this.stack.length-e;e--;)this.cbs.onclosetag(this.stack.pop());else this.stack.length=e;else"p"!==t||this.options.xmlMode||(this.onopentagname(t),this.closeCurrentTag())}},t.prototype.onselfclosingtag=function(){this.options.xmlMode||this.options.recognizeSelfClosing||this.foreignContext[this.foreignContext.length-1]?this.closeCurrentTag():this.onopentagend()},t.prototype.closeCurrentTag=function(){var t,e,n=this.tagname;this.onopentagend(),this.stack[this.stack.length-1]===n&&(null===(e=(t=this.cbs).onclosetag)||void 0===e||e.call(t,n),this.stack.pop())},t.prototype.onattribname=function(t){this.lowerCaseAttributeNames&&(t=t.toLowerCase()),this.attribname=t},t.prototype.onattribdata=function(t){this.attribvalue+=t},t.prototype.onattribend=function(t){var e,n;null===(n=(e=this.cbs).onattribute)||void 0===n||n.call(e,this.attribname,this.attribvalue,t),this.attribs&&!Object.prototype.hasOwnProperty.call(this.attribs,this.attribname)&&(this.attribs[this.attribname]=this.attribvalue),this.attribname="",this.attribvalue=""},t.prototype.getInstructionName=function(t){var e=t.search(d),n=e<0?t:t.substr(0,e);return this.lowerCaseTagNames&&(n=n.toLowerCase()),n},t.prototype.ondeclaration=function(t){if(this.cbs.onprocessinginstruction){var e=this.getInstructionName(t);this.cbs.onprocessinginstruction("!"+e,"!"+t)}},t.prototype.onprocessinginstruction=function(t){if(this.cbs.onprocessinginstruction){var e=this.getInstructionName(t);this.cbs.onprocessinginstruction("?"+e,"?"+t)}},t.prototype.oncomment=function(t){var e,n,r,i;this.updatePosition(4),null===(n=(e=this.cbs).oncomment)||void 0===n||n.call(e,t),null===(i=(r=this.cbs).oncommentend)||void 0===i||i.call(r)},t.prototype.oncdata=function(t){var e,n,r,i,s,o;this.updatePosition(1),this.options.xmlMode||this.options.recognizeCDATA?(null===(n=(e=this.cbs).oncdatastart)||void 0===n||n.call(e),null===(i=(r=this.cbs).ontext)||void 0===i||i.call(r,t),null===(o=(s=this.cbs).oncdataend)||void 0===o||o.call(s)):this.oncomment("[CDATA["+t+"]]")},t.prototype.onerror=function(t){var e,n;null===(n=(e=this.cbs).onerror)||void 0===n||n.call(e,t)},t.prototype.onend=function(){var t,e;if(this.cbs.onclosetag)for(var n=this.stack.length;n>0;this.cbs.onclosetag(this.stack[--n]));null===(e=(t=this.cbs).onend)||void 0===e||e.call(t)},t.prototype.reset=function(){var t,e,n,r;null===(e=(t=this.cbs).onreset)||void 0===e||e.call(t),this.tokenizer.reset(),this.tagname="",this.attribname="",this.attribs=null,this.stack=[],null===(r=(n=this.cbs).onparserinit)||void 0===r||r.call(n,this)},t.prototype.parseComplete=function(t){this.reset(),this.end(t)},t.prototype.write=function(t){this.tokenizer.write(t)},t.prototype.end=function(t){this.tokenizer.end(t)},t.prototype.pause=function(){this.tokenizer.pause()},t.prototype.resume=function(){this.tokenizer.resume()},t.prototype.parseChunk=function(t){this.write(t)},t.prototype.done=function(t){this.end(t)},t}();e.Parser=f},9889:function(t,e,n){"use strict";var r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var i=r(n(26)),s=r(n(9323)),o=r(n(9591)),a=r(n(2586));function l(t){return" "===t||"\n"===t||"\t"===t||"\f"===t||"\r"===t}function c(t){return t>="a"&&t<="z"||t>="A"&&t<="Z"}function u(t,e,n){var r=t.toLowerCase();return t===r?function(t,i){i===r?t._state=e:(t._state=n,t._index--)}:function(i,s){s===r||s===t?i._state=e:(i._state=n,i._index--)}}function d(t,e){var n=t.toLowerCase();return function(r,i){i===n||i===t?r._state=e:(r._state=3,r._index--)}}var f=u("C",24,16),p=u("D",25,16),h=u("A",26,16),g=u("T",27,16),m=u("A",28,16),b=d("R",35),v=d("I",36),y=d("P",37),w=d("T",38),_=u("R",40,1),x=u("I",41,1),k=u("P",42,1),C=u("T",43,1),S=d("Y",45),T=d("L",46),A=d("E",47),O=u("Y",49,1),E=u("L",50,1),P=u("E",51,1),L=d("I",54),D=d("T",55),j=d("L",56),M=d("E",57),I=u("I",58,1),R=u("T",59,1),N=u("L",60,1),q=u("E",61,1),U=u("#",63,64),B=u("X",66,65),F=function(){function t(t,e){var n;this._state=1,this.buffer="",this.sectionStart=0,this._index=0,this.bufferOffset=0,this.baseState=1,this.special=1,this.running=!0,this.ended=!1,this.cbs=e,this.xmlMode=!!(null==t?void 0:t.xmlMode),this.decodeEntities=null===(n=null==t?void 0:t.decodeEntities)||void 0===n||n}return t.prototype.reset=function(){this._state=1,this.buffer="",this.sectionStart=0,this._index=0,this.bufferOffset=0,this.baseState=1,this.special=1,this.running=!0,this.ended=!1},t.prototype.write=function(t){this.ended&&this.cbs.onerror(Error(".write() after done!")),this.buffer+=t,this.parse()},t.prototype.end=function(t){this.ended&&this.cbs.onerror(Error(".end() after done!")),t&&this.write(t),this.ended=!0,this.running&&this.finish()},t.prototype.pause=function(){this.running=!1},t.prototype.resume=function(){this.running=!0,this._index<this.buffer.length&&this.parse(),this.ended&&this.finish()},t.prototype.getAbsoluteIndex=function(){return this.bufferOffset+this._index},t.prototype.stateText=function(t){"<"===t?(this._index>this.sectionStart&&this.cbs.ontext(this.getSection()),this._state=2,this.sectionStart=this._index):!this.decodeEntities||"&"!==t||1!==this.special&&4!==this.special||(this._index>this.sectionStart&&this.cbs.ontext(this.getSection()),this.baseState=1,this._state=62,this.sectionStart=this._index)},t.prototype.isTagStartChar=function(t){return c(t)||this.xmlMode&&!l(t)&&"/"!==t&&">"!==t},t.prototype.stateBeforeTagName=function(t){"/"===t?this._state=5:"<"===t?(this.cbs.ontext(this.getSection()),this.sectionStart=this._index):">"===t||1!==this.special||l(t)?this._state=1:"!"===t?(this._state=15,this.sectionStart=this._index+1):"?"===t?(this._state=17,this.sectionStart=this._index+1):this.isTagStartChar(t)?(this._state=this.xmlMode||"s"!==t&&"S"!==t?this.xmlMode||"t"!==t&&"T"!==t?3:52:32,this.sectionStart=this._index):this._state=1},t.prototype.stateInTagName=function(t){("/"===t||">"===t||l(t))&&(this.emitToken("onopentagname"),this._state=8,this._index--)},t.prototype.stateBeforeClosingTagName=function(t){l(t)||(">"===t?this._state=1:1!==this.special?4===this.special||"s"!==t&&"S"!==t?4!==this.special||"t"!==t&&"T"!==t?(this._state=1,this._index--):this._state=53:this._state=33:this.isTagStartChar(t)?(this._state=6,this.sectionStart=this._index):(this._state=20,this.sectionStart=this._index))},t.prototype.stateInClosingTagName=function(t){(">"===t||l(t))&&(this.emitToken("onclosetag"),this._state=7,this._index--)},t.prototype.stateAfterClosingTagName=function(t){">"===t&&(this._state=1,this.sectionStart=this._index+1)},t.prototype.stateBeforeAttributeName=function(t){">"===t?(this.cbs.onopentagend(),this._state=1,this.sectionStart=this._index+1):"/"===t?this._state=4:l(t)||(this._state=9,this.sectionStart=this._index)},t.prototype.stateInSelfClosingTag=function(t){">"===t?(this.cbs.onselfclosingtag(),this._state=1,this.sectionStart=this._index+1,this.special=1):l(t)||(this._state=8,this._index--)},t.prototype.stateInAttributeName=function(t){("="===t||"/"===t||">"===t||l(t))&&(this.cbs.onattribname(this.getSection()),this.sectionStart=-1,this._state=10,this._index--)},t.prototype.stateAfterAttributeName=function(t){"="===t?this._state=11:"/"===t||">"===t?(this.cbs.onattribend(void 0),this._state=8,this._index--):l(t)||(this.cbs.onattribend(void 0),this._state=9,this.sectionStart=this._index)},t.prototype.stateBeforeAttributeValue=function(t){'"'===t?(this._state=12,this.sectionStart=this._index+1):"'"===t?(this._state=13,this.sectionStart=this._index+1):l(t)||(this._state=14,this.sectionStart=this._index,this._index--)},t.prototype.handleInAttributeValue=function(t,e){t===e?(this.emitToken("onattribdata"),this.cbs.onattribend(e),this