From c1fed297ce161f268faa86fdb9b4f1db05c15652 Mon Sep 17 00:00:00 2001
From: Ehco1996 <zh19960202@gmail.com>
Date: Sun, 11 Aug 2024 09:27:48 +0800
Subject: [PATCH] fix html

---
 apps/proxy/models.py              |  8 +++----
 apps/sspanel/views.py             |  6 ++---
 templates/web/node_occupancy.html | 40 ++++++++++++-------------------
 3 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/apps/proxy/models.py b/apps/proxy/models.py
index e33b89f6b4..1fe218c5e2 100644
--- a/apps/proxy/models.py
+++ b/apps/proxy/models.py
@@ -461,10 +461,6 @@ def ehco_relay_port(self):
     def relay_count(self):
         return self.relay_rules.all().count()
 
-    @property
-    def is_shared_node(self):
-        return not OccupancyConfig.objects.filter(proxy_node=self).exists()
-
     @cached_property
     def online_info(self):
         return UserTrafficLog.get_latest_online_log_info(self)
@@ -1107,6 +1103,10 @@ def get_user_occupancies(cls, user: User, out_of_usage=False, limit=None):
             query = query[:limit]
         return query
 
+    @classmethod
+    def check_node_occupied_by_user(cls, node: ProxyNode, user: User):
+        return cls._valid_occupancy_query().filter(proxy_node=node, user=user).exists()
+
     def human_total_traffic(self):
         return utils.traffic_format(self.total_traffic)
 
diff --git a/apps/sspanel/views.py b/apps/sspanel/views.py
index 2491f3733d..bf49045d31 100644
--- a/apps/sspanel/views.py
+++ b/apps/sspanel/views.py
@@ -218,10 +218,10 @@ def get(self, request):
         shared_node_count = 0
         occupied_node_count = 0
         for node in user_active_nodes:
-            if node.is_shared_node:
-                shared_node_count += 1
-            else:
+            if UserProxyNodeOccupancy.check_node_occupied_by_user(node, user):
                 occupied_node_count += 1
+            else:
+                shared_node_count += 1
 
         context = {
             "user": user,
diff --git a/templates/web/node_occupancy.html b/templates/web/node_occupancy.html
index adfc32c54e..98b8b4364b 100644
--- a/templates/web/node_occupancy.html
+++ b/templates/web/node_occupancy.html
@@ -1,18 +1,14 @@
 {% extends 'base.html' %}
 {% block authed %}
     <div class="column is-12">
-        <section class="hero is-warning is-smaill">
+        <section class="hero is-warning is-small">
             <div class="hero-body">
                 <div class="container">
                     <h1 class="title">独享节点</h1>
                     <ul>
                         <li>流量和共享节点分开计算</li>
-                        <li>
-                            购买后，可在当前页面观察到流量的使用情况
-                        </li>
-                        <li>
-                            购买后，直接从订阅连接里就能拉取到所有的独享节点
-                        </li>
+                        <li>购买后，可在当前页面观察到流量的使用情况</li>
+                        <li>购买后，直接从订阅连接里就能拉取到所有的独享节点</li>
                     </ul>
                 </div>
             </div>
@@ -46,9 +42,9 @@ <h1 class="title">独享节点</h1>
                     </li>
                 </ul>
             </div>
-            <div class="pricing-table" id="id-pricing-table-purchasable">
+            <div class="pricing-table is-active" 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="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">
@@ -84,7 +80,7 @@ <h1 class="title">独享节点</h1>
                 </div>
                 <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="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">
@@ -126,15 +122,13 @@ <h1 class="title">独享节点</h1>
                             <a class="is-active" id="tab-usable">可使用</a>
                             <a id="tab-outdated">已过期</a>
                         </p>
-                        <a class="panel-block" id="block-usable">
+                        <div class="panel-block is-active" 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>
@@ -144,27 +138,24 @@ <h1 class="title">独享节点</h1>
                                             <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 }}%
+                                                          max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}{{ o.used_percentage }}
+                                                <span>{{ o.human_used_traffic }} / {{ o.human_total_traffic }}</span>
                                             </td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
                             </table>
-                        </a>
-                        <a class="panel-block is-hidden" id="block-outdated">
+                        </div>
+                        <div 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>
@@ -174,18 +165,17 @@ <h1 class="title">独享节点</h1>
                                             <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 }}%
+                                                value="{{ o.used_traffic }}"
+                                                max="{{ o.total_traffic }}"></progress>{{ o.used_percentage }}{{ o.used_percentage }}
+                                      <span>{{ o.human_used_traffic }} / {{ o.human_total_traffic }}</span>
                                             </td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
                             </table>
-                        </a>
+                        </div>
                     </nav>
                 </div>
             </div>