样式优化
This commit is contained in:
parent
e3c9aacece
commit
6c77a4ba05
|
|
@ -7,10 +7,10 @@
|
|||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container text-center pt-5">
|
||||
<div class="container-fluid text-center pt-5">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<footer class="footer mt-auto py-3 bg-light">
|
||||
<footer class="footer text-center mt-auto py-3 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
|
|
|||
|
|
@ -5,20 +5,18 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="pt-1 mb-3">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<select id="dateSelect" class="form-select" aria-label="日期选择">
|
||||
{% for recent_result in recent_results %}
|
||||
<option value="{{ recent_result.datestr }}" {{ 'selected' if date==recent_result.datestr else '' }}>
|
||||
{{ recent_result.datestr }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button type="button" class="btn btn-outline-secondary" onclick="back()">返回</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<select id="dateSelect" class="form-select" aria-label="日期选择">
|
||||
{% for recent_result in recent_results %}
|
||||
<option value="{{ recent_result.datestr }}" {{ 'selected' if date==recent_result.datestr else '' }}>
|
||||
{{ recent_result.datestr }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button type="button" class="btn btn-outline-secondary" onclick="back()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" style="width: 100%;height:400px;"></div>
|
||||
|
|
|
|||
|
|
@ -18,98 +18,141 @@
|
|||
</div>
|
||||
<form id="inputForm" class="form-inline" onsubmit="return false;">
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<label class="input-group-text" for="inputName" id="basic-addon1">姓名</label>
|
||||
<input type="text"
|
||||
class="form-control" {{ 'readonly="readonly"' if user_menu.nickname else '' | safe }}
|
||||
id="inputName" name="nickname" value="{{ user_menu.nickname }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="input-group-addon">我选择</label>
|
||||
</div>
|
||||
<div class="mb-3 row p-2">
|
||||
{% for choice in all_choice %}
|
||||
<div class="col-6 mb-1 p-1 border rounded {{ loop.cycle("rounded-end-0", "border-start-0 rounded-start-0") }}">
|
||||
<div class="row">
|
||||
<label for="range{{ loop.index }}" class="col-12">
|
||||
<span>{{ choice.label }} - </span>
|
||||
<span class="percentage">{{ '{:.2f}'.format((user_menu.menu.get(choice.name) or 0) * 100) }}</span>
|
||||
<span>%</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="col-8">
|
||||
<input type="range" class="form-range" data-skip-falsy="true"
|
||||
id="range{{ loop.index }}" name="choice[{{ choice.name }}]:number"
|
||||
min="0" max="10" step="1"
|
||||
value="{{ (user_menu.menu.get(choice.name) or 0) * 10 }}">
|
||||
<div class="accordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseMyChoice" aria-expanded="true"
|
||||
aria-controls="collapseMyChoice">
|
||||
我选择
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseMyChoice" class="accordion-collapse collapse show">
|
||||
<div class="accordion-body">
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<label class="input-group-text" for="inputName" id="basic-addon1">姓名</label>
|
||||
<input type="text"
|
||||
class="form-control" {{ 'readonly="readonly"' if user_menu.nickname else '' | safe }}
|
||||
id="inputName" name="nickname" value="{{ user_menu.nickname }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input class="form-check-input" type="checkbox" name="dislike[]"
|
||||
id="checkDislike{{ loop.index }}" value="{{ choice.name }}"
|
||||
{{ 'checked' if choice.name in user_menu.dislike else '' }}>
|
||||
<label class="form-check-label" for="checkDislike{{ loop.index }}">
|
||||
不吃
|
||||
</label>
|
||||
<div class="mb-3 row p-2">
|
||||
{% for choice in all_choice %}
|
||||
<div class="col-6 mb-1 p-1 border rounded {{ loop.cycle("rounded-end-0", "border-start-0 rounded-start-0") }}">
|
||||
<div class="row">
|
||||
<label for="range{{ loop.index }}"
|
||||
class="col-12 d-flex justify-content-between align-items-center">
|
||||
<span>{{ choice.label }}</span>
|
||||
<span class="percentage">{{ '{:.1f}'.format((user_menu.menu.get(choice.name) or 0) * 100) }}%</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="col-sm-8 col-md-9 col-lg-10">
|
||||
<input type="range" class="form-range" data-skip-falsy="true"
|
||||
id="range{{ loop.index }}"
|
||||
name="choice[{{ choice.name }}]:number"
|
||||
min="0" max="10" step="1"
|
||||
value="{{ (user_menu.menu.get(choice.name) or 0) * 10 }}">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input class="form-check-input" type="checkbox" name="dislike[]"
|
||||
id="checkDislike{{ loop.index }}" value="{{ choice.name }}"
|
||||
{{ 'checked' if choice.name in user_menu.dislike else '' }}>
|
||||
<label class="form-check-label" for="checkDislike{{ loop.index }}">
|
||||
不吃
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary" onclick="update()">更新</button>
|
||||
<button type="button" class="btn btn-outline-secondary" onclick="clearValue()">不吃</button>
|
||||
<button type="button" id="btnRoll"
|
||||
class="btn btn-outline-secondary" {{ "" if can_roll == True else ' disabled="disabled"' | safe }}
|
||||
onclick="roll()">开始抽签
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseAllChoice" aria-expanded="true"
|
||||
aria-controls="collapseAllChoice">
|
||||
大家的选择
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseAllChoice" class="accordion-collapse collapse show">
|
||||
<div class="accordion-body">
|
||||
<label class="d-flex justify-content-between">
|
||||
总投票人数:{{ total_vote }}
|
||||
</label>
|
||||
<ul class="list-group pt-2 mb-4">
|
||||
{% for key in summary_keys %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center{{ " active" if result == key else "" }} {{ " list-group-item-primary" if predict_result == key else "" }}">
|
||||
<span class="col-5">{{ key }}</span>
|
||||
<span class="col-3">{{ '{:.1f}'.format(summary[key] | round(2)) }}票</span>
|
||||
<span class="col-3">{{ '{:.1f}'.format(summary[key] / total_vote * 100 | round(2)) }}%</span>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="list-group-item">
|
||||
<span>大家还没有选择</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if (users|length) > 3 %}
|
||||
<div class="pt-1 mb-3">
|
||||
<label class="mb-2">参与投票人员</label>
|
||||
<ul class="list-group list-group-horizontal">
|
||||
{% for user in users %}
|
||||
<li class="list-group-item">{{ user }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if ((users|length) > 3 or result) %}
|
||||
<div class="pt-1 mb-3">
|
||||
<label class="mb-2">{{ ('如果吃' + predict_result) if predict_result else '' }}就餐人员</label>
|
||||
<ul class="list-group list-group-horizontal">
|
||||
{% for user in eat_users %}
|
||||
<li class="list-group-item">{{ user }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseRecentResult" aria-expanded="false"
|
||||
aria-controls="collapseRecentResult">
|
||||
最近点餐结果
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseRecentResult" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
<div class="pt-1 mb-3">
|
||||
<ul class="list-group">
|
||||
{% for recent_result in recent_results %}
|
||||
<li onclick="viewChart('{{ recent_result.datestr }}')"
|
||||
class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span>{{ recent_result.value }}</span>
|
||||
<span>{{ recent_result.datestr }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<button type="button" class="btn btn-outline-primary" onclick="update()">更新</button>
|
||||
<button type="button" class="btn btn-outline-secondary" onclick="clearValue()">不吃</button>
|
||||
<button type="button" id="btnRoll"
|
||||
class="btn btn-outline-secondary" {{ "" if can_roll == True else ' disabled="disabled"' | safe }}
|
||||
onclick="roll()">开始抽签
|
||||
</button>
|
||||
<div class="pt-3">
|
||||
<label>大家的选择 - 总投票人数:{{ total_vote }}</label>
|
||||
<ul class="list-group pt-2 mb-4">
|
||||
{% for key in summary_keys %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center{{ " active" if result == key else "" }} {{ " list-group-item-primary" if predict_result == key else "" }}">
|
||||
<span class="col-5">{{ key }}</span>
|
||||
<span class="col-3">{{ '{:.2f}'.format(summary[key] | round(2)) }}票</span>
|
||||
<span class="col-3">{{ '{:.2f}'.format(summary[key] / total_vote * 100 | round(2)) }}%</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% if (users|length) > 3 %}
|
||||
<div class="pt-1 mb-3">
|
||||
<label class="mb-2">参与投票人员</label>
|
||||
<ul class="list-group list-group-horizontal">
|
||||
{% for user in users %}
|
||||
<li class="list-group-item">{{ user }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if ((users|length) > 3 or result) %}
|
||||
<div class="pt-1 mb-3">
|
||||
<label class="mb-2">{{ ('如果吃' + predict_result) if predict_result else '' }}就餐人员</label>
|
||||
<ul class="list-group list-group-horizontal">
|
||||
{% for user in eat_users %}
|
||||
<li class="list-group-item">{{ user }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="pt-1 mb-3">
|
||||
<label class="mb-2">最近点餐结果</label>
|
||||
<ul class="list-group">
|
||||
{% for recent_result in recent_results %}
|
||||
<li onclick="viewChart('{{ recent_result.datestr }}')"
|
||||
class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span>{{ recent_result.value }}</span>
|
||||
<span>{{ recent_result.datestr }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
|
|
@ -130,7 +173,7 @@
|
|||
const summary = values.reduce((a, b) => parseInt(a) + parseInt(b));
|
||||
const spans = $(".percentage")
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
spans[i].innerHTML = summary > 0 ? (parseFloat(values[i]) * 100 / summary).toFixed(2) : '0.00';
|
||||
spans[i].innerHTML = (summary > 0 ? (parseFloat(values[i]) * 100 / summary).toFixed(1) : '0.0') + '%';
|
||||
if (values[i] > 0 && checkBoxs[i].checked) {
|
||||
checkBoxs[i].checked = false;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue