From 4d20a5cf70006e369c49a2782e1d9213daaa8aa8 Mon Sep 17 00:00:00 2001
From: Philipp Klaus <philipp.klaus@gmail.com>
Date: Fri, 22 Sep 2017 17:43:23 +0800
Subject: [PATCH] DASH: PV info button /pv/PV:NAME + button copy PV:NAME to
 clipboard

---
 .../dashboard/static/images/clipboard.svg     | 29 ++++++++
 .../views/pv_overview_bootstrap.jinja2        | 71 ++++++++++++++++++-
 2 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 python_suite/dashboard/static/images/clipboard.svg

diff --git a/python_suite/dashboard/static/images/clipboard.svg b/python_suite/dashboard/static/images/clipboard.svg
new file mode 100644
index 0000000..db2c56d
--- /dev/null
+++ b/python_suite/dashboard/static/images/clipboard.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg3336"
+   width="896"
+   height="1024">
+  <metadata
+     id="metadata3344">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3342" />
+  <path
+     id="path3338"
+     d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>
diff --git a/python_suite/dashboard/views/pv_overview_bootstrap.jinja2 b/python_suite/dashboard/views/pv_overview_bootstrap.jinja2
index e379369..38208bc 100644
--- a/python_suite/dashboard/views/pv_overview_bootstrap.jinja2
+++ b/python_suite/dashboard/views/pv_overview_bootstrap.jinja2
@@ -14,6 +14,20 @@
   margin-bottom: 20px;
   padding: 10px;
 }
+.icon {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+  color: #000;
+  fill: currentColor;
+  display: inline-block;
+  vertical-align: text-top;
+}
+.btn-copy {
+  cursor: pointer;
+}
 </style>
 {% endblock %}
 
@@ -32,8 +46,14 @@
 					<div class="col-md-4">
 					<div class="pv-block value indicator {{ PV.classes }}" style="cursor: pointer;" title="{{ PV.alias }}">
 						<div class="error"></div>
-						<div class="pvname">{{ PV.name }}</div>
-						<div class="value-unit-box">
+						<div class="pvname">{{ PV.alias or PV.name }}</div>
+						<div class="btn-group">
+							<a class="btn btn-sm btn-outline-primary btn-pv" href="/pv/{{ PV.name }}" title="Details page for PV {{ PV.name }}">PV</a>
+							<button type="button" class="btn btn-sm btn-outline-primary btn-copy js-tooltip js-copy" data-toggle="tooltip" data-placement="bottom" data-copy="{{ PV.name }}" title="Copy PV name to clipboard">
+								<img class="icon" src="/static/images/clipboard.svg">
+							</button>
+						</div>
+						<div class="value-unit-box" style="display: inline-block;">
 							<span class="value">
 							{% if 'switch' in PV.classes %}
 								<label class="toggle">
@@ -71,4 +91,51 @@ $(function() {
 });
 */
 updateSparklines();
+
+function copyToClipboard(text, el) {
+  // COPY TO CLIPBOARD
+  // Attempts to use .execCommand('copy') on a created text field
+  // Falls back to a selectable alert if not supported
+  // Attempts to display status in Bootstrap tooltip
+  // ------------------------------------------------------------------------------
+  var copyTest = document.queryCommandSupported('copy');
+  var elOriginalText = el.attr('data-original-title');
+
+  if (copyTest === true) {
+    var copyTextArea = document.createElement("textarea");
+    copyTextArea.value = text;
+    document.body.appendChild(copyTextArea);
+    copyTextArea.select();
+    try {
+      var successful = document.execCommand('copy');
+      var msg = successful ? 'Copied!' : 'Whoops, not copied!';
+      el.attr('data-original-title', msg).tooltip('show');
+    } catch (err) {
+      console.log('Oops, unable to copy');
+    }
+    document.body.removeChild(copyTextArea);
+    el.attr('data-original-title', elOriginalText);
+  } else {
+    // Fallback if browser doesn't support .execCommand('copy')
+    window.prompt("Copy to clipboard: Ctrl+C or Command+C, Enter", text);
+  }
+}
+
+$(document).ready(function() {
+  // Initialize
+  // ---------------------------------------------------------------------
+
+  // Tooltips
+  // Requires Bootstrap 3 for functionality
+  $('.js-tooltip').tooltip();
+
+  // Copy to clipboard
+  // Grab any text in the attribute 'data-copy' and pass it to the 
+  // copy function
+  $('.js-copy').click(function() {
+    var text = $(this).attr('data-copy');
+    var el = $(this);
+    copyToClipboard(text, el);
+  });
+});
 {% endblock %}
-- 
2.43.0