Commit cde61740 authored by Lucas Serrano's avatar Lucas Serrano

Progress-bar: css et filtres

 * Ajout d'une classe progress-bar au main css
 * Ajout de filtres pour sélectionner la classe dans un template
 * Modification de l'app quota
 * Amélioration de l'app impression
parent b20e0df3
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from django import template
register = template.Library()
CSS_CLASSES = ["overflow", "alert", "warning", "ok", "good"]
def _progress_class_generic(classes, value, arg=100):
"""Determines appropriate css class given a progress bar value and a maximum"""
try:
arg = float(arg)
value = float(value)
except ValueError:
return "overflow"
res = value/arg
if (res < 0) or (res > 1):
return classes[0]
elif res <= 0.25:
return classes[1]
elif res <= 0.5:
return classes[2]
elif res <= 0.75:
return classes[3]
else:
return classes[4]
def progress_class(value, arg=100):
return _progress_class_generic(CSS_CLASSES, value, arg)
def progress_class_reverse(value, arg=100):
return _progress_class_generic(CSS_CLASSES[:1] + CSS_CLASSES[:0:-1], value, arg)
register.filter('progress_class', progress_class)
register.filter('progress_class_reverse', progress_class_reverse)
......@@ -4,14 +4,16 @@
{% load staticfiles %}
{% block content %}
{% load custom_filters %}
<h2>{{ printer.name }}</h2>
<div class="row">
<div class="six columns">
<label>Nom de domaine:</label>
<label>Nom de domaine :</label>
{{ printer.domain_name }}
</div>
<div class="six columns">
<label>Status:</label>
<label>Statut :</label>
{{ printer.status }}
</div>
</div>
......@@ -22,7 +24,11 @@
<div class="three columns">
<h5>{{ tray.name }}</h5>
<label>Nombre de page :</label>
{{ tray.count }}/{{ tray.max_capacity }}
<div class="progress-container">
<div class="progress-bar {{ tray.count|progress_class:tray.max_capacity }}" style=" width:{% widthratio tray.count tray.max_capacity 100 %}%;">
{{ tray.count }}/{{ tray.max_capacity }}
</div>
</div>
<label>Format du papier :</label>
{{ tray.dimx }}x{{ tray.dimy }}mm
</div>
......@@ -39,7 +45,11 @@
<div class="three columns">
<h5>{{ supply.name }}</h5>
<label>Pourcentage :</label>
{{ supply.percent }}
<div class="progress-container">
<div class="progress-bar {{ supply.percent|progress_class }}" style=" width:{{ supply.percent }}%;">
{{ supply.percent }}
</div>
</div>
</div>
{% if forloop.counter|divisibleby:"4" and not forloop.first and not forloop.last %}
</div>
......
......@@ -393,7 +393,7 @@ INSTALLED_APPS = (
'django.contrib.staticfiles',
#'south',
'reversion',
#'custom_shortcuts'
'custom_shortcuts',
'printer',
) + tuple( app.get('module', app['name']) for app in INTRANET_APPS )
......
{% extends "template.html" %}
{% block title %} Quotas {% endblock %}
{% block h1 %} Mes Quotas {% endblock %}
{% block head %}<link rel="stylesheet" type="text/css" href="/static/css/quota.css" />{% endblock %}
{% block content %}
{% load custom_filters %}
{% for quota in quotas %}
<h2>{{ quota.label }}</h2>
<p>Vous utilisez actuellement {{ quota.usage }} Mo sur un quota de {{quota.quota}} Mo</p>
<div class="progress">
<div class="progress-bar {{ quota.color_class }}" style="width: {{ quota.pourcentaff }}%">{{ quota.pourcent }}%</div>
<div class="progress-container">
<div class="progress-bar {{ quota.pourcent|progress_class_reverse }}" style="width: {{ quota.pourcentaff }}%">{{ quota.pourcent }}%</div>
</div>
<p>L'ensemble des données stockées sur cet espace ne doivent pas dépasser {{ quota.limite }} Mo sous peine de blocage en écriture</p>
......@@ -18,8 +19,8 @@
{% if quot_up.upload %}
<p>Le chiffre donné ici n'est qu'une estimation approchée de votre quota, pour éviter les abus concernant l'upload</p>
<p>Vous utilisez actuellement {{ quot_up.usage }} Mo sur un quota de {{ quot_up.limite }} Mo</p>
<div class="progress">
<div class="progress-bar {{ quot_up.color_class }}" style="width: {{ quot_up.pourcent }}%;"></div>
<div class="progress-container">
<div class="progress-bar {{ quot_up.pourcent|progress_class_reverse }}" style="width: {{ quot_up.pourcent }}%;"></div>
</div>
{% endif %}
{% if quot_up.blackliste %}<p>Vous êtes actuellement bridé pour upload pour une durée de 24h</p>{% endif %}
......
......@@ -18,9 +18,8 @@ from django.template import RequestContext
from intranet import conn_pool
from passlib.apps import ldap_context
# On associe une couleur quand on est en dessous du pourcentage qui va bien
QUOTA_RATES = (30, 50, 75, 85)
QUOTA_COLORS_CLASSES = ("good", "ok", "warning", "alert", "overflow")
QUOTA_RATES_UPLOAD = (0, soft, 2*soft, hard/2)
@login_required
......@@ -49,16 +48,6 @@ def affquotas(request):
else:
quotas[index]['mess'] = u"Vous êtes actuellement en dépassement de quota, veuillez libérer de l'espace"
# On affiche la couleur qui va bien
for r_index, rate in enumerate(QUOTA_RATES):
if current_quota['%'] < rate:
quotas[index]['color_class'] = QUOTA_COLORS_CLASSES[r_index]
break
else:
# Si pas de break, c'est que quota['%'] est >= à QUOTA_RATES[-1]
quotas[index]['color_class'] = QUOTA_COLORS_CLASSES[-1]
# Partie 2 : afficher le quota d'upload (approximatif volontairement)
# Quota d'upload : connexion base pg d'odlyd + recherche ldap du gonz
......@@ -97,13 +86,11 @@ def affquotas(request):
for r_index, rate in enumerate(QUOTA_RATES_UPLOAD):
if upmega < rate:
uploadtot = u"entre %d et %d" % (QUOTA_RATES_UPLOAD[r_index-1], rate)
quot_up['color_class'] = QUOTA_COLORS_CLASSES[r_index-1]
quot_up['pourcent'] = r_index*100/4
break
else:
# Si pas de break, c'est que quota['%'] est >= à QUOTA_RATES[-1]
uploadtot = u"plus de %d" % QUOTA_RATES_UPLOAD[-1]
quot_up['color_class'] = QUOTA_COLORS_CLASSES[-1]
quot_up['pourcent'] = 100
# On renvoit les données au template dans le dico quot_up
......
......@@ -43,6 +43,7 @@ Autres Couleurs:
- Messages
- Navigation Bar
- Tab Bar
- Progress Bar
- Other Things
*/
......@@ -881,6 +882,38 @@ nav.tab a:hover {
color: #ff6600;
}
/* Progress Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.progress-container {
padding: 4px;
background: rgba(0, 0, 0, 0.5);
}
.progress-bar {
position: relative;
height: 25px;
font-weight: bold;
text-align: center;
line-height: 25px;
}
.progress-bar.good {
background: #86e01e url("/static/img/stripes.png") repeat scroll 0px center;
}
.progress-bar.ok {
background: #f2d31b url("/static/img/stripes.png") repeat scroll 0px center;
}
.progress-bar.warning {
background: #f2b01e url("/static/img/stripes.png") repeat scroll 0px center;
}
.progress-bar.alert {
background: #f27011 url("/static/img/stripes.png") repeat scroll 0px center;
}
.progress-bar.overflow {
background: #f63a0f url("/static/img/stripes.png") repeat scroll 0px center;
}
/* Other Things
–––––––––––––––––––––––––––––––––––––––––––––––––– */
......
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
position: relative;
height: 25px;
font-weight: bold;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
text-align: center;
line-height: 25px;
}
.good {
background: #86e01e url("/static/img/stripes.png") repeat scroll 0px center;
}
.ok {
background: #f2d31b url("/static/img/stripes.png") repeat scroll 0px center;
}
.warning {
background: #f2b01e url("/static/img/stripes.png") repeat scroll 0px center;
}
.alert {
background: #f27011 url("/static/img/stripes.png") repeat scroll 0px center;
}
.overflow {
background: #f63a0f url("/static/img/stripes.png") repeat scroll 0px center;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment