Skip to content

Commit

Permalink
feat: opt occupancy ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ehco1996
Ehco1996 committed Jan 21, 2024
1 parent 183b5b6 commit 1015f4c
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 109 deletions.
14 changes: 9 additions & 5 deletions apps/sspanel/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,15 +369,19 @@ def get(self, request):
request.user, out_of_usage=False
)
user_occupy_node_ids = [occupy.proxy_node_id for occupy in usable_occupies]
purchasable_proxy_nodes = OccupancyConfig.get_purchasable_proxy_nodes(
request.user
)
for node in purchasable_proxy_nodes:
node.already_buy = node.id in user_occupy_node_ids
all_proxy_nodes = OccupancyConfig.get_purchasable_proxy_nodes(request.user)
purchasable_proxy_nodes = []
renewable_proxy_nodes = []
for node in all_proxy_nodes:
if node.id in user_occupy_node_ids:
renewable_proxy_nodes.append(node)
else:
purchasable_proxy_nodes.append(node)

context = {
"user": request.user,
"purchasable_proxy_nodes": purchasable_proxy_nodes,
"renewable_proxy_nodes": renewable_proxy_nodes,
"usable_occupies": usable_occupies,
"outdated_occupies": UserProxyNodeOccupancy.get_user_occupancies(
request.user, out_of_usage=True, limit=10
Expand Down
279 changes: 175 additions & 104 deletions templates/web/node_occupancy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ <h2 class="subtitle">受够了和别人共享节点?来买一个独享节点吧
</div>
</section>
</div>

<div class="column is-12">
<nav class="level box">
<div class="level-item has-text-centered">
Expand All @@ -25,9 +26,20 @@ <h2 class="subtitle">受够了和别人共享节点?来买一个独享节点吧
</div>
</div>
</nav>

<div class="box">
<h4 class="title is-4">可购买</h4>
<div class="pricing-table">
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a data-price-table-id="id-pricing-table-purchasable">可购买</a>
</li>
<li>
<a data-price-table-id="id-pricing-table-renewable">可续费</a>
</li>
</ul>
</div>

<div class="pricing-table" id="id-pricing-table-purchasable">
{% for node in purchasable_proxy_nodes %}
<div class="pricing-plan {{ node.occupancy_config.color }} {{ node.occupancy_config.bulma_is_active }} ">
<div class="plan-header">{{ node.name }}</div>
Expand All @@ -54,115 +66,174 @@ <h4 class="title is-4">可购买</h4>
onsubmit="return confirm('是否购买？')">
{% csrf_token %}
<div class="plan-footer">
{% if node.already_buy %}
<button class="button is-fullwidth" type="submit">续费</button>
{% else %}
<button class="button is-fullwidth" type="submit">购买</button>
{% endif %}
<button class="button is-fullwidth" type="submit">购买</button>
</div>
<input type="hidden" name="node_id" value="{{ node.pk }}">
<input type="hidden" name="node_id" value="{{ node.pk }}" />
</form>
</div>
{% empty %}
<p class="subtitle">被富哥买完啦,请发工单联系站长补货...</p>
{% endfor %}
</div>
</div>
<div class="box">
<nav class="panel is-info">
<p class="panel-heading">已购买</p>
<p class="panel-tabs">
<a class="is-active" id="tab-usable">可使用</a>
<a id="tab-outdated">已过期</a>
</p>
<a class="panel-block" id="block-usable">
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>节点</th>
<th>开始时间</th>
<th>到期时间</th>
<th>已用流量</th>
<th>总流量</th>
<th>流量进度</th>
</tr>
</thead>
<tbody>
{% for o in usable_occupies %}
<tr>
<td>{{ o.proxy_node.name }}</td>
<td>{{ o.start_time }}</td>
<td>{{ o.end_time }}</td>
<td>{{ o.human_used_traffic }}</td>
<td>{{ o.human_total_traffic }}</td>
<td>
<progress class="progress {{ o.progress_color }}"
value="{{ o.used_traffic }}"
max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}%
</td>
</tr>
{% endfor %}
</tbody>
</table>
</a>
<a class="panel-block is-hidden" id="block-outdated">
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>节点</th>
<th>开始时间</th>
<th>到期时间</th>
<th>已用流量</th>
<th>总流量</th>
<th>流量进度</th>
</tr>
</thead>
<tbody>
{% for o in outdated_occupies %}
<tr>
<td>{{ o.proxy_node.name }}</td>
<td>{{ o.start_time }}</td>
<td>{{ o.end_time }}</td>
<td>{{ o.human_used_traffic }}</td>
<td>{{ o.human_total_traffic }}</td>
<td>
<progress class="progress {{ o.progress_color }}"
value="{{ o.used_traffic }}"
max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}%
</td>
</tr>
{% endfor %}
</tbody>
</table>
</a>
</nav>
</div>
</div>
<script>
// when click tab-usable, add class is-active to tab and block and hide block-outdated
$('#tab-usable').click(function () {
// for tab
$('#tab-usable').addClass('is-active');
$('#tab-outdated').removeClass('is-active');

// for block
$('#block-usable').addClass('is-active');
$('#block-usable').removeClass('is-hidden');
$('#block-outdated').removeClass('is-active');
$('#block-outdated').addClass('is-hidden');
});
<div class="pricing-table is-hidden" id="id-pricing-table-renewable">
{% for node in renewable_proxy_nodes %}
<div class="pricing-plan {{ node.occupancy_config.color }} {{ node.occupancy_config.bulma_is_active }} ">
<div class="plan-header">{{ node.name }}</div>
<div class="plan-price">
<span class="plan-price-amount">
<span class="plan-price-currency">￥</span>{{ node.occupancy_config.occupancy_price }}</span>/月
</div>
<div class="plan-items">
<div class="plan-item">
类型：
<span class="tag {{ node.occupancy_config.color }}">{{ node.node_type }}</span>
</div>
<div class="plan-item">
地区：{{ node.country }}
<span class="icon">
<i class="flag-icon flag-icon-{{ node.country | lower }}"></i>
</span>
</div>
<div class="plan-item">月流量：{{ node.occupancy_config.human_occupancy_traffic }}</div>
<div class="plan-item">备注：{{ node.occupancy_config.remark }}</div>
</div>
<form method="post"
action="{% url 'sspanel:node_occupancy' %}"
onsubmit="return confirm('是否续费？')">
{% csrf_token %}
<div class="plan-footer">
<button class="button is-fullwidth" type="submit">续费</button>
</div>
<input type="hidden" name="node_id" value="{{ node.pk }}" />
</form>
</div>
{% endfor %}
</div>

