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

    File:               init_setup.asp
    Description:        Initial setup of a customer's environment
    Parameters:

    Context:
    Note:               Installeer een framework voor de klant

*/
%>

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

var STEPS = { "INTRODUCTION": 1, "FRAMEWORK": 2, "OVERVIEW": 3, "CONFIRMATION": 4 };
var step = getQParamInt("step", STEPS.INTRODUCTION);
if (step >= STEPS.OVERVIEW) {
  var framework = getQParamSafe("framework");
}
/* Steps;
  1. Introduction
  2. Choose module
  3. Oversight + confirm install
  4. Confirmation / end
*/
var steps = [
  {}, // filler voor de 0-index
  {
    icon: "fa-play",
    title: L("lcl_setup_introduction"),
    content: L("lcl_setup_intro_text")
  },
  {
    icon: "fa-gear-complex-code",
    title: L("lcl_setup_framework")
  },
  {
    icon: "fa-square-list",
    title: L("lcl_setup_overview")
  },
  {
    icon: "fa-check",
    title: L("lcl_setup_confirmation")
  }
];

%>
<html>
  <head>
<%  FCLTHeader.Generate();
    var buttons = [];
    if (step === STEPS.FRAMEWORK || step === STEPS.OVERVIEW) {
      buttons.push({ title: L("lcl_setup_previous"), action: "previous();", icon: "fa-arrow-left" });
    }

    if (step === STEPS.CONFIRMATION) {
      buttons.push({ title: L("lcl_setup_finish"), action: "FcltMgr.closeDetail();", icon: "fa-check" });
    } else if (step === STEPS.OVERVIEW) {
      buttons.push({ title: L("lcl_setup_confirm"), action: "doSetup();", icon: "fa-triangle-exclamation" });
    } else {
      buttons.push({ title: L("lcl_setup_next"), action: "next();", icon: "fa-arrow-right" });
    }
%>  <script>
      function checkInput(step) {
        if (step === <%=STEPS.OVERVIEW%>) {
          var selected = $(".card.selectable.active");
          if (selected.length === 0) {
            FcltMgr.alert(L("lcl_setup_framework_missing"));
            return false;
          }
        }
        return true;
      }

      function getParams(step) {
        var qs = "";
        if (step == <%=STEPS.OVERVIEW%>) {
          var framework = $(".card.selectable.active").data("framework");
          qs = "&framework=" + framework;
        }
        return qs;
      }

      function goto(step) {
        if (checkInput(step)) {
          window.location = "?step=" + step + getParams(step);
        }
      }
      function previous() {
        goto(<%=(step - 1)%>);
      }
      function next() {
        goto(<%=(step + 1)%>);
      }
<%  if (step === STEPS.OVERVIEW) { %>
      function doSetup() {
        FcltMgr.confirm("<%=safe.jsstring(L("lcl_setup_verify").format(framework.toUpperCase()))%>", function() {
          var data = $("form[name='setup']").serialize();
          $.post("init_setup_save.asp", data, FcltCallbackAndThen(setupCallback), "json");
        });
      }

      function setupCallback(json) {
        location.href = "?step=<%=STEPS.CONFIRMATION%>&framework=" + json.framework;
      }
<%  } %>

      $(_ => {
        $(".card.selectable").on("click", function() {
          if (!$(this).hasClass("active")) {
            $(".card.selectable").removeClass("active"); // max 1 tegelijk, dus remove de rest
          }
          $(this).toggleClass("active");
        });

        $(".step.default-clickable-icon").on("click", function() {
          goto($(this).data("step"));
        });
      });
    </script>
  </head>
  <body>
<%  SUBFRAME_START({ containerClass: "container", rowClass: "justify-content-center" });

    SIMPLE_BLOCK_START();
%>  <br>
<%  SIMPLE_BLOCK_END(); %>

    <div class="block-wrapper col-12">
      <div class="steps"><%
      for (var i = 1; i < steps.length; i++) {
        var cls = "card step";
        if (i == step) {
          cls += " active";
        } else if (i <= 2) {
          cls += " default-clickable-icon";
        }
        %><span class="<%=cls%>" data-step="<%=i%>"><%=I(steps[i].icon)%><%=steps[i].title%></span><%
      } %>
      </div>
    </div>
