ModuleMaster/pm/schedule.aspx - main - ivan/ModMas

ModuleMaster/pm/schedule.aspx
226 строк8 KB
i.krivokon
Initial commit
13 мар 2026, 13:49
13 мар 2026, 13:4900d9fb6
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="schedule.aspx.vb" Inherits="pm_schedule" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Schedule</title>
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/dhtmlxgantt.js"></script>
    <script src="../Scripts/dhtmlGanttExport.js"></script>
    <link id="skin" href="../Content/dhtmlxgantt/dhtmlxgantt_broadway.css" rel="stylesheet" />
    <style type="text/css" media="screen">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
        }
    </style>
    <script>
        function changeSkin(name) {
            var link = document.createElement("link");

            link.onload = function () {
                gantt.resetSkin();
                gantt.render();
            };

            link.rel = "stylesheet";
            link.type = "text/css";
            link.id = "skin";
            link.href = "../Content/dhtmlxgantt/dhtmlxgantt_" + name + ".css";
            document.head.replaceChild(link, document.querySelector("#skin"));


        }

        function getJson() {
            var request = $.ajax({
                url: "schedule.ashx",
                data: { action: "getschedule" },
                contentType: "application/json; charset=utf-8"

            });
            request.done(getProjectDetailsSuccess);
            request.fail(getProjectDetailsFails);
        }

        function getProjectDetailsSuccess(result) {
            var str = result;
            var tasks = JSON.parse(str);
            gantt.clearAll();
            gantt.parse(tasks);
            gantt.render();
        }

        function getProjectDetailsFails() {
        }

        //Evetn handlers
        //----  Comunicate wtih server hanlder
        function sendEventToServer(eventName, item) {
            item = JSON.stringify(item);
            console.log(item);
            var request = $.ajax({
                url: "schedule.ashx",
                data: {
                    action:"event",
                    eventname: eventName,
                    data: item
                }
            });
            request.done(sendEventSuccess);
            request.fail(sendEventFails);
        }
        function sendEventSuccess(result) {
            console.log(result)
        };
        function sendEventFails() {
            alert("Sever communication error.")
        };
    </script>
</head>
<body>
    <div class="controls">
        <button onclick="changeSkin('terrace')">Terrace</button>
        <button onclick="changeSkin('skyblue')">Skyblue</button>
        <button onclick="changeSkin('meadow')">Meadow</button>
        <button onclick="changeSkin('broadway')">Broadway</button>
        <button onclick="getJson()">Load tasks</button>
        <button onclick="gantt.exportToPDF()">PDF</button>
        <button onclick="gantt.exportToPNG()">PNG</button>
        <label>
            <input name="scales" onclick="zoom_tasks(this)" type="radio" value="week"/>
            Hours</label>
        <label>
            <input name="scales" onclick="zoom_tasks(this)" type="radio" value="trplweek" checked="true"/>
            Days</label>
        <label>
            <input name="scales" onclick="zoom_tasks(this)" type="radio" value="year"/>
            Months</label>
    </div>
    <div id="gantt_here" style="width: 100%; height: 1080px">
    </div>
    <script type="text/javascript">

        //Config
        gantt.templates.scale_cell_class = function (date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
                return "weekend";
            }
        };
        gantt.templates.task_cell_class = function (item, date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
                return "weekend";
            }
        };
        gantt.config.columns = [
           { name: "text", label: "Task name", width: "*", tree: true },
           {
               name: "progress", label: "Progress", template: function (obj) {
                   return Math.round(obj.progress * 100) + "%";
               }, align: "center", width: 60
           },
           { name: "duration", label: "Duration", align: "center", width: 60 },
           { name: "add", label: "", width: 44 }
        ];

        gantt.config.grid_width = 390;
        gantt.config.date_grid = "%F %d"
        gantt.config.scale_height = 60;
        gantt.config.subscales = [
            { unit: "week", step: 1, date: "Week #%W" }
        ];

        var opts = [
            { key: 0, label: "General" },
            { key: 1, label: "Announce" },
            { key: 2, label: "Develop" }
        ]

        //Lightbox configuration
        gantt.config.lightbox.sections = [
            { name: "type", height: 19, map_to: "type", type: "select", options: opts },
            { name: "name", height: 190, map_to: "text", type: "textarea", focus: true },
            { name: "description", height: 38, map_to: "my_template", type: "template" },
            { name: "time", height: 72, map_to: "auto", type: "duration" }
        ];

        gantt.locale.labels.section_name = "Name";
        gantt.locale.labels.section_type = "Type";
        gantt.locale.labels.section_description = "Description";

        // ------------------- INITIAL ---------------------

        gantt.init("gantt_here");
        getJson();

        //----  Event handlers attach --------------
        //---------- LINK ---------------
        gantt.attachEvent("onAfterLinkAdd", function (id, item) {
            sendEventToServer("addlink", item);
        });
        gantt.attachEvent("onAfterLinkDelete", function (id, item) {
            sendEventToServer("deletelink", item);
        });
        gantt.attachEvent("onAfterLinkUpdate", function (id, item) {
            sendEventToServer("updatelink", item);
        });
        //----------------   TASK -------------
        gantt.attachEvent("onAfterTaskAdd", function (id, item) {
            sendEventToServer("addtask", item);
        });
        gantt.attachEvent("onAfterTaskDelete", function (id, item) {
            sendEventToServer("deletetask", item);
        });
        gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
            sendEventToServer("updatetask", item);
        });

        //Zoom
        function zoom_tasks(node) {
            switch (node.value) {
                case "week":
                    gantt.config.scale_unit = "day";
                    gantt.config.date_scale = "%d %M";

                    gantt.config.scale_height = 60;
                    gantt.config.subscales = [
                          { unit: "hour", step: 6, date: "%H" }
                    ];
                    break;
                case "trplweek":
                    gantt.config.scale_unit = "day";
                    gantt.config.date_scale = "%d %M";
                    gantt.config.subscales = [];
                    gantt.config.scale_height = 35;
                    break;
                case "month":
                    gantt.config.scale_unit = "week";
                    gantt.config.date_scale = "Week #%W";
                    gantt.config.subscales = [
                          { unit: "day", step: 1, date: "%D" }
                    ];
                    gantt.config.scale_height = 60;
                    break;
                case "year":
                    gantt.config.scale_unit = "month";
                    gantt.config.date_scale = "%M";
                    gantt.config.scale_height = 60;
                    gantt.config.subscales = [
                          { unit: "week", step: 1, date: "#%W" }
                    ];
                    break;
            }
            gantt.render();
        }

    </script>
    <%------------------------Form--------------------------------%>
    <form id="form1" runat="server">
    </form>
    <%------------------------// Form--------------------------------%>
</body>
</html>