source: main/trunk/ibisph-view/src/main/webapp/xslt/html/query/module/builder/Page.xslt @ 19868

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="3.0" 
        xmlns:xsl ="http://www.w3.org/1999/XSL/Transform" 
        xmlns:ibis="http://www.ibisph.org"

        exclude-result-prefixes="ibis"
>
        <xsl:import href="../Page.xslt"/>
        <xsl:import href="../../../Graphic.xslt"/>
        <xsl:import href="../../../../json/Dataset.xslt"/>
        <xsl:import href="../../../../json/Kendo.xslt"/>
        <xsl:import href="../../../../json/LeafletMap.xslt"/>
        <xsl:import href="SectionSelections.xslt"/>
        <xsl:import href="Builder.xslt"/>


        <ibis:doc>
                <name>html/query/module/builder/Page</name>
                <summary>Default core code that produces the query module builder pages</summary>
                <description>
                        Creates the module query builder type HTML pages.  The user 
                        steps through a series of questions and answers which are then submitted 
                        to the Query servlet which then builds a URL and accesses/calls the CGI 
                        app to query the SAS datasets.  The pages built with this XSLT are highly 
                        dependent on the selection javascritps, the Query servlet controllers, 
                        and the IBIS-PH module XML data files which control the way the questions 
                        and answers are presented and which define all the name/value pairs passed 
                        to IBISQ CGI app (via the URL).

                        NOTE: SECTION and DIMENSION exclusions are all handled by the 
                        ConfigurationIncludeCriteriaExclude XSLT templates.  It also handles
                        only including the selected CONFIGURATION.
                </description>
        </ibis:doc>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~ PARAMS / VARIABLES ~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <xsl:param name="Page.pageTitle" ibis:doc="Page's title text which is based on the 'queryModule/TITLE' element.">
                <xsl:value-of select="/QUERY_MODULE/TITLE"/> - <xsl:value-of select="$Page.configuration/TITLE"/> Query Builder
        </xsl:param>
        <xsl:param name="Page.contentTitle" ibis:doc="Page's content title text which is based on the '$selections.queryModule/TITLE' element.">
                Query Builder for <xsl:value-of select="/QUERY_MODULE/TITLE"/> - <xsl:value-of select="$Page.configuration/TITLE"/>
<!--
                Query Builder for <xsl:value-of select="$Page.configuration/TITLE"/>
                Query Builder for <xsl:value-of select="concat($Page.configuration/TITLE, '-', /QUERY_MODULE/TITLE)"/>
