Skip to content

Commit

Permalink
feat: opt ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ehco1996
Ehco1996 committed Dec 27, 2023
1 parent 1ff8093 commit 32dbc20
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 52 deletions.
15 changes: 13 additions & 2 deletions apps/proxy/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1056,9 +1056,20 @@ def check_and_incr_traffic(cls, user_id, proxy_node_id, traffic):
r.save()

@classmethod
def get_user_occupancies(cls, user: User):
def get_user_occupancies(cls, user: User, out_of_usage=False, limit=None):
# no mater out of usage or not, return all occupancies
return cls.objects.filter(user=user)
query = cls.objects.filter(user=user)
if out_of_usage:
query = query.filter(
end_time__lt=utils.get_current_datetime()
) | query.filter(used_traffic__gte=F("total_traffic"))
else:
query = query.filter(end_time__gt=utils.get_current_datetime()).filter(
used_traffic__lt=F("total_traffic")
)
if limit:
query = query[:limit]
return query

def human_total_traffic(self):
return utils.traffic_format(self.total_traffic)
Expand Down
8 changes: 6 additions & 2 deletions apps/sspanel/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,11 +351,15 @@ def get(self, request):
purchasable_proxy_nodes = OccupancyConfig.get_purchasable_proxy_nodes(
request.user
)
occupies = UserProxyNodeOccupancy.get_user_occupancies(request.user)
context = {
"user": request.user,
"purchasable_proxy_nodes": purchasable_proxy_nodes,
"occupies": occupies,
"usable_occupies": UserProxyNodeOccupancy.get_user_occupancies(
request.user, out_of_usage=False
),
"outdated_occupies": UserProxyNodeOccupancy.get_user_occupancies(
request.user, out_of_usage=True, limit=10
),
}
return render(request, "web/node_occupancy.html", context=context)

Expand Down
4 changes: 2 additions & 2 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
<a class="navbar-item is-active">交易购买</a>
<a class="navbar-item" href="{% url 'sspanel:chargecenter' %}">捐赠充值</a>
<a class="navbar-item" href="{% url 'sspanel:node_occupancy' %}">独享节点</a>
<a class="navbar-item" href="{% url 'sspanel:shop' %}">商品中心</a>
<a class="navbar-item" href="{% url 'sspanel:shop' %}">共享节点</a>
<a class="navbar-item" href="{% url 'sspanel:aff_invite' %}">邀请返利</a>
<a class="navbar-item is-active">公告交流</a>
<a class="navbar-item" href="{% url 'sspanel:announcement' %}">历史公告</a>
Expand Down Expand Up @@ -128,7 +128,7 @@ <h2 class="subtitle">
</a>
</li>
<li>
<a href="{% url 'sspanel:shop' %}">商品中心</a>
<a href="{% url 'sspanel:shop' %}">共享节点</a>
</li>
<li>
<a href="{% url 'sspanel:aff_invite' %}">邀请返利</a>
Expand Down
134 changes: 98 additions & 36 deletions templates/web/node_occupancy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,44 +71,106 @@ <h4 class="title is-4">可购买</h4>
</div>



<div class="box">
<h4 class="title is-4">已购买</h4>
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>节点</th>
<th>开始时间</th>
<th>到期时间</th>
<th>已用流量</th>
<th>总流量</th>
<th>流量进度</th>
<th>状态</th>
</tr>
</thead>
<tbody>
{% for o in 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>
<td>
{% if o.out_of_usage %}
失效
{% else %}
正常
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<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');

// for block
$('#block-outdated').addClass('is-active');
$('#block-outdated').removeClass('is-hidden');
$('#block-usable').removeClass('is-active');
$('#block-usable').addClass('is-hidden');
});
</script>
{% endblock main %}
14 changes: 5 additions & 9 deletions templates/web/shop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<div class="hero-body">
<div class="container">
<h1 class="title">
商品列表：
共享节点
</h1>
<h2 class="subtitle">
没有余额的话,点击<a href="{% url 'sspanel:chargecenter' %}"><strong>这里</strong></a>可以去充值
量大管饱，便宜实惠, 不容错过
</h2>
</div>
</div>
Expand Down Expand Up @@ -50,10 +50,7 @@ <h2 class="subtitle">
<strong>流量：</strong>
<code>{{ good.total_transfer }}</code>
<br>
<strong>提升等级至：</strong>
<code>{{ good.level }} 级</code>
<br>
<strong>等级有效期：</strong>
<strong>有效期：</strong>
<code>{{ good.days }} 天</code>
<hr>
<a class="button is-danger is-outlined" id="id-button-pruchase">确认购买</a>
Expand All @@ -68,8 +65,7 @@ <h2 class="subtitle">
</div>
<div class="plan-items">
<div class="plan-item">流量：{{ good.total_transfer }}</div>
<div class="plan-item">提升等级至：{{ good.level }}级</div>
<div class="plan-item">等级有效期：{{ good.days }}天</div>
<div class="plan-item">有效期：{{ good.days }}天</div>
</div>
<div class="plan-footer">
<a class="modal-button is-fullwidth" data-target="modal-{{ good.pk }}">
Expand All @@ -78,7 +74,7 @@ <h2 class="subtitle">
</div>
</div>
{% empty %}
<p class="subtitle">暂时没有商品上</p>
<p class="subtitle">暂时没有共享节点,请发工单联系站长补货...</p>
{% endfor %}
</div>

Expand Down
2 changes: 1 addition & 1 deletion templates/web/user_info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ <h2 class="subtitle">导入订阅地址到您的应用以完成订阅</h2>
<li>连接密码:
<code>{{ user.proxy_password }}</code>
</li>
<li>等级到期时间:
<li>到期时间:
<code>{{ user.level_expire_time }} </code>
</li>
<li>上次使用时间:
Expand Down

0 comments on commit 32dbc20

Please sign in to comment.