Ignore:
Timestamp:
07/09/12 19:24:56 (13 years ago)
Author:
tjcschipper
Message:
  • Made change to _Page.js to destroy the page's child widgets on page leave. This was causing widgets with identical names (such as "btnSave") to make regsitry throw a duplicate widget error.
  • survey.js/html now sorts loaded questions into categories and topics and creates or adds them to the proper TabPane/Selectors?. TODO: Allow for spaces in category titles.
  • Added "addQuestion()" method to Selector.js, to internalize question visualization logic.
  • Included surveyAdvanced page in run.js
  • Changes index to use proper button format, still need to figure out a way to bind content.goTo to the onclick field (since there is no index.js script being run!)
  • Various css tweaks.
Location:
Dev/branches/rest-dojo-ui/client/rft/pages
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/pages/index.html

    r347 r354  
    1010        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    1111
    12             <div class="rftIndexMenuBlock">
     12            <div class="rftIndexMenuBlock" title="Sessions">
    1313                <div class="rftIndexMenuMask">
    1414                    <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
    1515                </div>
    16                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'" onClick="goToPage('mSessions');">Create and edit</button>
    17                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'" onClick="goToPage('mSessions');">Facilitate</button>
     16                <button id="btnContentCreate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</button>
     17                <button id="btnContentFacilitate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</button>
    1818            </div>
    1919
    20             <div class="rftIndexMenuBlock">
     20            <div class="rftIndexMenuBlock" title="Content">
    2121                <div class="rftIndexMenuMask">
    2222                    <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
    2323                </div>
    24                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'" onClick="goToPage('mSurveys');">Surveys</button>
    25                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'" onClick="goToPage('mQuestions');">Questions</button>
    26                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'" onClick="goToPage('mApplications');">Applications</button>
    27                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'" onClick="goToPage('mDashboards');">Dashboards</button>
    28 
     24                <button id="btnSurveys" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</button>
     25                <button id="btnQuestions" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</button>
     26                <button id="btnApplications" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</button>
     27                <button id="btnDashboards" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</button>
    2928            </div>
    3029
    31             <div class="rftIndexMenuBlock">
    32                 <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'" onClick="goToPage('mResults')">Results</div>
     30            <div class="rftIndexMenuBlock" title="results">
     31                <div class="rftIndexMenuMask">
     32                    <span class="rftIcon rftIconGameData"></span><span class="label">Results</span>
     33                </div>
     34                <button id="btnResults" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</button>
    3335            </div>
    3436        </div>
    3537    </div>
     38
     39    <script>
     40    require([
     41        'dojo/on',
     42        'dojo/query',
     43        'dijit/registry',
     44        'rft/content'
     45        ], function(on, query, registry, content){
     46            registry.byId("btnSessionsCreate").on("click", function(){
     47                content.goTo("sessions", null);
     48            });
     49            registry.byId("btnSessionsFacilitate").on("click", function(){
     50                content.goTo("sessions", null);
     51            });
     52           
     53            registry.byId("btnSurveys").on("click", function(){
     54                content.goTo("surveys", null);
     55            });
     56            registry.byId("btnQuestions").on("click", function(){
     57                content.goTo("questions", null);
     58            });
     59            registry.byId("btnApplications").on("click", function(){
     60                content.goTo("applications", null);
     61            });
     62            registry.byId("btnDashboards").on("click", function(){
     63                content.goTo("dashboards", null);
     64            });
     65
     66            registry.byId("btnResults").on("click", function(){
     67                content.goTo("results", null);
     68            });
     69
     70        });
     71</script>
    3672</div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

    r350 r354  
    1 <div data-dojo-type="rft.pages.survey">
     1<div data-dojo-type="rft.pages.survey" id="survey">
    22    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    33        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    44            <h2>
    55                <span class="rftIcon rftIconSurvey"></span>
    6                 <span class="headerText">Survey A [editing]</span>
     6                <span class="headerText" data-dojo-attach-point="header">Survey A [editing]</span>
    77            </h2>
    88        </div>
    … …  
    1111                Presets
    1212            </div>
    13             <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    14                 <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
    15                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    16                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    17                 </div>
    18                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    19                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    20                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    21                 </div>
    22                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    23                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    24                 </div>
    25                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    26                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Green Question Subcat one'"></div>
    27                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    28                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
    29                 </div>
    30                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    31                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    32                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    33                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
    34                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat four'"></div>
    35                 </div>
     13            <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     14                <!-- tabs go here -->
    3615            </div>
    3716        </div>
    … …  
    4726            </div>
    4827            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    49                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
    50                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
    51                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
    52                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
     28                <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
     29                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
     30                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     31                <button id="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
    5332            </div>
    5433        </div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.js

    r343 r354  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
    2     'dojo/_base/Deferred','rft/ui/AccordionList','rft/ui/LineWithActionsWidget',
    3     'rft/store','rft/ui/_Page','rft/api'],
    4     function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
     1define(['dojo/_base/declare',
     2    'dojo/_base/lang',
     3    'dojo/_base/event',
     4    'dojo/_base/Deferred',
     5    'rft/ui/AccordionList',
     6    'rft/ui/LineWithActionsWidget',
     7    'rft/store',
     8    'rft/ui/_Page',
     9    'rft/api',
     10    'dijit/registry',
     11    'rft/content',
     12    'dojo/on',
     13    'dojo/query'],
     14    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api,registry,content, on, query){
    515        return declare('rft.pages.survey',[_Page],{
    616            object: null,
    … …  
    919                    Deferred.when(store.get(this.pageArgs.uid))
    1020                    .then(lang.hitch(this,function(obj){
    11                         this.object = obj;
    12                         this.setFields(obj);
    13                         return Deferred.when( obj.creator && store.dereference(obj.creator) );
    14                     }))
    15                     .then(lang.hitch(this,function(obj){
    16                         this.creator.innerHTML = (obj && obj.email) || 'unknown';
    17                     }));
    18                     Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
    19                     .then(lang.hitch(this,function(items){
    20                         this._questionList = new AccordionList({
    21                             actions: {
    22                                 'Add': lang.hitch(this,'_addQuestion')
    23                             },
    24                             categoryProperty: 'category',
    25                             titleProperty: 'title'
    26                         },this.allQuestions);
    27                         this._questionList.startup();
    28                         this._questionList.setItems(items);
    29                     }));
     21                       this.object = obj;
     22                       return Deferred.when( obj.creator && store.dereference(obj.creator) );
     23                   }));
     24                    this._createQuestionBrowser();
    3025                } else {
    31                     this.header.innerHTML = "Error: no uid for survey!"
     26                    //this.header.innerHTML = "Error: no uid for survey!"
    3227                }
     28                this._setupButtons(this);
     29                this._insertQuestion({title: "This is the question title!", sorting: {categories: ['CategoryOne', 'CategoryB123'], topic: 'The first question topic'}});
     30                this._insertQuestion({title: "BLablabla question text!", sorting: {categories: ['CategoryOne'], topic: 'The first question topic'}});
     31                this._insertQuestion({title: "Yaddayaddayaddaa ... sigh", sorting: {categories: ['CategoryThree', 'CategoryB123'], topic: 'Another topic'}});
     32            },
     33            onLeave: function() {
     34                this.inherited(arguments);
    3335            },
    3436            onReset: function() {
    … …  
    3638            },
    3739            onSave: function(evt) {
    38                 lang.mixin(this.object,this.form.get('value'));
     40                /*lang.mixin(this.object,this.form.get('value'));
    3941                Deferred.when( store.put(this.object) )
    4042                .then(lang.hitch(this,function(obj){
    … …  
    4850                evt.stopPropagation();
    4951                return false;
     52                */
    5053            },
    51             setFields: function(obj) {
    52                 this.form.reset();
    53                 this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
    54                 obj && this.form.set('value',obj);
     54            _goToPreview: function() {
     55                content.goTo('surveyAdvanced', {uid: this.object._id});
     56                /*
     57                * TODO: How to prevent widgets with identical id's on different pages clashing?
     58                * For example: btnSave clashes when going from survey to surveyAdvanced, since both contain one. survey.btnSave is not destroyed when loading surveyAdvanced.btnSave!
     59                * Since there is no page reload, only a contentPane content swap!
     60                * Talk to Hendrik about this!
     61                * TEMPORARY FIX IN THIS.ONLEAVE!
     62                */
    5563            },
    56             _addQuestion: function(obj) {
    57                 var d = {};
    58                 d.widget = new LineWithActionsWidget({
    59                     title:obj.title,
    60                     userObj: obj,
    61                     actions:{
    62                         "Remove": lang.hitch(this,'_removeQuestion',d)
     64            _setupButtons: function() {
     65                // Setup button events
     66                registry.byId("btnSave").on("click", lang.hitch(this, function(){
     67                    this.onSave(arguments);
     68                }));
     69                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
     70                    this._goToPreview();
     71                }));
     72            },
     73            _createQuestionBrowser: function() {
     74                Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
     75                .then(lang.hitch(this,function(questions){
     76                 questions.forEach(function(question) {
     77                    this._insertQuestion(question);
     78                }, this);
     79             }));
     80            },
     81            _insertQuestion: function(question) {
     82                // MASSIVE TODO: The question categories cannot have spaces currently, due to the way we append them to the ID property of the container. ID's cannot have spaces.
     83                // Easy fix: Replace spaces with underscores for the time being? The alternative is to make these containers have an actual "questioncategory" property in the governing widget. Not fun.
     84                var tabs = registry.byId("tabList");
     85                for (var c in question.sorting.categories) {
     86                    var cat = question.sorting.categories[c];
     87                    var catPane = query("#tab"+cat, tabs.containerNode)[0];
     88                    if (catPane) {
     89                        this._insertIntoCategory(question, catPane);
     90                    } else {
     91                        catPane = this._createCategoryTab(cat);
     92                        if (catPane) {
     93                            this._insertIntoCategory(question, catPane);
     94                        } else {
     95                            throw "Error: could not find or create category pane!";
     96                        }
    6397                    }
     98                }
     99            },
     100            _createCategoryTab: function(category) {
     101                var tabs = registry.byId("tabList");
     102                var newCat = new dijit.layout.ContentPane({
     103                    title: category
    64104                });
    65                 d.widget.placeAt(this.surveyQuestions);
     105                newCat.domNode.id = "tab"+category;
     106                tabs.addChild(newCat);
     107                var pane = query("#tab"+category, tabs.containerNode)[0];
     108                return (pane) ? pane : false;
    66109            },
    67             _removeQuestion: function(data,obj) {
    68                 data.widget.destroy();
    69             }
     110            _insertIntoCategory: function(question, container) {
     111                debugger;
     112                var selector = query(".rftSelector[title='"+question.sorting.topic+"']", container)[0];
     113                var selectorWidget;
     114                if (selector) {
     115                    selectorWidget = registry.byNode(selector);
     116                   
     117                } else {
     118                    selectorWidget = new rft.ui.Selector({
     119                        title: question.sorting.topic
     120                    });
     121                    selectorWidget.placeAt(container);
     122                }
     123                selectorWidget.addQuestion(question);
     124            },
     125
     126
     127
     128
    70129        });
    71     });
     130});
    72131
Note: See TracChangeset for help on using the changeset viewer.