From a3dc3d53c70788dbd511b44b1c5b928375b8e70d Mon Sep 17 00:00:00 2001
From: Ryan Carbotte <ryancarbotte@gmail.com>
Date: Wed, 15 Apr 2020 21:01:52 -0500
Subject: [PATCH] feat: Added button to generate a permalink

Added a button to the UI near the Reset fields button and generate a URL that only contains the populated fields

Closes #108
---
 css/styles.css | 28 ++++++++++++++++++++++++----
 index.html     |  9 ++++++++-
 js/scripts.js  | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index af322c6..60c9aa2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -267,10 +267,10 @@ input[type=number] {
   color: #FFF;
 }
 
-.reset-button {
+.button {
+  color: #686868;
   font-family: inherit;
   font-weight: bold;
-  color: #FFBABA;
   padding: 8px 16px;
   border-width: 0px;
   border-radius: 40px;
@@ -281,13 +281,16 @@ input[type=number] {
   margin: 16px auto;
 }
 
-.reset-button:hover {
+.button:hover {
   transform: scale(1.1);
   cursor: pointer;
   opacity: 1;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
 }
 
+.button.button--reset {
+  color: #E45B5B;
+}
 
 .table-wrapper {
   display: inline-block;
@@ -378,7 +381,6 @@ input[type=number] {
   justify-content: center;
 }
 
-
 .waves {
   position: relative;
   width: 100%;
@@ -388,6 +390,24 @@ input[type=number] {
   max-height: 150px;
 }
 
+#permalink-input {
+  display: none;
+  position: fixed;
+}
+
+.permalink {
+  display: none;
+  white-space: nowrap;
+  font-size: 18px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.permalink .fa-copy {
+  margin: 0 8px;
+  height: 20px;
+  color: #0AB5CD;
+}
 
 /* Animation */
 .parallax>use {
diff --git a/index.html b/index.html
index 0bfb4dd..d504ae0 100644
--- a/index.html
+++ b/index.html
@@ -182,7 +182,14 @@
             </div>
           </div>
         </div>
-        <button type="button" id="reset" class="reset-button" name="action">
+        <input id="permalink-input" type="text" />
+        <div id="permalink-btn" class="button permalink">
+          <span>Copy permalink</span>
+          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path fill="currentColor" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path>
+          </svg>
+        </div>
+        <button type="button" id="reset" class="button button--reset" name="action">
           Reset Turnip Prophet
         </button>
       </form>
diff --git a/js/scripts.js b/js/scripts.js
index 65cf904..817ddfb 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -40,6 +40,8 @@ const sell_inputs = getSellFields()
 const buy_input = $("#buy")
 const first_buy_radios = getFirstBuyRadios()
 const previous_pattern_radios = getPreviousPatternRadios()
+const permalink_input = $('#permalink-input')
+const permalink_button = $('#permalink-btn')
 
 //Functions
 const fillFields = function (prices, first_buy, previous_pattern) {
@@ -79,6 +81,8 @@ const initialize = function () {
     console.error(e);
   }
 
+  $("#permalink-btn").on("click", copyPermalink)
+
   $("#reset").on("click", function () {
     sell_inputs.forEach(input => input.value = '')
     fillFields([], false, -1)
@@ -267,6 +271,43 @@ const calculateOutput = function (data, first_buy, previous_pattern) {
   update_chart(data, analyzed_possibilities);
 }
 
+const generatePermalink = function (buy_price, sell_prices, first_buy, previous_pattern) {
+  let searchParams = new URLSearchParams();
+  let pricesParam = buy_price ? buy_price.toString() : '';
+
+  if (!isEmpty(sell_prices)) {
+    const filtered = sell_prices.map(price => isNaN(price) ? '' : price).join('.');
+    pricesParam = pricesParam.concat('.', filtered);
+  }
+
+  if (pricesParam) {
+    searchParams.append('prices', pricesParam);
+  }
+
+  if (first_buy) {
+    searchParams.append('first', true);
+  }
+
+  if (previous_pattern !== -1) {
+    searchParams.append('pattern', previous_pattern);
+  }
+
+  return searchParams.toString() && window.location.origin.concat('?', searchParams.toString());
+}
+
+const copyPermalink = function () {
+  let text = permalink_input[0];
+
+  permalink_input.show();
+  text.select();
+  text.setSelectionRange(0, 99999); /* for mobile devices */
+
+  document.execCommand('copy');
+  permalink_input.hide();
+
+  alert('Copied!');
+}
+
 const update = function () {
   const sell_prices = getSellPrices();
   const buy_price = parseInt(buy_input.val());
@@ -276,6 +317,14 @@ const update = function () {
   buy_input[0].disabled = first_buy;
   buy_input[0].placeholder = first_buy ? '—' : '...'
 
+  const permalink = generatePermalink(buy_price, sell_prices, first_buy, previous_pattern);
+  if (permalink) {
+    permalink_button.show();
+  } else {
+    permalink_button.hide();
+  }
+  permalink_input.val(permalink);
+
   const prices = [buy_price, buy_price, ...sell_prices];
 
   if (!window.populated_from_query) {