]> git.parisson.com Git - teleforma.git/commitdiff
add dynamic color to each progessbar
authoryomguy <yomguy@parisson.com>
Mon, 17 Dec 2012 10:47:40 +0000 (11:47 +0100)
committeryomguy <yomguy@parisson.com>
Mon, 17 Dec 2012 10:47:40 +0000 (11:47 +0100)
teleforma/static/teleforma/css/teleforma.css
teleforma/static/teleforma/js/application.js
teleforma/static/teleforma/js/charCount.js
teleforma/static/teleforma/js/rainbowvis.js [new file with mode: 0755]
teleforma/templates/teleforma/inc/question_list.html
teleforma/templates/teleforma/seminar_detail.html
teleforma/templates/teleforma/seminars.html
teleforma/templates/telemeta/base.html
teleforma/templatetags/teleforma_tags.py

index 39bcbce915fac90c22e6aa889df3d250c3a155d6..99885692a307a9080231b75428b34e5b1d8673eb 100644 (file)
@@ -1764,6 +1764,7 @@ form .exceed{
     border-radius: 8px 0px 8px 8px;
     }
 
+/*
 #progressbar-general .ui-progressbar-value { 
     background-color: #4f628a;
 }
@@ -1774,11 +1775,9 @@ form .exceed{
     }
 
 
-#progressbar-answer .ui-progressbar-value  { 
-    background-color: #bb0000;
-    }
 
 .ui-progressbar.beginning .ui-progressbar-value { background: red; }
 .ui-progressbar.middle .ui-progressbar-value { background: yellow; }
 .ui-progressbar.end .ui-progressbar-value { background: green; }
 
+*/
\ No newline at end of file
index dc35f92762e1371720803a4dcc11673d57acd56f..4187e27ab7640bf04a5d2fe3249fed8312c732aa 100644 (file)
@@ -25,3 +25,6 @@
  * Requires jQuery
  */
 
+
+var rainbow = new Rainbow();
+rainbow.setSpectrum('#bb0000', '#e65911', '#f3ad17', 'green');
index 5307208ce4ecb9feaad5f011825e5a588cb3da17..fd415dd2a71e5d1ea76b62df174e8f4191e3a2e8 100644 (file)
@@ -13,6 +13,7 @@
  *
  */
  
