Changeset 283 for Dev


Ignore:
Timestamp:
02/23/12 16:51:48 (13 years ago)
Author:
tjcschipper
Message:

Cartis Mockup werkt!

W
I
N
N
I
N
G

Location:
Dev/branches/Cartis/Tiles preview
Files:
324 added
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/Cartis/Tiles preview/css/tile1.css

    r278 r283  
    232232.staticTile {
    233233    width: 230px;
    234     /*height: 230px;*/
     234    height: 230px;
    235235    border: none;
    236236    float: left;
    … …  
    279279    text-align: left;
    280280    white-space: nowrap;
    281     user-select: none;
     281    -webkit-user-select: none;
     282    cursor: default;
    282283}
    283284
    … …  
    359360}
    360361
     362.doubleWidth .controls {
     363    width: 455px;
     364}
     365
    361366.smallButton {
    362367    background: #00569b;
    … …  
    370375.smallButton:hover {
    371376    background: #0762a8;
     377    color: #edd68b;
    372378}
    373379
    … …  
    377383    padding: 3px;
    378384    overflow-x: hidden;
     385    color: #fff;
     386}
     387
     388.locked {
     389    overflow-y: hidden;
     390}
     391
     392.doubleWidth .content {
     393    height: 375px;
     394    width: 224px;
     395    padding: 3px;
     396    overflow-x: hidden;
     397    overflow-y: auto;
     398    color: #fff;
     399}
     400
     401.doubleHeight.doubleWidth .content {
     402    height: 375px;
     403    width: 459px;;
     404    padding: 3px;
     405    overflow-x: hidden;
    379406    overflow-y: auto;
    380407    color: #fff;
    … …  
    385412    height: 18px;
    386413}
     414
     415.graphSelectionButtons {
     416    width: auto;
     417    height: 93px;
     418}
     419
     420.graphSelectionButton {
     421    width: 75px;
     422    height: 93px;
     423    margin: 0 9px;
     424    padding: 10px;
     425    clear: none;
     426    float: left;
     427}
     428
     429.graphSelectionButton:hover {
     430    background-color: #508fd2;
     431}
     432
     433.graphSelectionButton:hover span {
     434    color: #edd68b;
     435}
     436
     437.graphSelectionButton img {
     438    width: 75px;
     439    height: 75px;
     440    margin: 0;
     441    padding: 0;
     442    border: none;
     443}
     444
     445.graphSelectionButton span {
     446    line-height: 18px;
     447    width: 100%;
     448    color: #fff;
     449    font-size: 14px;
     450    text-align: center;
     451    display: block;
     452}
     453
     454#graphContainer {
     455    height: 250px;
     456    width: 459px;
     457    float: left;
     458    clear: both;
     459    overflow: hidden;
     460}
     461
     462.fullOn.staticTile {
     463    width: 940px;
     464    min-height: 459px;
     465    height: auto;
     466}
     467
     468.fullOn .content {
     469    padding: 3px;
     470    width: 934px;
     471
     472}

  • Dev/branches/Cartis/Tiles preview/js/nav.js

    r278 r283  
    11$(function() {
    2        
     2    // Debugger error workaround
     3    jQuery.extend({
     4        getScript: function(url, callback) {
     5            var d = $.Deferred();
     6            if (callback)
     7                d.done(callback);
     8            var head = document.getElementsByTagName("head")[0];
     9            var script = document.createElement("script");
     10            script.src = url;
     11
     12            // Handle Script loading
     13            {
     14                var done = false;
     15
     16                // Attach handlers for all browsers
     17                script.onload = script.onreadystatechange = function(){
     18                    if ( !done && (!this.readyState ||
     19                        this.readyState == "loaded" || this.readyState == "complete") ) {
     20                        done = true;
     21                        d.resolve();
     22
     23                        // Handle memory leak in IE
     24                        script.onload = script.onreadystatechange = null;
     25                    }
     26                };
     27            }
     28
     29            head.appendChild(script);
     30
     31            // We handle everything using the script element injection
     32            return d;
     33        }
     34    });
     35       
     36       
     37       
     38       
     39       
     40       
     41       
     42       
     43       
     44       
     45       
     46       
     47       
     48       
     49       
    350    mockup = {
    451        api: {
    … …  
    1057            },
    1158            loadPage: function(name, conf) {
    12                 debugger;
     59               
    1360                if (conf) {
    1461                    if (!confirm("Are you sure you want to go back? You will lose your selected data.")) {
    … …  
    2370                    $.getScript("pages/"+name+".js", function(responseText, textStatus, XMLHttpRequest){
    2471                       
    25                         })
     72                    })
    2673                });
    2774                mockup.api.breadcrumbs.navTo(name);
    … …  
    62109                    _element.innerHTML = null || "";
    63110                    for (var n=0; n < _crumbs.length; n++) {
     111                        var _link;
    64112                        if (_crumbs[n] == "Home") {
    65                             var word = document.createTextNode("Home");
    66                             _element.appendChild(word);
     113                            link = document.createTextNode("Home");
     114                            _element.appendChild(link);
     115                           
    67116                           
    68117                        }
    69118                        else{
    70                        
    71                             var link = document.createElement('a');
     119                            link = document.createElement('a');
    72120                            link.innerHTML = _crumbs[n];
    73121                            link.setAttribute("onclick", "mockup.api.loadPage('"+_crumbs[n]+"', true);");
    74122                            link.setAttribute("href","#");
    75123                            _element.appendChild(link);
     124                           
    76125                        }
    77126                       
    … …  
    82131                            link.className = "selected";
    83132                        }
     133                       
    84134                    }
    85135                }
    86             })()
     136            })(),
     137            graphs: {
     138                previewGraph: null,
     139                dashboard: [],
     140                graphObjects: []
     141            }
    87142       
    88143        }

  • Dev/branches/Cartis/Tiles preview/pages/graphSelection.html

    r278 r283  
     1<script type="text/javascript" src="js/classes/graphs.js"></script>
     2<script type="text/javascript" src="js/RGraph/libraries/RGraph.common.core.js"></script>
     3<script type="text/javascript" src="js/RGraph/libraries/RGraph.pie.js"></script>
     4<script type="text/javascript" src="js/RGraph/libraries/RGraph.bar.js"></script>
     5<script type="text/javascript" src="js/RGraph/libraries/RGraph.rose.js"></script>
     6<script type="text/javascript" src="js/RGraph/libraries/RGraph.radar.js"></script>
     7
    18<div id="tiles" class="left3">
    29    <div class="leftContainer">
    310        <div id="selectData" class="staticTile doubleHeight"><div class="tileHeader">Data selection</div>
    411            <select multiple id="select_selectData" class="tileField multipleSelect">
    5                
     12
    613            </select>
    714        </div>
    815
    916        <div id="selectGraph" class="staticTile doubleHeight doubleWidth"><div class="tileHeader">Graph selection</div>
     17            <div class="content locked">
     18                <div class="graphSelectionButtons">
     19                    <div class="graphSelectionButton" id="btnPie">
     20                        <img src="images/icons/pie.png" />
     21                        <span class="caption">Pie</span>
     22                    </div>
     23                    <div class="graphSelectionButton" id="btnBar">
     24                        <img src="images/icons/bar.png" />
     25                        <span class="caption">Bar</span>
     26                    </div>
     27                    <div class="graphSelectionButton" id="btnRadar">
     28                        <img src="images/icons/radar.png" />
     29                        <span class="caption">Radar</span>
     30                    </div>
     31                    <div class="graphSelectionButton" id="btnRose">
     32                        <img src="images/icons/rose.png" />
     33                        <span class="caption">Rose</span>
     34                    </div>
     35                    <div style="float: left; clear:both;"></div>
     36                </div>
     37                <div id="graphContainer"></div>
     38            </div>
     39            <div class="controls">
     40                <input type="button" class="smallButton" id="btnAddToDash" value="Add to dashboard" onclick="mockup.api.addToDash()" />
     41            </div>
     42        </div>
    1043
    11         </div>
    1244
    1345
    … …  
    2153        </div>
    2254        <div class="controls">
    23             <input type="button" class="smallButton" id="btnConfigureDashboard" value="Configure Dashboard" onClick="configureDashboard();" />
     55            <input type="button" class="smallButton" id="btnConfigureDashboard" value="Go to dashboard" onClick="mockup.api.loadPage('dashboardOverview', false)" />
    2456        </div>
    2557    </div>

  • Dev/branches/Cartis/Tiles preview/pages/graphSelection.js

    r278 r283  
    11$(function() {
     2   
     3    mockup.api.loadSelectedDataList = function() {
     4        var _select = document.getElementById("select_selectData");
     5       
     6        for (var n = 0; n < shoppingCart.contents.titles.length; n++) {
     7            var opt = document.createElement("option");
     8            opt.value = shoppingCart.contents.uids[n];
     9            opt.innerHTML = shoppingCart.contents.titles[n];
     10            _select.appendChild(opt);
     11        }
     12    }
     13   
     14    mockup.api.loadSelectedDataList();
    215   
    316   
    4    mockup.api.loadSelectedDataList = function() {
    5        var _select = document.getElementById("select_selectData");
    6        
    7        for (var n = 0; n < shoppingCart.contents.titles.length; n++) {
    8            var opt = document.createElement("option");
    9            opt.value = shoppingCart.contents.uids[n];
    10            opt.innerHTML = shoppingCart.contents.titles[n];
    11            _select.appendChild(opt);
    12        }
    13    }
     17    mockup.api.drawGraphPreview = function(type) {
     18        debugger;
     19       
     20        var selected = false, el = document.getElementById("select_selectData");
     21        for (var n = 0; n < el.options.length; n++) {
     22            if (el.options[n].selected == true) {
     23                selected = true;
     24            }
     25        }
     26        if (!selected) return;
     27       
     28        mockup.api.graphs.previewGraph = new Graph("graphContainer");
     29        mockup.api.graphs.previewGraph._container.innerHTML = "";
     30        mockup.api.graphs.previewGraph.init("previewGraph", [40,50,60], type, [459,250]);
     31    }
    1432   
    15    mockup.api.loadSelectedDataList();
     33    function initPage() {
     34        document.getElementById("btnPie").addEventListener("click", function(event) {
     35            mockup.api.drawGraphPreview("Pie");
     36        }, true);
     37       
     38        document.getElementById("btnRadar").addEventListener("click", function(event) {
     39            mockup.api.drawGraphPreview("Radar");
     40        }, true);
     41       
     42        document.getElementById("btnRose").addEventListener("click", function(event) {
     43            mockup.api.drawGraphPreview("Rose");
     44        }, true);
     45       
     46        document.getElementById("btnBar").addEventListener("click", function(event) {
     47            mockup.api.drawGraphPreview("Bar");
     48        }, true);
     49       
     50    }
     51   
     52    mockup.api.addToDash = function() {
     53        debugger;
     54        var type = mockup.api.graphs.previewGraph.getType();
     55        var selectedOptions = [];
     56        var name;
     57        var el = document.getElementById('select_selectData');
     58        for (var n = 0; n < el.options.length; n++) {
     59            if (el.options[n].selected == true) {
     60                selectedOptions.push(el.options[n]);
     61            }
     62        }
     63        var option = selectedOptions[0] || null;
     64        var graphs = document.getElementById('selectedGraphsContent');
     65               
     66        var newLine = ce("div");
     67        newLine.className = "shoppingCartItem";
     68        newLine.id = option.value;
     69        var icon = ce("image");
     70        $(icon).css("float", "right");
     71        icon.src = "images/ui/DeleteIcon.png";
     72        icon.addEventListener("click", function(event){
     73            // TODO: Actually write this function
     74            debugger;
     75            for (var n = 0; n < mockup.api.graphs.dashboard.length; n++) {
     76                var name = icon.previousSibling.innerHTML.split(" - ")[0];
     77                if (mockup.api.graphs.dashboard[n][0] == name) {
     78                    mockup.api.graphs.dashboard.splice(n, 1);
     79                    break;
     80                }
     81            }
     82            var parent = icon.parentNode;
     83            parent.parentNode.removeChild(parent);
     84                       
     85            }, false);
     86        var titleField = ce("text");
     87        name = option.innerHTML;
     88        titleField.innerHTML = name+" - ("+type+")";
     89        newLine.appendChild(titleField);
     90        newLine.appendChild(icon);
     91        graphs.appendChild(newLine);
     92       
     93        //Write settings to dashboard array.
     94        mockup.api.graphs.dashboard.push([name, [40,50,60], type, [459,250]]);
     95       
     96    }
     97   
     98    initPage();
     99   
     100   
     101   
    16102});

  • Dev/branches/Cartis/Tiles preview/pages/login.html

    r278 r283  
    55            <label for="loginForm_name" style="display: block; clear: left; width: 100px;">Name</label><input type="text" id="loginForm_name" onclick="event.stopPropagation();" />
    66            <label for="loginForm_password" style="display: block; clear: left; width: 100px;">Password</label><input type="password" id="loginForm_password" onclick="event.stopPropagation();" />
    7             <div class="tileText" style="margin-top: 115px;"><input type="button" value="Log in" id="btnLogin" onclick="mockup.api.clickTile(this, 'dataSelection');" /><input type="button" value="Register" id="btnRegister" /></div></div>
     7            <div class="tileText" style="margin-top: 115px;"><input type="button" class="smallButton" value="Log in" id="btnLogin" onclick="mockup.api.clickTile(this, 'dataSelection');" /><input type="button" class="smallButton" value="Register" id="btnRegister" /></div></div>
    88        <div id="tile2" class="staticTile"><div class="tileText"></div></div>
    99        <div id="tile3" class="staticTile"><div class="tileText"></div></div>
Note: See TracChangeset for help on using the changeset viewer.