kreta/KretaWeb/Areas/Orarend/Views/OrarendekTorlese/Osztaly_View.cshtml

@using Kreta.Web.Areas.Orarend.Models

@model OsztalyOrarendTorleseModel

<style>
    #osztaly-select {
        width: 100%;
    }

    #OsztalyOrarendTorlesVisszaBtn {
        margin-left: 80px;
    }

    #OsztalyOrarendTorlesTorlesBtn {
        margin-right: 80px;
    }

    .selected-torles-btn > button {
        padding: 3px;
    }
</style>

@using (Html.KretaForm("OsztalyOrarendTorlesForm"))
{
    @Html.KretaValidationSummary()

    <div class="row">
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            @Html.KretaComboBox("FeladatellatasiHelyCmb", Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = Constants.ApiControllers.ComboBoxHelperApi, action = "GetFeladatellatasiHelyWithMukodesiHelyList" }), onChangeFunction: "OsztalyOrarendTorleseHelper.cmbOnChange()", placeholder: CommonResource.PleaseChoose)
            <select id="osztaly-select" class="form-control" multiple="multiple" style="height: 400px;"></select>
        </div>
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            <div class="@BootsrapHelper.GetSizeClasses(12)">
                @Html.Partial("KozosParameterekView")
            </div>
            <div class="@BootsrapHelper.GetSizeClasses(12)" style="margin-top: 40px;">
                <span class="col-sm-3">@OrarendekTorleseResource.KivalasztottOsztalyok</span>
                <span class="col-sm-3" style="text-align: center">@OrarendekTorleseResource.OsztalybontottCsoportok</span>
                <span class="col-sm-3" style="text-align: center">@OrarendekTorleseResource.KapcsolodoCsoportok</span>
                <div id="selected-osztaly-container" class="col-sm-12"></div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 40px;">
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            @Html.KretaButton("OsztalyOrarendTorlesVisszaBtn", CommonResource.Vissza, clickEventName: "OrarendekTorleseHelper.vissza")
        </div>
        <div class="@BootsrapHelper.GetSizeClasses(6) BtnDelete">
            @Html.KretaButton("OsztalyOrarendTorlesTorlesBtn", CommonResource.Torles, clickEventName: "function () { OrarendekTorleseHelper.torles(OsztalyOrarendTorleseHelper.torles); }")
        </div>
    </div>
    <div hidden>
        @Html.KretaTextBoxFor(x => x.SelectedOsztalyok)
    </div>
}

<script type="text/javascript">
  var OsztalyOrarendTorleseHelper = (function () {
    var osztalyOrarendTorleseHelper = function () { };

    var osztalySelectId = "#osztaly-select";
    var selectedOsztalyContainerId = "#selected-osztaly-container";
    var formName = "OsztalyOrarendTorlesForm";
    var formId = "#" + formName;
    var selectedOsztalyokId = "#SelectedOsztalyok";
    var feladatellatasiHelyCmbName = "FeladatellatasiHelyCmb";

    var osztalyList = @Html.Raw(Json.Encode(Model.OsztalyList));

    var url = {
      OsztalyOrarendekTorlese: "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = Constants.ApiControllers.OrarendekTorleseApi, action = "OsztalyOrarendekTorlese" })"
    }

    osztalyOrarendTorleseHelper.cmbOnChange = function () {
      setUpOsztalySelectRows();
    }

    function setUpOsztalySelectRows() {
      var feladatellatasiHelyId = KretaComboBoxHelper.getKendoValue(feladatellatasiHelyCmbName);
      $(osztalySelectId).empty();

      var osztalyokByFeladatellatasiHely = osztalyList.filter(function (o) {
        return o.FeladatellatasiHelyId == feladatellatasiHelyId;
      });
      osztalyokByFeladatellatasiHely.forEach(function (item) {
        createOptionRow(item);
      });
    }

    function createOptionRow(osztaly) {
      var option = $("<option></option>")
        .attr("value", osztaly.Id)
        .append(osztaly.Nev);

      if (osztaly.IsSelected) {
        option.attr("selected", true);
      }

      $(osztalySelectId).append(option);
    }

    osztalyOrarendTorleseHelper.selectOption = function (o) {
      var osztalyId = $(o).attr("value");
      if (!CommonUtils.isNullOrUndefined(osztalyId)) {
        var osztaly = osztalyList.filter(function (osztaly) {
          return osztaly.Id == osztalyId;
        })[0];

        osztaly.IsSelected = !osztaly.IsSelected;

        if (osztaly.IsSelected) {
          createSelection(osztaly);
          addSelectedOsztalyToInputString(osztaly.Id);
        }
        else {
          osztalyOrarendTorleseHelper.deleteSelection(osztalyId);
        }
      }
    }

    function createSelection(osztaly) {
      var nev = $("<div></div>")
        .addClass("col-sm-3")
        .append(osztaly.Nev);

      var osztalybontottCsoportokChkName = "OsztalybontottCsoportokChk" + osztaly.Id;
      var osztalybontottCsoportokChk = $("<input/>")
        .addClass("k-checkbox")
        .attr("type", "checkbox")
        .attr("id", osztalybontottCsoportokChkName)
        .attr("name", osztalybontottCsoportokChkName)
        .attr("onclick", "OsztalyOrarendTorleseHelper.osztalybontottOnClick(" + osztaly.Id + ");");
      var osztalybontottCsoportokLbl = $("<label></label>")
        .addClass("k-checkbox-label")
        .attr("for", osztalybontottCsoportokChkName)
        .css("display", "inline-block");
      var osztalybontottCsoportok = $("<div></div>")
        .addClass("col-sm-3")
        .css("text-align", "center")
        .append(osztalybontottCsoportokChk)
        .append(osztalybontottCsoportokLbl);

      var kapcsolodoCsoportokChkName = "KapcsolodCsoportokChk" + osztaly.Id;
      var kapcsolodoCsoportokChk = $("<input/>")
        .addClass("k-checkbox")
        .attr("type", "checkbox")
        .attr("id", kapcsolodoCsoportokChkName)
        .attr("name", kapcsolodoCsoportokChkName)
        .attr("onclick", "OsztalyOrarendTorleseHelper.kapcsolodOnClick(" + osztaly.Id + ");");
      var kapcsolodoCsoportokLbl = $("<label></label>")
        .addClass("k-checkbox-label")
        .attr("for", kapcsolodoCsoportokChkName)
        .css("display", "inline-block");
      var kapcsolodoCsoportok = $("<div></div>")
        .addClass("col-sm-3")
        .css("text-align", "center")
        .append(kapcsolodoCsoportokChk)
        .append(kapcsolodoCsoportokLbl);

      var torlesBtnName = "SelectedTorlesBtn" + osztaly.Id;
      var torlesBtn = $("<button></button>")
        .addClass("k-button")
        .attr("id", torlesBtnName)
        .attr("onclick", "OsztalyOrarendTorleseHelper.deleteSelection(" + osztaly.Id + ");")
        .append("@CommonResource.Eltavolitas");
      var torles = $("<div></div>")
        .addClass("col-sm-3 BtnDelete selected-torles-btn")
        .append(torlesBtn);

      var row = $("<div></div>")
        .addClass("row")
        .attr("data-osztaly-id", osztaly.Id)
        .append(nev)
        .append(osztalybontottCsoportok)
        .append(kapcsolodoCsoportok)
        .append(torles);

      $(selectedOsztalyContainerId).append(row);
    }

    osztalyOrarendTorleseHelper.deleteSelection = function (osztalyId) {
      var osztaly = osztalyList.filter(function (o) {
        return o.Id == osztalyId;
      })[0];

      osztaly.IsSelected = false;

      setUpOsztalySelectRows();

      $(selectedOsztalyContainerId + " > div.row[data-osztaly-id='" + osztalyId + "']").remove();

      removeSelectedOsztalyIdFromInputString(osztalyId);
    }

    osztalyOrarendTorleseHelper.torles = function () {
      var form = $(formId);
      if (form.valid()) {
        var formData = form.toObject();

        if (formData.hasOwnProperty(feladatellatasiHelyCmbName + "_input")) {
          delete formData.FeladatellatasiHelyCmb_input;
        }

        if (formData.hasOwnProperty(feladatellatasiHelyCmbName)) {
          delete formData.FeladatellatasiHelyCmb;
        }

        AjaxHelper.DoValidationPost(url.OsztalyOrarendekTorlese, formName, formData, OrarendekTorleseHelper.torlesSuccessCallBack);
      }
    }

    function addSelectedOsztalyToInputString(osztalyId) {
      var json = parseSelectedOsztalyokJson();

      json.push({
        Id: osztalyId,
        IsKellKapcsolodoCsoportok: false,
        IsKellOsztalybontottCsoportok: false,
      });

      stringifySelectedOsztalyokJson(json);

      $(selectedOsztalyokId).valid();
    }

    function removeSelectedOsztalyIdFromInputString(osztalyId) {
      var json = parseSelectedOsztalyokJson();

      json = json.filter(function (obj) {
        return obj.Id != osztalyId;
      });

      stringifySelectedOsztalyokJson(json);

      $(selectedOsztalyokId).valid();
    }

    function parseSelectedOsztalyokJson() {
      var jsonString = $(selectedOsztalyokId).val();
      var jsonObj = null;
      if (jsonString.length > 0) {
        jsonObj = CommonUtils.JSONparse(jsonString);
      }
      else {
        jsonObj = [];
      }
      return jsonObj;
    }

    function stringifySelectedOsztalyokJson(json) {
      if (json.length == 0) {
        $(selectedOsztalyokId).val("");
      }
      else {
        $(selectedOsztalyokId).val(JSON.stringify(json));
      }
    }

    osztalyOrarendTorleseHelper.osztalybontottOnClick = function (osztalyId) {
      var json = parseSelectedOsztalyokJson();

      var osztaly = json.filter(function (obj) {
        return obj.Id == osztalyId;
      })[0];

      osztaly.IsKellOsztalybontottCsoportok = !osztaly.IsKellOsztalybontottCsoportok;

      stringifySelectedOsztalyokJson(json);
    }

    osztalyOrarendTorleseHelper.kapcsolodOnClick = function (osztalyId) {
      var json = parseSelectedOsztalyokJson();

      var osztaly = json.filter(function (obj) {
        return obj.Id == osztalyId;
      })[0];

      osztaly.IsKellKapcsolodoCsoportok = !osztaly.IsKellKapcsolodoCsoportok;
      if (osztaly.IsKellKapcsolodoCsoportok) {
        osztaly.IsKellOsztalybontottCsoportok = true;
        $('#OsztalybontottCsoportokChk' + osztaly.Id).prop("checked", true).attr("disabled", true);
      }
      else {
        $('#OsztalybontottCsoportokChk' + osztaly.Id).removeAttr("disabled");
      }

      stringifySelectedOsztalyokJson(json);
    }

    return osztalyOrarendTorleseHelper;
  })();
</script>

<script type="text/javascript">
  $(document).ready(function () {
    // https://stackoverflow.com/questions/24543862/selecting-multiple-from-an-html-select-element-without-using-ctrl-key
    $("select").mousedown(function (e) {
      e.preventDefault();

      var select = this;
      var scroll = select.scrollTop;

      e.target.selected = !e.target.selected;

      OsztalyOrarendTorleseHelper.selectOption(e.target);

      setTimeout(function () { select.scrollTop = scroll; }, 0);

      $(select).focus();
    }).mousemove(function (e) { e.preventDefault() });
  })
</script>