Changeset 276 for Dev/branches


Ignore:
Timestamp:
02/21/12 13:56:17 (13 years ago)
Author:
tjcschipper
Message:

Laatste versie van de 'oude' dashboard interface.

Location:
Dev/branches/Cartis
Files:
6 added
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/Cartis/css/visualeditors.css

    r239 r276  
    2424
    2525#wrapper {
    26     width: 80%;
    27     min-width: 800px;
     26    width: 960px;
    2827    margin: 0 auto;
    2928}
    … …  
    506505
    507506#breadcrumbs {
     507    font-size: 14px;
     508    color: #fff;
     509    margin: 0 10px;
     510    padding: 5px 20px;
     511    width: 88%;
     512}
     513
     514#breadcrumbs a {
     515    text-decoration: none;
     516    color: #fff;
     517}
     518
     519#breadcrumbs a:hover {
     520    color: #367ac3;
     521}
     522
     523#breadcrumbs a.selected {
    508524    text-decoration: underline;
    509     font-size: 50px;
    510     font-family: monospace;
    511 }
     525}

  • Dev/branches/Cartis/dashboardDataSelection.php

    r242 r276  
    2424    </head>
    2525    <body>
    26         </div>
     26    </div>
    2727
    28             <div id="header">
    29                
     28    <div id="header">
     29
     30    </div>
     31
     32    <div id="content">
     33        <div id="wrapper">
     34
     35            <div id="breadcrumbs" class="largeFrame">
     36                <a href="#">Login</a> >
     37                <a href="dashboardDataSelection.php" class="selected">Select data</a>
    3038            </div>
    3139
    32             <div id="content">
    33                 <div id="wrapper">
     40            <div id="leftColumn">
    3441
    35                     <div id="leftColumn">
     42                <div class="largeFrame C" id="dbDataSelector">
     43                    <div class="content">
    3644
    37                         <div class="largeFrame C" id="dbDataSelector">
    38                             <div class="content">
     45                        <div style="float: left; clear: none;">
     46                            <div class="largeTitle">Instance data</div>
     47                            <select id="dbSessionInstancesList" multiple class="dbDataList" size="15" onchange="infoPanelTimeout(event);">
    3948
    40                                 <div style="float: left; clear: none;">
    41                                     <div class="largeTitle">Instance data</div>
    42                                     <select id="dbSessionInstancesList" multiple class="dbDataList" size="15" onchange="infoPanelTimeout(event);">
    43 
    44                                         <?php
    45                                         //Changed sessions into questions
    46                                         // foreach ($dbDataSelectionWidget->survey as $question) {
    47                                         foreach ($dbDataSelectionWidget->sessions as $session) {
    48                                             // Fill list
    49                                             // First checkbox, then descriptor
    50                                             echo "<option value='$session->uid'>$session->title</option>";
    51                                         }
    52                                         ?>
    53                                     </select>
    54                                 </div>
    55 
    56                                 <div style="float: left; clear:none;">
    57                                     <div class="largeTitle">Game data</div>
    58                                     <select id="dbGamedataList" multiple class="dbDataList" size="15" onChange="infoPanelTimeout(event);">
    59                                         <?php
    60                                         foreach ($dbDataSelectionWidget->gamedata as $gamedata) {
    61                                             // Fill list
    62                                             // First checkbox, then descriptor
    63                                             echo "<option value='$gamedata->uid'>$gamedata->title</option>";
    64                                         }
    65                                         ?>
    66                                     </select>
    67                                 </div>
    68                             </div>
     49                                <?php
     50                                //Changed sessions into questions
     51                                // foreach ($dbDataSelectionWidget->survey as $question) {
     52                                foreach ($dbDataSelectionWidget->sessions as $session) {
     53                                    // Fill list
     54                                    // First checkbox, then descriptor
     55                                    echo "<option value='$session->uid'>$session->title</option>";
     56                                }
     57                                ?>
     58                            </select>
    6959                        </div>
    7060
    71 
    72                         <div class="largeFrame Cu" id="dbInfoPanel">
    73                             <div class='largeTitle'>Info panel</div>
    74                             <div class="content" id="dbInfoPanelContent" style="height: 100px;">
    75 
    76                             </div>
    77 
    78                             <div class="controls">
    79                                 <input type="button" class="smallButton" id="btnAddToCart" value="Add to list" onClick="addDataToList();" />
    80                             </div>
    81                         </div>
    82                     </div>
    83 
    84                     <div id="rightColumn">
    85                         <div class="largeFrame Cv" id="dbShoppingCart">
    86                             <div class="largeTitle">Selected data</div>
    87                             <div class="content" id="shoppingCartContent">
    88 
    89                             </div>
    90                             <div class="controls">
    91                                 <input type="button" class="smallButton" id="btnAddToCart" value="Configure Dashboard" onClick="configureDashboard();" />
    92                             </div>
     61                        <div style="float: left; clear:none;">
     62                            <div class="largeTitle">Game data</div>
     63                            <select id="dbGamedataList" multiple class="dbDataList" size="15" onChange="infoPanelTimeout(event);">
     64                                <?php
     65                                foreach ($dbDataSelectionWidget->gamedata as $gamedata) {
     66                                    // Fill list
     67                                    // First checkbox, then descriptor
     68                                    echo "<option value='$gamedata->uid'>$gamedata->title</option>";
     69                                }
     70                                ?>
     71                            </select>
    9372                        </div>
    9473                    </div>
    9574                </div>
     75
     76
     77                <div class="largeFrame Cu" id="dbInfoPanel">
     78                    <div class='largeTitle'>Info panel</div>
     79                    <div class="content" id="dbInfoPanelContent" style="height: 100px;">
     80
     81                    </div>
     82
     83                    <div class="controls">
     84                        <input type="button" class="smallButton" id="btnAddToCart" value="Add to list" onClick="addDataToList();" />
     85                    </div>
     86                </div>
    9687            </div>
    97     </body>
     88
     89            <div id="rightColumn">
     90                <div class="largeFrame Cv" id="dbShoppingCart">
     91                    <div class="largeTitle">Selected data</div>
     92                    <div class="content" id="shoppingCartContent">
     93
     94                    </div>
     95                    <div class="controls">
     96                        <input type="button" class="smallButton" id="btnAddToCart" value="Configure Dashboard" onClick="configureDashboard();" />
     97                    </div>
     98                </div>
     99            </div>
     100        </div>
     101    </div>
     102</body>
    98103</html>

  • Dev/branches/Cartis/dashboardGraphSelection.php

    r242 r276  
    2727        <script src="RGraph/libraries/RGraph.pie.js" ></script>
    2828        <script src="RGraph/libraries/RGraph.radar.js" ></script>
     29        <script src="RGraph/libraries/RGraph.rose.js" ></script>
    2930
    3031
     32
     33
     34
     35
     36       
    3137        <script>
    3238            myGraph.Set('chart.contextmenu', [
    … …  
    3642            ]);
    3743        </script>
    38 
    39 
    40         <script>
    41             window.onload = function ()
    42             {
    43  
    44                 var bar1 = new RGraph.Bar('chart1', mockupData.muData3);
    45                 //bar1.Set('chart.background.barcolor1', 'white');
    46                 // bar1.Set('chart.background.barcolor2', 'white');
    47                 bar1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
    48                 bar1.Set('chart.key', ['John', 'Bob']);
    49                 bar1.Set('chart.key.position.y', 35);
    50                 bar1.Set('chart.key.position', 'gutter');
    51                 bar1.Set('chart.key.background', 'rgb(255,255,255)');
    52                 bar1.Set('chart.colors', ['#77f', '#7f7']);
    53                 bar1.Set('chart.shadow', true);
    54                 bar1.Set('chart.shadow.blur', 15);
    55                 bar1.Set('chart.shadow.offsetx', 0);
    56                 bar1.Set('chart.shadow.offsety', 0);
    57                 bar1.Set('chart.shadow.color', '#aaa');
    58                 bar1.Set('chart.yaxispos', 'right');
    59                 bar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
    60                 bar1.Set('chart.gutter.left', 5);
    61                 bar1.Set('chart.gutter.right', 45);
    62                 bar1.Draw();
    63  
    64                
    65            
    66                 if (!RGraph.isIE8()) {
    67                     tooltipFunc = function (i)
    68                     {
    69                         var r = i % 4;
    70                    
    71                         if (r == 3) return 'John'
    72                         else if (r == 2) return 'Rich';
    73                         else if (r == 1) return 'Jane';
    74                         else if (r == 0) return 'Quentin';
    75                     }
    76                     bar2.Set('chart.tooltips', tooltipFunc);
    77                 }
    78  
    79                 bar2.Draw();
    80                
    81             }
    82         </script>
    83        
    8444
    8545        <title>
    … …  
    10060                <div id="wrapper">
    10161
     62                    <div id="breadcrumbs" class="largeFrame" style="width: 900px;">
     63                        <a href="#" onclick="checkBack('index.php');">Login</a> >
     64                        <a href="#" onclick="checkBack('dashboardDataSelection.php');">Select data</a> >
     65                        <a href="#" class="selected">Select graphtype</a>
     66                    </div>
     67
    10268                    <div id="leftColumn">
    10369
    … …  
    10672
    10773                                <div class="largeTitle">Selected data</div>                         
    108                                 <div class="content" style="width: 300px; height: 500px; ">               
     74                                <div class="content" style="width: 296px; height: 500px; ">               
     75                                    <select id="dbSelectedData" multiple class="dbDataList" size="15" style="width: 275px;" onchange="infoPanelTimeout(event);">
    10976
    110                                     <?php
    111                                     print_r($data);
    112                                     ?>
     77                                        <?php
     78                                        $objCount = count($data->contents->titles);
    11379
     80                                        for ($i = 0; $i < $objCount; $i++) {
     81                                            echo "<option value='" . $data->contents->uids[$i] . "' name='" . $data->contents->types[$i] . "'>" . $data->contents->titles[$i] . "</option>";
     82                                        }
     83                                        ?>
     84                                    </select>
    11485                                </div>
    11586
    … …  
    12596                                <div id="btnSelectBarType" class="graphSelectionButton" onclick="changeGraphType('bar')">BAR CHART</div>
    12697                                <div id="btnSelectRadarType" class="graphSelectionButton" onclick="changeGraphType('radar')">RADAR CHART</div>
     98                                <div id="btnSelectRose" class="graphSelectionButton" onClick="changeGraphType('rose')">ROSE CHART</div>
     99
    127100                            </div>
    128101                            <div class="content" id="graphDisplay">
    129102
    130103                                <canvas id="chart1" width="450" height="200" onclick="RGraph.showPNG(document.getElementById('radar1'));">[No canvas support] </canvas>
    131                              
     104
    132105                                <!-- Button to gotoDashboard?? -->                                                           
    133106
    … …  
    137110                                <input type="button" class="smallButton" value="Save to dashboard" onClick="addToDashboard()"></input>
    138111                                <input type="button" class="smallButton" value="Go to Dashboard" onClick="gotoDashboard()"></input>
    139                                
     112
    140113
    141114                            </div>

  • Dev/branches/Cartis/dashboardOverview.php

    r242 r276  
    2222        <script src="RGraph/libraries/RGraph.radar.js" ></script>
    2323        <script src="RGraph/libraries/RGraph.pie.js" ></script>
     24        <script src="rGraph/libraries/RGraph.rose.js"></script>
    2425
    2526        <script>
    … …  
    4445            }
    4546        </script>
    46 
    47 
    48 
    4947        <title>Dashboard Overview</title>
    5048        <?php new Stylesheet("visualEditors"); ?>
    5149    </head>
    5250    <body>
    53        
     51
    5452        <div id="header">
    5553            <?php new Logo(); ?>
    … …  
    5957            <div id="wrapper">
    6058
     59                <div id="breadcrumbs" class="largeFrame" style="width: 900px;">
     60                    <a href="#" onclick="checkBack('index.php');">Login</a> >
     61                    <a href="#" onclick="checkBack('dashboardDataSelection.php');">Select data</a> >
     62                    <a href="#" onclick="checkBack('dashboardDataSelection.php');">Select graphtype</a>
     63                    <a href="#" class="selected">Dashboard Overview</a>
     64                </div>
     65
    6166                <div id="leftColumn">
    6267
    … …  
    6570                        <div class="largeTitle">Dashboard Overview</div>                         
    6671                        <div class="content" id="graphDisplay">
    67                            
     72
    6873                            <input type="hidden" id="inputDataField" value='<?php echo $dataIn; ?>'
    69                            
     74
    7075
    7176                        </div>

  • Dev/branches/Cartis/js/dashboardScripts.js

    r242 r276  
    2222var mockupData = {
    2323    muData1: [1,2,3,4,5,6], //pie charts
    24     muData2: [[1,2,3],[4,5,6]], //bar charts
    25     muData3: [[1,2],[3,4],[5,6]]    //radar charts
     24    muData2: [[1,7],[4,2],[9,6]], //bar charts
     25    muData3: [6,8,7,5,9,7,6,4],    //radar charts
     26    muData4 : [8,34,6,56,3,23] // rose charts
    2627}
    2728
    … …  
    4041    var uid = values[values.length-1];
    4142    var type;
     43   
    4244    switch (selectBox.id) {
    4345        case "dbSessionInstancesList":
    … …  
    5052            break;
    5153        default:
    52             alert("No valid type passed!");
     54            var value = values[0];
     55            var opt;
     56            for (var n = 0; n < selectBox.options.length; n++) {
     57                if (selectBox.options[n].value == value) {
     58                    opt = selectBox.options[n];
     59                    type = opt.attributes[1].value;
     60                }
     61            }
     62            if (type == null || type == undefined) //error?!?!?!
    5363            break;
    5464    }
    … …  
    208218    form.appendChild(input);
    209219    form.submit();
    210     //alert("Graph type is now: "+graphSelection);
     220//alert("Graph type is now: "+graphSelection);
    211221   
    212222}
    … …  
    225235            graphSelection.graphType = "Pie";
    226236            break;
     237        case "rose":
     238            graphSelection.graphType = "Rose";
     239            break;
    227240        default:
    228241            break;
    … …  
    233246    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
    234247   
    235    // alert("Graph type is now: "+graphSelection.graphType);
     248// alert("Graph type is now: "+graphSelection.graphType);
    236249}
    237250
    … …  
    247260     */
    248261    // temporary!!!;
    249     graphSelection.graphData = mockupData.muData1;
    250     return mockupData.muData1;
    251    
    252     //alert("Data is now being formatted");
     262   
     263    switch (graphSelection.graphType) {
     264        case "Bar":
     265            graphSelection.graphData = mockupData.muData2;
     266            break;
     267        case "Pie":
     268            graphSelection.graphData = mockupData.muData1;
     269            break;
     270        case "Radar":
     271            graphSelection.graphData = mockupData.muData3;
     272            break;
     273        case "Rose":
     274            graphSelection.graphData = mockupData.muData4;
     275            break;
     276    }
     277   
     278    return graphSelection.graphData;
     279   
     280//alert("Data is now being formatted");
    253281}
    254282
    … …  
    271299        case "Bar":
    272300            chart1 = new RGraph.Bar(name, data);
     301            chart1.Set('chart.labels', ['1 fault', '2 faults', '3 faults', '4 faults', '5 faults', '6 faults']);
     302            chart1.Set('chart.colors', ['#77f', '#7f7', '#f77']);
    273303            break;
    274304        case "Pie":
    275305            chart1 = new RGraph.Pie(name, data);
     306            chart1.Set('chart.labels', ['1 fault', '2 faults', '3 faults', '4 faults', '5 faults', '6 faults']);
     307            chart1.Set('chart.colors', ['#77f', '#7f7', '#f77']);
    276308            break;
    277309        case "Radar":
    278310            chart1 = new RGraph.Radar(name, data);
    279             break;
    280         default:
    281             break;
    282     }
    283    
    284     //chart1.Set('chart.background.barcolor1', 'white');
    285     // chart1.Set('chart.background.barcolor2', 'white');
    286     chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
    287     //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
    288     //chart1.Set('chart.key.position.y', 35);
    289     //chart1.Set('chart.key.position', 'gutter');
    290     //chart1.Set('chart.key.background', 'rgb(255,255,255)');
    291     chart1.Set('chart.colors', ['#77f', '#7f7']);
    292     chart1.Set('chart.shadow', true);
    293     chart1.Set('chart.shadow.blur', 15);
     311            chart1.Set('chart.colors.alpha', '50%');
     312            chart1.Set('chart.colors', ['rgba(112,112,240,0.5)', 'rgba(112,240,112,0.5)', 'rgba(240,112,112,0.5)']);
     313            break;
     314        case "Rose":
     315            chart1 = new RGraph.Rose(name, data);
     316            chart1.Set('chart.labels', ['1 fault', '2 faults', '3 faults', '4 faults', '5 faults', '6 faults']);
     317            chart1.Set('chart.colors', ['#77f', '#7f7', '#f77']);
     318            break;
     319        default:
     320            break;
     321    }
     322   
     323   
     324   
     325    chart1.Set('chart.shadow', false);
     326    chart1.Set('chart.shadow.blur', 0);
    294327    chart1.Set('chart.shadow.offsetx', 0);
    295328    chart1.Set('chart.shadow.offsety', 0);
    … …  
    308341}
    309342
     343
     344
    310345function addToDashboard() {
     346    alert('You saved "'+graphSelection.graphType.toLowerCase()+' chart" to dashboard!');   
    311347    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
    312348    doorstuurData.count++;
    313349}
     350//Helper
     351
     352function checkBack(url) {
     353    if (confirm("Are you sure you want to go back? You will lose your selected data.")) {
     354        window.location = url ;
     355    }
     356}
     357
Note: See TracChangeset for help on using the changeset viewer.