排序展示，实时显示当前比例

src/dinner.py

@@ -156,10 +156,12 @@ def dinner():
     result = fetch_roll_result()
     can_roll = (check_roll() == 1)
     all_choice = list(map(lambda x: {'name': x[0], 'label': x[1]}, fetch_all_menu()))
+    summary_keys = list(filter(lambda x: x in summary.keys(), map(lambda y: y['name'], all_choice)))
     return render_template('dinner.html',
                            all_choice=all_choice,
                            menu=menu,
                            summary=summary,
+                           summary_keys=summary_keys,
                            total_vote=total_vote,
                            result=result,
                            can_roll=can_roll,

templates/dinner.html

@@ -18,11 +18,14 @@
             </div>
             {% for choice in all_choice %}
                 <div class="input-group">
-                    <label for="range{{ loop.index }}" class="form-label">{{ choice['label'] }}
+                    <label for="range{{ loop.index }}" class="form-label">
-                        - {{ '{:.2f}'.format((menu.get(choice['name']) or 0) * 100) }}%</label>
+                        <span>{{ choice['label'] }}</span> - <span
-                    <input type="range" class="form-range" id="range{{ loop.index }}" name="{{ choice['name'] }}"
+                            class="percentage">{{ '{:.2f}'.format((menu.get(choice['name']) or 0) * 100) }}</span>%
-                           min="0"
+                    </label>
-                           max="10" step="1" value="{{ (menu.get(choice['name']) or 0) * 10 }}">
+                    <input type="range" class="form-range"
+                           id="range{{ loop.index }}" name="{{ choice['name'] }}"
+                           min="0" max="10" step="1"
+                           value="{{ (menu.get(choice['name']) or 0) * 10 }}">
                 </div>
             {% endfor %}
         </div>
@@ -36,7 +39,7 @@
     <div style="padding-top: 40px">
         <label>大家的选择 - 总票数:{{ '{:.2f}'.format(total_vote | round(2)) }}</label>
         <ul style="padding-top: 20px; margin-bottom: 80px" class="list-group">
-            {% for key in summary|dictsort(true) %}
+            {% for key in summary_keys %}
                 <li class="list-group-item {{ "active" if result == key else "" }}">
                     <div class="row justify-content-between">
                         <span class="col-5">{{ key }}</span>
@@ -57,9 +60,21 @@
 <script src="/static/jquery.serializejson.js"></script>
 <script src="/static/bootstrap.bundle.min.js"></script>
 
+<!--suppress JSUnresolvedReference -->
 <script>
+    $("input[type=range]").change(function () {
+        const values = $("input[type=range]").map(function () {
+            return $(this).val();
+        }).get();
+        const summary = values.reduce((a, b) => parseInt(a) + parseInt(b));
+        const spans = $(".percentage")
+        for (let i = 0; i < values.length; i++) {
+            spans[i].innerHTML = (parseFloat(values[i]) * 100 / summary).toFixed(2);
+        }
+    });
+
     function update() {
-        var data = $('#inputForm').serializeJSON();
+        const data = $('#inputForm').serializeJSON();
         $.ajax({
             url: 'dinner/update?value=' + JSON.stringify(data),
             dataType: 'json',
@@ -111,7 +126,7 @@
                 17, 30, 0, 0
             );
             const diff = targetTime - now;
-            btn = $("#btnRoll");
+            const btn = $("#btnRoll");
             if (diff <= 0) {
                 window.clearInterval(counterId);
                 btn.text('开始抽签');