+
 (function($) {
 
        $.fn.charCount = function(options){
                        if ( percent >= 100 ) {
                                percent = 100;
                        }
+                       var color = '#' + rainbow.colourAt(percent);
                        $('#answer-progress').html(percent);
                        $('#progressbar-answer').progressbar({ value: percent });
+                       $('#progressbar-answer div').css({"background": color});
                };
                                
                this.each(function() {                          
diff --git a/teleforma/static/teleforma/js/rainbowvis.js b/teleforma/static/teleforma/js/rainbowvis.js
new file mode 100755 (executable)
index 0000000..a0e311c
--- /dev/null
@@ -0,0 +1,170 @@
+/*
+RainbowVis-JS 
+Released under MIT License
+*/
+
+function Rainbow()
+{
+       var gradients = null;
+       var minNum = 0;
+       var maxNum = 100;
+       var colours = ['ff0000', 'ffff00', '00ff00', '0000ff']; 
+       setColours(colours);
+       
+       function setColours (spectrum) 
+       {
+               if (spectrum.length < 2) {
+                       throw new Error('Rainbow must have two or more colours.');
+               } else {
+                       var increment = (maxNum - minNum)/(spectrum.length - 1);
+                       var firstGradient = new ColourGradient();
+                       firstGradient.setGradient(spectrum[0], spectrum[1]);
+                       firstGradient.setNumberRange(minNum, minNum + increment);
+                       gradients = [ firstGradient ];
+                       
+                       for (var i = 1; i < spectrum.length - 1; i++) {
+                               var colourGradient = new ColourGradient();
+                               colourGradient.setGradient(spectrum[i], spectrum[i + 1]);
+                               colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1)); 
+                               gradients[i] = colourGradient; 
+                       }
+
+                       colours = spectrum;
+               }
+       }
+       this.setColors = this.setColours;
+
+       this.setSpectrum = function () 
+       {
+               setColours(arguments);
+       }
+
+       this.setSpectrumByArray = function (array)
+       {
+               setColours(array);
+       }
+
+       this.colourAt = function (number)
+       {
+               if (isNaN(number)) {
+                       throw new TypeError(number + ' is not a number');
+               } else if (gradients.length === 1) {
+                       return gradients[0].colourAt(number);
+               } else {
+                       var segment = (maxNum - minNum)/(gradients.length);
+                       var index = Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length - 1);
+                       return gradients[index].colourAt(number);
+               }
+       }
+       this.colorAt = this.colourAt;
+
+       this.setNumberRange = function (minNumber, maxNumber)
+       {
+               if (maxNumber > minNumber) {
+                       minNum = minNumber;
+                       maxNum = maxNumber;
+                       setColours(colours);
+               } else {
+                       throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');
+               }
+       }
+}
+
+function ColourGradient() 
+{
+       var startColour = 'ff0000';
+       var endColour = '0000ff';
+       var minNum = 0;
+       var maxNum = 100;
+
+       this.setGradient = function (colourStart, colourEnd)
+       {
+               startColour = getHexColour(colourStart);
+               endColour = getHexColour(colourEnd);
+       }
+
+       this.setNumberRange = function (minNumber, maxNumber)
+       {
+               if (maxNumber > minNumber) {
+                       minNum = minNumber;
+                       maxNum = maxNumber;
+               } else {
+                       throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')');
+               }
+       }
+
+       this.colourAt = function (number)
+       {
+               return calcHex(number, startColour.substring(0,2), endColour.substring(0,2)) 
+                       + calcHex(number, startColour.substring(2,4), endColour.substring(2,4)) 
+                       + calcHex(number, startColour.substring(4,6), endColour.substring(4,6));
+       }
+       
+       function calcHex(number, channelStart_Base16, channelEnd_Base16)
+       {
+               var num = number;
+               if (num < minNum) {
+                       num = minNum;
+               }
+               if (num > maxNum) {
+                       num = maxNum;
+               } 
+               var numRange = maxNum - minNum;
+               var cStart_Base10 = parseInt(channelStart_Base16, 16);
+               var cEnd_Base10 = parseInt(channelEnd_Base16, 16); 
+               var cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange;
+               var c_Base10 = Math.round(cPerUnit * (num - minNum) + cStart_Base10);
+               return formatHex(c_Base10.toString(16));
+       }
+
+       formatHex = function (hex) 
+       {
+               if (hex.length === 1) {
+                       return '0' + hex;
+               } else {
+                       return hex;
+               }
+       } 
+       
+       function isHexColour(string)
+       {
+               var regex = /^#?[0-9a-fA-F]{6}$/i;
+               return regex.test(string);
+       }
+
+       function getHexColour(string)
+       {
+               if (isHexColour(string)) {
+                       return string.substring(string.length - 6, string.length);
+               } else {
+                       var colourNames =
+                       [
+                               ['red', 'ff0000'],
+                               ['lime', '00ff00'],
+                               ['blue', '0000ff'],
+                               ['yellow', 'ffff00'],
+                               ['orange', 'ff8000'],
+                               ['aqua', '00ffff'],
+                               ['fuchsia', 'ff00ff'],
+                               ['white', 'ffffff'],
+                               ['black', '000000'],
+                               ['gray', '808080'],
+                               ['grey', '808080'],
+                               ['silver', 'c0c0c0'],
+                               ['maroon', '800000'],
+                               ['olive', '808000'],
+                               ['green', '008000'],
+                               ['teal', '008080'],
+                               ['navy', '000080'],
+                               ['purple', '800080']
+                       ];
+                       for (var i = 0; i < colourNames.length; i++) {
+                               if (string.toLowerCase() === colourNames[i][0]) {
+                                       return colourNames[i][1];
+                               }
+                       }
+                       throw new Error(string + ' is not a valid colour.');
+               }
+       }
+}
+
index d1fea1efdcebfc01859cec9d556d485ff4edaa95..96fd3841e815eb68359f778a3e34aa3463c5704b 100644 (file)
@@ -12,7 +12,7 @@
         {% for question in questions.all %}
             <tr>
             <td {% if forloop.first %}class="border-top"{% endif %} width="45%"><a href="{% url teleforma-question-answer question.id %}">{{ question.title }} n°{{ question.rank }}</a></td>
