From 10b5deffe4b6049c1e4297b57951cd2d33964fcc Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Mon, 11 Sep 2017 07:52:13 +0000
Subject: [PATCH] Add custom css slots to prepare for donators feature

---
 ...1bf16_add_css_limit_column_to_cosmetics.py | 28 +++++++++++++++++++
 webapp/titanembeds/blueprints/admin/admin.py  |  6 ++++
 webapp/titanembeds/blueprints/user/user.py    | 25 +++++++++++++----
 webapp/titanembeds/database/cosmetics.py      |  6 ++++
 .../titanembeds/static/js/admin_cosmetics.js  | 21 ++++++++++++--
 webapp/titanembeds/static/js/usercss.js       | 18 +++++++++---
 .../templates/admin_cosmetics.html.j2         | 16 +++++++++--
 .../titanembeds/templates/dashboard.html.j2   |  4 ++-
 webapp/titanembeds/templates/embed.html.j2    |  2 +-
 webapp/titanembeds/templates/usercss.html.j2  | 12 +++++++-
 10 files changed, 121 insertions(+), 17 deletions(-)
 create mode 100644 webapp/alembic/versions/d1b89c41bf16_add_css_limit_column_to_cosmetics.py

diff --git a/webapp/alembic/versions/d1b89c41bf16_add_css_limit_column_to_cosmetics.py b/webapp/alembic/versions/d1b89c41bf16_add_css_limit_column_to_cosmetics.py
new file mode 100644
index 0000000..343b301
--- /dev/null
+++ b/webapp/alembic/versions/d1b89c41bf16_add_css_limit_column_to_cosmetics.py
@@ -0,0 +1,28 @@
+"""Add css_limit column to cosmetics
+
+Revision ID: d1b89c41bf16
+Revises: f65629d470c6
+Create Date: 2017-09-11 01:38:07.771715
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = 'd1b89c41bf16'
+down_revision = 'f65629d470c6'
+branch_labels = None
+depends_on = None
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('cosmetics', sa.Column('css_limit', sa.Integer(), server_default='0', nullable=False))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('cosmetics', 'css_limit')
+    # ### end Alembic commands ###
diff --git a/webapp/titanembeds/blueprints/admin/admin.py b/webapp/titanembeds/blueprints/admin/admin.py
index ff28728..65e3a86 100644
--- a/webapp/titanembeds/blueprints/admin/admin.py
+++ b/webapp/titanembeds/blueprints/admin/admin.py
@@ -36,6 +36,7 @@ def cosmetics_post():
     if not user_id:
         abort(400)
     css = request.form.get("css", None)
+    css_limit = request.form.get("css_limit", None)
     entry = db.session.query(Cosmetics).filter(Cosmetics.user_id == user_id).first()
     if entry:
         abort(409)
@@ -43,6 +44,8 @@ def cosmetics_post():
     if css:
         css = css.lower() == "true"
         user.css = css
+    if css_limit is not None:
+        user.css_limit = css_limit
     db.session.add(user)
     db.session.commit()
     return ('', 204)
@@ -67,12 +70,15 @@ def cosmetics_patch():
     if not user_id:
         abort(400)
     css = request.form.get("css", None)
+    css_limit = request.form.get("css_limit", None)
     entry = db.session.query(Cosmetics).filter(Cosmetics.user_id == user_id).first()
     if not entry:
         abort(409)
     if css:
         css = css.lower() == "true"
         entry.css = css
+    if css_limit is not None:
+        entry.css_limit = css_limit
     db.session.commit()
     return ('', 204)
 def prepare_guild_members_list(members, bans):
diff --git a/webapp/titanembeds/blueprints/user/user.py b/webapp/titanembeds/blueprints/user/user.py
index 334c230..16bc518 100644
--- a/webapp/titanembeds/blueprints/user/user.py
+++ b/webapp/titanembeds/blueprints/user/user.py
@@ -60,6 +60,14 @@ def logout():
         return redirect(session['redirect'])
     return redirect(url_for("index"))
 
+def count_user_premium_css():
+    count = 0
+    css_list = db.session.query(UserCSS).filter(UserCSS.user_id == session['user_id']).all()
+    for css in css_list:
+        if css.css is not None:
+            count += 1
+    return count
+
 @user.route("/dashboard")
 @discord_users_only()
 def dashboard():
@@ -73,7 +81,8 @@ def dashboard():
     css_list = None
     if cosmetics and cosmetics.css:
         css_list = db.session.query(UserCSS).filter(UserCSS.user_id == session['user_id']).all()
-    return render_template("dashboard.html.j2", servers=guilds, icon_generate=generate_guild_icon_url, cosmetics=cosmetics, css_list=css_list)
+    premium_css_count = count_user_premium_css()
+    return render_template("dashboard.html.j2", servers=guilds, icon_generate=generate_guild_icon_url, cosmetics=cosmetics, css_list=css_list, premium_css_count=premium_css_count)
 
 @user.route("/custom_css/new", methods=["GET"])
 @discord_users_only()
@@ -81,7 +90,8 @@ def new_custom_css_get():
     cosmetics = db.session.query(Cosmetics).filter(Cosmetics.user_id == session['user_id']).first()
     if not cosmetics or not cosmetics.css:
         abort(403)
-    return render_template("usercss.html.j2", new=True)
+    premium_css_count = count_user_premium_css()
+    return render_template("usercss.html.j2", new=True, cosmetics=cosmetics, premium_css_count=premium_css_count)
 
 @user.route("/custom_css/new", methods=["POST"])
 @discord_users_only()
@@ -92,7 +102,7 @@ def new_custom_css_post():
     
     name = request.form.get("name", None)
     user_id = session["user_id"]
-    css = request.form.get("css","")
+    css = request.form.get("css",None)
     variables = request.form.get("variables", None)
     variables_enabled = request.form.get("variables_enabled", False) in ["true", True]
     if not name:
@@ -100,6 +110,8 @@ def new_custom_css_post():
     else:
         name = name.strip()
         css = css.strip()
+    if (len(css) == 0):
+        css = None
     css = UserCSS(name, user_id, variables_enabled, variables, css)
     db.session.add(css)
     db.session.commit()
@@ -120,7 +132,8 @@ def edit_custom_css_get(css_id):
     print(variables)
     if variables:
         variables = json.loads(variables)
-    return render_template("usercss.html.j2", new=False, css=css, variables=variables)
+    premium_css_count = count_user_premium_css()
+    return render_template("usercss.html.j2", new=False, css=css, variables=variables, cosmetics=cosmetics, premium_css_count=premium_css_count)
 
 @user.route("/custom_css/edit/<css_id>", methods=["POST"])
 @discord_users_only()
@@ -134,7 +147,7 @@ def edit_custom_css_post(css_id):
     if dbcss.user_id != session['user_id']:
         abort(403)
     name = request.form.get("name", None)
-    css = request.form.get("css", "")
+    css = request.form.get("css", None)
     variables = request.form.get("variables", None)
     variables_enabled = request.form.get("variables_enabled", False) in ["true", True]
     if not name:
@@ -142,6 +155,8 @@ def edit_custom_css_post(css_id):
     else:
         name = name.strip()
         css = css.strip()
+    if (len(css) == 0):
+        css = None
     dbcss.name = name
     dbcss.css = css
     dbcss.css_variables = variables
diff --git a/webapp/titanembeds/database/cosmetics.py b/webapp/titanembeds/database/cosmetics.py
index a442c0c..e931822 100644
--- a/webapp/titanembeds/database/cosmetics.py
+++ b/webapp/titanembeds/database/cosmetics.py
@@ -5,6 +5,7 @@ class Cosmetics(db.Model):
     id = db.Column(db.Integer, primary_key=True)                    # Auto increment id
     user_id = db.Column(db.String(255), nullable=False)             # Discord user id of user of cosmetics
     css = db.Column(db.Boolean(), nullable=False)                   # If they can create/edit custom CSS
+    css_limit = db.Column(db.Integer, nullable=False, server_default="0") # Custom CSS Limit
     
     def __init__(self, user_id, **kwargs):
         self.user_id = user_id
@@ -13,3 +14,8 @@ class Cosmetics(db.Model):
             self.css = kwargs["css"]
         else:
             self.css = False
+        
+        if "css_limit" in kwargs:
+            self.css_limit = kwargs["css_limit"]
+        else:
+            self.css_limit = 0
diff --git a/webapp/titanembeds/static/js/admin_cosmetics.js b/webapp/titanembeds/static/js/admin_cosmetics.js
index 79a2e1a..4941957 100644
--- a/webapp/titanembeds/static/js/admin_cosmetics.js
+++ b/webapp/titanembeds/static/js/admin_cosmetics.js
@@ -18,11 +18,12 @@ function deleteForm(user_id) {
     return funct.promise();
 }
 
-function patchForm(user_id, css) {
+function patchForm(user_id, param) {
+    var data = Object.assign({"user_id": user_id}, param);
     var funct = $.ajax({
         dataType: "json",
         method: "PATCH",
-        data: {"user_id": user_id, "css": css}
+        data: data,
     });
     return funct.promise();
 }
@@ -68,7 +69,7 @@ function delete_user(user_id) {
 
 function update_css_switch(user_id, element) {
     var css_checked = $(element).is(':checked');
-    var formPatch = patchForm(user_id, css_checked);
+    var formPatch = patchForm(user_id, {"css": css_checked});
     formPatch.done(function (data) {
         Materialize.toast('CSS updated!', 10000);
     });
@@ -79,4 +80,18 @@ function update_css_switch(user_id, element) {
             Materialize.toast('Oh no! Something has failed changing the css toggle!', 10000);
         }
     });
+}
+
+function update_css_limit(user_id, value) {
+    var formPatch = patchForm(user_id, {"css_limit": value});
+    formPatch.done(function (data) {
+        Materialize.toast('CSS value updated!', 10000);
+    });
+    formPatch.fail(function (data) {
+        if (data.status == 409) {
+            Materialize.toast('This user id does not exists!', 10000);
+        } else {
+            Materialize.toast('Oh no! Something has failed changing the css limit field!', 10000);
+        }
+    });
 }
\ No newline at end of file
diff --git a/webapp/titanembeds/static/js/usercss.js b/webapp/titanembeds/static/js/usercss.js
index 3720b2b..8e6fa33 100644
--- a/webapp/titanembeds/static/js/usercss.js
+++ b/webapp/titanembeds/static/js/usercss.js
@@ -1,12 +1,20 @@
 /*global $, ace, Materialize, newCSS*/
 (function () {
-    var editor = ace.edit("css_editor");
+    if($("#css_editor").length != 0) {
+        var editor = ace.edit("css_editor");
+    }
     
     function postForm() {
         var name = $('#css_name').val();
         var var_enabled = $("#toggleCSSVar").is(':checked');
         var variables = JSON.stringify(formatCSSVars());
-        var css = editor.getValue();
+        var css = null;
+        if($("#css_editor").length != 0) {
+            css = editor.getValue();
+            if (css.length == 0) {
+                css = null;
+            }
+        }
         var funct = $.ajax({
             dataType: "json",
             method: "POST",
@@ -16,8 +24,10 @@
     }
     
     $(function(){
-        editor.getSession().setMode("ace/mode/css");
-        editor.setTheme("ace/theme/chrome");
+        if($("#css_editor").length != 0) {
+            editor.getSession().setMode("ace/mode/css");
+            editor.setTheme("ace/theme/chrome");
+        }
         $("#submit-btn").click(submitForm);
         
         if (!newCSS) {
diff --git a/webapp/titanembeds/templates/admin_cosmetics.html.j2 b/webapp/titanembeds/templates/admin_cosmetics.html.j2
index 96a68bd..ca4a07b 100644
--- a/webapp/titanembeds/templates/admin_cosmetics.html.j2
+++ b/webapp/titanembeds/templates/admin_cosmetics.html.j2
@@ -13,6 +13,7 @@
           <tr>
               <th>User ID</th>
               <th>CSS</th>
+              <th>CSS Limit</th>
               <th>Submit</th>
           </tr>
         </thead>
@@ -23,6 +24,11 @@
                     <input id="new_user_id" placeholder="User ID">
                 </div>
             </td>
+            <td>
+                <div class="input-field inline">
+                    <input id="new_css_limit" placeholder="CSS Limit" type="number">
+                </div>
+            </td>
             <td>
                 <div class="switch">
                     <label>
@@ -50,23 +56,29 @@
               <th>Remove</th>
               <th>User ID</th>
               <th>CSS</th>
+              <th>CSS Limit</th>
           </tr>
         </thead>
         <tbody>
         {% for cosmetic in cosmetics %}
           <tr>
-            <td><a class="waves-effect waves-light btn red" id="new_submit" onclick="delete_user('{{ cosmetic.user_id }}');">Remove</a></td>
+            <td><a class="waves-effect waves-light btn red" onclick="delete_user('{{ cosmetic.user_id }}');">Remove</a></td>
             <td>{{ cosmetic.user_id }}</td>
             <td>
                 <div class="switch">
                     <label>
                       Off
-                      <input type="checkbox" id="new_css_switch" {% if cosmetic.css %}checked{% endif %} onchange="update_css_switch('{{ cosmetic.user_id }}', this)">
+                      <input type="checkbox" {% if cosmetic.css %}checked{% endif %} onchange="update_css_switch('{{ cosmetic.user_id }}', this)">
                       <span class="lever"></span>
                       On
                     </label>
                 </div>
             </td>
+            <td>
+                <div class="input-field inline">
+                    <input placeholder="CSS Limit" type="number" value="{{ cosmetic.css_limit }}" onchange="update_css_limit('{{ cosmetic.user_id }}', $(this).val())">
+                </div>
+            </td>
           </tr>
           {% endfor %}
         </tbody>
diff --git a/webapp/titanembeds/templates/dashboard.html.j2 b/webapp/titanembeds/templates/dashboard.html.j2
index 4246208..02db48c 100644
--- a/webapp/titanembeds/templates/dashboard.html.j2
+++ b/webapp/titanembeds/templates/dashboard.html.j2
@@ -46,9 +46,11 @@
 
 {% if css_list is not none %}
 <p class="flow-text">
-  Create or modify your custom CSS.
+  Create or modify your user defined CSS.
   <a class="waves-effect waves-light btn" href="{{ url_for("user.new_custom_css_get") }}">New</a>
 </p>
+<p>You have used <strong>{{ premium_css_count }} out of {{ cosmetics.css_limit }}</strong> custom css slots. {% if premium_css_count >= cosmetics.css_limit %}<strong>Don't fret! You can still use CSS variables.</strong>{% endif %} Donate below to obtain more slots!</p>
+{% if premium_css_count >= cosmetics.css_limit %}<p>Free up some slots by emptying your other custom CSS field and submitting it (Titan will automatically mark empty custom css editor fields as unused slots in the database) or delete the user defined css slot altogether.</p>{% endif %}
 <div class="row">
   {% for css in css_list %}
   <div class="col l4 m6 s12">
diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2
index 82bbdd9..52a9961 100644
--- a/webapp/titanembeds/templates/embed.html.j2
+++ b/webapp/titanembeds/templates/embed.html.j2
@@ -20,7 +20,7 @@
     {% include 'google_analytics.html.j2' %}
     
     {% if css is not none %}
-    <style id="user-defined-css">{% if cssvariables is not none and css.css_var_bool %}{{ cssvariables|e }}{% endif %} {{ css.css }}</style>
+    <style id="user-defined-css">{% if cssvariables is not none and css.css_var_bool %}{{ cssvariables|e }}{% endif %} {% if css.css is not none %}{{ css.css }}{% endif %}</style>
     {% endif %}
   </head>
   <body>
diff --git a/webapp/titanembeds/templates/usercss.html.j2 b/webapp/titanembeds/templates/usercss.html.j2
index 18a7fe0..c512cce 100644
--- a/webapp/titanembeds/templates/usercss.html.j2
+++ b/webapp/titanembeds/templates/usercss.html.j2
@@ -85,13 +85,23 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
         </div>
         <p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p>
     </div>
+    {% if (new and premium_css_count >= cosmetics.css_limit) or (not new and premium_css_count >= cosmetics.css_limit and css.css is none) %}
+    <div class="col s12">
+        <hr>
+        <p class="flow-text">All custom CSS slots are used. Donate to get more!</p>
+        <p>Free up some slots by emptying your other custom CSS field and submitting it (Titan will automatically mark empty custom css editor fields as unused slots in the database) or delete the user defined css slot altogether.</p>
+        <hr>
+    </div>
+    {% else %}
     <div class="col s12">
         <p class="flow-text">Edit your CSS code here</p>
+        <p><em>Remove any text and leave this box blank when submitting to not use up your custom css slots.</em></p>
         <div style="position: relative; height: 40vh;">
-            <div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{{ css.css|e }}{% endif %}</div>
+            <div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}</div>
         </div>
         <br>
     </div>
+    {% endif %}
     <div class="col s12">
         <a id="submit-btn" class="waves-effect waves-light btn">Submit</a>
         {% if not new %}<a id="delete-btn" class="waves-effect waves-light btn red">Delete</a>{% endif %}