aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYingtong Li <runassudo@yingtongli.me>2017-03-23 23:59:21 +1100
committerYingtong Li <runassudo@yingtongli.me>2017-03-23 23:59:21 +1100
commit409021d18aae17fb7e7e88b1958f52004d5254cd (patch)
tree5836cd95bbf47c171b0ca7150e4df5144fd861a4
parentc69d546d8106d2c82a2a736cff3d949a8aee813e (diff)
Add sidebar
-rw-r--r--pblive/__init__.py23
-rw-r--r--pblive/static/css/base.css4
-rw-r--r--pblive/templates/admin_session.html5
-rw-r--r--pblive/templates/colour_picker.html6
-rw-r--r--pblive/templates/semantic_base.html7
-rw-r--r--pblive/templates/session.html3
-rw-r--r--pblive/templates/users.html29
7 files changed, 64 insertions, 13 deletions
diff --git a/pblive/__init__.py b/pblive/__init__.py
index 6fe05f5..2170fc3 100644
--- a/pblive/__init__.py
+++ b/pblive/__init__.py
@@ -85,6 +85,9 @@ def render_question(user, session, question_num):
def render_question_admin(session, question_num):
return flask.render_template(session.questions[question_num].template_admin, session=session, question_num=session.question_num)
+def render_sidebar(user, session):
+ return flask.render_template('users.html', session=session, user=user)
+
@socketio.on('join_admin')
def socket_join(session_name):
app.logger.debug('New admin {} connected'.format(flask.request.sid))
@@ -95,6 +98,7 @@ def socket_join(session_name):
# Send initial screen
flask_socketio.emit('update', render_question_admin(session, session.question_num), room=flask.request.sid)
+ flask_socketio.emit('update_left', render_sidebar(user, session), room=flask.request.sid)
@socketio.on('disconnect')
def socket_disconnect():
@@ -109,8 +113,13 @@ def socket_disconnect():
# Relay change
for _, other_user in pblive.data.users.items():
- if other_user != user and not other_user.colour and other_user.session == user.session:
- flask_socketio.emit('update', flask.render_template('colour_picker.html', session=user.session), room=other_user.sid)
+ if other_user != user and other_user.session == user.session:
+ flask_socketio.emit('update_left', render_sidebar(other_user, user.session), room=other_user.sid)
+ if not other_user.colour:
+ flask_socketio.emit('update', flask.render_template('colour_picker.html', session=user.session), room=other_user.sid)
+ for _, admin in pblive.data.admins.items():
+ if admin.session == user.session:
+ flask_socketio.emit('update_left', render_sidebar(admin, user.session), room=admin.sid)
del pblive.data.users[flask.request.sid]
@@ -124,10 +133,16 @@ def socket_register(colour_id, colour_name):
# Relay change
for _, other_user in pblive.data.users.items():
- if other_user != user and not other_user.colour and other_user.session == user.session:
- flask_socketio.emit('update', flask.render_template('colour_picker.html', session=user.session), room=other_user.sid)
+ if other_user != user and other_user.session == user.session:
+ flask_socketio.emit('update_left', render_sidebar(other_user, user.session), room=other_user.sid)
+ if not other_user.colour:
+ flask_socketio.emit('update', flask.render_template('colour_picker.html', session=user.session), room=other_user.sid)
+ for _, admin in pblive.data.admins.items():
+ if admin.session == user.session:
+ flask_socketio.emit('update_left', render_sidebar(admin, user.session), room=admin.sid)
flask_socketio.emit('update', render_question(user, user.session, user.session.question_num), room=user.sid)
+ flask_socketio.emit('update_left', render_sidebar(user, user.session), room=user.sid)
@socketio.on('answer')
def socket_answer(question_num, answer):
diff --git a/pblive/static/css/base.css b/pblive/static/css/base.css
index c9a353e..f636cfa 100644
--- a/pblive/static/css/base.css
+++ b/pblive/static/css/base.css
@@ -16,12 +16,12 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-#pblive-main {
+#pblive-container {
padding-top: 5em;
padding-bottom: 5em;
}
@media only screen and (max-width: 767px) {
- #pblive-main {
+ #pblive-container {
padding-top: 1em;
padding-bottom: 1em;
}
diff --git a/pblive/templates/admin_session.html b/pblive/templates/admin_session.html
index 04c15bc..efa944d 100644
--- a/pblive/templates/admin_session.html
+++ b/pblive/templates/admin_session.html
@@ -19,7 +19,7 @@
{% extends 'semantic_base.html' %}
{% block main %}
- <div class="ui container" id="session_main">
+ <div id="session_main">
Loading, please wait.
</div>
{% endblock %}
@@ -36,5 +36,8 @@
socket.on('update', function(data) {
$('#session_main').html(data);
});
+ socket.on('update_left', function(data) {
+ $('#pblive-left').html(data);
+ });
</script>
{% endblock %}
diff --git a/pblive/templates/colour_picker.html b/pblive/templates/colour_picker.html
index b3e3556..2c967d8 100644
--- a/pblive/templates/colour_picker.html
+++ b/pblive/templates/colour_picker.html
@@ -19,11 +19,9 @@
<h1 class="ui dividing header">Pick a colour</h1>
<div id="colour_picker_container">
- <div class="ui doubling grid">
+ <div style="line-height: 38px;">
{% for colour in session.colours %}
- <div class="column">
- <button class="ui button" style="background-color: {{ colour[1] }}; width: 32px; height: 32px; padding: 0 0;" onclick="socket.emit('register', {{ colour[0] }}, '{{ colour[1] }}');">{{ colour[0] }}</button>
- </div>
+ <button class="ui button" style="background-color: {{ colour[1] }}; width: 32px; height: 32px; padding: 0 0;" onclick="socket.emit('register', {{ colour[0] }}, '{{ colour[1] }}');">{{ colour[0] }}</button>
{% endfor %}
</div>
</div>
diff --git a/pblive/templates/semantic_base.html b/pblive/templates/semantic_base.html
index 6a80e08..00dd0de 100644
--- a/pblive/templates/semantic_base.html
+++ b/pblive/templates/semantic_base.html
@@ -31,8 +31,11 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">
</head>
<body>
- <div id="pblive-main" class="ui text container">
- {% block main %}{% endblock main %}
+ <div id="pblive-container" class="ui container">
+ <div id="pblive-left" style="width: 32px; margin-right: 16px; float: left;">&nbsp;</div>
+ <div id="pblive-main" style="width: calc(100% - 48px); float: left;">
+ {% block main %}{% endblock main %}
+ </div>
</div>
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.1.1.min.js') }}"></script>
diff --git a/pblive/templates/session.html b/pblive/templates/session.html
index 19ab7dd..f139a8b 100644
--- a/pblive/templates/session.html
+++ b/pblive/templates/session.html
@@ -36,5 +36,8 @@
socket.on('update', function(data) {
$('#session_main').html(data);
});
+ socket.on('update_left', function(data) {
+ $('#pblive-left').html(data);
+ });
</script>
{% endblock %}
diff --git a/pblive/templates/users.html b/pblive/templates/users.html
new file mode 100644
index 0000000..459969e
--- /dev/null
+++ b/pblive/templates/users.html
@@ -0,0 +1,29 @@
+{#
+ PBLive
+ Copyright © 2017 RunasSudo (Yingtong Li)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+#}
+
+{% if user.sid in data.users %}
+ <div>YOU:</div>
+ <div><button class="ui button" style="background-color: {{ user.colour[1] }}; width: 32px; height: 32px; padding: 0 0;">{{ user.colour[0] }}</button></div>
+ <div class="ui divider"></div>
+{% endif %}
+
+{% for _, other_user in data.users.items() %}
+ {% if other_user != user and other_user.colour and other_user.session == session %}
+ <div><button class="ui button" style="background-color: {{ other_user.colour[1] }}; width: 32px; height: 32px; padding: 0 0;">{{ other_user.colour[0] }}</button></div>
+ {% endif %}
+{% endfor %}
Contact (issues, pull requests, etc.) at git@yingtongli.me. Generated by cgit.