Add custom css slots to prepare for donators feature

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 ###

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):

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

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

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);
+        }
+    });
 }

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) {

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>

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">

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>

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 %}