<%
    if (step === STEPS.INTRODUCTION) {
      BLOCK_START("setup-step-" + step, steps[step].title, { wide: true, icon: steps[step].icon, extraclass: "setupBlock" });
      Response.Write("<span>" + steps[step].content + "</span>");
      BLOCK_END();
    } else if (step === STEPS.FRAMEWORK) {
      // Kies een framework
      var sql = "SELECT ini_setup_name"
              + "     , ini_setup_name_full"
              + "     , ini_setup_date"
              + "  FROM ini_setup";
              + " ORDER BY ini_setup_name";
      var oRs = Oracle.Execute(sql);
%>    <main class="block-wrapper">
        <section class="frameworks"><%
      while (!oRs.EoF) {
        var setupName = oRs("ini_setup_name").Value;
        var setupNameFull = oRs("ini_setup_name_full").Value;
        var setupDate = oRs("ini_setup_date").Value;
        if (setupDate === null) { %>
          <article class="card framework selectable" data-framework="<%=safe.htmlattr(setupName)%>">
<%      } else { %>
          <article class="card framework disabled" title="<%=safe.htmlattr(L("lcl_setup_installed_on").format(toDateTimeString(setupDate)))%>">
<%      } %><figure>
              <img src="./IMG/<%=safe.htmlattr(setupName)%>.jpg">
              <figcaption><%=safe.html(setupName)%></figcaption>
            </figure>
            <div class="content">
              <h2><%=safe.html(setupNameFull)%></h2>
              <%=L("lcl_setup_" + setupName.toLowerCase() + "_description")%>
            </div>
          </article><%
        oRs.moveNext();
      }
      oRs.Close();
%>      </section>
      </main>
<%  } else if (step === STEPS.OVERVIEW) {
      BLOCK_START("setup-step-" + step, steps[step].title, { wide: true, icon: steps[step].icon, extraclass: "setupBlock" });
%>  <form name="setup">
      <input type="hidden" name="framework" value="<%=safe.htmlattr(framework)%>">
      <span class="setup_verification"><%=L("lcl_setup_verification1").format(safe.html(framework).toUpperCase())%></span>
      <span class="setup_overview"><%=L("lcl_setup_" + framework.toLowerCase() + "_description").format(safe.html(framework).toUpperCase())%></span>
      <div class="attention"><%=L("lcl_setup_verification2")%></div>
<%    IFACE.FORM_END(); %>
    </form>
<%    BLOCK_END();
    } else if (step === STEPS.CONFIRMATION) {
      BLOCK_START("setup-step-" + step + "a", null, { wide: true, icon: steps[step].icon, extraclass: "setupBlock" });
        Response.Write("<span>" + L("lcl_setup_" + framework.toLowerCase() + "_confirmation") + "</span>");
      BLOCK_END();
/* FUTURE USE; linkjes tonen om setup te verifieren of te verrijken (Zie; FCLT#83767)
      BLOCK_START("setup-step-" + step + "b", "Niet rechts maar *links*", { wide: true, icon: "fa-building-magnifying-glass" });
%>      <a href="#">Todo</a><%
      BLOCK_END();
*/    BLOCK_START("setup-step-" + step + "c", "Setup logging", { wide: true, icon: "fa-file-magnifying-glass" });
      if (user.has("WEB_FACFAC")) {
        var sql = "SELECT imp_log_datum"
                + "     , imp_log_status"
                + "     , imp_log_omschrijving"
                + "     , imp_log_hint"
                + "  FROM imp_log"
                + " WHERE UPPER (imp_log_applicatie) = " + safe.quoted_sql_upper("INI." + framework + "_INI")
                + " ORDER BY imp_log_key";
        var rst = new ResultsetTable({
          keyColumn: "imp_log_datum",
          sql: sql,
          ID: "setuptable",
          nofloating: true,
          noPrint: true,
          showAll: true
        });
        rst.addColumn(new Column({caption: L("lcl_imp_rap_datum"), content: "imp_log_datum", datatype: "datetime", nowrap: true}));
        rst.addColumn(new Column({caption: L("lcl_imp_rap_status"), content: "imp_log_status"}));
        rst.addColumn(new Column({caption: L("lcl_imp_rap_omschrijving"), content: "imp_log_omschrijving"}));
        rst.addColumn(new Column({caption: L("lcl_imp_rap_hint"), content: "imp_log_hint"}));
        rst.processResultset();
      }
      BLOCK_END();
    }

    SIMPLE_BLOCK_START({ extraclass: "setup-buttons" });
      CreateButtons(buttons);
    SIMPLE_BLOCK_END();

    IFACE.FORM_END();
  SUBFRAME_END(); %>
  </body>
</html>
<% ASPPAGE_END(); %>