Outillage du CdP HAML et Javascript

J'ai honte. J'ai passé au moins 3h jeudi dernier à hacker dans mon coin. Mon objectif : faciliter la rédaction de proposition commerciale (ce qui s'appelle devis dans les entreprises classiques). Je me suis dit : bof, plutôt que de faire des tableaux dans Excel et fusionner tout dans Word avec un peu de blabla, je pourrais structurer ça en HTML et utiliser un peu de javascript pour faire tous les calculs et générer le devis technique ! Et bien je me suis fait plaisir pour une fois.

1er problème : le HTML est d'une verbosité crasse. Solution : HAML. Il s'agit d'un langage de template pour générer du HTML un peu plus rapidement (c'est un euphémisme). Avec ça, je peux faire mes tableaux en 2 coups de cuiller à pot :

%table
  %tr
    %th TaskId
    %th Nom
    %th Type
    %th charge en h.j
  %tr
    %td{:name => 'task-id'}
    %td Faire ci
    %td dev
    %td{:name => 'task-loe'} 3
  %tr
    %td{:name => 'task-id'}
    %td Faire ca
    %td dev
    %td{:name => 'task-loe'} 2

Je peux ensuite générer le HTML correspondant avec :

haml fichier.haml fichier.html

Évidemment, il vous faut Ruby et installer la gem qui va bien :

gem install haml

Comme ça, je fais des tableaux de chiffrage sympa que je peux styler à loisir avec du CSS.

Second problème : cela manque de contenu dynamique. Ce serait pas mal que la numérotation des tâches se fasse de façon automatiquement pour pouvoir les réorganiser... Ce serait bien également de pouvoir sommer toutes les charges pour le mettre dans le devis final. Plutôt que de mettre du script Ruby pour faire ça, on va générer le contenu avec du JavaScript.

JavaScript dans les années 2000, c'était nul. Ce n'était pas compatible entre les browsers et ça pourrissait les page web (ah les attributs onclick="..." dans directement dans les tags). Puis GMail est arrivé et a mis tout le monde d'accord. JavaScript est un langage génial ! C'est d'une concision de malade.

Par exemple, je veux numéroter mes tâches automatiquement :

window.onload = main; //on execute main au chargement
function main() {
    var cells = document.getElementsByName('task-id');
    var len = cells.len;
    for (var i = 0; i < len; i++ {
        cell[i].innerHTML = i + 1;
    }
}

Bon ensuite, il a fallu faire la somme des estimations sur les taches :

function total() {
    var loeCells = document.getElementsByName('task-loe');
    var len = loeCells.len;
    var total = 0;
    for (var i = 0; i < len; i++ {
        var subtotal = 0;
        try {
            subtotal = parseInt(loeCells[i].innerHTML);
        } catch(err) {
            subtotal = 0;
        }
        totoal += subtotal;
    }
}

Il reste à réutiliser total où bon nous semble ! Ce n'est pas compliqué.

Bref, on a beau être chef de projet et devoir rédiger des propales, cela ne devrait pas nous empêcher de coder pour nous simplifier la vie !