add: personal info page

2021-12-30 16:37:58 +08:00 · 2021-12-30 16:37:58 +08:00 · b226e09c6c
parent bff30e2bb2
commit b226e09c6c
8 changed files with 140 additions and 17 deletions
--- a/app.py
+++ b/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)
--- a/lib/init.py
+++ b/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"
 ]
--- a/lib/db_init.py
+++ b/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):
--- a/lib/elo.py
+++ b/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
--- a/lib/utils.py
+++ b/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
--- a/templates/index.html
+++ 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 id="W0">{{ p0work }}</p><br />
+                        姓名<br /><p>{{ p0name }}</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 id="W1">{{ p1work }}</p><br />
+                        姓名<br /><p>{{ p1name }}</p><br />
+                        代表作<br /><p>{{ p1work }}</p><br />
                    </div>
                </div>
            </div>
--- a/templates/info.html
+++ b/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>
--- a/templates/list.html
+++ b/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>