syntaxwebsite/app/pages/currencyexchange/index.html

114 lines
5.4 KiB
HTML

{% extends '__layout__.html' %}
{% block title %}Currency Exchange{% endblock %}
{% block head %}
<style>
.text-secondary {
color: rgb(199, 199, 199) !important;
}
.text-robux {
color: rgb(26, 212, 103) !important;
font-weight: 600;
}
.text-tickets {
color: rgb(224, 224, 60) !important;
font-weight: 600;
}
</style>
{% endblock %}
{% block content %}
<div class="container position-relative" style="min-height: 100vh;margin-top: 100px;max-width: 1200px;">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div>
{% for category, message in messages %}
{% if category == 'error': %}
<div class="alert border p-2 text-center alert-danger border-danger">
{{ message }}
</div>
{% endif %}
{% if category == 'success': %}
<div class="alert border p-2 text-center alert-success border-success">
{{ message }}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="d-flex align-items-center">
<div>
<h1 class="m-0">Currency Exchange</h1>
<div class="d-flex">
<a class="text-decoration-none mt-1 ms-1" href="/currency-exchange/create">Create Exchange Offer</a>
<a class="text-decoration-none mt-1 ms-2" href="/transactions/">My Transactions</a>
</div>
</div>
<div class="ms-auto form-floating">
<select class="form-control" id="change-category-select">
<option value="rt" {%if PageCategory == "rt"%}selected{%endif%} selected>Tix to Robux</option>
<option value="tr" {%if PageCategory == "tr"%}selected{%endif%}>Robux to Tix</option>
<option value="all" {%if PageCategory == "all"%}selected{%endif%}>All</option>
</select>
<label for="change-category-select">Category</label>
</div>
<div class="ms-2 form-floating">
<select class="form-control" id="change-sort-select">
<option value="best" {%if SortType == "best"%}selected{%endif%}>Best Value</option>
<option value="worst" {%if SortType == "worst"%}selected{%endif%}>Worst Value</option>
<option value="created" {%if SortType == "created"%}selected{%endif%}>Created</option>
</select>
<label for="change-sort-select">Sort</label>
</div>
</div>
<table class="table table-dark table-striped mt-2">
<thead>
<tr class="rounded-top">
<th scope="col">Date</th>
<th scope="col">Expires</th>
<th scope="col">Offering</th>
<th scope="col">Requesting</th>
<th scope="col">R:T Ratio</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="table-group-divider" style="border-color: rgb(20,20,20);">
{% for OfferObj in offers: %}
<tr>
<td>{{ OfferObj.created_at.strftime("%d/%m/%Y") }}</td>
<td>{{ OfferObj.expires_at.strftime("%d/%m/%Y") }}</td>
<td>
{% if OfferObj.offer_currency_type == 0 %}
<span class="text-robux">R$ {{OfferObj.offer_value}}</span>
{% else %}
<span class="text-tickets">T$ {{OfferObj.offer_value}}</span>
{% endif %}
</td>
<td>
{% if OfferObj.offer_currency_type == 1 %}
<span class="text-robux">R$ {{OfferObj.receive_value}}</span>
{% else %}
<span class="text-tickets">T$ {{OfferObj.receive_value}}</span>
{% endif %}
</td>
<td>
1:{{round(OfferObj.ratio, 3)}}
</td>
<td><a class="text-decoration-none" href="/currency-exchange/view/{{OfferObj.id}}">View</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% if len(offers) == 0: %}
<div class="text-center">
<p class="text-secondary">No offers found</p>
</div>
{%endif%}
<div class="align-items-center d-flex justify-content-center mt-2">
<a class="btn btn-sm text-white btn-primary me-2 pagination-back-btn {% if not hasPrevPage: %}disabled {% endif %}" {% if hasPrevPage: %}href="/currency-exchange/?category={{PageCategory}}&sort={{SortType}}&page={{PageNumber-1}}"{%endif%}>Previous</a>
<p class="m-0 pagination-page-number">Page {{PageNumber}}</p>
<a class="btn btn-sm text-white btn-primary ms-2 pagination-next-btn {% if not hasNextPage: %}disabled {% endif %}" {% if hasNextPage: %}href="/currency-exchange/?category={{PageCategory}}&sort={{SortType}}&page={{PageNumber+1}}"{%endif%}>Next</a>
</div>
</div>
<script>const s = document.getElementById("change-category-select");s.addEventListener("change", function() {var u = new URL(window.location.href);var sb = s.value;u.searchParams.set("category", sb);;window.location.href = u;});</script>
<script>const aa = document.getElementById("change-sort-select");aa.addEventListener("change", function() {var u = new URL(window.location.href);var ab = aa.value;u.searchParams.set("sort", ab);;window.location.href = u;});</script>
{% endblock %}