dashboard.prg

<script type="text/javascript">

<?php
// Get common JS functions here.
getShowWaitFunctions(); ?>

<?php
/**
 * This function initializes the dashboard.
 */ ?>
function InitDashboard() {
    $("body").addClass("dashboardBody");

    $.homecuValidator.setup({formValidate: "dashboardForm", formStatusField: "dashboardFormStatus"});
    var grid = $("#dashboardGrid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "index.prg?operation=readDashboard",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function(data, type) {
                    showWaitWindow();
                    return {};
                }
            },
            schema: {
              model: {
                id: "templateId",
                fields: {
                  sortingId: {type: "number"},
                  templateId: {type: "number"},
                  textDescription: {type: "string"},
                  statusLabel: {type: "string"},
                  billHalf: {type: "boolean"},
                  initialCosts: {type: "string"},
                  recurringCosts: {type: "string"},
                  cu: {type: "string"},
                  cuName: {type: "string"},
                  salesItemDescr: {type: "string"},
                  orderId: {type: "number"}
                }
              },
              parse: function (data) {
                 hideWaitWindow();
                 if (data.status !== "000") {
                   $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
                   return [];
                 } else {
                   return data.record;
                 }
              }
            },
            group: {field: "cu"},
            sort: {field: "sortingId", dir: "asc"}
        },
        columns: [
          {title: "Item Name"},
          {title: "Split", width: "75px"},
          {title: "Status", width: "20%"},
          {title: "Initial Costs", width: "20%"},
          {title: "recurring Costs", width: "20%"},
          {field: "cu", hidden: true}
        ],
        rowTemplate: kendo.template($("#rowTemplate").html()),
        altRowTemplate: kendo.template($("#altRowTemplate").html()),
        dataBound: function (e) {
          $("#dashboardGrid .k-grid-header").remove();

          $("#dashboardGrid .k-grouping-row").each(function () {
              $(this).find("td").html($(this).next().find(".tempGroupLine").html());
              $(this).hover(function () {
                  $(this).toggleClass("k-state-hover");
              });
            $(this).after($("#headerRowTemplate").html());
            $(this).prev().find("td:not(.spacerTd)").css({borderBottom: "1px solid black"});
            $(this).next().find("td:not(.spacerTd)").css({borderTop: "1px solid black"});
          });

          $("#dashboardGrid .tempGroupLine").remove();
        }
    }).data("kendoGrid");
}

<?php // Sets up a three-second timer to open the status popup. ?>
function OnMouseEnter(td) {
    $(td).data("timer", setTimeout($.proxy(function() { OpenStatusPopup($(td))}, $(td)), 3000));
}

<?php // Clears the three-second timer. ?>
function OnMouseExit(td) {
    clearTimeout($(td).data("timer"));
}

<?php // This function fetches the data for more information on the workflow. ?>
function OpenStatusPopup(td) {
    clearTimeout($(td).data("timer"));
    if ($(td).data("hasNotification") == true) {
        return;
    }

    var notification = $("<div></div>").kendoNotification({
        position: {
            pinned: false,
            top: $(td).offset().top - $("body").scrollTop(),
            left: $(td).offset().left - $("body").scrollLeft()
        },
        autoHideAfter: 0,
        show: function () {
            $(td).data("hasNotification", true);
            $(".k-icon.k-i-note").remove();
            $(".k-notification:last").mouseleave(function () {
                notification.hide();
            });
        },
        hide: function () {
            $(td).data("hasNotification", false);
        }
    }).data("kendoNotification");

    showWaitWindow();
    $.post("index.prg?operation=readWorkflowStatusInfo", {featureId: $(td).parent().data("template_id")}, function (data) {
        hideWaitWindow();
        if (data.status !== "000") {
          $.homecuValidator.displayMessage(data.error, $.homecuValidator.settings.statusError );
        } else {
            if (data.record.length == 0) {
                notification.info("No workflow attached");
            } else {
                var firstColumn = "grid_5 alpha";
                var secondColumn = "grid_7 omega";
                var preRow = "<div class='grid_12'><div class='" + firstColumn + "'><b>";
                var midRow = "</b></div> <div class='" + secondColumn + "'>";
                var postRow = "</div></div>";
                var message = "<br><div class='container_12 workflowStatusInfo'>";
                message += preRow + "Job Id:" + midRow + data.record[0].trackId + postRow;
                message += preRow + "Job:" + midRow + data.record[0].issue + postRow;
                message += preRow + "Job Owner:" + midRow + data.record[0].issueOwner + postRow;
                message += preRow + "Job Status:" + midRow + data.record[0].issueStatus + postRow;
                message += preRow + "Next Task:" + midRow + data.record[0].nextTask + postRow;
                message += preRow + "Next Task Owner:" + midRow + data.record[0].nextTaskOwner + postRow;
                message += preRow + "Entry Date:" + midRow + kendo.toString(new Date(data.record[0].entryDate), "MM/dd/yyyy") + postRow;
                message += preRow + "Last Activity Date:" + midRow + kendo.toString(new Date(data.record[0].lastActivityDate), "MM/dd/yyyy") + postRow;
                message += "<div class='grid_12'>&nbsp;</div>";
                message += "<div class='grid_12'><a href='/hcuadm/cuissues_edit.prg?trackId=" + data.record[0].trackId + "' target='_blank'>Go to job</a></div></div>";
                notification.info(message);
            }

        }
    });
}

$(document).ready(function () {
    InitDashboard();
})
</script>
<script id="headerRowTemplate" type="text/k-kendo-template">
  <tr class="header" onclick="addNewRow();">
      <td  class="spacerTd">&nbsp;</td>
    <td>Item Name</td>
    <td>Split</td>
    <td>Status</td>
    <td>Initial</td>
    <td>Recurring</td>
  </tr>
</script>
<script id="rowTemplate" type="text/x-kendo-template">
  <tr class="normalRow" data-uid="#: uid #" data-template_id="#: templateId #">
      <td  class="spacerTd">&nbsp;</td>
    <td>#: salesItemDescr #</td>
    <td># if (billHalf) { # Yes # } else { # No # } #</td>
    # if (statusLabel == "Pending") { #
    <td class="statusLabel" onclick="OpenStatusPopup(this);" onmouseenter="OnMouseEnter(this);" onmouseleave="OnMouseExit(this);">#: statusLabel #</td>
    # } else { #
    <td>#: statusLabel #</td>
    # } #
    <td>#: initialCosts #</td>
    <td>#: recurringCosts #</td>
    <td class="tempGroupLine"><a href="<?php echo $produrl . GetBillingURL(); ?>?page=salesOrderDetails&salesOrderId=#: orderId #">#: cuName # (#: cu #)</a></td>
  </tr>
</script>
<script id="altRowTemplate" type="text/x-kendo-template">
    <tr class="k-alt normalRow" data-uid="#: uid #" data-template_id="#: templateId #">
      <td class="spacerTd">&nbsp;</td>
      <td>#: salesItemDescr #</td>
      <td># if (billHalf) { # Yes # } else { # No # } #</td>
        # if (statusLabel == "Pending") { #
        <td class="statusLabel" onclick="OpenStatusPopup(this);" onmouseenter="OnMouseEnter(this);" onmouseleave="OnMouseExit(this);">#: statusLabel #</td>
        # } else { #
        <td>#: statusLabel #</td>
        # } #
      <td>#: initialCosts #</td>
      <td>#: recurringCosts #</td>
    </tr>
</script>
<div class="container_12" id="dashboardForm">
    <div id="dashboardFormStatus"></div>
    <div class="grid_12">
        <div id="formValidateMainDiv" class="k-block k-error-colored" style="display:none;"></div>
    </div>
    <div class="grid_12">
        <div id="dashboardGrid" class="cuIndexGrid"></div>
    </div>
</div>