<%@ language="javascript"%>
<% /*
     $Revision$
     $Id$

     File:        mld_fe_menu.asp
     Description: Alternatieve interface om (eenvoudig) een melding te kunnen kiezen
                  Veronderstelt wel dat er niet al te schrikbarend veel meldingen zijn.
     Parameters:  lvl: het groeperingslevel,
                        1=vakgroep (default)
                        0=vakgroeptype
                        2=mld_stdmeldinggroep
                        n= als 1
									urole: indien fo, dan wordt MLDFOF autorisatie gebruikt ipv MLDUSE
     Context:     -
     Note:        Beetje aan het experimenteren. De # bij de kleurcodes is nog inconsequent in de db (FCLT#64203)

*/%>
<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->
<!-- #include file="../Shared/FlexFiles.inc" -->
<!-- #include file="mld_fe_menu.inc" -->
<%
FCLTHeader.Requires({ plugins: ["jQuery"],
                      js: ["jQuery-ui.js"]
                    });

var disc_key_arr = getQParamIntArray("disc", []);
var srtdisc_key_arr = getQParamIntArray("srtdisc", []);
var stdmgroep_key_arr = getQParamIntArray("stdmgroepkey", []);
var lvl = getQParamInt("lvl", 1);
var urole = getQParamSafe("urole", "fe");
var fronto = urole == "fo";
var aanvrager_key = getQParamInt("prs_key", -1);
var sametab       = getQParamInt("sametab", 0);  // alles in 1 tab of tabs na elkaar?

if (srtdisc_key_arr.length > 0)
    lcl.set_dialect(srtdisc_key_arr[0], "MLD_SRTDISCIPLINE_KEY");
%>
<html>
  <head>
<%  FCLTHeader.Generate(); %>
    <script type="text/javascript">

        function run_create_mld(p_srtdisc, p_mld_stdkey, p_url)
        {
            if (p_url)
            {   // URL starting with '*' is interpreted like 'target=_new'
                if (p_url.slice(0,4) == "http")
                    FcltMgr.windowopen(p_url);
                else
                    FcltMgr.openDetail(p_url, L("lcl_complain"));
            }
            else
            {
                var url = "mld/mld_melding.asp?urole=<%=urole%>&srtdisc=" + p_srtdisc + "&mld_defaultstdmelding=" + p_mld_stdkey;
<%              if (aanvrager_key > 0)
                { %>
                url += "&prs_key=<%=aanvrager_key%>";
<%              }
                if (sametab == 1) {
%>
                window.location.href = "../"+ url;
<% } else { %>
                FcltMgr.openDetail("appl/" + url, L("lcl_complain"));
<% } %>
            }
        }

        var lastIconMenu = null;
        function showIconMenu(key) {

            if (lastIconMenu !== key) {
                $(".seperator").hide();
                if ($(".col").children().find("div:visible").length > 0) {
                    $("div[class*='icmenu']").hide();
                    $(".icmenu"+key).fadeIn(150);
                } else {
                    if ($(".icmenu"+key).is(":visible")) {
                        $("div[class*='icmenu']").hide();
                    } else {
                        $(".icmenu"+key).fadeIn(150);
                    }
                }
                $(".seperator").each(function(index) {
                    if ($(this).attr("data-menuid") == key) {
                        $(this).show();
                    }
                });
            }
            lastIconMenu = key;
            $(".icmenu"+key).first().focus();
        }

        // Deze functie escaped all characters die in een regex ge-escaped moeten worden
        function escapeRegExp(s) {
            return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }

        $(function ()
        {
<%      if (!hasQParam("from_menu_key")) { %>
            FcltMgr.setTitle(L("lcl_menu_mld_fe_3"));
<%      } %>

            // show items by default when there is only one header
            if ($("div.mld-menu-button").length == 1) {
                showIconMenu(1);
            }

            // Zoekfilter
            $("#iframerextratitle").after("<input id='autofilter' type='text' placeholder='" + safe.htmlattr(L("lcl_autofilter")) + "'>");
            $("#autofilter").on("keyup", function(e)
            {
                $(".seperator, .mldicmenu").hide();
                lastIconMenu = null;

                // De highlight van oude zoekresultaten afhalen
                $("span.highlight-text").contents().unwrap();

                // Escape leegt het filter
                if (e.keyCode == 27) {
                    $(this).val("");
                    return;
                }

                var searchStr = $(this).val().toLowerCase();
                if (searchStr != "")
                {
                    var regex = new RegExp("("+escapeRegExp(searchStr)+")", "gi");
                    $(".mldicmenu").each(function()
                    {
                        var $label = $(this).find(".mld-iconlabel");
                        var findStr = $label.text();
                        var $hint = $(this).find(".mld-hint");
                        var findStr2 = $hint.text();
                        if (findStr.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1)
                        {
                            // Highlight de zoekterm, encode (FcltJuery.js) de resulterende string en vervangt de html()
                            $label.html(function() {
                                var split_arr = findStr.split(regex);
                                var new_html = "";
                                for (var i = 0; i < split_arr.length; i++)
                                    new_html += (i % 2 == 0 ? "{0}" : "<span class='highlight-text'>{0}</span>").format(safe.html(split_arr[i]));
                                return new_html.replace(/\n/g, "\n<br>");
                            });

                            $(this).show(); // Show me

                            var menuid = $(this).attr("data-menuid");
                            $(".seperator[data-menuid="+menuid+"]").show(); // Show my header
                        }
                        if(findStr2.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1)
                        {
                            $(this).show(); // Show me

                            var menuid = $(this).attr("data-menuid");
                            $(".seperator[data-menuid="+menuid+"]").show(); // Show my header
                        }
                    });
                }
            }).focus();
        });

    </script>
  </head>

<body class="menumode">
<%
    PAGE_START();

    function colorString2Array(pcolorstr)
    {
        var colorArray = pcolorstr == null ? [] : pcolorstr.split(";");
        // Reuse colors set by user
        switch (colorArray.length) {
          case 1: {
            colorArray[2] = colorArray[0];
            break;
          }
          case 2: {
            colorArray[2] = colorArray[0];
            colorArray[3] = colorArray[1];
            break;
          }
        }
        var regex = new RegExp("^(?:[0-9a-fA-F]{3}){1,2}");
        for (i = 0; i < colorArray.length; i++) {
            if (regex.test(sharedTrim(colorArray[i] || ""))) {
                if (colorArray[i] !== undefined) {
                    colorArray[i] = "#" + colorArray[i]
                }
            }
        }
        return colorArray;
    }

    IFRAMER_HEADER(L("lcl_mld_fe_menu_frame"));

var sql = mld_fe_menu.get_menu_sql(lvl, urole, {    srtdisc_key_arr:    srtdisc_key_arr,
                                                    disc_key_arr:       disc_key_arr,
                                                    stdmgroep_key_arr:  stdmgroep_key_arr
                                                });

var oRs = Oracle.Execute(sql)
var last_disc_key = -1;
var last_stdmgroep_key = -1;
var last_discname = "##initial##";
var menuid = 0;
var main_menu_html = "";
var sub_menu_html = "";
while (!oRs.Eof)
{
    switch (lvl) {
        case 2: {
            if (last_stdmgroep_key != oRs("mld_stdmeldinggroep_key").Value)
            {   // Meldinggroep header
                menuid++;
                main_menu_html += '<div onclick="showIconMenu(' + menuid + ');" tabindex="0" onkeypress="this.click()" class="mld-menu-button">'
                                + '  <h3>'
                                + '    <span>'
                                +        SYMBOL(oRs("mld_stdmeldinggroep_image").Value, { "module": "MLDG", "defVal": "fa-chevron-right" })
                                +        L("lcl_fe_menu_stdmeldinggroep") + ' ' + safe.html(oRs("mld_stdmeldinggroep_naam").Value)
                                + '    </span>'
                                + '  </h3>'
                                + '</div>';
                sub_menu_html += '<div class="seperator" style="display: none;" data-menuid="' + menuid + '">'
                               + '  <span>'
                               + oRs("mld_stdmeldinggroep_naam").Value
                               + '  </span>'
                               + '</div>';
            }
            break;
        }
        case 0: {
            if (last_disc_key != oRs("ins_srtdiscipline_key").Value)
            {   // Vakgroeptype header
                menuid++;
                var srtdiscipline_color = colorString2Array(oRs("ins_srtdiscipline_color").Value);
                var colorattr = (srtdiscipline_color.length ? " style='background-color: "+safe.html(srtdiscipline_color[0])+"'" : "");
                main_menu_html += '<div ' + colorattr + ' onclick="showIconMenu(' + menuid + ');" tabindex="0" onkeypress="this.click()" class="mld-menu-button">'
                                + '  <h3>'
                                + '    <span>'
                                +        SYMBOL(oRs("ins_srtdiscipline_image").Value, { "module": "MLDSD", "defVal": "fa-chevron-right" })
                                +        L("lcl_fe_menu_srtdiscipline") + ' ' + safe.html(oRs("ins_srtdiscipline_omschrijving").Value)
                                + '    </span>'
                                + '  </h3>'
                                + '</div>';
                sub_menu_html += '<div class="seperator" style="display: none;" data-menuid="' + menuid + '">'
                               + '  <span>'
                               +      oRs("ins_srtdiscipline_omschrijving").Value
                               + '  </span>'
                               + '</div>';
            }
            break;
        }
        default: {
            if (last_discname != oRs("full_discname").Value)
            {   // Vakgroep header
                menuid++;
                var discipline_color = colorString2Array(oRs("ins_discipline_color").Value);
                var colorattr = (discipline_color.length ? " style='background-color: "+safe.html(discipline_color[0])+"'" : "");
                main_menu_html += '<div ' + colorattr + ' onclick="showIconMenu(' + menuid + ');" tabindex="0" onkeypress="this.click()" class="mld-menu-button">'
                                + '  <h3>'
                                + '    <span>'
                                +        SYMBOL(oRs("ins_discipline_image").Value, { "module": "MLDD", "defVal": "fa-chevron-right" })
                                +        L("lcl_fe_menu_discipline") + ' ' + safe.html(oRs("full_discname").Value)
                                + '    </span>'
                                + '  </h3>'
                                + '</div>';
                sub_menu_html += '<div class="seperator" style="display: none;" data-menuid="' + menuid + '">'
                               + '  <span>'
                               +      oRs("full_discname").Value
                               + '  </span>'
                               + '</div>';
            }
        }
    }

    // optional default colors overrules by configuration
    var colors = colorString2Array(oRs("color").Value);

    sub_menu_html += '<div tabindex="0" onkeypress="this.click()" class="col-6 col-lg-4 col-xl-3 col-xxl-2 mldicmenu icmenu' + menuid + '"' + 'style="display: none;"' + 'data-menuid="' +menuid  + '"'
                   + '     title="' + safe.htmlattr(oRs("mld_stdmelding_hint").Value || oRs("mld_stdmelding_omschrijving").Value) + '"'
                   + '     onclick="run_create_mld(' + oRs("ins_srtdiscipline_key").Value + ',' + oRs("mld_stdmelding_key").Value + ',\'' + safe.jsstring(oRs("mld_stdmelding_externurl").Value) + '\');">'
                   + '  <div class="iconitem">'
                   + '    <div class="mld-icon-wrapper" style="' + (colors[0] ? 'background-color: ' + safe.html(colors[0]) + ';' : '') + ' ' + (colors[1] ? 'color: ' + safe.html(colors[1]) + ';' : '') + '">'
                   +        SYMBOL(oRs("mld_stdmelding_image").Value, { "module": "MLDS", "defVal": "fa-question" })
                   + '    </div>'
                   + '    <div class="mld-iconlabel" title="' + safe.htmlattr(oRs("mld_stdmelding_omschrijving").value) + '" style="' + (colors[2] ? 'background-color: ' + safe.html(colors[2]) + ';' : '') + ' ' + (colors[3] ? 'color: ' + safe.html(colors[3]) + ';' : '')+ '">'
                   +        safe.html(oRs("mld_stdmelding_omschrijving").value)
                   + '    </div>'
                   + '    <div style="display: none;" class="mld-hint">'
                   +        safe.html(oRs("mld_stdmelding_hint").value)
                   + '    </div>'
                   + '  </div>'
                   + '</div>';
    last_disc_key       = (lvl==1 ? oRs("ins_discipline_key").Value : oRs("ins_srtdiscipline_key").Value);
    last_stdmgroep_key  = (lvl==2 ? oRs("mld_stdmeldinggroep_key").Value : 0);
    last_discname       = (lvl==1 ? oRs("full_discname").Value : "");

    oRs.MoveNext();
}
oRs.Close();
%>
<div class="col-xxl-3 col-xl-4 col-6 nopadding mld-menu-col<%=(S("fac_betafeatures") & 2 ? " beta" : "")%>"><%
Response.Write(main_menu_html);
%>
</div>
<div class="col mld-menu-col<%=(S("fac_betafeatures") & 2 ? " beta" : "")%>">
    <div class="row"><%
Response.Write(sub_menu_html);
%>  </div>
</div>
<%
PAGE_END();
%>
</body>
</html>
<% ASPPAGE_END(); %>
