From 0ab80b42d322795eeefa32fac557bb1498d9cd5e Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 24 Jan 2023 21:11:10 +0000
Subject: Improve UI for mapping link

The link is now always displayed, but it is only saved (for longer than 1 hour) if the user clicks Copy and Share (which automatically copies the link)

The width of the input field (in ch) is multiplied by 0.95 because it will always be a bit shorter than the length of the link in ch (which multiplies its length by the width of the character 0). This is the best solution I could come up with for setting the width of the field.
---
 wqflask/wqflask/templates/mapping_results.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html
index e7bcfc64..e77bbad3 100644
--- a/wqflask/wqflask/templates/mapping_results.html
+++ b/wqflask/wqflask/templates/mapping_results.html
@@ -81,11 +81,14 @@
               {% endif %}
               <b>Current Date/Time:</b> {{ current_datetime }}<br>
               <br>
-              <a class="export_mapping_results" href="#" target="_blank" >Download Full Results</a>
+              <button class="btn btn-default export_mapping_results">Download Full Results</button>
               <br><br>
-              <button type="button" class="btn btn-default share-results" style="padding-bottom: 2px; padding-top: 2px;"><span class="glyphicon glyphicon-link"></span> Generate Link</button>
-              <br>
-              <input type="text" name="mappingLink" style="display:none;" size="75"></input>
+              <div class="input-group">
+                <input type="text" class="form-control" name="mappingLink" size="75"></input>
+                <div class="input-group-btn">
+                  <button class="btn btn-default share-results" type="button">Copy and Share</button>
+                </div>
+              </div>
           </div>
           <div id="gn1_map_options" class="col-xs-6" style="outline: 3px double #AAAAAA; padding: 10px; margin: 10px;">
             <div class="col-xs-8" style="padding: 0px;">
@@ -672,8 +675,11 @@
           $('#gn1_map_options').css("display", "block")
         })
 
+        hash = $('input[name=inputs_hash]').val();
+        mappingLink = window.location.origin + "/run_mapping?hash=" + hash;
+        $('input[name=mappingLink]').width(mappingLink.length*0.95 + "ch")
+        $('input[name=mappingLink]').val(mappingLink);
         $('.share-results').click(function() {
-            hash = $('input[name=inputs_hash]').val()
             $.ajax({
                 method: "POST",
                 url: "/cache_mapping_inputs",
@@ -681,7 +687,8 @@
                     inputs_hash: hash
                 },
                 success: function() {
-                  $('input[name=mappingLink]').val(window.location.origin + "/run_mapping?hash=" + hash).show();
+                  document.querySelector("input[name='mappingLink']").select();
+                  document.execCommand('copy');
                 }
             });
         })
-- 
cgit v1.2.3