From d7590a29153fb9e3dae7083b5a77c47aec18acfd Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Thu, 26 Apr 2018 03:19:40 +0000
Subject: [PATCH] Update query parameters form to include iframe

---
 webapp/titanembeds/constants.py                         | 2 +-
 webapp/titanembeds/static/js/query_parameters.js        | 2 ++
 webapp/titanembeds/templates/administrate_guild.html.j2 | 1 +
 webapp/titanembeds/templates/card_queryparams.html.j2   | 8 ++++++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webapp/titanembeds/constants.py b/webapp/titanembeds/constants.py
index 5978e7d..1ec46ae 100644
--- a/webapp/titanembeds/constants.py
+++ b/webapp/titanembeds/constants.py
@@ -8,7 +8,7 @@ QUERY_PARAMETERS = [
     {
         "name": "defaultchannel",
         "type": "snowflake",
-        "description": "Instead of having the top channel as the first channel your users see, you may change it. Enable Discord's Developer mode in the Appearances tab of the User Settings and copy the channel ID.",
+        "description": "Instead of having the top channel as the first channel your users see, you may change it. Enable Discord's Developer mode in the Appearances tab of the User Settings and copy the channel ID. Here is a <a href=\"https://support.discordapp.com/hc/en-us/articles/206346498-Where-can-I-find-my-server-ID-\" target=\"_blank\">tutorial</a> on obtaining the channel ID.",
         "example": "1234567890",
     },
     {
diff --git a/webapp/titanembeds/static/js/query_parameters.js b/webapp/titanembeds/static/js/query_parameters.js
index 66e198a..c60f5d3 100644
--- a/webapp/titanembeds/static/js/query_parameters.js
+++ b/webapp/titanembeds/static/js/query_parameters.js
@@ -20,10 +20,12 @@
             url += `${name}=${value}`;
         }
         $("#queryparam_url").val(url);
+        $("#queryparam_iframe").val("<iframe src=\"" + url + "\" height=\"600\" width=\"800\" frameborder=\"0\"></iframe>");
     }
     
     $(function () {
         $("input.queryparam").change(updateQueryParameters);
         $("#queryparam_guildid").change(updateQueryParameters);
+        updateQueryParameters();
     });
 })();
\ No newline at end of file
diff --git a/webapp/titanembeds/templates/administrate_guild.html.j2 b/webapp/titanembeds/templates/administrate_guild.html.j2
index 4e68326..7f7dbab 100644
--- a/webapp/titanembeds/templates/administrate_guild.html.j2
+++ b/webapp/titanembeds/templates/administrate_guild.html.j2
@@ -40,6 +40,7 @@
             <input readonly value="{{ url_for("embed.guild_embed", guild_id=guild['id'], _external=True) }}" id="disabled" type="text" onClick="this.setSelectionRange(0, this.value.length)">
             <p class="flow-text">iFrame Embed</p>
             <input readonly value="&lt;iframe src=&quot;{{ url_for("embed.guild_embed", guild_id=guild['id'], _external=True) }}&quot; height=&quot;600&quot; width=&quot;800&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;" id="disabled" type="text" onClick="this.setSelectionRange(0, this.value.length)">
+            <p>For client side customization (such as setting the Default Channel or a Prefilled Guest Username), see Query Parameters section at the bottom of this page.</p>
           </div>
         </div>
       </div>
diff --git a/webapp/titanembeds/templates/card_queryparams.html.j2 b/webapp/titanembeds/templates/card_queryparams.html.j2
index 58491a4..f524b76 100644
--- a/webapp/titanembeds/templates/card_queryparams.html.j2
+++ b/webapp/titanembeds/templates/card_queryparams.html.j2
@@ -36,7 +36,7 @@
             </div>
             {% if "administrate_guild" in request.url %}
             <div class="col s12 black-text">
-              <p class="flow-text">Copy this URL for your iFrame src (or as a direct link) after entering the parameters in the form.</p>
+              <p class="flow-text">Copy these URL/iframe code after entering the parameters in the form.</p>
               <ul class="collection">
                 <li class="collection-item">
                   <strong>Embed/Server ID</strong>
@@ -44,7 +44,11 @@
                 </li>
                 <li class="collection-item">
                   Embed URL after query parameters appled
-                  <input id="queryparam_url" readonly value="{{ url_for("embed.guild_embed", guild_id=guild['id'], _external=True) }}" id="disabled" type="text" onclick="this.setSelectionRange(0, this.value.length)">
+                  <input id="queryparam_url" readonly value="{{ url_for("embed.guild_embed", guild_id=guild['id'], _external=True) }}" type="text" onclick="this.setSelectionRange(0, this.value.length)">
+                </li>
+                <li class="collection-item">
+                  Embed iFrame after query parameters appled
+                  <input id="queryparam_iframe" readonly type="text" onclick="this.setSelectionRange(0, this.value.length)">
                 </li>
               </ul>
             </div>