add: personal info page

app.py

@@ -66,12 +66,28 @@ def rank_list_data():
     for k in range(limit):
         kw["data"].append({
             "rank": ind + k,
-            "name": res[k].name,
+            "name": "<a href=\"/info?id={:d}\">{:s}</a>".format(res[k].id, res[k].name),
             "rate": "{:.2f}".format(res[k].rate)
         })
 
     return kw
 
+@app.route('/info', methods=["GET"])
+def info():
+    id = request.args.get('id')
+    res = get_person(id, ses)
+    hist = list(map(float, res.hist.split(',')))
+
+    kw = {
+        "name": res.name,
+        "work": res.work,
+        "rate": "{:.2f}".format(res.rate),
+        "hist": hist,
+        "count": res.count,
+        "picsrc": './static/pic/{:d}.jpeg'.format(res.id),
+    }
+    return render_template('info.html', **kw)
+
 
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=4002)

lib/__init__.py

@@ -9,13 +9,14 @@
 # here put the import lib
 from .db_init import Person
 from .elo import set_result
-from .utils import match, get_session, get_counts, get_rank
+from .utils import match, get_session, get_counts, get_person, get_rank
 
 __all__ = [
     "match",
     "Person",
     "set_result",
     "get_session",
-    "get_rank",
     "get_counts",
+    "get_person",
+    "get_rank"
 ]

lib/db_init.py

@@ -20,7 +20,7 @@ class Person(Base):
     name = Column(String)
     work = Column(String, default='无')
     rate = Column(Float, default=1400.0)
-    hist = Column(String, default='')
+    hist = Column(String, default='1400')
     count = Column(Integer, default=0)
 
     def __repr__(self):

lib/elo.py

@@ -35,7 +35,7 @@ def __compute_K(P: Person) -> float:
 def __add_history(P: Person):
     P.count += 1
     if P.count % 10 == 0:
-        P.hist += str('{:.2f}'.format(P.rate))
+        P.hist += str(',{:.2f}'.format(P.rate))
 
 def set_result(A: Person, B: Person, res: float) -> None:
     '''set result of this game

lib/utils.py

@@ -32,7 +32,11 @@ def get_counts(ses: Session) -> int:
     res = ses.query(Person).count()
     return res
 
-def get_person(ses: Session) -> Person:
+def get_person(id: int, ses: Session) -> Person:
+    res = ses.query(Person).filter_by(id=id).first()
+    return res
+
+def get_random_person(ses: Session) -> Person:
     '''get random person
 
     Parameters
