color range

public/stylesheets/style.css

@@ -21,7 +21,61 @@ li:nth-of-type(odd){
 }
 
 tag{
-  background : #00B7FF;
+  background : #00b7ff;
   padding: 0.5em;
   border-radius: 0.15em;
 }
+button{
+  border: 0;
+  padding: 0.5em 1em;
+  border-radius: 0.2em;
+  cursor:pointer;
+}
+.toggle + ul{
+ height: 0;
+  visibility: collapse;
+}
+.toggle:focus{
+  background:#00b7ff;
+  color: white;
+}
+.toggle:focus + ul{
+  height: 100%;
+  transition: all ease 0.5s;
+  visibility: visible;
+}
+.task_item{
+  padding: 0.5em;
+  margin-left: 1em;
+}
+.text-right{
+  text-align: right;
+}
+
+.proportion-over-95{
+  background: #b9ffbe;
+}
+.proportion-over-90{
+  background: aquamarine;
+}
+.proportion-over-80{
+  background: #b8ffe8;
+}
+.proportion-over-65{
+  background: #e5ffb8;
+}
+.proportion-over-50{
+  background: #ffffd9;
+}
+.proportion-over-40{
+  background: #ffeed5;
+}
+.proportion-over-25{
+  background: #d6bcaa;
+}
+.proportion-over-15{
+  background: #e5cbd0;
+}
+.proportion-over-0{
+  background: #a59098;
+}

routes/index.js

@@ -6,8 +6,8 @@ var router = express.Router();
 var fileToOpen = 'gtg_tasks'
 
 // const convertFiles = true;
-const convertFiles = false;
+let convertFiles = false;
-const computeDataOnExtract = true;
+let computeDataOnExtract = true;
 
 let jsonAllData = {
   tasks   : {},
@@ -37,11 +37,18 @@ router.get('/', async function (req, res, next) {
   if (computeDataOnExtract) {
 
     jsonAllData = computeData(jsonAllData)
+    computeDataOnExtract = false;
   } else {
     console.log('================== calcul de stats désactivé dans index.js ================== ')
   }
   console.log('json files read')
-  res.render('index', {title: "Conversion de GTG tâches", json: jsonAllData})
+  res.render('index', {
+    title: "Conversion de GTG tâches",
+    json : jsonAllData,
+    getPercent,
+    computeBgColorOnProportionOfOpenTasks,
+    getPercentOfOpenTasks
+  })
 });
 
 async function readfileJson(fileToOpen) {
@@ -100,7 +107,6 @@ function computeData(jsonAllData){
           }
         }
       })
-      // found.tasks++
     }
     if (t.donedate) {
       jsonAllData.stats.tasksClosed++;
@@ -113,6 +119,7 @@ function computeData(jsonAllData){
   return jsonAllData
 
 }
+
 function convertOneXmlToJson(fileToOpen, res) {
   fs.readFile(`sources/${fileToOpen}.xml`, "utf-8", function (err, data) {
     if (err) console.log(err);
@@ -122,6 +129,50 @@ function convertOneXmlToJson(fileToOpen,res){
   });
 }
 
+function getPercentOfOpenTasks(someCount) {
+  return Math.round(100 * someCount / jsonAllData.stats.tasksOpen)
+}
+
+function getPercent(someCount, total) {
+  return Math.round(100 * someCount / total)
+}
+
+function computeBgColorOnProportionOfOpenTasks(someProportionNumber) {
+  let result = '';
+
+  if(someProportionNumber >= 95){
+    result = 'proportion-over-95'
+  }
+  else if(someProportionNumber >= 90){
+    result = 'proportion-over-90'
+  }
+  else if(someProportionNumber >= 80){
+    result = 'proportion-over-80'
+  }
+  else if(someProportionNumber >= 65){
+    result = 'proportion-over-65'
+  }
+  else if(someProportionNumber >= 50){
+    result = 'proportion-over-50'
+  }
+  else if(someProportionNumber >= 40){
+    result = 'proportion-over-40'
+  }
+  else if(someProportionNumber >= 25){
+    result = 'proportion-over-25'
+  }
+  else if(someProportionNumber >= 15){
+    result = 'proportion-over-15'
+  }
+
+  console.log('result', someProportionNumber, result)
+  return result;
+}
+
+function exportToMarkdown() {
+
+}
+
 function transformToJson(xml, fileToOpen, res) {
   return parseString(xml, function (err, result) {
     if (err) console.log(err);
@@ -146,5 +197,4 @@ function transformToJson(xml,fileToOpen, res) {
   });
 }
 
-
 module.exports = router;

views/index.jade

@@ -16,15 +16,23 @@ block content
         span.color couleur
         span.parent parent
         span.tasks tâches
-        span.tasks actives
         span.tasks finies
+        span.tasks actives
+        span.tasks actives %
       each t in json.tags.tagstore.tag
         li
           span.name= t['$'].name
           span.color= t['$'].color
           span.parent= t['$'].parent
-          span.tasks= t.tasks
-          if t.tasksListIsActiveByTitle
-            span.tasks= t.tasksListIsActiveByTitle.length
           if t.tasksListIsDoneByTitle
-            span.tasks= t.tasksListIsDoneByTitle.length
+            span.text-right= t.tasks
+          if t.tasksListIsDoneByTitle
+            span.text-right.tasks= t.tasksListIsDoneByTitle.length
+          if t.tasksListIsActiveByTitle
+            span.text-right.tasks #{t.tasksListIsActiveByTitle.length}
+            span.text-right.tasks(class=computeBgColorOnProportionOfOpenTasks(getPercent(t.tasksListIsActiveByTitle.length, t.tasks))) #{getPercent(t.tasksListIsActiveByTitle.length, t.tasks)} %
+            span.text-right.tasks #{getPercentOfOpenTasks(t.tasksListIsActiveByTitle.length)} %
+            button.text-right.toggle voir
+            ul
+              each activetask in t.tasksListIsActiveByTitle
+                li.task_item= activetask