WS : quand la K-Fêt est ouverte ?

This commit is contained in:
Qwann 2017-01-27 21:46:21 +01:00
parent ddf6343826
commit ce9f717f06
5 changed files with 162 additions and 117 deletions

View file

@ -24,3 +24,21 @@ class KPsul(JsonWebsocketConsumer):
def disconnect(self, message, **kwargs): def disconnect(self, message, **kwargs):
pass pass
class Home(JsonWebsocketConsumer):
# Set to True if you want them, else leave out
strict_ordering = False
slight_ordering = False
def connection_groups(self, **kwargs):
return ['kfet.home']
def connect(self, message, **kwargs):
pass
def receive(self, content, **kwargs):
pass
def disconnect(self, message, **kwargs):
pass

View file

@ -9,4 +9,5 @@ from kfet import consumers
channel_routing = [ channel_routing = [
route_class(consumers.KPsul, path=r"^/ws/k-fet/k-psul/$"), route_class(consumers.KPsul, path=r"^/ws/k-fet/k-psul/$"),
route_class(consumers.Home, path=r"^/ws/k-fet/home/$"),
] ]

View file

@ -149,6 +149,12 @@ textarea {
line-height:30px; line-height:30px;
} }
.content-left .line-medium {
font-size:20px;
font-weight:bold;
text-align:center;
}
.content-left .line.line-big { .content-left .line.line-big {
font-family:Oswald; font-family:Oswald;
font-size:60px; font-size:60px;
@ -156,6 +162,13 @@ textarea {
text-align:center; text-align:center;
} }
.content-left .line.line-large {
font-family:Oswald;
font-size:40px;
font-weight:bold;
text-align:center;
}
.content-left .line.line-bigsub { .content-left .line.line-bigsub {
font-size:25px; font-size:25px;
font-weight:bold; font-weight:bold;
@ -166,6 +179,13 @@ textarea {
font-size:45px; font-size:45px;
text-align:center; text-align:center;
} }
/*
.content-left-top .line.to-colorize {
padding-left: 30px;
padding-right: 30px;
margin-left: -30px;
margin-right: -30px;
}*/
.content-right { .content-right {
margin:0 15px; margin:0 15px;

View file

@ -5,20 +5,32 @@
{% block title %}Accueil{% endblock %} {% block title %}Accueil{% endblock %}
{% block content-header-title %}Accueil{% endblock %} {% block content-header-title %}Accueil{% endblock %}
{% block content %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/home.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
{% endblock %}
{% block content %}
<div class="row"> <div class="row">
<div class="col-sm-4 col-md-3 col-content-left"> <div class="col-sm-4 col-md-3 col-content-left">
<div class="content-left"> <div class="content-left">
<div class="content-left-top"> <div class="content-left-top">
<div class="line line-big">Trucs</div> <div class="line line-medium">La K-Fêt est <span id="is_open1">Peut-être</span></div>
<div class="line line-bigsub">à dire</div> <div class="line line-large to-colorize" id="is_open2">???????</div>
<div class="line line-medium">
Dernière activité il&nbsp;y&nbsp;a
<span id="last_op"></span>
</div> </div>
</div>
<!--
<div class="buttons"> <div class="buttons">
<a class="btn btn-primary btn-lg" href="#TODO">Choix 1</a> <a class="btn btn-primary btn-lg" href="#TODO">Choix 1</a>
<a class="btn btn-primary btn-lg" href="#TODO">Choix 2</a> <a class="btn btn-primary btn-lg" href="#TODO">Choix 2</a>
<a class="btn btn-primary btn-lg" href="#TODO">Choix 3</a> <a class="btn btn-primary btn-lg" href="#TODO">Choix 3</a>
</div> </div>
-->
</div> </div>
</div> </div>
<div class="col-sm-8 col-md-9 col-content-right"> <div class="col-sm-8 col-md-9 col-content-right">
@ -67,124 +79,107 @@
</div> </div>
</div> </div>
{% endblock %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/home.css' %}">
<script src="{% static 'kfet/js/Chart.bundle.js' %}"></script>
<script> <script>
jQuery(document).ready(function() { jQuery(document).ready(function() {
var ctx1 = $("#myChart1"); // VARIABLES
var ctx2 = $("#myChart2"); // variables d'éléments du DOM
var ctx3 = $("#myChart3"); var last_op_span = $("#last_op");
var myChart = new Chart(ctx1, { // varibles globales
type: 'bar', var last_op_date = new Date("{{ last_op }}");
data: { var is_open1 = $("#is_open1");
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], var is_open2 = $("#is_open2");
datasets: [{ var to_colorize = $(".to-colorize");
label: '# of Votes', // INITIALIZATION
data: [12, 19, 3, 5, 2, 3], update_ouverture();
backgroundColor: [
'rgba(255, 99, 132, 0.2)', // EVENTS
'rgba(54, 162, 235, 0.2)', // on met à jour toutes les 10 secondes
'rgba(255, 206, 86, 0.2)', window.setInterval(function(){
'rgba(75, 192, 192, 0.2)', update_ouverture();
'rgba(153, 102, 255, 0.2)', }, 10000);
'rgba(255, 159, 64, 0.2)'
], // FONCTIONS
borderColor: [ function update_time_ouverture(nb_min, nb_hour) {
'rgba(255,99,132,1)', last_op_span.html(text_diff_time(nb_min, nb_hour));
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
} }
}] function update_text_ouverture(nb_min, nb_hour) {
if (nb_hour == 0) {
if (nb_min <= 15) {
is_open1.html("");
is_open2.html("OUVERTE");
} else if (nb_min <= 30) {
is_open1.html("peut-être");
is_open2.html("OUVERTE");
} else {
is_open1.html("peut-être");
is_open2.html("FERMÉE");
}
} else {
is_open1.html("");
is_open2.html("FERMÉE");
} }
} }
}); function update_color_ouverture(nb_min, nb_hour) {
var myChart = new Chart(ctx2, { var hue = 0;
type: 'bar', var saturation = 70;
data: { var value = 30;
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], if (nb_hour == 0) {
datasets: [{ hue = 120 - nb_min * 2;
label: '# of Votes', value += 30*(2/60)*Math.min(nb_min, 60-nb_min)
data: [12, 19, 3, 5, 2, 3], saturation += 30*(2/60)*Math.min(nb_min, 60-nb_min)
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
} }
}] var hsvText = "hsl("+hue+","+saturation+"%,"+value+"%)";
to_colorize.css({"color": hsvText });
}
function update_ouverture() {
var date_now = Date.now();
var tmp = date_now - last_op_date;
tmp = Math.floor(tmp/1000); // Nombre de secondes entre les 2 dates
diff_sec = tmp % 60; // Extraction du nombre de secondes
tmp = Math.floor((tmp-diff_sec)/60); // Nombre de minutes (partie entière)
diff_min = tmp % 60; // Extraction du nombre de minutes
tmp = Math.floor((tmp-diff_min)/60); // Nombre d'heures (entières)
diff_hour = tmp % 24; // Extraction du nombre d'heures
update_time_ouverture(diff_min, diff_hour);
update_text_ouverture(diff_min, diff_hour);
update_color_ouverture(diff_min, diff_hour);
}
function text_diff_time(nb_min, nb_hour) {
if (nb_hour == 0) {
if (nb_min == 0) {
return "moins d'une minute";
} else if (nb_min == 1) {
return "une minute";
} else {
return nb_min + " minutes";
}
} else if (nb_hour == 1) {
return "une heure et " + nb_min + " minutes";
} else {
return nb_hour + " heures et " + nb_min + " minutes";
} }
} }
});
var myChart = new Chart(ctx3, { // SYNCHRONIZATION
type: 'bar', websocket_msg_default = {'last_op': 0}
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], var websocket_protocol = window.location.protocol == 'https:' ? 'wss' : 'ws';
datasets: [{ var location_host = window.location.host;
label: '# of Votes', var location_url = window.location.pathname.startsWith('/gestion/') ? location_host + '/gestion' : location_host;
data: [12, 19, 3, 5, 2, 3], socket = new ReconnectingWebSocket(websocket_protocol+"://" + location_url + "/ws/k-fet/home/");
backgroundColor: [
'rgba(255, 99, 132, 0.2)', socket.onmessage = function(e) {
'rgba(54, 162, 235, 0.2)', data = $.extend({}, websocket_msg_default, JSON.parse(e.data));
'rgba(255, 206, 86, 0.2)', last_op_date = new Date(data['last_op']);
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)', update_ouverture();
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
} }
}]
}
}
});
}); });
</script> </script>
{% endblock %} {% endblock %}

