source: Dev/branches/rest-dojo-ui/client/mSessions.html @ 350

Last change on this file since 350 was 346, checked in by tjcschipper, 13 years ago
  • Made mSession.html Session Editor for demo.
  • Matching stylesheet
  • Changes to all screens resulting from feedback and/or demonstration purposes.
  • global goToPage() function included in all mockups is temporary! Do not use this for actual production code.
File size: 7.3 KB
Line 
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5        <title>Research Facilitator Tool</title>
6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
7        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
8        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
9        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
10        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
11        <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
12        <script type="text/javascript">
13            require([
14                'dojo/parser',
15                'dojo/_base/array',
16                'dijit/DropDownMenu',
17                'dijit/layout/AccordionContainer',
18                'dijit/layout/BorderContainer',
19                'dijit/layout/ContentPane',
20                'dijit/layout/TabContainer',
21                'dijit/layout/SplitContainer',
22                'dijit/MenuBar',
23                'dijit/MenuBarItem',
24                'dijit/form/Button',
25                'dijit/form/ComboBox',
26                'dijit/form/Form',
27                'dijit/form/Select',
28                'dijit/form/SimpleTextarea',
29                'dijit/form/TextBox',
30                'dijit/form/Textarea',
31                'dijit/PopupMenuBarItem',
32                'dijit/TitlePane',
33                'dojox/grid/DataGrid',
34                'dojox/widget/TitleGroup',
35                'rft/ui/List',
36                'rft/ui/MainMenu',
37                'rft/ui/MenuBarLink',
38                'rft/ui/MenuLink',
39                'rft/ui/Notifications',
40                'rft/ui/LineWithActionsWidget',
41                'rft/ui/QuestionWidget',
42                'rft/ui/Selector',
43                'rft/ui/SelectorThijs',
44                'rft/ui/LineWithActionsWidgetThijs',
45                'rft/ui/ObjectBox',
46                'rft/ui/TitleGroup',
47                'dojo/domReady!'
48            ],function(parser){
49                parser.parse();
50            });
51        </script>
52        <script>
53            function createNew(){
54                debugger;
55                var newBox = new rft.ui.ObjectBox({
56                    title: 'TeamUp Basic Template',
57                    subTitle: '',
58                    lowerTitle: '',
59                    objectType: 'SessionTemplate',
60                    actions: {
61                        "edit": function() {},
62                        "delete": function() {}
63                    }
64                });
65                newBox.startup();
66                newBox.placeAt("containerTemplates", "last");
67            }
68           
69            function createInstance(args) {
70                // Create a template instance in the "Sessions" tab
71                var args;
72                args.objectType = "Session";
73                var d = new Date();
74                var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
75                var creator = "Igor Mayer"; // Use currently logged in profile instead!
76                args.subTitle = "Created on "+dateString+" by "+creator;
77           
78                args.actions = {
79                    "edit": function() {},
80                    "delete": function() {}
81                }
82                var newBox = new rft.ui.ObjectBox(args);
83                newBox.startup();
84                newBox.placeAt("containerSessions", "last");
85                debugger;
86
87                // TODO: Then switch tabs to the Sessions tab!
88                var sess = dijit.byId("dijit_layout_ContentPane_5");
89                dijit.byId("tabs").selectChild(sess);
90            }
91           
92           
93        </script>
94        <script>
95            function goToPage(name) {
96                window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
97            }
98        </script>
99
100
101    </head>
102    <body class="dijitReset claro">
103        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
104            <!-- Top menu bar -->
105            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
106                <h1>ResearchTool</h1>
107                <div data-dojo-type="rft.ui.MainMenu"></div>
108                <div class="breadcrumbs">
109                    <span class="breadcrumb">User > </span>
110                    <span class="breadcrumbCurrent">Sessions</span>
111                </div>
112            </div>
113            <!-- Main content window -->
114            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
115                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
116                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
117                        <h2>
118                            <span class="rftIcon rftIconSession"></span>
119                            <span class="headerText">Sessions</span>
120                        </h2>
121                    </div>
122                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
123                        <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'" id="tabs">
124                            <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
125                                <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
126                                    <!--TODO: These don't allow for custom icon settings yet! -->
127                                    <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'delete':function(){}, 'Custom function': function(){alert('newCommand');}, 'publish': createInstance}"></div>
128                                </div>
129                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
130                                    <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate', onClick: createNew">Create new template</div>
131                                </div>
132                            </div>
133                            <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
134                                <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
135
136                                </div>
137                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
138                                    <!-- Buttons? -->
139                                </div>
140                            </div>
141                        </div>
142                    </div>
143                </div>
144            </div>
145        </div>
146    </body>
147</html>
Note: See TracBrowser for help on using the repository browser.