<div class="box">
<nav class="panel is-info">
<p class="panel-heading">已购买</p>
<p class="panel-tabs">
<a class="is-active" id="tab-usable">可使用</a>
<a id="tab-outdated">已过期</a>
</p>
<a class="panel-block" id="block-usable">
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>节点</th>
<th>开始时间</th>
<th>到期时间</th>
<th>已用流量</th>
<th>总流量</th>
<th>流量进度</th>
</tr>
</thead>
<tbody>
{% for o in usable_occupies %}
<tr>
<td>{{ o.proxy_node.name }}</td>
<td>{{ o.start_time }}</td>
<td>{{ o.end_time }}</td>
<td>{{ o.human_used_traffic }}</td>
<td>{{ o.human_total_traffic }}</td>
<td>
<progress class="progress {{ o.progress_color }}"
value="{{ o.used_traffic }}"
max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}%
</td>
</tr>
{% endfor %}
</tbody>
</table>
</a>
<a class="panel-block is-hidden" id="block-outdated">
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>节点</th>
<th>开始时间</th>
<th>到期时间</th>
<th>已用流量</th>
<th>总流量</th>
<th>流量进度</th>
</tr>
</thead>
<tbody>
{% for o in outdated_occupies %}
<tr>
<td>{{ o.proxy_node.name }}</td>
<td>{{ o.start_time }}</td>
<td>{{ o.end_time }}</td>
<td>{{ o.human_used_traffic }}</td>
<td>{{ o.human_total_traffic }}</td>
<td>
<progress class="progress {{ o.progress_color }}"
value="{{ o.used_traffic }}"
max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}%
</td>
</tr>
{% endfor %}
</tbody>
</table>
</a>
</nav>
</div>
</div>

<script>
// when click tab-usable, add class is-active to tab and block and hide block-outdated
$("#tab-usable").click(function () {
// for tab
$("#tab-usable").addClass("is-active");
$("#tab-outdated").removeClass("is-active");

// for block
$("#block-usable").addClass("is-active");
$("#block-usable").removeClass("is-hidden");
$("#block-outdated").removeClass("is-active");
$("#block-outdated").addClass("is-hidden");
});

// when click tab-outdated, add class is-active to tab and block and hide block-usable
$("#tab-outdated").click(function () {
// for tab
$("#tab-outdated").addClass("is-active");
$("#tab-usable").removeClass("is-active");

// when click tab-outdated, add class is-active to tab and block and hide block-usable
$('#tab-outdated').click(function () {
// for tab
$('#tab-outdated').addClass('is-active');
$('#tab-usable').removeClass('is-active');
// for block
$("#block-outdated").addClass("is-active");
$("#block-outdated").removeClass("is-hidden");
$("#block-usable").removeClass("is-active");
$("#block-usable").addClass("is-hidden");
});

// for block
$('#block-outdated').addClass('is-active');
$('#block-outdated').removeClass('is-hidden');
$('#block-usable').removeClass('is-active');
$('#block-usable').addClass('is-hidden');
});
</script>
{% endblock authed %}
$(document).ready(function () {
// Get all tab elements
var tabs = $(".tabs");

// Add click event listener to each tab
tabs.find("li").on("click", function () {
// Remove active class from all tabs
tabs.find("li").removeClass("is-active");
// Add active class to the clicked tab
$(this).addClass("is-active");

// Get the data-price-table-id attribute of the clicked tab
var priceTableId = $(this)
.find("a")
.attr("data-price-table-id");
console.log("priceTableId:", priceTableId);
// Hide all price tables
$(".pricing-table").addClass("is-hidden");

// add is-active class to the price table
$("#" + priceTableId).removeClass("is-hidden");
$("#" + priceTableId).addClass("is-active");
});
});
</script>

{% endblock authed %}
</div>

0 comments on commit 1015f4c

Please sign in to comment.