From a68a2f7069911b60a11e5e3f5068eba9138b3155 Mon Sep 17 00:00:00 2001
From: s416422 <joapal@st.amu.edu.pl>
Date: Tue, 10 Mar 2020 15:37:05 +0100
Subject: [PATCH] counter and copy-to-clipboard button added to classes code

---
 public/css/app.css                      | 13 +++++++++++++
 public/js/custom.js                     | 13 ++++++++++---
 resources/views/map/start_map.blade.php | 14 ++++++++++++--
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index c3cfc57..c1a7e4d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -6893,6 +6893,19 @@ a.close.disabled {
 .classes-name-indicator {
   width: 100%;
 }
+.classes-code-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: auto;
+}
+#classes_code_input, #classes_code_input:focus {
+  text-align: center;
+  background-color: transparent;
+  border: none;
+}
+
 
 @media (prefers-reduced-motion: reduce) {
   .carousel-control-prev,
diff --git a/public/js/custom.js b/public/js/custom.js
index b57d77c..8dcb68e 100644
--- a/public/js/custom.js
+++ b/public/js/custom.js
@@ -62,10 +62,17 @@ $(document).ready(function(){
     $('#group-select').on('change', function() {
         $(location).attr('href', $(this).val())
     });
-    const classes_code = $('#classes-code');
-    if(classes_code){
+    const classes_code_div = $('#classes-code-div');
+    if(classes_code_div){
+        $('#copy-btn').on('click', function () {
+            const copyText = $('#classes_code_input');
+            copyText.select();
+            document.execCommand("copy");
+            alert("Skopiowano: " + copyText.val());
+            copyText.blur();
+        });
         setTimeout(function(){
-            classes_code.remove()
+            classes_code_div.remove()
         }, 30000);
     }
 
diff --git a/resources/views/map/start_map.blade.php b/resources/views/map/start_map.blade.php
index abc0fcc..6fce974 100644
--- a/resources/views/map/start_map.blade.php
+++ b/resources/views/map/start_map.blade.php
@@ -12,7 +12,11 @@
             <button type="button" class="checkout-button end-button add-mn-btn"> Dodaj studenta ręcznie</button>
         </div>
         <div id="refresh"></div>
-        <p class="code-p" id="classes-code"><b>Kod:</b> <span id="classes_code_input">{{ $classes_code }}</span></p>
+        <div class="classes-code-div code-p" id="classes-code-div">
+            <p class="m-0" id="classes-code"><b>Kod weryfikacyjny:</b></p>
+            <input type="text" id="classes_code_input" value="{{ $classes_code }}">
+            <button type="button" id="copy-btn" class="btn btn-primary" title="Kopiuj do schowka"><i class="fa fa-clone"></i> Kopiuj <span id="copy-counter">(30) &raquo;</span> </button>
+        </div>
         <div class="code-p"> Stan połączenia z serwerem legitymacji: <span id="status" style="color:green"> połączony</span></div>
 
         <h1 class="main-text main-seat-text">Przyłóż legitymację do czytnika</h1>
@@ -47,7 +51,7 @@
         </div>
 
         <script>
-            var classes_code_input = $('#classes_code_input').html();
+            var classes_code_input = $('#classes_code_input').val();
             const client = new WebSocket('wss://atcheck.projektstudencki.pl/wss', classes_code_input);
 
             client.onclose = function(event) {
@@ -66,6 +70,12 @@
                 }
             }
 
+            var counter = 30;
+            setInterval(function() {
+                counter--;
+                $('#copy-counter').html('(' + counter + ') &raquo;');
+            }, 1000);
+
         </script>
     </div>
 @endsection