@@ -104,6 +108,6 @@ def match(ses: Session) -> Person:
     -------
          : two persons
     '''
-    A = get_person(ses)
+    A = get_random_person(ses)
     B = get_enemy(A, ses)
     return A, B

templates/index.html

@@ -19,7 +19,7 @@
                 max-width: 60%;max-height : 100%;position: absolute;
                 top: 0; left: 0;right: 0;bottom: 0;margin: auto;
             }
-            a {
+            .layui-header a, .layui-footer a {
                 color: #fff;text-decoration: none;
             }
         </style>
@@ -41,22 +41,22 @@
                 <h1>你对谁更有好感？</h1>
             </div>
             <div class="layui-row" style="margin-top: 3vh;height: 60vh;">
-                <div class="layui-col-md4" style="text-align: center;">
+                <div class="layui-col-md4">
                     <div style="width: 60%;height: 30vh;position: relative;display: inline-block;">
-                        <img id="P0" alt="Person 0" src={{ p0src }}>
+                        <img alt="Person 0" src={{ p0src }}>
                     </div>
                     <div style="margin: 3vh auto;height: 15vh;">
-                        姓名<br /><p id="N0">{{ p0name }}</p><br />
+                        姓名<br /><p>{{ p0name }}</p><br />
-                        代表作<br /><p id="W0">{{ p0work }}</p><br />
+                        代表作<br /><p>{{ p0work }}</p><br />
                     </div>
                 </div>
-                <div class="layui-col-md4 layui-col-md-offset4" style="text-align: center;">
+                <div class="layui-col-md4 layui-col-md-offset4">
                     <div style="width: 60%;height: 30vh;position: relative;display: inline-block;">
-                        <img id="P1" alt="Person 1" src={{ p1src }}>
+                        <img alt="Person 1" src={{ p1src }}>
                     </div>
                     <div style="margin: 2vh auto;height: 15vh;">
-                        姓名<br /><p id="N1">{{ p1name }}</p><br />
+                        姓名<br /><p>{{ p1name }}</p><br />
-                        代表作<br /><p id="W1">{{ p1work }}</p><br />
+                        代表作<br /><p>{{ p1work }}</p><br />
                     </div>
                 </div>
             </div>

templates/info.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ELO Star</title>
+        <script src="{{ url_for('static', filename='layui.js') }}"></script>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/layui.css') }}">
+        <style>
+            .layui-footer {
+                position: fixed;left: 0;right: 0;bottom: 0;z-index: 990;height: 7vh;line-height: 7vh;
+                padding: 0 15px;box-shadow: -1px 0 4px rgb(0 0 0 / 12%);background-color: #FAFAFA;
+            }
+            .main {
+                text-align: center;background: #fff;height: 80vh;
+                margin-top: 2vh;padding-top: 1vh;padding-bottom: 1vh;border-radius: 20px;
+            }
+            .echarts_widget {
+                height: 50vh;position: absolute;
+                top: 0; left: 0;right: 0;bottom: 0;margin: auto;
+            }
+            img {
+                max-width: 60%;max-height : 100%;position: absolute;
+                top: 0; left: 0;right: 0;bottom: 0;margin: auto;
+            }
+            .layui-header a, .layui-footer a {
+                color: #fff;text-decoration: none;
+            }
+        </style>
+
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+    </head>
+    <body style="background: #EAEDF0;">
+        <div class="layui-header layui-bg-cyan" style="height: 9vh;">
+            <div style="float: left;font-size: 28px;margin-left: 5vw;line-height: 9vh;">
+                <a href="/">ELO Star</a>
+            </div>
+            <ul class="layui-nav layui-bg-cyan" style="height: 9vh;float: right;">
+                <li class="layui-nav-item"><a href="/new">比较</a></li>
+                <li class="layui-nav-item"><a href="/list">排行榜</a></li>
+                <li class="layui-nav-item"><a href="/">添加资料</a></li>
+                <li class="layui-nav-item"><a href="https://git.foolishfox.cn/fox/ELOStar">Gitea</a></li>
+            </ul>
+        </div>
+        <div class="layui-container main">
+            <div class="layui-row" style="margin-top: 2vh;height: 5vh;">
+                <h1>{{ name }}</h1>
+            </div>
+            <div class="layui-row" style="margin-top: 3vh;height: 70vh;">
+                <div class="layui-col-md5">
+                    <div style="width: 60%;height: 50vh;position: relative;display: inline-block;">
+                        <img alt="{{ name }}" src={{ picsrc }}>
+                    </div>
+                    <div style="height: 15vh;">
+                        <p>代表作: {{ work }}</p><br />
+                        <p>分&#12288;数: {{ rate }}</p><br />
+                        <p>比较数: {{ count }}</p><br />
+                    </div>
+                </div>
+                <div class="layui-col-md7">
+                    <div style="position: relative;display: inline-block;height: 65vh;width: 90%;">
+                        <div id="rate_container" class="echarts_widget"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-footer layui-bg-cyan" style="text-align: center;">
+            <div class="layui-row">
+                <div class="layui-col-md6">
+                    <p>© 2021 ELO Star</p>
+                </div>
+                <div class="layui-col-md6">
+                    <p>Made By <a href="https://foolishfox.cn">Fox</a></p>
+                </div>
+            </div>
+        </div>
+
+        <script type="text/javascript">
+            var rate = echarts.init(document.getElementById('rate_container'));
+            var num = {{ count }};
+            var hist = {{ hist }};
+            var data = [], k = 0;
+            while ( k<=num ) {
+                data.push([k, hist[k/10]]);
+                k += 10;
+            }
+            var rate_option = {
+                title: { text: '历史分数变化', subtext: '每10次比较记录一次' },
+                tooltip: { trigger: 'axis' },
+                xAxis: { type: 'value', interval: 10 },
+                yAxis: { type: 'value' },
+                dataZoom: [{}],
+                series: [{
+                    type: 'line',
+                    data: data
+                }]
+            };
+            rate.setOption(rate_option);
+        </script>
+    </body>
+</html>

templates/list.html

@@ -15,7 +15,7 @@
                 text-align: center;background: #fff;height: 80vh;
                 margin-top: 2vh;padding-top: 1vh;padding-bottom: 1vh;border-radius: 20px;
             }
-            a {
+            .layui-header a, .layui-footer a {
                 color: #fff;text-decoration: none;
             }
         </style>