-            <td {% if forloop.first %}class="border-top"{% endif %} width="50%">{% if question|submitted:user %}{%  trans "submitted on" %}{% else %}{% trans "saved on" %}{% endif %} {{ question|submitted:user }}</td>
+            <td {% if forloop.first %}class="border-top"{% endif %} width="50%">{% if question|submitted:user %}{%  trans "submitted on" %} {{ question|submitted:user }}{% elif question|saved:user %}{% trans "saved on" %} {{ question|saved:user }}{% endif %} </td>
             <td {% if forloop.first %}class="border-top"{% endif %} width="5%" align="center">{% if question|submitted:user %}<img src="{{ STATIC_URL }}telemeta/images/ok.png" style="vertical-align:middle" alt="" title="{% trans "Submitted" %}" />{% endif %}</td>
             </tr>
         {% endfor %}
index ffcb227161c328d4cf484e833e68292f3519205a..c9a9289e55790efc750b4f15e4d819b535e00363 100644 (file)
@@ -10,6 +10,8 @@ $(function() {
         $( "#progressbar-general" ).progressbar({
             value: {{ total_progress }}
         });
+        var color = '#' + rainbow.colourAt({{total_progress}});
+        $('#progressbar-general div').css({"background": color});
     });
 </script>
 <script type="text/javascript">
@@ -17,6 +19,8 @@ $(function() {
         $( "#progressbar-seminar" ).progressbar({
             value: {{ seminar_progress }}
         });
+        var color = '#' + rainbow.colourAt({{seminar_progress}});
+        $('#progressbar-seminar div').css({"background": color});
     });
 </script>
 
index cf7ce4ec0d261686d80193efa045b7ae71ca0f44..e5518b19d694b56e2921ddbc6510282b4181b445 100644 (file)
@@ -18,9 +18,9 @@ $(function () {
 {% block infra_javascript %}
 <script type="text/javascript">
 $(function() {
-        $( "#progressbar-general" ).progressbar({
-            value: {{ total_progress }}
-        });
+        $('#progressbar-general').progressbar({value: {{ total_progress }}});
+        var color = '#' + rainbow.colourAt({{total_progress}});
+        $('#progressbar-general div').css({"background": color});
     });
 </script>
 {% endblock infra_javascript %}
index ed4a869dfacf8fd3983360339050cf215e0eff13..c06b35399fe340bd25f58c1715fb34348ce5f865 100644 (file)
 {% block javascript %}
 <script src="{% url django.views.i18n.javascript_catalog %}" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}teleforma/js/jquery-1.6.min.js" type="text/javascript"></script>
-<script src="{{ STATIC_URL }}telemeta/js/locale.js" type="text/javascript"></script>
-<script src="{{ STATIC_URL }}telemeta/js/application.js" type="text/javascript"></script>
-<script src="{{ STATIC_URL }}teleforma/js/application.js" type="text/javascript"></script>
-<script src="{{ STATIC_URL }}jqchat/jqchat.js" type="text/javascript" ></script>
 <script src="{{ STATIC_URL }}teleforma/js/jquery-ui.js" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}teleforma/js/jquery.expander.min.js" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}teleforma/js/messi.min.js" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}teleforma/js/rainbowvis.js" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}jqchat/jqchat.js" type="text/javascript" ></script>
+<script src="{{ STATIC_URL }}telemeta/js/locale.js" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}telemeta/js/application.js" type="text/javascript"></script>
+<script src="{{ STATIC_URL }}teleforma/js/application.js" type="text/javascript"></script>
+
 
 {% if user.is_authenticated %}
 <script type='text/javascript'>var CURRENT_USER_NAME="{{ user.username }}";</script>
index a27b1296e93cf83e5c7e8af9a2195e1a0be926db..00f298c6a649867723685e313aec4feaa783fcc1 100644 (file)
@@ -225,10 +225,11 @@ def submitted(question, user):
         return False
 
 @register.filter
-def submitted(question, user):
-    answers = Answer.objects.filter(question=question, user=user)
+def saved(question, user):
+    answers = Answer.objects.filter(question=question, user=user, status=2)
     if answers:
         return answers[0].date_submitted
     else:
         return ''
 
+        
\ No newline at end of file