Ignore:
Timestamp:
07/11/12 18:45:51 (13 years ago)
Author:
tjcschipper
Message:
  • surveyEditor more or less works! Only needed change is addition of "topic" property in question objects (database-side), and the change from "category"(string) to "categories"(string[]).
  • surveyEditor still needs removal function and infofunction to be written properly!
  • Added all files belonging to SurveyAdvanced?. Most do not work properly yet, but at least there will not be a 404 page when you click btnPreview on survey.html.
Location:
Dev/branches/rest-dojo-ui/client/rft/pages
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed

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

    r354 r355  
    1 <div data-dojo-type="rft.pages.survey" id="survey">
     1<div data-dojo-type="rft.pages.survey" id="survey" class="blue">
    22    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     3
    34        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    45            <h2>
    … …  
    78            </h2>
    89        </div>
     10       
    911        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    10             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    11                 Presets
    12             </div>
    1312            <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    1413                <!-- tabs go here -->
    1514            </div>
    1615        </div>
    17         <!-- "Shopping cart" -->
     16       
    1817        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    19             <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
    20                 <h3>Included questions</h3>
     18            <div id="SurveyListViewNode" class="rftSurveyListView">
    2119            </div>
    22             <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
    23                 <!-- These would have to be dynamically generated instead of declared here! -->
    24                 <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    25                 <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
    26             </div>
     20
    2721            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    2822                <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>

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

    r354 r355  
    11define(['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){
    15         return declare('rft.pages.survey',[_Page],{
    16             object: null,
    17             onVisit: function() {
    18                 if ( this.pageArgs.uid ) {
    19                     Deferred.when(store.get(this.pageArgs.uid))
    20                     .then(lang.hitch(this,function(obj){
    21                        this.object = obj;
    22                        return Deferred.when( obj.creator && store.dereference(obj.creator) );
    23                    }));
    24                     this._createQuestionBrowser();
    25                 } else {
    26                     //this.header.innerHTML = "Error: no uid for survey!"
    27                 }
    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);
    35             },
    36             onReset: function() {
    37                 this.setFields(this.object);
    38             },
    39             onSave: function(evt) {
    40                 /*lang.mixin(this.object,this.form.get('value'));
    41                 Deferred.when( store.put(this.object) )
    42                 .then(lang.hitch(this,function(obj){
    43                     this.object = obj;
    44                     this.setFields(obj);
    45                     api.notify("Object saved");
    46                 }),lang.hitch(this,function(){
    47                     api.notify("Object save failed",'error');
    48                 }));
    49                 event.stop(evt);
    50                 evt.stopPropagation();
    51                 return false;
    52                 */
    53             },
    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                 */
    63             },
    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                         }
    97                     }
    98                 }
    99             },
    100             _createCategoryTab: function(category) {
    101                 var tabs = registry.byId("tabList");
    102                 var newCat = new dijit.layout.ContentPane({
    103                     title: category
    104                 });
    105                 newCat.domNode.id = "tab"+category;
    106                 tabs.addChild(newCat);
    107                 var pane = query("#tab"+category, tabs.containerNode)[0];
    108                 return (pane) ? pane : false;
    109             },
    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             },
     2        'dojo/_base/lang',
     3        'dojo/_base/event',
     4        'dojo/_base/Deferred',
     5        'rft/ui/AccordionList',
     6        'rft/ui/LineWithActionsWidget',
     7        'rft/ui/SurveyListView',
     8        'rft/store',
     9        'rft/ui/_Page',
     10        'rft/api',
     11        'dijit/registry',
     12        'rft/content',
     13        'dojo/on',
     14        'dojo/query'],
     15        function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,SurveyListView,store,_Page,api,registry,content, on, query){
     16                return declare('rft.pages.survey',[_Page],{
     17                        object: null,
     18                        questions: null,
     19                        listView: null,
     20                       
     21                        onVisit: function() {
     22                                if ( this.pageArgs.uid ) {      // Load survey
     23                                        Deferred.when(store.get(this.pageArgs.uid))
     24                                        .then(lang.hitch(this,function(obj){
     25                                                this.object = obj;
     26                                                return Deferred.when( obj.creator && store.dereference(obj.creator) );
     27                                        }));
    12528
     29                                        //this._createQuestionBrowser();        // Load questions database and create browser
     30                                        this.questions = new dojo.store.Memory({        // Create local copy store of questions database
     31                                                data: [],
     32                                                idProperty: "_id"
     33                                        });
     34                                } else {
     35                                        throw "No valid uid or survey passed!";
     36                                }
     37                                this._setupButtons(this);
     38                                var testQuestion1 = {_id: "123", title: "How long have you worked here?", categories: ['Professional background'], topic: 'Work experience'};
     39                                this.questions.add(testQuestion1);
     40                                this._insertQuestion(testQuestion1);
     41                                var testQuestion2 = {_id: "234", title: "How many years have you been employed here?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
     42                                this.questions.add(testQuestion2);
     43                                this._insertQuestion(testQuestion2);
     44                                var testQuestion3 = {_id: "345", title: "Have you worked here longer than 10 years?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
     45                                this.questions.add(testQuestion3);
     46                                this._insertQuestion(testQuestion3);
     47                                var testQuestion4 = {_id: "456", title: "Rate your experience at your current employer from 1 to 10.", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
     48                                this.questions.add(testQuestion4);
     49                                this._insertQuestion(testQuestion4);
     50                               
     51                                this._createListView(this.questions);
     52                        },
     53                        onLeave: function() {
     54                                this.inherited(arguments);
     55                        },
     56                        onReset: function() {
     57                                this.setFields(this.object);
     58                        },
     59                        onSave: function(evt) {
     60                                /*lang.mixin(this.object,this.form.get('value'));
     61                                Deferred.when( store.put(this.object) )
     62                                .then(lang.hitch(this,function(obj){
     63                                this.object = obj;
     64                                this.setFields(obj);
     65                                api.notify("Object saved");
     66                                }),lang.hitch(this,function(){
     67                                api.notify("Object save failed",'error');
     68                                }));
     69                                event.stop(evt);
     70                                evt.stopPropagation();
     71                                return false;
     72                                */
     73                        },
     74                        _goToPreview: function() {
     75                                content.goTo('surveyAdvanced', {uid: this.object._id});
     76                        },
     77                        _setupButtons: function() {
     78                                // Setup button events
     79                                registry.byId("btnSave").on("click", lang.hitch(this, function(){
     80                                        this.onSave(arguments);
     81                                }));
     82                                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
     83                                        this._goToPreview();
     84                                }));
     85                        },
     86                        /* Store code */
     87                        GetQuestion: function(_id) {
     88                                return this.questions.get(_id);
     89                        },
     90                        SetQuestion: function(question) {
     91                                return this.questions.put(question);
     92                        },
     93                        SyncStore: function() {
     94                        },
     95                        /* Browser code */
     96                        _createQuestionBrowser: function() { // TODO: Do all operations from the local store. Put querying routine in SyncStore()!
     97                                var getQuestions = function(self){
     98                                        return questions = Deferred.when(store.query('_design/default/_view/by_type', {key:'Question'}), function(res){
     99                                                self.questions.setData(res);    // Store queried questions in this.questions MemoryStore
     100                                                return res;
     101                                        });
     102                                };
    126103
     104                                Deferred.when(getQuestions(this), lang.hitch(this, function(questions){
     105                                        questions.forEach(function(question){
     106                                                this._insertQuestion(question)
     107                                        }, this);
     108                                }), function(err){
     109                                        throw "Questions could not be fetched. No connection or null query!";
     110                                });
     111                        },
     112                        _insertQuestion: function(question) {
     113                                var tabs = registry.byId("tabList");
     114                                for (var c in question.categories) {
     115                                        var cat = question.categories[c];
     116                                        var q = "div[data-category='"+cat+"']";
     117                                        var catPane = query(q, tabs.containerNode)[0];
     118                                        if (catPane) {
     119                                                this._insertIntoCategory(question, catPane);
     120                                        } else {
     121                                                catPane = this._createCategoryTab(cat);
     122                                                if (catPane) {
     123                                                        this._insertIntoCategory(question, catPane);
     124                                                } else {
     125                                                        throw "Error: could not find or create category pane!";
     126                                                }
     127                                        }
     128                                }
     129                        },
     130                        _createCategoryTab: function(category) {
     131                                var tabs = registry.byId("tabList");
     132                                var newCat = new dijit.layout.ContentPane({
     133                                        title: category,
     134                                        postCreate: function(){
     135                                                this.domNode.dataset["category"] = category;
     136                                        }
     137                                });
     138                                newCat.domNode.id = "tab"+category;
     139                                tabs.addChild(newCat);
     140                                var q = "div[data-category='"+category+"']";
     141                                var pane = query(q, tabs.containerNode)[0];
     142                                return (pane) ? pane : false;
     143                        },
     144                        _insertIntoCategory: function(question, container) {
     145                                var selector = query(".rftSelector[data-topic='"+question.topic+"']", container)[0];
     146                                var selectorWidget;
     147                                if (selector) {
     148                                        selectorWidget = registry.byNode(selector);
    127149
     150                                } else {
     151                                        selectorWidget = new rft.ui.Selector({
     152                                                topic: question.topic,
     153                                                controller: this
     154                                        });
     155                                        selectorWidget.placeAt(container);
     156                                }
     157                                selectorWidget.addQuestion(question._id);
     158                        },
     159                        /* ListView code */
     160                        _createListView: function() {
     161                                this.listView = new SurveyListView({
     162                                        controller: this
     163                                }).placeAt("SurveyListViewNode");
     164                        },
     165                        IncludeQuestion: function(_id) {
     166                                this.listView.insertItem(_id);
     167                        },
    128168
    129         });
     169                });
    130170});
    131171
Note: See TracChangeset for help on using the changeset viewer.