JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-gantt/1.3.3/angular-gantt.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-gantt/1.3.3/angular-gantt-plugins.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.0/angular-moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-gantt/1.3.3/angular-gantt.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-gantt/1.3.3/angular-gantt-plugins.js"></script>
<div data-ng-controller="ctrl">
  <div gantt data="data">
    <gantt-tooltips></gantt-tooltips>
    <gantt-table
      columns="options.columns"
      headers="options.columnsHeaders" formatters="options.columnsFormatters"></gantt-table>
  </div>
</div>

JavaScript

var app = angular.module('myApp', [
    // Dependencies required as of now.
    'gantt',
    'gantt.tooltips',
    'gantt.table'
    // Possible other Dependencies.
    // 'gantt.sortable',
    // 'gantt.movable',
    // 'gantt.drawtask',
    // 'gantt.bounds',
    // 'gantt.progress',
    // 'gantt.tree',
    // 'gantt.groups',
    // 'gantt.resizeSensor',
    // 'gantt.overlap',
    // 'gantt.dependencies'
]);

app.controller('ctrl', function($scope) {

    // On jobs page this data is getting used for Card based UI.
    // I will transform it to what i need as of now. This can be altered as per api data i receive.
    var finalDataGenerated = {
        "name": "Nalin FT",
        "numberOfColumns": 3,
        "equipments": [
            {
                "id": null,
                "equipId": null,
                "name": "Unassigned Jobs",
                "make": null,
                "model": null,
                "gtw": false,
                "current": null,
                "jobs": [],
                "locked": false,
                "$$hashKey": "object:33"
            },
            {
                "id": 1,
                "equipId": "NFT E01",
                "make": "2017",
                "gtw": false,
                "current": {
                    "id": 1,
                    "name": "NFT E01_2_2018-01-14T09:18",
                    "fromTime": "2018-01-14T09:17:01+00:00",
                    "toTime": "2018-01-16T02:57:01+00:00",
                    "plannedCycleTime": 30,
                    "actualCycleTimeAverage": 0,
                    "priority": 1,
                    "setupHours": 20,
                    "quantity": 5000,
                    "plnanedCompletion": "2018-01-16T02:57:01+00:00",
                    "estimatedCompletion": "2018-01-14T09:18:24.9566039+00:00",
                    "percentageComplete": 0,
                    "state": "Running",
                    "scheduledState": "Ahead of schedule",
                   ...