From 8fab4d5845ffeb98f13a21f8a5d27d8fc30d00f1 Mon Sep 17 00:00:00 2001
From: Exodus4D <exodus4d@gmail.com>
Date: Thu, 5 Jan 2017 22:19:32 +0100
Subject: [PATCH] - Improved Taskmanager templates, #420

---
 public/templates/dialog/task_manager.html | 23 ++++++++++
 public/templates/modules/sync_status.html | 31 +++++++++++++
 public/templates/view/setup.html          | 53 +++++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 public/templates/dialog/task_manager.html
 create mode 100644 public/templates/modules/sync_status.html

diff --git a/public/templates/dialog/task_manager.html b/public/templates/dialog/task_manager.html
new file mode 100644
index 00000000..a2e41b8a
--- /dev/null
+++ b/public/templates/dialog/task_manager.html
@@ -0,0 +1,23 @@
+<div id="{{id}}">
+
+    {{! Status (updated by trigger ------------------------------------------------------------- }}
+    <h4>
+        <i class="fa fa-fw fa-lg fa-exchange"></i> Map sync
+    </h4>
+
+    <div class="{{dialogDynamicAreaClass}} {{taskDialogStatusAreaClass}}">
+
+    </div>
+
+    {{! Task graphs ---------------------------------------------------------------------------- }}
+    <div class="row"></div>
+
+    {{! Task table ----------------------------------------------------------------------------- }}
+    <h4>
+        <i class="fa fa-fw fa-lg fa-microchip"></i> Processes
+    </h4>
+
+    <div class="{{dialogDynamicAreaClass}} {{taskDialogLogTableAreaClass}}">
+        <div class="{{tableActionBarClass}}"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/templates/modules/sync_status.html b/public/templates/modules/sync_status.html
new file mode 100644
index 00000000..625e4a2f
--- /dev/null
+++ b/public/templates/modules/sync_status.html
@@ -0,0 +1,31 @@
+{{#isWebSocket}}
+    <dl class="dl-horizontal pull-left">
+        <dt title="Map sync method">Connected</dt>
+        <dd>WebSocket</dd>
+        <dt>Status</dt>
+        <dd class="txt-color {{syncStatus.webSocket.class}}">{{syncStatus.webSocket.status}}</dd>
+        <dt>Active</dt>
+        <dd class="{{timestampCounterClass}}" title="Last data push received">{{syncStatus.webSocket.timestamp}}</dd>
+    </dl>
+
+    <dl class="dl-horizontal pull-left">
+        <dt></dt>
+        <dd>SharedWorker</dd>
+        <dt></dt>
+        <dd class="txt-color {{syncStatus.sharedWorker.class}}">{{syncStatus.sharedWorker.status}}</dd>
+        <dt></dt>
+        <dd>&nbsp;</dd>
+    </dl>
+{{/isWebSocket}}
+
+{{#isAjax}}
+    <dl class="dl-horizontal pull-left">
+        <dt title="Map sync method">Type</dt>
+        <dd>Ajax <span class="txt-color txt-color-grayLight">(long polling)</span></dd>
+        <dt>Status</dt>
+        <dd class="txt-color {{syncStatus.ajax.class}}">{{syncStatus.ajax.status}}</dd>
+        <dt>Last sync</dt>
+        <dd class="{{timestampCounterClass}}" title="Last map sync">{{syncStatus.ajax.timestamp}}</dd>
+    </dl>
+{{/isAjax}}
+
diff --git a/public/templates/view/setup.html b/public/templates/view/setup.html
index 243d1a3b..31f70509 100644
--- a/public/templates/view/setup.html
+++ b/public/templates/view/setup.html
@@ -790,6 +790,59 @@
 
         </div>
 
+        <h4><i class="fa fa-fw fa-exchange"></i> Socket configuration <span class="txt-color txt-color-gray">[advanced]</span></h4>
+
+        <div class="row text-center">
+
+            <repeat group="{{ @socketInformation }}" value="{{ @socketData }}">
+                <div class="col-xs-12 col-md-6 pf-landing-pricing-panel">
+                    <div class="panel panel-default pricing-big">
+                        <div class="panel-heading text-left">
+                            <h3 class="panel-title">{{ @socketData.label }}</h3>
+                        </div>
+
+                        <div class="panel-body no-padding text-left">
+                            <table class="table">
+                                <thead>
+                                    <repeat group="{{ @socketData.data }}" value="{{ @entry }}">
+                                        <tr>
+                                            <td>{{ @entry.label }}</td>
+                                            <td class="text-right col-md-8">
+                                                <kbd>{{@entry.value | raw}}</kbd>
+                                            </td>
+                                            <td class="text-right col-md-1">
+                                                <check if="{{ @entry.check }}">
+                                                    <true>
+                                                        <i class="fa fa-lg fa-fw fa-check txt-color txt-color-success"></i>
+                                                    </true>
+                                                    <false>
+                                                        <i class="fa fa-lg fa-fw fa-warning txt-color txt-color-warning"></i>
+                                                    </false>
+                                                </check>
+                                            </td>
+                                        </tr>
+                                    </repeat>
+                                </thead>
+                            </table>
+                        </div>
+
+                        <div class="panel-footer text-align-center">
+                            <check if="{{ @socketData.online }}">
+                                <true>
+                                    <h3 class="panel-title txt-color txt-color-green">ONLINE</h3>
+                                </true>
+                                <false>
+                                    <h3 class="panel-title txt-color txt-color-danger">OFFLINE</h3>
+                                </false>
+                            </check>
+                        </div>
+
+                    </div>
+                </div>
+            </repeat>
+
+        </div>
+
         <h4 id="pf-setup-administration"><i class="fa fa-fw fa-wrench"></i> Administration</h4>
 
         <div class="row text-center">