From 47e5ee57ca448f6eabbc659465761a2b80667619 Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Wed, 28 Aug 2019 23:08:55 +0800
Subject: [PATCH] add balance shower and remove quote,color_picker config

---
 src/BalanceShower.css | 19 ++++++++++
 src/BalanceShower.js  | 81 +++++++++++++++++++++++++++++++++++++++++++
 src/Config.js         | 12 +------
 src/Flows.js          |  2 +-
 src/Title.js          | 15 ++++----
 src/color_picker.js   |  2 --
 6 files changed, 111 insertions(+), 20 deletions(-)
 create mode 100644 src/BalanceShower.css
 create mode 100644 src/BalanceShower.js

diff --git a/src/BalanceShower.css b/src/BalanceShower.css
new file mode 100644
index 0000000..4b5a918
--- /dev/null
+++ b/src/BalanceShower.css
@@ -0,0 +1,19 @@
+.balance-popover {
+    position: absolute;
+    top: 2em;
+    margin: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+}
+
+.balance-value {
+    opacity: 0;
+    animation: balance-disappear 2s ease-in;
+}
+
+@keyframes balance-disappear {
+    from {opacity: 1;}
+    75% {opacity: 1;}
+    to {opacity: 0;}
+}
\ No newline at end of file
diff --git a/src/BalanceShower.js b/src/BalanceShower.js
new file mode 100644
index 0000000..86ebf52
--- /dev/null
+++ b/src/BalanceShower.js
@@ -0,0 +1,81 @@
+import React, {Component, PureComponent} from 'react';
+import {PKUHELPER_ROOT} from './infrastructure/const';
+import {API_VERSION_PARAM, get_json} from './flows_api';
+import {TokenCtx} from './UserAction';
+
+import './BalanceShower.css';
+
+export class BalanceShower extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state={
+            loading_status: 'idle',
+            error: null,
+            balance: null,
+        };
+    }
+
+    do_load(token) {
+        if(this.state.loading_status==='loading')
+            return;
+        if(!token || !window.config.easter_egg) {
+            this.setState({
+                loading_status: 'idle',
+            });
+            return;
+        }
+
+        this.setState({
+            loading_status: 'loading',
+        },()=>{
+            fetch(
+                PKUHELPER_ROOT+'api_xmcp/isop/card_balance'
+                +'?user_token='+encodeURIComponent(token)
+                +API_VERSION_PARAM()
+            )
+                .then(get_json)
+                .then((json)=>{
+                    console.log(json);
+                    if(!json.success)
+                        throw new Error(JSON.stringify(json));
+
+                    this.setState({
+                        loading_status: 'done',
+                        error: null,
+                        balance: json.balance,
+                    });
+                })
+                .catch((e)=>{
+                    console.error(e);
+                    this.setState({
+                        loading_status: 'error',
+                        error: ''+e,
+                    });
+                });
+        })
+    }
+
+    render_popover() {
+        if(this.state.loading_status==='idle') // no token or disabled
+            return null;
+        else if(this.state.loading_status==='loading')
+            return (<div className="box box-tip">……</div>);
+        else if(this.state.loading_status==='error')
+            return (<div className="box box-tip balance-value"><a onClick={()=>{alert(this.state.error)}}>无法查询余额</a></div>);
+        else if(this.state.loading_status==='done')
+            return (<div className="box box-tip balance-value">校园卡 ￥{this.state.balance}</div>);
+        else
+            return null;
+    }
+
+    render() {
+        return (
+            <TokenCtx.Consumer>{(token)=>(
+                <div onClick={()=>this.do_load(token.value)}>
+                    <div className="balance-popover">{this.render_popover()}</div>
+                    {this.props.children}
+                </div>
+            )}</TokenCtx.Consumer>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Config.js b/src/Config.js
index b494f41..a7d14b9 100644
--- a/src/Config.js
+++ b/src/Config.js
@@ -14,9 +14,7 @@ const DEFAULT_CONFIG={
     background_img: 'static/bg/gbp.jpg',
     background_color: '#113366',
     pressure: false,
-    quote: true,
     horizontal_scroll: true,
-    color_picker: true,
     easter_egg: true,
     comment_cache: false,
     color_scheme: 'default',
@@ -235,20 +233,12 @@ export class ConfigUI extends PureComponent {
                     <hr />
                     <ConfigSwitch callback={this.save_changes_bound} id="pressure" name="快速返回"
                                   description="短暂按住 Esc 键或重压屏幕（3D Touch）可以快速返回或者刷新树洞"
-                    />
-                    <hr />
-                    <ConfigSwitch callback={this.save_changes_bound} id="quote" name="自动显示引文"
-                                  description="当树洞正文提到另一个树洞的编号时，在下方自动显示引文"
-                    />
+                    />y
                     <hr />
                     <ConfigSwitch callback={this.save_changes_bound} id="horizontal_scroll" name="横向滚动"
                                   description="在树洞列表里横向滚动浏览回复，如果经常误触可以把它关掉"
                     />
                     <hr />
-                    <ConfigSwitch callback={this.save_changes_bound} id="color_picker" name="回复颜色标记"
-                                  description="为不同人的回复分配不同颜色"
-                    />
-                    <hr />
                     <ConfigSwitch callback={this.save_changes_bound} id="comment_cache" name="评论缓存"
                                   description="缓存已读树洞的评论（加载更快，但可能有bug）"
                     />
diff --git a/src/Flows.js b/src/Flows.js
index fe5d121..bc06ad6 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -484,7 +484,7 @@ class FlowItemRow extends PureComponent {
         let parts=split_text(this.state.info.text,hl_rules);
 
         let quote_id=null;
-        if(!this.props.is_quote && window.config.quote)
+        if(!this.props.is_quote)
             for(let [mode,content] of parts)
                 if(mode==='pid' && QUOTE_BLACKLIST.indexOf(content)===-1 && parseInt(content)<parseInt(this.state.info.pid))
                     if(quote_id===null)
diff --git a/src/Title.js b/src/Title.js
index 3bf70b5..8e6505d 100644
--- a/src/Title.js
+++ b/src/Title.js
@@ -6,6 +6,7 @@ import {PromotionBar} from './Common';
 import {ConfigUI} from './Config';
 
 import './Title.css';
+import {BalanceShower} from './BalanceShower';
 
 const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
 
@@ -39,7 +40,7 @@ const HELP_TEXT=(
                     window.location.reload(true);
                 },200);
             }}>强制检查更新</a>&nbsp;
-            ([{process.env.REACT_APP_BUILD_INFO||'---'}] {process.env.NODE_ENV})
+            ({process.env.REACT_APP_BUILD_INFO||'---'} {process.env.NODE_ENV})
         </p>
         <p>
             This program is free software: you can redistribute it and/or modify
@@ -186,11 +187,13 @@ export function Title(props) {
         <div className="title-bar">
             <AppSwitcher appid="hole" />
             <div className="aux-margin">
-                <div className="title">
-                    <p className="centered-line">
-                        P大树洞
-                    </p>
-                </div>
+                <BalanceShower>
+                    <div className="title">
+                        <p className="centered-line">
+                            P大树洞
+                        </p>
+                    </div>
+                </BalanceShower>
                 <ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} />
             </div>
         </div>
diff --git a/src/color_picker.js b/src/color_picker.js
index cff6ead..f786652 100644
--- a/src/color_picker.js
+++ b/src/color_picker.js
@@ -12,8 +12,6 @@ export class ColorPicker {
         name=name.toLowerCase();
         if(name==='洞主')
             return ['hsl(0,0%,97%)','hsl(0,0%,25%)'];
-        if(!window.config.color_picker)
-            return ['hsl(0,0%,87%)','hsl(0,0%,13%)'];
 
         if(!this.names[name]) {
             this.current_h+=golden_ratio_conjugate;