Functionnal timeline and prettified graph display

counter/models.py

@@ -19,7 +19,7 @@ class Reset(models.Model):
     counter = models.ForeignKey('Counter')
 
     def __str__(self):
-        return "%s : %s" % (self.counter,format_timedelta(datetime.now()-self.timestamp.replace(tzinfo=None),locale='fr'))
+        return "%s : %s (%s)" % (self.counter,format_timedelta(datetime.now()-self.timestamp.replace(tzinfo=None),locale='fr'),self.reason)
 
     class Meta:
         verbose_name = "Remise à zéro"

counter/templates/baseTemplate.html

@@ -12,16 +12,29 @@
 	{# Load the tag library #} {% load bootstrap3 %} {# Load CSS and JavaScript #} {% bootstrap_css %} {% bootstrap_javascript %} {# Display django.contrib.messages as Bootstrap alerts #} {% bootstrap_messages %}
 
 	<style>
+		body {
+			background-color: #EEEEEE
+		}
+
 		.seum-counter {
 			height: 125px;
 			overflow: auto;
-			margin-bottom: 15px;
+		}
+
+		.timeline {
+			height: 125px;
+			overflow-y: hidden;
 		}
 
 		.graphs > div {
 			display: block;
 			margin: 0 auto;
 		}
+
+		.counter-link, .counter-link:hover {
+  	color: inherit; /* blue colors for links too */
+  	text-decoration: inherit; /* no underline */
+		}
 	</style>
 
 	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

counter/templates/counterTemplate.html

@@ -1,13 +1,13 @@
-{% extends 'baseTemplate.html' %} {% block title %}Compteurs{% endblock %} {% block content %}
+{% extends 'baseTemplate.html' %} {% block title %}{{counter.trigramme}}{% endblock %} {% block content %}
 <div class="text-center">
-  <h1>{{counter.trigramme}}</h1>
+  <h1>{{counter.trigramme}} <small>{{ counter.name }}</small></h1>
 </div>
 <div class="container-fluid">
   <div class="row">
-    <div class="col-md-4 col-sm-6 col-lg-3">
+    <div class="col-md-3">
       <div class="panel panel-primary">
         <div class="panel-heading">
-          <h2 class="panel-title">{{ counter.name }}</h2>
+          <h2 class="panel-title">Dernier seum</h2>
         </div>
         <div class="seum-counter panel-body">
           {% if counter.lastReset.noSeum %}
@@ -27,6 +27,7 @@
               <textarea class="form-control" name="reason"></textarea>
             </div>
             <input type="hidden" name="counter" value="{{counter.id}}"></input>
+            <input type="hidden" name="redirect" value="counter/{{counter.id}}"></input>
             <div class="text-center">
               <button type="submit" class="btn btn-default btn-success">Foutre le seum</button>
             </div>
@@ -34,16 +35,19 @@
         </div>
       </div>
     </div>
-    <div class="col-md-8 col-sm-6 col-lg-9">
+    <div class="col-md-9">
       <div class="panel panel-default">
         <div class="panel-heading">
           <h2 class="panel-title">Timeline du seum</h2>
         </div>
-        <div class="seum-counter panel-body">
-          Salut !
+        <div class="graphs timeline panel-body">
+          {{chart.as_html}}
         </div>
       </div>
     </div>
   </div>
+  <div class="text-center">
+    <a class="btn btn-success" href="{% url 'counter.views.home' %}">Retour à la liste des compteurs</a>
+  </div>
 </div>
 {% endblock %}

counter/templates/homeTemplate.html

@@ -8,7 +8,7 @@
 		<div class="col-md-4 col-sm-6 col-lg-3">
 			<div class="panel panel-primary">
 				<div class="panel-heading">
-					<h2 class="panel-title">{{ counter.trigramme }} <small>{{ counter.name }}</small></h2>
+					<a class="counter-link" href="{% url 'counter.views.counter' id_counter=counter.id %}"><h2 class="panel-title">{{ counter.trigramme }} <small>{{ counter.name }}</small></h2></a>
 				</div>
 				<div class="seum-counter panel-body">
 					{% if counter.lastReset.noSeum %}
@@ -28,6 +28,7 @@
 							<textarea class="form-control" name="reason"></textarea>
 						</div>
 						<input type="hidden" name="counter" value="{{counter.id}}"></input>
+						<input type="hidden" name="redirect" value="home"></input>
 						<div class="text-center">
 							<button type="submit" class="btn btn-default btn-success">Foutre le seum</button>
 						</div>

counter/urls.py

@@ -3,7 +3,8 @@ from django.conf.urls import url
 from . import views
 
 urlpatterns = [
-    url(r'^$', views.home,name='home'),
-    url(r'^reset-counter/',views.resetCounter,name='reset-counter'),
-    url(r'^counter/(?P<id_counter>\d+)$', views.counter, name='counter'),
+    url(r'^$', views.home),
+    url(r'^seum/', views.home),
+    url(r'^reset-counter/',views.resetCounter),
+    url(r'^counter/(?P<id_counter>\d+)$', views.counter),
 ]

counter/views.py

@@ -7,6 +7,8 @@ from django.http import HttpResponseRedirect
 from django.core import serializers
 from graphos.renderers import gchart
 from graphos.sources.simple import SimpleDataSource
+from graphos.sources.model import ModelDataSource
+import random
 
 class resetCounterForm(forms.ModelForm):
     class Meta:
@@ -31,14 +33,14 @@ def home(request):
             counter.lastReset = lastReset[0]
             counter.lastReset.noSeum = False
             counter.lastReset.delta = datetime.now()-counter.lastReset.timestamp.replace(tzinfo=None)
-            lastResets.append([counter.trigramme,(counter.lastReset.delta.total_seconds())/(24*3600)])
+            lastResets.append([counter.trigramme,{'v' : (counter.lastReset.delta.total_seconds())/(24*3600), 'f' : str(round((counter.lastReset.delta.total_seconds())/(24*3600),1))} ])
             if (counter.lastReset.delta.total_seconds())/(24*3600) > maxJSS:
                 maxJSS = (counter.lastReset.delta.total_seconds())/(24*3600)
             counter.lastReset.formatted_delta = format_timedelta(counter.lastReset.delta,locale='fr',threshold=1)
         counter.isHidden = "hidden"
     counters = sorted(counters,key=lambda t: -t.lastReset.delta)
     #Generate graph
-    lastResets.sort(key=lambda x: (x[1],x[0]))
+    lastResets.sort(key=lambda x: x[1]['v'])
     lastResets.insert(0,['Trigramme','Jours sans seum'])
     data = SimpleDataSource(lastResets)
     chart = gchart.ColumnChart(data,options={'title' : '', 'legend' : 'none','vAxis' : { 'viewWindow' : { 'max' : max(maxJSS,1) , 'min' : 0} , 'ticks' : [1,2,3,4,5,6,7,8,9,10,11,12,13,14],'title' : 'Jours sans seum' }, 'hAxis' : {'title' : 'Trigramme' }})
@@ -56,11 +58,14 @@ def resetCounter(request):
         reset.timestamp = datetime.now()
         reset.save()
         # check whether it's valid
-    return HttpResponseRedirect('/')
+    return HttpResponseRedirect('/'+data['redirect'][0])
 
 def counter(request, id_counter):
+
     counter = Counter.objects.get(pk=id_counter)
-    lastReset = Reset.objects.filter(counter=counter).order_by('-timestamp')
+    resets = Reset.objects.filter(counter=counter)
+    lastReset = resets.order_by('-timestamp')
+    #Display
     if (lastReset.count() == 0):
         counter.lastReset = Reset()
         counter.lastReset.delta = timezero
@@ -69,5 +74,23 @@ def counter(request, id_counter):
         counter.lastReset = lastReset[0]
         counter.lastReset.noSeum = False
         counter.lastReset.delta = datetime.now()-counter.lastReset.timestamp.replace(tzinfo=None)
+        counter.lastReset.formatted_delta = format_timedelta(counter.lastReset.delta,locale='fr',threshold=1)
+
+    ###Timeline graph
+    #Data pre-processing
+    for reset in resets:
+        reset.timestamp={'v' : reset.timestamp.timestamp(), 'f' : "Il y a "+format_timedelta(datetime.now()-reset.timestamp.replace(tzinfo=None),locale='fr',threshold=1) }
+        reset.Seum={'v' : 0, 'f' : reset.reason}
+    #Drawing the graph
+    data = ModelDataSource(resets,fields=['timestamp','Seum'])
+    chart = gchart.LineChart(data, options={
+        'lineWidth' : 0,
+        'pointSize' : 10,
+        'title' : '',
+        'vAxis' : { 'ticks' : []},
+        'hAxis' : {'ticks' : [{'v' : datetime(2016,3,9,23,0,0,0).timestamp(), 'f' : 'ADD des X2013' }, { 'v' :datetime.now().timestamp(), 'f' : 'Présent'}]},
+        'legend' : 'none',
+        'height' : 90
+    })
 
-    return render(request,'counterTemplate.html', { 'counter' : counter})
+    return render(request,'counterTemplate.html', { 'counter' : counter, 'chart' : chart})