Bloque HTML de actividad en EDT

[andresmanelli]

Hoy en día las actividades se grafican generando un html y creando un child del DOM. Funciona basatnte bien, pero no es nada elegante.

Solucion: Hacer una directive en Angular que reciba los datos a mostrar. Incluso creo que el cálculo de propiedades CSS que se hace en el controlador, pueden pasar a ser parte de la directive. De esta manera nos evitaríamos tener esto junto con el controlador:

$scope.blockHTML = function (timejson) {
    var info = ['<div style="padding-left: 3px; height: 100%">',
        '<div style="height: 20%">' + session.getTranslation().labels[timejson.type].substr(0, 15) + '</div>',
        '<div style="height: 20%">' + timejson.from + ' - ' + timejson.to + '</div>',
        //TODO!!
        //'<div style="height: 20%">' + timejson.where + '</div>',
        '<div style="height: 20%">' + timejson.whoName + '</div>',
        '<div style="height: 20%">' + timejson.desc + '</div>',
        '</div>'].join('\n');
    return info;
};

$scope.divs[$scope.divIndex] = document.createElement('div');
$scope.divs[$scope.divIndex].id = 'act-' + id + $scope.divIndex;
$scope.divs[$scope.divIndex].title = "";
$($scope.divs[$scope.divIndex]).css('position', 'absolute');
$($scope.divs[$scope.divIndex]).css('left', x);
$($scope.divs[$scope.divIndex]).css('width', w);
$($scope.divs[$scope.divIndex]).css('height', divheight);
$($scope.divs[$scope.divIndex]).css('background-color', config.colors[el.type]);
if (w >= 85) {
    $($scope.divs[$scope.divIndex]).append($scope.blockHTML(el));
    $scope.divs[$scope.divIndex].className += ' edt-block-info';
}
document.getElementById(id).appendChild($scope.divs[$scope.divIndex]);