Changeset 2014 for trunk


Ignore:
Timestamp:
Sep 12, 2011, 1:49:52 PM (8 years ago)
Author:
tjeerd@…
Message:

Further awesome additions to the visualization interface

Location:
trunk
Files:
4 added
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/visualize/index.gsp

    r2010 r2014  
    4545                    <div class="menu_item_label">Studies <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    4646                    <div class="menu_item_info"></div>
    47                     <div class="formulier"><label for="study">Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();" noSelection="${['':'[SELECT OPTION]']}"/></div>
     47                    <div class="formulier"><g:render template="formStudy" /></div>
    4848                </div>
    4949                <div class="menu_arrow"> </div>
     50                <div class="menu_item" id="menu_column">
     51                    <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
     52                    <div class="menu_item_info"></div>
     53                    <div class="formulier"><g:render template="formColumns" /></div>
     54                </div>
    5055                <div class="menu_item" id="menu_row">
    51                     <div class="menu_item_label">Rows <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
     56                    <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    5257                    <div class="menu_item_info"></div>
    53                     <div class="formulier"><label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields('menu_row');"></select></div>
    54                 </div>
    55                 <div class="menu_item" id="menu_column">
    56                     <div class="menu_item_label">Columns <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    57                     <div class="menu_item_info"></div>
    58                     <div class="formulier"><label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields('menu_column');"></select></div>
     58                    <div class="formulier"><g:render template="formRows" /></div>
    5959                </div>
    6060                <div class="menu_arrow"> </div>
     
    6262                    <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
    6363                    <div class="menu_item_info"></div>
    64                     <div class="formulier"><label for="types">Type</label><select id="types" name="types" onChange="changeVis();"></select></div>
     64                    <div class="formulier"><g:render template="formType" /></div>
    6565                </div>
    6666                <div class="menu_arrow"> </div>
    6767                <div class="menu_item" id="menu_go">
    68                     <button id="button_visualize" onClick="visualize(); return false;" >Visualize</button>
     68                    <button id="button_visualize" onClick="visualize(); return false;" >
     69                        Visualize<br />
     70                        <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />
     71                        <span style="height: 16px;">&nbsp;</span>
     72                    </button>
    6973                    <input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
    7074                <div class="menu_spacer"> </div>
  • trunk/web-app/css/visualization.css

    r2010 r2014  
    11/* #step2, #step3 { display: none; } */
    2 label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px;  }
     2label { display: inline-block; }
    33
    44table.jqplot-table-legend { width: 100px; }
     
    7070    border-color: #888;
    7171    z-index: 10;
     72    min-height: 60px;
    7273}
    7374
     
    122123#menu_go {
    123124    background-color: white;
    124     width: 120px;
     125    width: 110px;
    125126}
    126127
     
    128129    position: absolute;
    129130    display: none;
    130     left: 140px;
     131    left: 130px;
    131132    top: -2px;
    132     width: 500px;
    133     height: 100px;
     133    width: 360px;
     134    height: 170px;
    134135    border-style: solid;
    135136    border-color: inherit;
     
    137138    background: white;
    138139    padding: 40px;
     140}
     141
     142.formulier .info {
     143    font-size: 11px;
     144    color: #555;
     145}
     146
     147.formulier label {
     148    font-size: 14px;
     149    color: #006DBA;
     150}
     151
     152.formulier select {
     153    width: 100%;
    139154}
    140155
  • trunk/web-app/js/visualization.js

    r2010 r2014  
    3434                // Remove all previous entries from the list
    3535                $( '#rows, #columns' ).empty();
    36                 $( '#rows, #columns' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    3736
    3837                if(data.infoMessage) {
     
    4443                // Add all fields to the lists
    4544                if( data.returnData ) {
    46                         var returnData = data.returnData;
     45                    var returnData = data.returnData;
     46
     47                    var prevCat = "";
    4748                        $.each( returnData, function( idx, field ) {
     49                        if(field.category!=prevCat) {
     50                            $( '#rows, #columns' )
     51                                    .append( $( "<option>" )
     52                                    .val( "" )
     53                                    .text( field.source+": "+field.category )
     54                                    .attr("disabled","disabled")
     55                                    .css("font-weight","bold")
     56                                    .css("color","white")
     57                                    .css("background-color","#333") );
     58                            prevCat = field.category;
     59                        }
    4860                            $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    4961                        });
     
    8597                } else {
    8698
    87                     $( '#types' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    8899                    // Add all fields to the lists
    89100                    var returnData = data.returnData;
     
    106117                    clearStep("#menu_vis");
    107118                    $( "#menu_vis" ).addClass("menu_item_fill");
    108                 }
     119                    if($( '#types option' ).length==1) {
     120                        $( '#types :first-child' ).attr("selected","selected");
     121                        changeVis();
     122                    }
     123                }
     124
     125
    109126            }
    110127        },divid);
     
    148165    } else {
    149166
     167        $( "#menu_go" ).find("img.spinner").show();
    150168
    151169        executeAjaxCall( "getData", {
     
    212230
    213231                $( "#visualization" ).show();
     232                $( "#menu_go" ).find("img.spinner").hide();
    214233            }
    215234        }, "menu_go");
     
    318337                url: visualizationUrls[ action ],
    319338                data: data,
    320                 dataType: "json",
     339                dataType: "json"
    321340        }, ajaxParameters ) );
    322341}
Note: See TracChangeset for help on using the changeset viewer.