Add order page (#353)
* Add order page route * Initial backend post route * Move to static and prevent logged in users * Update files/routes/static.py Co-authored-by: code-review-doctor[bot] <72320148+code-review-doctor[bot]@users.noreply.github.com> * Make requested changes * Last snake changes Co-authored-by: code-review-doctor[bot] <72320148+code-review-doctor[bot]@users.noreply.github.com>remotes/1693045480750635534/spooky-22
outruncolors
GitHub
parent
14c72fb99e
commit
3ebccf35d1
|
|
@ -119,7 +119,6 @@ AGENDAPOSTER_MSG_HTML = """<p>Hi <a href="/id/{id}"><img loading="lazy" src="/pp
|
|||
<p><em>This is an automated message; if you need help, you can message us <a href="/contact">here</a>.</em></p>"""
|
||||
|
||||
|
||||
|
||||
################################################################################
|
||||
### SITE SPECIFIC CONSTANTS
|
||||
################################################################################
|
||||
|
|
@ -155,6 +154,7 @@ FEATURES = {
|
|||
'MARKUP_COMMANDS': True,
|
||||
'REPOST_DETECTION': True,
|
||||
'PATRON_ICONS': False,
|
||||
'ORDER': False
|
||||
}
|
||||
|
||||
EMOJI_MARSEYS = True
|
||||
|
|
@ -217,6 +217,7 @@ SNAPPY_THREAD = 0
|
|||
if SITE == 'rdrama.net':
|
||||
FEATURES['PRONOUNS'] = True
|
||||
FEATURES['HOUSES'] = True
|
||||
FEATURES['ORDER'] = True
|
||||
|
||||
SIDEBAR_THREAD = 37696
|
||||
BANNER_THREAD = 37697
|
||||
|
|
@ -314,6 +315,7 @@ elif SITE == 'watchpeopledie.co':
|
|||
else: # localhost or testing environment implied
|
||||
FEATURES['PRONOUNS'] = True
|
||||
FEATURES['HOUSES'] = True
|
||||
FEATURES['ORDER'] = True
|
||||
|
||||
if CARP_ID: GIFT_NOTIF_ID = CARP_ID
|
||||
elif AEVANN_ID: GIFT_NOTIF_ID = AEVANN_ID
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@ from .casino import *
|
|||
from .polls import *
|
||||
from .notifications import *
|
||||
from .hats import *
|
||||
from .asset_submissions import *
|
||||
from .asset_submissions import *
|
||||
|
|
@ -180,6 +180,37 @@ def static_megathread_index(v):
|
|||
def api(v):
|
||||
return render_template("api.html", v=v)
|
||||
|
||||
|
||||
@app.get("/order")
|
||||
@auth_desired
|
||||
def order(v):
|
||||
if not FEATURES['ORDER']: abort(404)
|
||||
if v: return redirect("/")
|
||||
return render_template("order.html", v=v)
|
||||
|
||||
@app.post("/order")
|
||||
@limiter.limit("1/hour;2/day")
|
||||
def submit_order():
|
||||
if not FEATURES['ORDER']: abort(404)
|
||||
|
||||
body = request.values.get("message")
|
||||
if not body: abort(400)
|
||||
|
||||
body = 'This message has been sent automatically to all admins via [/order](/order)\n\nMessage:\n\n' + body
|
||||
body = body.strip()
|
||||
body_html = sanitize(body)
|
||||
new_comment = Comment(author_id=AUTOJANNY_ID, parent_submission=None, level=1, body_html=body_html, sentto=2)
|
||||
g.db.add(new_comment)
|
||||
g.db.flush()
|
||||
|
||||
new_comment.top_comment_id = new_comment.id
|
||||
|
||||
for admin in g.db.query(User).filter(User.admin_level > 2, User.id != AEVANN_ID).all():
|
||||
notif = Notification(comment_id=new_comment.id, user_id=admin.id)
|
||||
g.db.add(notif)
|
||||
|
||||
return {"success": True}
|
||||
|
||||
@app.get("/contact")
|
||||
@app.get("/contactus")
|
||||
@app.get("/contact_us")
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@
|
|||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
<div class="navbar navbar-expand-md navbar-light" id="navbar">
|
||||
<div class="container-fluid" style="padding:0;">
|
||||
<a href="/" class="navbar-brand mr-auto {% if not has_logo and not sub %}flex-grow-1{% endif %}">
|
||||
|
|
@ -249,14 +248,19 @@
|
|||
|
||||
{% if SITE_NAME == 'rDrama' %}
|
||||
<a class="dropdown-item" href="/archives"><i class="fas fa-book fa-fw mr-3"></i>Archives</a>
|
||||
{% endif %}
|
||||
<a class="dropdown-item" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
|
||||
{% endif %}
|
||||
<a class="dropdown-item" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
|
||||
<a class="dropdown-item" role="button", onclick="post_toast(this,'/logout', true)"><i class="fas fa-sign-out fa-fw mr-3"></i>Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
|
||||
{% if FEATURES['ORDER'] %}
|
||||
<li class="nav-item d-flex align-items-center justify-content-center mx-1 mr-2">
|
||||
<a class="btn btn-primary" href="/order">Request a quote</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item d-flex align-items-center justify-content-center mx-1 mr-2">
|
||||
<a class="btn btn-primary" href="/contact">Contact us</a>
|
||||
</li>
|
||||
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
|
||||
|
|
@ -320,6 +324,11 @@
|
|||
<a class="nav-link" role="button", onclick="post_toast(this,'/logout', true)"><i class="fas fa-sign-out fa-fw mr-3 text-danger"></i>Log out</a>
|
||||
</li>
|
||||
{% else %}
|
||||
{% if FEATURES['ORDER'] %}
|
||||
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
|
||||
<a class="btn btn-primary btn-block" href="/order">Request a quote</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
|
||||
<a class="btn btn-primary btn-block" href="/contact">Contact us</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
{% extends "default.html" %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.order-form {
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.order-form h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order-form h2 hr {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-form h2 span {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.order-form--heading,
|
||||
.form-check {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#orderSuccess {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: none;
|
||||
padding-top: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.order-toast {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: unset;
|
||||
z-index: 1000;
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="order-form" id="orderForm" action="#" onsubmit="submitForm(event)">
|
||||
<h2 class="order-form--heading">
|
||||
<hr /><span>Request a quote</span>
|
||||
<hr />
|
||||
</h2>
|
||||
|
||||
<!-- Platforms -->
|
||||
<div class="mb-3">
|
||||
<label class="order-form--heading">Platforms to target</label>
|
||||
<div class="form-check">
|
||||
<input name="platform" class="form-check-input" type="checkbox" id="defaultCheck1" value="twitter">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Twitter
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input name="platform" class="form-check-input" type="checkbox" id="defaultCheck2" value="instagram">
|
||||
<label class="form-check-label" for="defaultCheck2">
|
||||
Instagram
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input name="platform" class="form-check-input" type="checkbox" id="defaultCheck3" value="tiktok">
|
||||
<label class="form-check-label" for="defaultCheck3">
|
||||
TikTok
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input name="platform" class="form-check-input" type="checkbox" id="defaultCheck3" value="facebook">
|
||||
<label class="form-check-label" for="defaultCheck4">
|
||||
Facebook
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input name="platform" class="form-check-input" type="checkbox" id="defaultCheck5" value="reddit">
|
||||
<label class="form-check-label" for="defaultCheck5">
|
||||
Reddit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Narrative -->
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="order-form--heading">Narrative to push</label>
|
||||
<textarea form="orderForm" class="textarea form-control" id="narrativeToPush" name="narrative"
|
||||
rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Additional Information -->
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="order-form--heading">Additional information</label>
|
||||
<textarea form="orderForm" class="textarea form-control" id="additionalInformation" name="info"
|
||||
rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Customer Email -->
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="order-form--heading">Your Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text"><small>We respect your privacy. <a href="https://wikipedia.org/">Learn
|
||||
more.</a></small></div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<button type="submit" class="btn btn-primary">Request Quote</button>
|
||||
</form>
|
||||
|
||||
<div id="orderSuccess">
|
||||
<div class="order-form--heading">
|
||||
<h1>Order Received</h1>
|
||||
<p>We will get back to you as quickly as possible with a quote.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast order-toast" id="order-post-success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true"
|
||||
data-bs-delay="5000">
|
||||
<div class="toast-body bg-success text-center text-white">
|
||||
<i class="fas fa-comment-alt-smile mr-2"></i> We have received your order.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast order-toast" id="order-post-error" role="alert" aria-live="assertive" aria-atomic="true"
|
||||
data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
|
||||
<div class="toast-body bg-danger text-center text-white">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
rDrama is very busy right now -- please try your request again later.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function submitForm(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formElement = document.getElementById('orderForm');
|
||||
const formData = new FormData(formElement);
|
||||
const structure = {
|
||||
platforms: [],
|
||||
narrative: "",
|
||||
info: "",
|
||||
email: ""
|
||||
};
|
||||
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (key === "platform") {
|
||||
structure.platforms.push(value);
|
||||
} else {
|
||||
structure[key] = value;
|
||||
}
|
||||
}
|
||||
const capitalize = word => `${word[0].toUpperCase()}${word.slice(1)}`
|
||||
let platformText = capitalize(structure.platforms[0]);
|
||||
|
||||
if (structure.platforms.length === 2) {
|
||||
platformText += ` and ${capitalize(structure.platforms[1])}`;
|
||||
} else if (structure.platforms.length === 3) {
|
||||
platformText += `, ${capitalize(structure.platforms[1])} and ${capitalize(structure.platforms[2])}`;
|
||||
} else {
|
||||
platformText += "all of your platforms"
|
||||
}
|
||||
|
||||
const messageToSend = `
|
||||
I am looking to push the following narrative on ${platformText}:
|
||||
|
||||
${structure.narrative}
|
||||
|
||||
${structure.info.length > 0 ? `Additionally, ${structure.info}` : ""}
|
||||
|
||||
You can contact me at ${structure.email}.
|
||||
`;
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open("post", `/order`);
|
||||
xhr.onload = function () {
|
||||
try {
|
||||
const response = JSON.parse(xhr.response);
|
||||
const succeeded = xhr.status >= 200 &&
|
||||
xhr.status < 300 &&
|
||||
response &&
|
||||
!response.error;
|
||||
|
||||
if (succeeded) {
|
||||
const successElement = document.getElementById("orderSuccess");
|
||||
const toast = document.getElementById("order-post-success");
|
||||
|
||||
bootstrap.Toast.getOrCreateInstance(toast).show();
|
||||
|
||||
formElement.style.display = "none";
|
||||
successElement.style.display = "flex";
|
||||
} else {
|
||||
const toast = document.getElementById("order-post-error");
|
||||
bootstrap.Toast.getOrCreateInstance(toast).show();
|
||||
}
|
||||
} catch (error) {
|
||||
const toast = document.getElementById("order-post-error");
|
||||
bootstrap.Toast.getOrCreateInstance(toast).show();
|
||||
}
|
||||
};
|
||||
|
||||
const form = new FormData();
|
||||
form.append("formkey", formkey());
|
||||
form.append("message", messageToSend);
|
||||
xhr.send(form);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue