mFeatureLst.prg

<?php
  /**
   * @package mFeatureLst.prg
   *
   * Purpose: Handle display and user interface for the Features feature in Monitor. Send data via AJAX as JSON
   *  encoded data.
   *
   * Display  : Show list of enabled/disabled features defined by HomeCU.
   * Actions  : User interface actions available for creating/editting/deleting features
   *  - Add Feature       : create single feature with unique feature_code
   *  - Edit Feature      : edit single feature description and limit_type
   *  - Enable Features   : enable multiple features at one time
   *  - Disable Features  : disable multiple features at one time
   *  - Delete Feature    : delete feature from existance
   */

  $monLibrary= dirname(__FILE__) . "/../library";
  require_once("$monLibrary/cu_top.i");
  require_once("$monLibrary/ck_hticket.i");
  require_once("$monLibrary/cu_pass.i");
  require_once("$monLibrary/monitorView.i");

    if (!CheckPerm($link, $Hu, basename($_SERVER['SCRIPT_NAME']), $_SERVER['REMOTE_ADDR'])) {

    header("Location: /hcuadm/hcu_noperm.prg");
    exit;
  }

  printMonitorPageTop("CU Features", $homecuKendoVersion, $cloudfrontDomainName, $bootstrapVersion, $fontawesomeVersion, true);
  printMonitorPageMiddle("CU Features", null);
?>

<!-- JAVASCRIPT CONTENT -->
<script type="text/javascript">

var flGridSource = null;
var flGridView = null;
var flGridData = [];

var flDropdownSource = null;
var flDropdownAction = null;
var flDropdownActionStack = [];

var flWindowObserve = null;
var flWindowEditView = null;

var flDialogChanges = null;
var flDialogDelete = null;

var flButtonAdd = null;
var flValidator = null;
var flInfoBar = null;

function ClearFeatureInformation() {

  flInfoBar.text("");
  flInfoBar.css("display", "none");
}

function ShowFeatureInfo(info, sql, status) {

  var text = "";

  textInfo = info || [];
  textSql = sql || [];

  for (var i = 0; i < textInfo.length; i++) {
    text += textInfo[i];
  }

  for (var i = 0; i < textSql.length; i++) {
    text += textSql[i];
  }

  if (text == "") { return; }

  if (status) {
    flInfoBar.addClass("k-success-colored");
  } else {
    flInfoBar.addClass("k-error-colored");
  }

  flInfoBar.text(text);
  flInfoBar.css("display", "block");
}

function ValidateFeatureRequired(element) {

  var pass = true;
  var reqrInput = $(element);
  var reqrValue = reqrInput.val();

  if (reqrValue.length == 0) { pass = false; }

  return pass;
}

function ValidateFeatureDesc(element) {

  var pass = true;
  var descInput = $(element);
  var descValue = descInput.val();
  descValue = descValue.trim();

  if (descValue.length == 0) { pass = false; }

  return pass;
}

function ValidateFeatureType(element) {

  var pass = true;
  var typeInput = $(element);
  var typeValue = typeInput.val();

  if (typeValue == "") { pass = false; }

  return pass;
}

function ValidateFeatureCode(element) {

  var pass = true;
  var codeInput = $(element);
  var codeValue = codeInput.val();
  var sourceIndex = flWindowObserve.sourceIndex;
  var sourceFeature = flWindowObserve.sourceFeature;

  for (var i = 0; i < flGridData.length; i++) {

    var feature = flGridData[i];
    var featureCode = feature.featureCode;

    if (i == sourceIndex) { continue; }
    if (featureCode == codeValue) { pass = false; break; }
  }

  return pass;
}

function FeatureSort(data) {

  if (data.length < 2) {
    return data;
  }

  var middle = Math.floor(data.length / 2);
  var right = data.slice(middle, data.length);
  var left = data.slice(0, middle);

  var leftSort = FeatureSort(left);
  var rightSort = FeatureSort(right);

  return FeaturSortMerge(leftSort, rightSort);
}

function FeaturSortMerge(left, right) {

  var merge = [];

  while (left.length && right.length) {
    if (left[0].featureCode < right[0].featureCode) {
      merge.push(left.shift());
    } else {
      merge.push(right.shift());
    }
  }

  while (left.length) {
    merge.push(left.shift());
  }

  while (right.length) {
    merge.push(right.shift());
  }

  return merge;
}

function DataSourceFindFeature(id) {

  var dataIndex = -1;
  var dataId = id.replace(/["']/g, "");

  for (var i = 0; i < flGridData.length; i++) {

    if (flGridData[i].featureCode == dataId) {

      dataIndex = i;
      break;
    }
  }

  return dataIndex;
}

function StackRemoveFeature(id) {

    var featureCode = id.substring(4, id.length);

  for (var i = 0; i < flDropdownActionStack.length; i++) {

    var feature = flDropdownActionStack[i];
    if (feature.featureCode == featureCode) {

      flDropdownActionStack.splice(i, 1);
      break;
    }
  }
}

function StackInsertFeature(id) {

    var featureCode = id.substring(4, id.length);
  var featureIndex = DataSourceFindFeature(featureCode);
  var feature = flGridData[featureIndex];

  flDropdownActionStack.push(feature);
}

function ResetObserve() {
  flWindowObserve.sourceFeature = null;
  flWindowObserve.sourceDirty = false;
  flWindowObserve.sourceIndex = null;
  flWindowObserve.sourceField = false;
  flWindowObserve.sourceLabel = false;
}

function EventEnableCheckboxes(enable) {

  for (var i = 0; i < flDropdownActionStack.length; i++) {

    var feature = flDropdownActionStack[i];
    var featureCode = feature.featureCode;

    var boxId = "chk_" + featureCode;
    var box = $("input[id=" + boxId + "]");

    box.prop("checked", enable);
  }

  if (!enable) {
    flDropdownActionStack = [];
  }
}

function EventDeleteConfirm(e) {
    flGridSource.read();
}

function EventDeleteDeny(e) {
  flDropdownAction.select(0);
}

function EventChangeConfirm(e) {
  flWindowEditView.close();
  flGridView.dataSource.cancelChanges();
}

function EventFeatureSave(e) {

    if (flValidator.validate()) {

        var feature = flWindowObserve.sourceFeature;
        var featureCode = feature.featureCode;
        var featureDescription = feature.featureDescription;
        var featureLimit = feature.featureLimit;
        var featureIndex = flWindowObserve.sourceIndex;

        var requestFeature = {
            featureCode: feature.featureCode,
            featureDescription: feature.featureDescription,
            featureLimit: feature.featureLimit
        };

        if (featureIndex == -1) {
            requestFeature.action = "feature_create";
        } else {
            requestFeature.action = "feature_edit";
        }

        flGridSource.transport.options.read.type = "POST";
    flGridSource.read(requestFeature);

        flWindowEditView.close();
    }
}

function EventFeatureAdd(e) {

  var dataItem = flGridView.dataSource.add();
  EventOpenEditWindow(dataItem, "Add");
}

function EventOpenEditWindow(data, action) {

    var featureIndex = DataSourceFindFeature(data.featureCode);

  flWindowObserve.set("sourceFeature", data);
  flWindowObserve.set("sourceDirty", false);
  flWindowObserve.set("sourceIndex", featureIndex);

  if (featureIndex == -1) {
    flWindowObserve.sourceField = true;
    flWindowObserve.sourceLabel = false;
  } else {
    flWindowObserve.sourceField = false;
    flWindowObserve.sourceLabel = true;
  }

  kendo.bind("#wndFeatureMnt", flWindowObserve);
  kendo.bind("#wndFeatureConfirm", flWindowObserve);

  flWindowEditView.title(action + " Feature");
  flWindowEditView.center();
  flWindowEditView.open();
}

function EventUpdateFeatureActions() {

  var showEnable = false;
  var showDisable = false;

  flDropdownSource.data([]);
  if (flDropdownActionStack.length == 0) {

    flDropdownAction.enable(false);
    return;
  }

  flDropdownAction.enable(true);

  for (var i = 0; i < flDropdownActionStack.length; i++) {

    var feature = flDropdownActionStack[i];
    var featureEnabled = feature.featureEnabled;

    if (featureEnabled) { showDisable = true; }
    else { showEnable = true; }
  }

  var featureActions = [];
  featureActions.push({ text: "Select Action", value: "" });
  if (showEnable && showDisable) { showEnable = false; showDisable = false; }
  if (showEnable) { featureActions.push({ text: "Enable", value: "feature_enable" }); }
  if (showDisable) { featureActions.push({ text: "Disable", value: "feature_disable" }); }
  featureActions.push({ text: "Delete", value: "feature_delete" });

  flDropdownSource.data(featureActions);
  flDropdownAction.select(0);
}

function EventFeatureActionChange(e) {

  var featureAction = e.sender.value();
  var featureCodes = "";

  for (var i = 0; i < flDropdownActionStack.length; i++) {

    featureCodes += flDropdownActionStack[i].featureCode;
    if (i < flDropdownActionStack.length - 1) {
      featureCodes += ",";
    }
  }

  var requestUpdate = {
    action: featureAction,
    featureList: featureCodes
  };

    flGridSource.transport.options.read.type = "POST";
  flGridSource.transport.options.read.data = requestUpdate;
  ResetObserve();

  if (featureAction == "feature_delete") {
    var fl_dialog_string = "<p>Your are about to delete the following feature(s):</p><p>(" + featureCodes + ")</p><p>Do you wish to continue?</p>";
    flDialogDelete.content(fl_dialog_string);
    flDialogDelete.open();
  } else  {
    flGridSource.read();
  }

}

function EventFeatureActionClose(e) {

  var elem = e.sender.element[0].parentElement.firstChild;
  $(elem).removeClass("k-state-focused");
}

function EventCheckboxChange(e, source) {

  var box = $(e);
  var boxId = box.attr("id");
  var boxValue = box.prop("checked");
  var boxIndex = -1;

  if (source == "BOX") {
    boxValue = !boxValue;
  }

  if (boxValue) {

    StackRemoveFeature(boxId);
  } else {

    StackInsertFeature(boxId);
  }

  box.prop("checked", !boxValue);
  EventUpdateFeatureActions();
}

function EventGridDataBind(e) {

  $("html .k-grid td").css("border-right", "0");
  $("html .k-grid td").css("border-left", "0");

  $("html .k-grid th").css("border-right", "0");
  $("html .k-grid th").css("border-left", "0");

  $("html .k-grid tr").hover(function() {
    $(this).css("cursor", "pointer");
  });

  $('input[id^=chk_]').change(function(e) {
    EventCheckboxChange(e.target, "BOX");
  });

  EventEnableCheckboxes(true);
}

function EventGridChange(e) {

    var cell = this.select();
    var cellIndex = cell.index();

    if (cellIndex == 1) {

        var box = cell.find("input[id^=\"chk_\"]")[0];
    EventCheckboxChange(box, "ROW");
    } else {

    var dataSource = this.dataSource;
    var dataIndex = cell.closest("tr").index(".k-master-row");
    var dataItem = dataSource.view()[dataIndex];

    EventOpenEditWindow(dataItem, "Edit");
    }

  $(this.select()).removeClass('k-state-selected');
}

function InitDataActions() {
    flDropdownAction = $("#drpActions").kendoDropDownList({
        dataSource: flDropdownSource,
        dataTextField: "text",
        dataValueField: "value",
        change: EventFeatureActionChange,
        close: EventFeatureActionClose,
        enabled: false
    }).data("kendoDropDownList");

    flButtonAdd = $("#btnAdd").kendoButton({
        click: EventFeatureAdd
    });
}

function InitDataViews() {
    flGridView = $("#grdFeatureLst").kendoGrid({
        dataSource: {
            data: flGridData,
            schema: {
                model: {
                    id: "featureCode",
                    fields: {
                        featureCode: { type: "string" },
                        featureDescription: { type: "string" },
                        featureLimit: { type: "string" },
                        featureEnabled: { type: "boolean" }
                    }
                }
            }
        },
        rowTemplate: kendo.template($("#templateGridRow").html()),
        dataBound: EventGridDataBind,
        change: EventGridChange,
        selectable: "cell",
        height: 315,
        columns: [
            { title: "", width: "3px" },
            { title: "", width: "25px" },
            { title: "Code", width: "100px" },
            { title: "Description" },
            { title: "Limit Type", width: "75px" }
        ]
    }).data("kendoGrid");

    flWindowObserve = new kendo.observable({
        sourceFeature: null,
        sourceDirty: false,
        sourceIndex: null,
        sourceField: false,
        sourceLabel: false,
        sourceLimits: [
      { text: "Choose Limit Type", value: "" },
            { text: "Access Allowed", value: "A" },
      { text: "Quantity", value: "Q" },
      { text: "Dollar", value: "D" },
      { text: "Quantity & Dollar", value: "B" }
    ],
    clickSave: EventFeatureSave,
    changeCode: function(e) { this.sourceDirty = true;
        var element = $(e.target);
        var value = element.val();
        value = value.toUpperCase();

      if (RegExp(/[@#\\!$%^&*()+|~=`{}\[\]:";'<>?,.\/]/).test(value)) {
        value = value.slice(0, -1);
      }

        element.val(value);
        this.sourceFeature.featureCode = value;
    },
    changeDesc: function(e) { this.sourceDirty = true; },
    changeLimit: function(e) { this.sourceDirty = true;

      var element = e.sender.element[0];
      $(element).blur();
    }
    });

    flWindowEditView = $("#wndFeatureMnt").kendoWindow({
        width: "300px",
        modal: true,
        visible: false,
        resizable: false,
        actions: ['Close'],
        activate: function(e) {
      $("#wndFeatureMnt span.k-tooltip-validation").hide();
      $("#wndFeatureMnt #inpCode").focus();
        },
        close: function(e) {

      if (e.userTriggered) {

        if (flWindowObserve.sourceDirty) {
          e.preventDefault();
          flDialogChanges.open();
        } else {
            flGridView.dataSource.cancelChanges();
          flWindowEditView.close();
          ResetObserve();
        }
      }
        }
    }).data("kendoWindow");

  flDialogDelete = $("#dialogDelete").kendoDialog({
    title: "Delete Feature(s)",
    visible: false,
    actions: [
      {
        text: "No",
        action: EventDeleteDeny
      },
      {
        text: "Yes", primary: true,
        action: EventDeleteConfirm
      }
    ]
  }).data("kendoDialog");

  flDialogChanges = $("#dialogChanges").kendoDialog({
    title: "Discard Changes",
    content: "<p>Changes have been made to this feature.</p><p>Do you wish to discard your changes?</p>",
    visible: false,
    actions: [
      {
        text: "No"
      },
      {
        text: "Yes", primary: true,
        action: EventChangeConfirm
      }      
    ]
  }).data("kendoDialog");

  flValidator = $("#wndFeatureMnt").kendoValidator({
    rules: {
      code: ValidateFeatureCode,
      desc: ValidateFeatureDesc,
      type: ValidateFeatureType,
      required: ValidateFeatureRequired
    }
  }).data("kendoValidator");

  flInfoBar = $("#featureInfoBar");
}

function InitDataSources() {
    flDropdownSource = new kendo.data.DataSource({
        data: []
    });

    flGridSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "mFeature.data",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        type: "GET",
        data: {
          action: "feature_read"
        },
        cache: false
            }
        },
        requestStart: function(response) {
            ShowWaitWindow();
      ClearFeatureInformation();
        },
        requestEnd: function(response) {
            try {

                if (response.hasOwnProperty("response")) {

                    if (response.response.hasOwnProperty("Results")) {

                        var results = response.response.Results;
                        if (results.hasOwnProperty("errors")) {

                            throw results.errors;
                        } else {

              ShowFeatureInfo(results.info, results.sql, true);
                        }
                    } else {

                        throw "Error Parsing Server";
                    }
                } else {

                    throw "Error Parsing Server";
                }
            } catch (error) {

                ShowFeatureInfo(error, null, false);
            }

            EventEnableCheckboxes(false);
            EventUpdateFeatureActions();
            CloseWaitWindow();
        },
        schema: {
            parse: function(response) {
                var results = response.Results;
        var resultData = results.data;
        var resultAction = results.action;

        if (resultData == undefined || resultData == null) {
          return [];
        }

            if (results.hasOwnProperty("errors")) {
          return [];
        }

        if (resultAction == "feature_read") {

          flGridData = resultData;
        } else {

          for (var i = 0; i < resultData.length; i++) {

            var feature = resultData[i];
            var featureCode = feature.featureCode;
            var featureIndex = DataSourceFindFeature(featureCode);

            if (resultAction == "feature_create") {
              flGridData.splice(0, 0, feature);
            } else if (resultAction == "feature_delete") {
              flGridData.splice(featureIndex, 1);
            } else {
              flGridData.splice(featureIndex, 1, feature);
            }

          }
        }

        // SET DATA TO GRID IF NO ERRORS
        flGridData = FeatureSort(flGridData);
        flGridView.dataSource.data(flGridData);

                return [];
            }
        }
    });
}

// START JAVASCRIPT
$(document).ready(function() {
    InitDataSources();
    InitDataViews();
    InitDataActions();

  flGridSource.read();
});

$(document).on('click', '.k-overlay', function() {
  if (flWindowObserve.sourceDirty) {
    flDialogChanges.open();
  } else {
    flGridView.dataSource.cancelChanges();
    flWindowEditView.close();
  }

  flDialogDelete.close();
  flDropdownAction.select(0);
});
</script>

<!-- HTML STYLING -->
<style type="text/css">

/* TOP/BOTTOM MARGIN */
.hcu-container-margin {
  margin: 15px 0;
}

.hcu-no-padding {
  padding: 0;
}

.hcu-full-width {
  width: 100%;
}

.hcu-hidden {
  display: none;
}

.hcu-disabled {
  background: rgb(255 , 215, 0);
}

.hcu-max-width {
    max-width: 700px;
    margin: auto;
}

.k-menu .k-item > .k-link {
  padding: .5em 1.1em .4em;
}

.k-grid > td {
  white-space: nowrap;
}

.k-grid > table > tbody > tr:hover,
.k-grid-content > table > tbody > tr:hover {
    background-color: #ddd;
}

</style>

<!-- HTML CONTENT -->
<div class="container-fluid hcu-max-width">

    <!-- INFORMATION / ERROR -->
  <div id="featureInfoBar" class="well well-sm col-sm-12" style="display: none; white-space: pre;">

  </div>

  <div>&nbsp;</div>

    <!-- CONTENT -->
  <div class="well well-sm col-sm-12">

    <!-- HEADER -->
    <div class="col-sm-12 hcu-no-padding">
      <h3>Feature List</h3>
    </div>

    <!-- ACTIONS -->
    <div class="col-sm-12 hcu-no-padding hcu-container-margin">
        <!-- BTN ADD -->
      <div class="col-sm-3">
        <button id="btnAdd" class="hcu-full-width">
          <span class="fa fa-plus"></span>
          <span>Add Feature</span>
        </button>
      </div>

      <!-- BTN ADD -->
      <div class="col-sm-3">
        <input id="drpActions" class="hcu-full-width">
      </div>
    </div>

    <!-- LIST CONTENT -->
    <div class="col-sm-12 hcu-container-margin">

      <!-- GRID -->
      <div id="grdFeatureLst"></div>
    </div>

  </div>
</div>

<div id="homecuSubmitWait"></div>

<!-- TEMPLATE: GRID ROW -->
<script type="text/x-kendo-template" id="templateGridRow">
    <tr class="k-master-row" data-uid='#= uid #'>
        # if (featureEnabled) { #
        <td></td>
        # } else { #
        <td class="hcu-disabled"></td>
        # } #

        <td>
            <input type="checkbox" id="chk_#= featureCode #"
                style="margin-top: -2px; cursor: pointer;">
        </td>
        <td>#= featureCode #</td>
        <td>#= featureDescription #</td>
        # if (featureLimit == 'B') { #
        <td>Q D</td>
        # } else { #
        <td>#= featureLimit #</td>
        # } #
    </tr>
</script>

<div id="wndFeatureMnt" class="hcu-hidden">
  <!-- CONTENT -->
  <div class="well well-sm ">

    <div class="col-sm-12 hcu-no-padding hcu-container-margin">
      <!-- FEATURE CODE -->
      <div class="col-sm-12 hcu-no-padding">
        <label>Code:</label>
        <span class="k-invalid-msg" data-for="inpCode"></span>
        &nbsp;
        <span data-bind="visible: sourceLabel, text: sourceFeature.featureCode"></span>
      </div>

      <div class="col-sm-12 hcu-no-padding">
        <input id="inpCode" class="hcu-full-width k-textbox" name="inpCode" maxlength="10"
          data-bind="value: sourceFeature.featureCode,
            visible: sourceField,
            events: { input: changeCode}"
          data-code="#inpCode"
          data-code-msg="Feature Code Exists"
          data-required-msg="Feature Code is Empty"
          required
          style="padding-left: 0px;">
      </div>
    </div>

    <div class="col-sm-12 hcu-no-padding hcu-container-margin">
      <!-- FEATURE DESCRIPTION -->
      <div class="col-sm-12 hcu-no-padding">
        <label>Description:</label>
        <span class="k-invalid-msg" data-for="inpDescription"></span>
      </div>

      <div class="col-sm-12 hcu-no-padding">
        <textarea id="inpDescription" class="hcu-full-width k-textbox" name="inpDescription"
          rows="5" maxlength="100"
          data-bind="value: sourceFeature.featureDescription,
            events: { input: changeDesc }"
          data-desc="#inpDescription"
          data-desc-msg="Feature Description is Empty"
          data-required-msg="Feature Description is Empty"
          required
          style="padding-left: 10px;">
        </textarea>
      </div>
    </div>

    <div class="col-sm-12 hcu-no-padding hcu-container-margin">
      <!-- FEATURE LIMIT TYPE -->
      <div class="col-sm-12 hcu-no-padding">
        <label>Limit Type:</label>
        <span class="k-invalid-msg" data-for="inpLimit"></span>
      </div>

      <div class="col-sm-12 hcu-no-padding">
        <input id="inpLimit" class="hcu-full-width" name="inpLimit"
          data-role="dropdownlist"
          data-text-field="text"
          data-value-field="value"
          data-bind="source: sourceLimits,
            value: sourceFeature.featureLimit,
            events: { change: changeLimit }"
          data-type="#inpLimit"
          data-type-msg="Choose Feature Limit Type"
          data-required-msg="Choose Feature Limit Type"
          required >
      </div>
    </div>

    <!-- CLEAR FOR POP UP WINDOW -->
    <div style="clear: both;"></div>
  </div>

  <!-- BTN SAVE -->
  <div class="col-sm-3 hcu-no-padding"></div>
  <div class="col-sm-6 hcu-no-padding">
    <button id="btnSave" class="hcu-full-width k-button k-primary"
      data-bind="events: { click: clickSave }">
      <span class="fa fa-check"></span>
      <span>Save</span>
    </button>
  </div>
  <div class="col-sm-3 hcu-no-padding"></div>
</div>

<div id="wndFeatureConfirm" class="hcu-hidden">
  <!-- CONTENT -->
  <div class="well well-sm ">

    <div class="col-sm-12 hcu-no-padding">
      <span>This feature has been changed, do you wish to discard your changes?</span>
    </div>

    <!-- CLEAR FOR POP UP WINDOW -->
    <div style="clear: both;"></div>
  </div>

  <!-- BTN SAVE -->
  <div class="col-sm-5 hcu-no-padding">
    <button id="btnConfirm" class="hcu-full-width k-button k-primary"
      data-bind="events: { click: clickConfirm }">
      <span>Discard</span>
    </button>
  </div>

  <div class="col-sm-2 hcu-no-padding"></div>

  <!-- BTN SAVE -->
  <div class="col-sm-5 hcu-no-padding">
    <button id="btnConfirm" class="hcu-full-width k-button"
      data-bind="events: { click: clickDeny }">
      <span>No</span>
    </button>
  </div>
</div>

<div id="dialogChanges"></div>
<div id="dialogDelete"></div>

<?php
    printMonitorPageBottom();
    exit;
?>