klnodekb/views/gantt.pug

doctype html
html
    style(type='text/css').
        .nested_task .gantt_add{
            display: none !important;
            }
        .gantt_task_cell.week_end {
            background-color: #EFF5FD;
            }
        .gantt_task_row.gantt_selected .gantt_task_cell.week_end {
                background-color: #F8EC9C;
            }
    head
        title Munka nyílvántartó
        link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
        link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
        link(rel='stylesheet' href='/bower_components/jquery-typeahead/dist/jquery.typeahead.min.css')
        style.
            div.a {
            text-indent: 50px;
            }
    body
        #form-group
            meta(http-equiv='Content-type', content='text/html; charset=utf-8')
            script(src='https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js')
            link(href='https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css', rel='stylesheet')
            style(type='text/css').
                html, body{
                height:100%;
                padding:0px;
                margin:0px;
                overflow: hidden;
                }
                .nested_task .gantt_add{
                    display: none !important;
                    }
                .gantt_task_cell.week_end {
                    background-color: #EFF5FD;
                    }
                .gantt_task_row.gantt_selected .gantt_task_cell.week_end {
                        background-color: #F8EC9C;
                    }

        #gantt_here(style='width:100%; height:100%;')
script(src='../gantt/locale/locale_hu.js', charset='utf-8')
script(src='/bower_components/jquery/dist/jquery.js')
script(type='text/javascript').
    
    gantt.templates.grid_row_class = function( start, end, task ){
        if ( task.$level >= 0 ){
            console.log("nested");
            return "nested_task"

        }
        return "";
    };
    gantt.config.columns=[
    {name:"text",       label:"Munka név",  tree:true, width:'*' },
    {name:"start_date", label:"Kezdési idő", align: "center" },
    {name:"duration",   label:"Időtartam",   align: "center" },
    
    ];
    gantt.config.autoscroll = true;
    //gantt.config.static_background = true;
    gantt.templates.timeline_cell_class = function (task, date) {
    //console.log(date);
    if (!gantt.isWorkTime(date))
        return "week_end";
    return "";
    };
    gantt.attachEvent("onLoadStart", function () {
        gantt.message("Loading...");
    });    
    gantt.attachEvent("onLoadEnd", function () {
        gantt.message({
            text: "Loaded " + gantt.getTaskCount() + " tasks, " + gantt.getLinkCount() + " links",
            expire: 8 * 1000
        });
    });    
    gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
        var min_date = gantt.getState().min_date;
        var max_date = gantt.getState().max_date;
        if (min_date <= task.start_date) {
        min_date = gantt.date.add(min_date, -1, gantt.config.duration_unit);
        gantt.render()
        }
        if (max_date >= task.start_date) {
        max_date = gantt.date.add(max_date, 1, gantt.config.duration_unit);
        gantt.render()
        }
    
    });
    var zoomConfig = {
    levels: [
        {
        name:"hour",
        scale_height: 27,
        min_column_width:15,
        scales:[
            {unit:"day", format:"%d"},
            {unit:"hour", format:"%H"},
        ]
        },
        {
        name:"day",
        scale_height: 27,
        min_column_width:80,
        scales:[
            {unit: "day", step: 1, format: "%d %M"}
        ]
        },
        {
        name:"week",
        scale_height: 50,
        min_column_width:50,
        scales:[
            {unit: "week", step: 1, format: function (date) {
            var dateToStr = gantt.date.date_to_str("%d %M");
            var endDate = gantt.date.add(date, -6, "day");
            var weekNum = gantt.date.date_to_str("%W")(date);
            return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
            }},
            {unit: "day", step: 1, format: "%j %D"}
        ]
        },
        {
        name:"month",
        scale_height: 50,
        min_column_width:120,
        scales:[
            {unit: "month", format: "%F, %Y"},
            {unit: "week", format: "Week #%W"}
        ]
        },
        {
        name:"quarter",
        height: 50,
        min_column_width:90,
        scales:[
            {
            unit: "quarter", step: 1, format: function (date) {
                var dateToStr = gantt.date.date_to_str("%M");
                var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
                return dateToStr(date) + " - " + dateToStr(endDate);
            }
            },
            {unit: "month", step: 1, format: "%M"},
        ]
        },
        {
        name:"year",
        scale_height: 50,
        min_column_width: 30,
        scales:[
            {unit: "year", step: 1, format: "%Y"}
        ]
        }
    ],
    useKey: "ctrlKey",
    trigger: "wheel",
    element: function(){
        return gantt.$root.querySelector(".gantt_task");
    }
    };
    
    gantt.ext.zoom.init(zoomConfig);
    gantt.ext.zoom.setLevel("week");
    gantt.init("gantt_here");
   // gantt.parse(tasks);
    gantt.load("/gantt/data");
    var dp = new gantt.dataProcessor("/gantt/api");
    
    dp.init(gantt);
    dp.setTransactionMode("REST");