gistfile1.txt

/// <reference path="../ext/jquery-1.12.4.js" />
/// <reference path="../ext/jquery-ui-1.12.1.js" />

"use strict";

function BlobLine(element, options) {
    element = $(element);
    this.numBlobs = options.numBlobs;
    this.blobWidth = options.blobWidth;
    this.blobHeight = options.blobHeight;
    this.distances = options.distances;
    this.idPrefix = options.idPrefix;

    var container = $('<div />')
        .css("position", "relative")
        .css("height", this.blobHeight)
        .css("width", this._getWidth());

    container.append(this._generateBlobs());
    element.append(container);
}

BlobLine.prototype._generateBlobs = function () {
    var blobs = [];
    var currentLeftPosition = 0;
    for (var i = 0; i < this.numBlobs; i++) {
        var blob = $('<div />')
            .attr("id", this.idPrefix + i)
            .css("background-color", "gray")
            .css("position", "absolute")
            .css("height", this.blobHeight)
            .css("width", this.blobWidth)
            .css("left", currentLeftPosition);
        blobs.push(blob);
        currentLeftPosition += this.blobWidth;
        if (i < this.distances.length) {
            currentLeftPosition += this.distances[i];
        }
    }
    return blobs;
}

BlobLine.prototype._getWidth = function() {
    return this.distances.reduce((x, y) => x + y) + this.numBlobs * this.blobWidth;
};


function CapacityOverview(initialData, element) {
    // Mandatory arguments
    this.startYear = initialData.startYear;
    this.endYear = initialData.endYear;
    this.blobsPerMonth = initialData.blobsPerMonth;

    this.possiblePhases = initialData.possiblePhases;
    this.possibleNames = initialData.possibleNames;
    this.possibleRoles = initialData.possibleRoles;

    // Optional arguments
    this.milestones = initialData.milestones || [];
    this.phases = initialData.phases || [];
    this.persons = initialData.persons || [];

    this.createTable(element);
}

CapacityOverview.prototype.addMilestone = function (name, dateSlot) {
    this.milestones.push({ name: name, dateSlot: dateSlot });
};

CapacityOverview.prototype.addPhase = function (name, dateSlots) {
    this.phases.push({ name: name, dateSlots: dateSlots });
};

CapacityOverview.prototype.addPerson = function (name, role, dateSlots) {
    this.persons.push({ name: name, role: role, dateSlots: dateSlots });
};

CapacityOverview.prototype._createRow = function (baseId) {
    var row = [];
    var year;
    var month;
    var cnt = 0;
    for (year = this.startYear; year <= this.endYear; year++) {
        for (month = 0; month < 12; month++) {
            for (blob = 0; blob < this.blobsPerMonth; blob++) {
                row.push($('<td>' + cnt + '</td>').attr('id', baseId + '_' + cnt));
                cnt++;
            }
        }
    }
    return row;
};

CapacityOverview.prototype.createTable = function (element) {
    element = $(element).append('<table><tbody><tr></tr></tbody></table>');
    var tr = element.find('tr');
    tr.append(this._createRow('acol'));
    tr.selectable();
};





    <Script src="Scripts/ext/jquery-1.12.4.js"></Script>
    <Script src="Scripts/ext/jquery-ui-1.12.1.js"></Script>
    <Script src="Scripts/Pages/test.js"></Script>
    <style>
        td.ui-selectee {
            background: blue;
        }

        td.ui-selected {
            background: green;
        }

        td.ui-selecting {
            background: red;
        }
    </style>

    <h2><%: Title %>.</h2>

    <p>This is a text.</p>

    <div id="capacity-overview-table"></div>

    <p>This is a text.</p>



    <script>
        var opts = {
            numBlobs: 10,
            blobWidth: 10,
            blobHeight: 20,
            distances: [2, 6, 2, 6, 2, 6, 2, 6, 2],
            idPrefix: 'cell_0_'
        };
        var line = new BlobLine('#capacity-overview-table', opts);
    </script>