From 65d4070a9cbe6a3490ac0f81942d736b50679a52 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 16 Feb 2021 15:49:01 +0100
Subject: [PATCH] add copy ID button

mostly copied from castellum
---
 scheduler/main/static/style.css               | 28 +++++++++++++++++
 scheduler/main/static/utils.js                | 30 +++++++++++++++++++
 scheduler/main/templates/base.html            |  1 +
 .../main/templates/main/schedule_form.html    | 12 ++++++++
 4 files changed, 71 insertions(+)
 create mode 100644 scheduler/main/static/utils.js

diff --git a/scheduler/main/static/style.css b/scheduler/main/static/style.css
index e54e306..8dbf9a9 100644
--- a/scheduler/main/static/style.css
+++ b/scheduler/main/static/style.css
@@ -21,3 +21,31 @@
         margin: 0 auto;
     }
 }
+
+[data-animation="success"] {
+    position: relative;
+}
+
+[data-animation="success"]::after {
+    content: "\f00c";  /* fa-check */
+    font-family: FontAwesome;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 1.2em;
+    line-height: 1.2em;
+    box-sizing: content-box;
+    margin-right: -0.6em;
+    margin-top: -0.6em;
+    border-radius: 50%;
+    text-align: center;
+    color: var(--white);
+    background-color: var(--success);
+    opacity: 0;
+    transition: opacity 300ms ease;
+}
+
+[data-animation="success"].animation-active::after {
+    opacity: 1;
+}
diff --git a/scheduler/main/static/utils.js b/scheduler/main/static/utils.js
new file mode 100644
index 0000000..27f500c
--- /dev/null
+++ b/scheduler/main/static/utils.js
@@ -0,0 +1,30 @@
+(function() {
+    window.$$ = {
+        on: function(el, eventName, selector, fn) {
+            el.addEventListener(eventName, function(event) {
+                var target = event.target.closest(selector);
+                if (target) {
+                    fn.call(target, event);
+                }
+            });
+        },
+    };
+
+    $$.on(document, 'click', '[data-clipboard]', function() {
+        var targetSelector = this.dataset.clipboard;
+        var target = document.querySelector(targetSelector);
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(target.value || target.href);
+        } else {
+            target.focus();
+            target.setSelectionRange(0, 1000);
+            document.execCommand('copy');
+        }
+    });
+    $$.on(document, 'click', '[data-animation="success"]', function() {
+        this.classList.add('animation-active');
+        setTimeout(() => {
+            this.classList.remove('animation-active');
+        }, 800);
+    });
+})();
diff --git a/scheduler/main/templates/base.html b/scheduler/main/templates/base.html
index d5b5644..64d5323 100644
--- a/scheduler/main/templates/base.html
+++ b/scheduler/main/templates/base.html
@@ -43,6 +43,7 @@
     <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
     <script src="{% static 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
     <script src="{% static 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.de.min.js' %}"></script>
+    <script src="{% static 'utils.js' %}"></script>
     {% block extra_scripts %}{% endblock %}
 </body>
 </html>
diff --git a/scheduler/main/templates/main/schedule_form.html b/scheduler/main/templates/main/schedule_form.html
index c69020d..789536f 100644
--- a/scheduler/main/templates/main/schedule_form.html
+++ b/scheduler/main/templates/main/schedule_form.html
@@ -65,6 +65,18 @@
             </div>
         </fieldset>
 
+        {% if object %}
+            <div class="form-group">
+                <label for="id_schedule_id">{% translate 'Schedule ID' %}</label>
+                <div class="input-group">
+                    <input id="id_schedule_id" class="form-control" value="{{ object.pk }}" readonly>
+                    <div class="input-group-append">
+                        <button type="button" class="btn btn-outline-secondary" tabindex="-1" data-clipboard="#id_schedule_id" data-animation="success">{% translate 'Copy' %}</button>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+
         <div class="d-print-none mb-3">
             <button class="btn btn-primary" >{% translate 'Save' %}</button>
             {% if object %}
-- 
GitLab