View file

@ -44,10 +44,15 @@ class Home(TemplateView):
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
context = super(TemplateView, self).get_context_data(**kwargs) context = super(TemplateView, self).get_context_data(**kwargs)
# Carte
articles = Article.objects.all().filter(is_sold=True, hidden=False) articles = Article.objects.all().filter(is_sold=True, hidden=False)
context['pressions'] = articles.filter(category__name='Pression') context['pressions'] = articles.filter(category__name='Pression')
context['articles'] = (articles.exclude(category__name='Pression') context['articles'] = (articles.exclude(category__name='Pression')
.order_by('category')) .order_by('category'))
# La K-Fêt est ouverte ?
last_opgroup = OperationGroup.objects.all().order_by('-at').first()
context['last_op'] = last_opgroup.at.isoformat()
# context['dark'] =
return context return context
@method_decorator(login_required) @method_decorator(login_required)
@ -1108,6 +1113,12 @@ def kpsul_perform_operations(request):
'stock': article['stock'] 'stock': article['stock']
}) })
consumers.KPsul.group_send('kfet.kpsul', websocket_data) consumers.KPsul.group_send('kfet.kpsul', websocket_data)
# Websocket last operation
websocket_last_op = {}
websocket_last_op['last_op'] = operationgroup.at.isoformat()
consumers.Home.group_send('kfet.home', websocket_last_op)
return JsonResponse(data) return JsonResponse(data)
@teamkfet_required @teamkfet_required