Implement purchasing option for custom css

webapp/titanembeds/blueprints/user/user.py

@@ -421,3 +421,29 @@ def donate_thanks():
     tokens = get_titan_token(session["user_id"])
     transaction = request.args.get("transaction")
     return render_template("donate_thanks.html.j2", tokens=tokens, transaction=transaction)
+
+@user.route('/donate', methods=['PATCH'])
+@discord_users_only()
+def donate_patch():
+    item = request.form.get('item')
+    amount = int(request.form.get('amount'))
+    if amount <= 0:
+        abort(400)
+    subtract_amt = 0
+    if item == "custom_css_slots":
+        subtract_amt = 100
+    amt_change = -1 * subtract_amt * amount
+    subtract = set_titan_token(session["user_id"], amt_change, "BUY " + item + " x" + str(amount))
+    if not subtract:
+        return ('', 402)
+    session["tokens"] += amt_change
+    if item == "custom_css_slots":
+        entry = db.session.query(Cosmetics).filter(Cosmetics.user_id == session["user_id"]).first()
+        if not entry:
+            entry = Cosmetics(session["user_id"])
+            entry.css = True
+            entry.css_limit = 0
+        entry.css_limit += amount
+        db.session.add(entry)
+        db.session.commit()
+    return ('', 204)

webapp/titanembeds/static/js/donate.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, location, Materialize */
 (function () {
     $('#token-slider').on('input', function(){
         var slider_value = $("#token-slider").val();
@@ -16,4 +16,34 @@
         $(document.body).append(form);
         form.submit();
     });
+    
+    function patchForm(item, amount) {
+        var funct = $.ajax({
+            dataType: "json",
+            method: "PATCH",
+            data: {"item": item, "amount": amount},
+        });
+        return funct.promise();
+    }
+    
+    $("#buy-custom-css-slots-btn").click(function () {
+        var amount = $.trim($("#custom-css-slots-amount").val());
+        if (amount == "") {
+            return;
+        }
+        var formPatch = patchForm("custom_css_slots", amount);
+        formPatch.done(function (data) {
+            alert("Successfully bought " + amount + " custom css slots!");
+            location.reload();
+        });
+        formPatch.fail(function (data) {
+            if (data.status == 400) {
+                Materialize.toast('Amount cannot be zero or under!', 10000);
+            } else if (data.status == 402) {
+                Materialize.toast('Insufficient token funds!', 10000);
+            } else {
+                Materialize.toast('Purchasing custom css slots failed!', 10000);
+            }
+        });
+    });
 })();

webapp/titanembeds/templates/donate.html.j2

@@ -9,8 +9,7 @@
     <div class="col s12">
         <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
             <h4>The Name-Your-Price Tool</h4>
-            <p class="flow-text">Currently if you donate, we cannot give much back in return, yet. However, we do have some donatator features up our sleeves and will be implemented.</p>
-            <p class="flow-text">For now, you will receive <strong>Titan Tokens&trade;</strong> (to be spent on donator features) and a <strong>supporter role</strong> on our support server.</p>
+            <p class="flow-text">Donate to receive <strong>Titan Tokens&trade;</strong> (to be spent on donator features below) and a <strong>supporter role</strong> on our support server.</p>
             <p class="range-field">
               <input type="range" id="token-slider" min="1" max="100" value="5" />
             </p>
@@ -19,6 +18,29 @@
         </div>
     </div>
 </div>
+<hr>
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
+            <p class="flow-text"><strong>Current token amount: {{ session["tokens"] }}</strong></p>
+        </div>
+    </div>
+</div>
+<hr>
+<h2>Donators' Shoppe</h2>
+<p class="flow-text">Your personal pit-stop before your next conquest mission to embed all yer servers!</p>
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
+            <h4>Custom CSS Slots <strong>[100 tokens]</strong></h4>
+            <p class="flow-text">Pick an amount of custom css slots you would like to stock up.</p>
+            <div class="input-field inline">
+                <input placeholder="Custom CSS Slots Amount" type="number" id="custom-css-slots-amount">
+                <a class="waves-effect waves-light btn" id="buy-custom-css-slots-btn">Buy</a>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 {% block script %}
 <script type="text/javascript" src="{{ url_for('static', filename='js/donate.js') }}"></script>