-->
        </xsl:param>
        <xsl:param name="Page.queryDefinitionFromBuilderPath" select="'query/definition/from/builder'"/>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TEMPLATES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <xsl:template name="Page.specificHeadContent"
                ibis:doc="HTML API implementation that provides hook for the 
                        query modules to be able to specify any extra CSS, meta tags, or
                        javascript functions that need to be included specific to that 
                        module.  The module element '/QUERY_MODULE/CRITERIA/OTHER_HTML_HEAD_CONTENT'
                        contents are simply copied into the HTML 'head' element as is.
                        This code also handles a special parameter called 'AutoSubmit' which
                        can be used for testing."
        >
                <xsl:if test="exists(/QUERY_MODULE/CRITERIA/OTHER_HTML_HEAD_CONTENT)">
                        <xsl:apply-templates select="/QUERY_MODULE/CRITERIA/OTHER_HTML_HEAD_CONTENT/text() | /QUERY_MODULE/CRITERIA/OTHER_HTML_HEAD_CONTENT/*" mode="ibis.copy"/>
                </xsl:if>

                <meta http-equiv="Cache-Control" content="max-age=300"/>
        </xsl:template>



        <xsl:template name="Page.specificScript"
                ibis:doc="Provides the javascript file links and submit related functions 
                        for the query module builder pages."
        >
                <script type="text/javascript" src="{$ibis.contextPath}js/InputSelections.js"/>
                <script type="text/javascript">
                        var saveCriteriaURL = "<xsl:value-of select="concat($ibis.contextPath, $Page.queryDefinitionFromBuilderPath)"/>";
                        window.inputSelections = new InputSelections();         // all input elements on the page.

                        // <![CDATA[
                        // init code - jquery way:  $(document).ready(initializeQueryBuilderPage);
                        $(document).ready(function()
                        {
                                if(location.href.indexOf("PrinterFriendly") == -1) 
                                {
                                        window.inputSelections.registerOnChange();
                                        setupStepSelections();
                                }
                        });


                        // set all 3 or 4 selection options onchange to this.  Then simply
                        // get the title values into the InputSelections CSV build and put
                        // into the display steps SelectedValues element.
                        function displayOptionsChangeHandler()
                        {
                                var categoryGroupByElement        = document.getElementById("_CategoryGroupByDimensionName");
                                var selectedCategoryOptionElement = categoryGroupByElement.options[categoryGroupByElement.selectedIndex];

                                var seriesGroupByElement  = document.getElementById("_SeriesGroupByDimensionName");
                                var selectedSeriesGroupBy = ((null != seriesGroupByElement) ? seriesGroupByElement.options[seriesGroupByElement.selectedIndex].value : "");

                                var otherGroupByElement   = document.getElementById("_OtherGroupByDimensionName");
                                var selectedOtherGroupBy  = ((null != otherGroupByElement) ? otherGroupByElement.options[otherGroupByElement.selectedIndex].value : "");

                                var chartNameElement = document.getElementById("chartName");
                                var selectedChart    = ((null != chartNameElement) ? chartNameElement.options[chartNameElement.selectedIndex].text : "");

                                var mapNameElement   = document.getElementById("mapName");
                                var selectedMap      = ((null != mapNameElement) ? mapNameElement.options[mapNameElement.selectedIndex].text : "");

                                var showMapSelections = 
                                        (" " >= selectedSeriesGroupBy)
                                        &&
                                        (" " >= selectedOtherGroupBy)
                                        && 
                                        (" " < selectedCategoryOptionElement.getAttribute("geographyflag"))
                                ;
                                if(null != mapNameElement) mapNameElement.disabled = !showMapSelections;

                                var selectedValues = "Grouped By: " + selectedCategoryOptionElement.text;
                                if(" " < selectedSeriesGroupBy) selectedValues = selectedValues + " x " + seriesGroupByElement.options[seriesGroupByElement.selectedIndex].text;
                                if(" " < selectedOtherGroupBy)  selectedValues = selectedValues + " x " + otherGroupByElement.options[otherGroupByElement.selectedIndex].text;

                                if( " " < selectedChart) selectedValues = selectedValues + ". Chart: " + selectedChart;
                                if((" " < selectedMap) && showMapSelections) selectedValues = selectedValues + ". Map: " + selectedMap;

                                var selectedValuesElement = $("#displayControlSectionSelectedValues");
                                selectedValuesElement.html( "(" + selectedValues + ")" );
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                        // function to check to see if cross1 and cross2 are set the same.  If
                        // so popup an alert notifying the user that they are both the same.
                        function isGroupByDimensionsSame()
                        {
                                var categoryGroupByDimensionValue = $("#_CategoryGroupByDimensionName").val();
                                var seriesGroupByDimensionValue   = $("#_SeriesGroupByDimensionName").val();
                                if((categoryGroupByDimensionValue != null) && (categoryGroupByDimensionValue == seriesGroupByDimensionValue))
                                {
                                        alert
                                        (
                                                "--Duplicate Category/Series Grouping Selections Notice--\n" + 
                                                "\nBoth the row and column grouping selections" +
                                                "\nare set to the same value.  This will work but" +
                                                "\nprobably will not produce the desired results."+
                                                "\nIt is recommended that you change one of the"+
                                                "\nselections before submitting the query." 
                                        );
                                        return(true);
                                }               
                                return(false);
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                        function setupStepSelections()
                        {
                                // fire the change event to show current selections.
                                var section = $(".ExpandableContent");
                                for(i=0; i<section.length; i++) 
                                        window.inputSelections.updateSectionSelectionsTitlesCSV(section[i]);
                                displayOptionsChangeHandler();
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                        function resetForm()
                        {
                                document.form.reset();
                                setupStepSelections();
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        

                        // Main function that pressing the submit button executes.  This 
                        // function's main purpose is to clear unselected values so that
                        // they are NOT submitted to the server for inclusion in the 
                        // query.  This can be handled on the backend but it would be
                        // messy and error prone.
                        function submitQuery()
                        {
                                if(isGroupByDimensionsSame()) return;   // can't return null or false...
                                window.inputSelections.clearAllNonSelectedSelections();
                                if(!window.inputSelections.validateAllTextInputs()) return;

                                // submit the page's form contents... 
                                document.form.submit();
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                        function saveCriteria()
                        {
                                window.inputSelections.clearAllNonSelectedSelections();
                                if(!window.inputSelections.validateAllTextInputs()) return;
                                document.form.action = saveCriteriaURL;
                                document.form.submit();
                        } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


                        // according to: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript
                        // having a window.onbeforeunload tells the browser to NOT cache the 
                        // page so that the back button doesn't impact cleared non selected
                        // query selection values.  On the modern browsers that were tested
                        // this never was an issue as modern browsers pick up the "post" 
                        // and understand to reset the page as it was prior to submitting.
                        window.onbeforeunload = function() {}

                        // ]]>
                </script>
        </xsl:template>



        <!-- main page content template -->
        <xsl:template name="Page.contentBody"
                ibis:doc="Main page content template that creates the overview 
                        section, upper steps control bar, all the Q/A steps, the display 
                        step, and the submission control."
        >
                <xsl:param name="sections" select="/QUERY_MODULE/CRITERIA/SECTIONS"/>


                <div class="ContentOptions">
                        <h3><xsl:value-of select="'Query Builder Page Options'"/></h3>
                        <button type="button" accesskey="S" id="submitButton" title="Submit the query and display the result page">
                                <xsl:attribute name="onclick" select="
                                        if(exists($Page.configuration/CRITERIA/SUBMIT_JAVASCRIPT_FUNCTION_CALL)) 
                                                then $Page.configuration/CRITERIA/SUBMIT_JAVASCRIPT_FUNCTION_CALL 
                                                else 'submitQuery()'
                                        "
                                />
                                Submit
                                <xsl:call-template name="Help.content">
                                        <xsl:with-param name="help">
                                                <TEXT>
                                                        This submits your query definition.  Once submitted 
                                                        the data will be processed and the result page will 
                                                        be presented.  From the result page you can return 
                                                        to this page and refineany data filtering criteria 
                                                        and data grouping selections.
                                                </TEXT>
                                        </xsl:with-param>
                                </xsl:call-template>
                        </button>

                        <button type="button" accesskey="M" id="defaultQuery" title="Reloads the default query definition"
                                onclick="location.href='{concat($ibis.contextPath, 'query/builder/', /QUERY_MODULE/REQUEST/CONFIGURATION_PATH, '.html?Reload=x')}'"
                        >
                                Load Default Query
                                <xsl:call-template name="Help.content">
                                        <xsl:with-param name="help">
                                                <TEXT>
                                                        Resets your query definition to the default selections
                                                        and settings.  This is different from the [Reset] button
                                                        located at the bottom of the page.  The [Reset] restores
                                                        immediate page selections made.  This option actually 
                                                        reloads the query definition to it's default state.
                                                </TEXT>
                                        </xsl:with-param>
                                </xsl:call-template>
                        </button>

                        <button type="button" accesskey="M" id="selectQueryMeasure" title="Select a new  query dataset measure"
                                onclick="location.href='{concat($ibis.contextPath, /QUERY_MODULE/QUERY_CONFIGURATION_SELECTION/LOCAL_URL)}'"
                        >
                                Select Query Measure
                                <xsl:call-template name="Help.content">
                                        <xsl:with-param name="help">
                                                <TEXT>
                                                        Allows you to change the measure to be queried.  
                                                </TEXT>
                                        </xsl:with-param>
                                </xsl:call-template>
                        </button>

                        <button type="button" accesskey="D" id="saveDefinition" 
                                title="Click this button to save the selections as a saved criteria definition"
                                onclick="saveCriteria()"
                        >
                                Save Query Definition
                                <xsl:call-template name="Help.content">
                                        <xsl:with-param name="help">
                                                <TEXT>
                                                        Allows you to save your current filtering criteria and
                                                        display selections.  These saved query definitions can
                                                        then be ran later and can even be shared with others.
                                                </TEXT>
                                        </xsl:with-param>
                                </xsl:call-template>
                        </button>

                        <button type="button" accesskey="L" id="loadDefinition" 
                                title="Click this button to access all query definitions"
                                onclick="location.href='{concat($ibis.contextPath, 'query/definition/index/MyDefinitions.html')}'"
                        >
                                Load Query Definition
                                <xsl:call-template name="Help.content">
                                        <xsl:with-param name="help">
                                                <TEXT>
                                                        Takes you to a page that shows a list of all of your
                                                        saved query defintions.  You can then choose several 
                                                        options to run the definition, refine it, or delete it.

                                                        NOTE: you will need to be logged in to be able to see
                                                        your definitions.
                                                </TEXT>
                                        </xsl:with-param>
                                </xsl:call-template>
                        </button>
                </div>

                <!-- if dup names, then show an error and exit the page.  note the next 
                        match enable the page to be displayed.  Otherwise it simply blows...
                -->
                <xsl:if test="count($Page.configuration/NAME) &gt; 1">
                        <div class="Error">
                                <h2>ERROR: Duplicate Module Configuration Names!!!  Please 
                                        contact the owners of this system and report this problem.
                                        <br/><br/>

                                        Duplicate Configuration Name: <xsl:value-of select="distinct-values($Page.configuration/NAME)"/>
                                </h2>
                        </div><br/>

                        <xsl:next-match/>
                        <xsl:message terminate="yes">
                                QUERY MODULE ERROR: Duplicate Module Configuration Names: <xsl:value-of select="concat(/QUERY_MODULE/NAME, '/', distinct-values($Page.configuration/NAME))"/>
                        </xsl:message>
                </xsl:if>


                <!-- MAIN FORM that contains all user selectable input elements. -->
                <form id="form" name="form" method="post" action="{$Builder.postURL}">

                        <!-- Put in any dynamic IBISQ parameters.  If a HIDDEN_INPUT_FLAG
                                element exists then this parameter is put into the form as a 
                                hidden so that javascript can modify it's value before
                                submitting to the servlet.
                        -->
                        <xsl:apply-templates mode="Builder.hiddenInput" select="/QUERY_MODULE//PARAMETERS/PARAMETER[exists(HIDDEN_INPUT_FLAG)]"/>

                        <xsl:call-template name="ContentContainer.contentBlockWithDelimitedTitleTextsNodesets">
                                <xsl:with-param name="title"                 select="'Overview'"/>
                                <xsl:with-param name="additionalClasses"     select="'Overview'"/>
                                <xsl:with-param name="contentBlockType"      select="'expandable'"/>
                                <xsl:with-param name="expandableContentShow" select="true()"/>
                                <xsl:with-param name="addWikiAttribute"      select="true()"/>
                                <xsl:with-param name="titleAndTextsNodeset"  select="/QUERY_MODULE/CRITERIA/OVERVIEWS/OVERVIEW"/>
                        </xsl:call-template>

                        <!-- do the step sections - questions and answers -->
                        <xsl:for-each select="/QUERY_MODULE/CRITERIA/SECTIONS/SECTION">
                                <xsl:call-template name="SectionSelections.expandableContentSection">
                                        <xsl:with-param name="section"            select="."/>
                                        <xsl:with-param name="sectionNumber"      select="position()"/>
                                </xsl:call-template>
                        </xsl:for-each>

                        <!-- show the display options section next -->
                        <xsl:call-template name="ContentContainer.expandable">
                                <xsl:with-param name="title"       select="concat('Step ', count($sections/SECTION) + 1, ': How to display the data')"/>
                                <xsl:with-param name="description" select="'Show/hide display options'"/>
                                <xsl:with-param name="subTitleContent">
                                        <span id="displayControlSectionSelectedValues" class="SelectedValues"/>
                                </xsl:with-param>
                                <xsl:with-param name="accesskey"   select="'D'"/>
                                <xsl:with-param name="content">
                                        <xsl:call-template name="Builder.displayControl"/>
                                </xsl:with-param>
                        </xsl:call-template>

                        <!-- finally the finish/submit section -->
                        <div style="margin-top: 1rem;">
                                <xsl:call-template name="Builder.submitControl"/>
                        </div>

                </form>

                <xsl:call-template name="Builder.initContent"/>
        </xsl:template>

</xsl:stylesheet>
<!-- ============================= End of File ============================= -->