Changeset 209

Timestamp:

Feb 22, 2010, 6:35:37 PM (13 years ago)

Author:

duh

Message:

• added events, eventDescriptions, etc

Location:

trunk

Files:

• grails-app/controllers/dbnp/studycapturing/WizardController.groovy (modified) (10 diffs)
• grails-app/domain/dbnp/studycapturing/Event.groovy (modified) (4 diffs)
• grails-app/domain/dbnp/studycapturing/EventDescription.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/EventGroup.groovy (modified) (1 diff)
• grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy (modified) (8 diffs)
• grails-app/views/wizard/index.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_eventDescriptions.gsp (added)
• grails-app/views/wizard/pages/_events.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_subjects.gsp (modified) (1 diff)
• web-app/css/wizard.css (modified) (1 diff)
• web-app/js/table-editor.js (modified) (2 diffs)
• web-app/js/wizard.js (modified) (3 diffs)

trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

@@ -47 +47 @@
                         flow.page = 0
                         flow.pages = [
-                                [title: 'Templates'],   // templates
-                                [title: 'Study'],               // study
-                                [title: 'Subjects'],    // subjects
-                                [title: 'Groups'],              // groups
-                                [title: 'Events'],              // events
-                                [title: 'Samples'],             // samples
-                                [title: 'Protocols'],   // protocols
-                                [title: 'Assays'],              // assays
-                                [title: 'Done']                 // finish page
+                                [title: 'Templates'],                   // templates
+                                [title: 'Study'],                               // study
+                                [title: 'Subjects'],                    // subjects
+                                [title: 'Event Descriptions'],  // event descriptions
+                                [title: 'Events'],                              // groups
+                                [title: '---'],                         // events
+                                [title: '---'],                         // samples
+                                [title: '---'],                 // protocols
+                                [title: '---'],                         // assays
+                                [title: 'Done']                                 // finish page
                         ]
 
@@ -170 +171 @@
                                         success()
                                 }
-                        }.to "groups"
+                        }.to "eventDescriptions"
                         on("previous") {
                                 flash.errors = new LinkedHashMap()
@@ -181 +182 @@
                                 }
                         }.to "study"
+                }
+
+                // render page three
+                eventDescriptions {
+                        render(view: "_eventDescriptions")
+                        onRender {
+                                flow.page = 4
+
+                                if (!flow.eventDescriptions) {
+                                        flow.eventDescriptions = []
+                                }
+                        }
+                        on("add") {
+                                // fetch classification by name (as posted by the form)
+                                params.classification = Term.findByName(params.classification)
+
+                                // transform checkbox form value to boolean
+                                params.isSamplingEvent = (params.containsKey('isSamplingEvent'))
+
+                                // instantiate EventDescription with parameters
+                                def eventDescription = new EventDescription(params)
+
+                                // validate
+                                if (eventDescription.validate()) {
+                                        def increment = flow.eventDescriptions.size()
+                                        flow.eventDescriptions[increment] = eventDescription
+                                        success()
+                                } else {
+                                        // validation failed, feedback errors
+                                        flash.errors = new LinkedHashMap()
+                                        this.appendErrors(eventDescription, flash.errors)
+                                        error()
+                                }
+                        }.to "eventDescriptions"
+                        on("previous") {
+                                flash.errors = new LinkedHashMap()
+
+                                // handle form data
+                                if (!this.handleEventDescriptions(flow, flash, params)) {
+                                        error()
+                                } else {
+                                        success()
+                                }
+                        }.to "subjects"
+                        on("next") {
+                                flash.errors = new LinkedHashMap()
+
+                                // check if we have at least one subject
+                                // and check form data
+                                if (flow.eventDescriptions.size() < 1) {
+                                        // append error map
+                                        this.appendErrorMap(['eventDescriptions': 'You need at least to create one eventDescription for your study'], flash.errors)
+                                        error()
+                                } else if (!this.handleEventDescriptions(flow, flash, params)) {
+                                        error()
+                                } else {
+                                        success()
+                                }
+                        }.to "events"
+                }
+
+                // render events page
+                events {
+                        render(view: "_events")
+                        onRender {
+                                flow.page = 5
+
+                                if (!flow.events) {
+                                        flow.events = []
+                                }
+
+                                if (!flow.eventGroups) {
+                                        flow.eventGroups = []
+                                }
+                        }
+                        on("add") {
+                                // create date instances from date string?
+                                // @see WizardTagLibrary::timeElement{...}
+                                if (params.get('startTime')) {
+                                        println params.get('startTime').toString()
+                                        params.startTime = new Date().parse("d/M/yyyy HH:mm", params.get('startTime').toString())
+                                }
+                                if (params.get('endTime')) {
+                                        params.get('endTime').toString()
+                                        params.endTime = new Date().parse("d/M/yyyy HH:mm", params.get('endTime').toString())
+                                }
+
+                                // get eventDescription instance by name
+                                params.eventDescription = this.getObjectByName(params.get('eventDescription'),flow.eventDescriptions)
+
+                                // instantiate Event with parameters
+                                def event = new Event(params)
+
+                                // validate event
+                                if (event.validate()) {
+                                        def increment = flow.events.size()
+                                        flow.events[increment] = event
+                                        success()
+                                } else {
+                                        // validation failed, feedback errors
+                                        flash.errors = new LinkedHashMap()
+                                        this.appendErrors(event, flash.errors)
+
+                                        flash.startTime                 = params.startTime
+                                        flash.endTime                   = params.endTime
+                                        flash.eventDescription  = params.eventDescription
+                                        
+                                        error()
+                                }
+                        }.to "events"
+                        on("addEventGroup") {
+                                def increment = flow.eventGroups.size()
+                                flow.eventGroups[ increment ] = new EventGroup(name: "group "+(increment+1))
+                        }.to "events"
+                        on("previous") {
+                                // TODO
+                        }.to "eventDescriptions"
+                        on("next") {
+                                // TODO
+                        }.to "events"
                 }
 
@@ -187 +308 @@
                         render(view: "_groups")
                         onRender {
-                                flow.page = 4
+                                flow.page = 6
 
                                 if (!flow.groups) {
@@ -206 +327 @@
 
                 // render page three
-                events {
-                        render(view: "_events")
-                        onRender {
-                                flow.page = 5
-                        }
-                        on("previous") {
-                                // TODO
-                        }.to "subjects"
-                        on("next") {
-                                // TODO
-                        }.to "samples"
-                }
-
-                // render page three
                 samples {
                         render(view: "_samples")
                         onRender {
-                                flow.page = 6
+                                flow.page = 7
                         }
                         on("previous") {
@@ -237 +344 @@
                         render(view: "_protocols")
                         onRender {
-                                flow.page = 7
+                                flow.page = 8
                         }
                         on("previous") {
@@ -251 +358 @@
                         render(view: "_assays")
                         onRender {
-                                flow.page = 8
+                                flow.page = 9
                         }
                         on("previous") {
@@ -265 +372 @@
                         render(view: "_done")
                         onRender {
-                                flow.page = 9
+                                flow.page = 10
                         }
                         on("previous") {
@@ -310 +417 @@
                         this.appendErrors(flow.study, flash.errors)
                         return false
+                }
+        }
+
+        /**
+         * re-usable code for handling eventDescription form data in a web flow
+         * @param Map LocalAttributeMap (the flow scope)
+         * @param Map localAttributeMap (the flash scope)
+         * @param Map GrailsParameterMap (the flow parameters = form data)
+         * @returns boolean
+         */
+        def handleEventDescriptions(flow, flash, params) {
+                def names = new LinkedHashMap();
+                def errors = false;
+                def id = 0;
+
+                flow.eventDescriptions.each() {
+                        it.name                 = params.get('eventDescription_' + id + '_name')
+                        it.description          = params.get('eventDescription_' + id + '_description')
+                        it.classification       = Term.findByName(params.get('eventDescription_' + id + '_classification'))
+                        it.isSamplingEvent      = (params.containsKey('eventDescription_' + id + '_isSamplingEvent'))
+
+                        // validate eventDescription
+                        if (!it.validate()) {
+                                errors = true
+                                println id + ' :: ' + it.errors.getAllErrors()
+                                this.appendErrors(it, flash.errors)
+                        }
+
+                        id++
                 }
         }
@@ -403 +539 @@
         }
 
+
+        /**
+         * return the object from a map of objects by searching for a name
+         * @param String        name
+         * @param Map           map of objects
+         * @return Object
+         */
+        def getObjectByName(name, map) {
+                def result = null
+                map.each() {
+                        if (it.name == name) {
+                                result = it
+                        }
+                }
+
+                return result
+        }
+
         /**
          * transform domain class validation errors into a human readable

trunk/grails-app/domain/dbnp/studycapturing/Event.groovy

@@ -7 +7 @@
  * to multiple subjects at the same time. That is why the actual description of the event is factored out into a more
  * general EventDescription class. Events that also lead to sample(s) should be instantiated as SamplingEvents.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
-class Event {
-
+class Event implements Serializable {
         Subject subject
         EventDescription eventDescription
@@ -19 +23 @@
 
         static hasMany = [
-                parameterStringValues : String, // stores both STRING and STRINGLIST items (latter should be checked against the list)
-                parameterIntegerValues : int,
-                parameterFloatValues : float
+                parameterStringValues: String, // stores both STRING and STRINGLIST items (latter should be checked against the list)
+                parameterIntegerValues: int,
+                parameterFloatValues: float,
         ]
 
+        static constraints = {
+                subject(nullable: true, blank: true)    // TODO: subject is to be removed from Event, and into EventGroup
+                startTime(nullable:false)
+                endTime(validator: {val, obj ->
+           if (val && val.before(obj.startTime)) {
+                return 'endTimeshouldbegreater'
+           }
+        })
+        }
 
         // time diff between end and start date
         // thus, do this manually as follows
-        def getDuration( date1, date2 ) {
+
+        def getDuration(date1, date2) {
                 def timeMillis = (date2.getTime() - date1.getTime()).abs()
                 def days = (timeMillis / (1000 * 60 * 60 * 24)).toInteger()
@@ -38 +52 @@
         }
 
-
         def getDuration() {
                 return getDuration(startTime, endTime)
         }
 
-
         // return a string that prints the duration sensibly.
         // the largest date unit (sec, min, h, day, week, month, or year)
         // is output
-        def getPrettyDuration( duration ) {
-             def handleNumerus = { number ,string ->
-                     return number.toString() + (number==1 ? string : string + 's' )
-             }
-             if( duration.getYears()   > 0 ) return handleNumerus( duration.getYears(), " year" )
-             if( duration.getMonths()  > 0 ) return handleNumerus( duration.getMonths(), " month" )
-             if( duration.getDays()    > 0 ) return handleNumerus( duration.getDays(), " day" )
-             if( duration.getHours()   > 0 ) return handleNumerus( duration.getHours(), " hour" )
-             if( duration.getMinutes() > 0 ) return handleNumerus( duration.getMinutes(), " minute" )
-                                             return handleNumerus( duration.getSeconds(), " second" )
+
+        def getPrettyDuration(duration) {
+                def handleNumerus = {number, string ->
+                        return number.toString() + (number == 1 ? string : string + 's')
+                }
+                if (duration.getYears() > 0) return handleNumerus(duration.getYears(), " year")
+                if (duration.getMonths() > 0) return handleNumerus(duration.getMonths(), " month")
+                if (duration.getDays() > 0) return handleNumerus(duration.getDays(), " day")
+                if (duration.getHours() > 0) return handleNumerus(duration.getHours(), " hour")
+                if (duration.getMinutes() > 0) return handleNumerus(duration.getMinutes(), " minute")
+                return handleNumerus(duration.getSeconds(), " second")
         }
-
 
         // convenience method. gives formatted string output for a duration
         def getPrettyDuration() {
-             getPrettyDuration( getDuration() )
+                getPrettyDuration(getDuration())
         }
 
-
         // convenience method. gives formatted string output for a duration
-        def getPrettyDuration( date1, date2 )
-        {
-             return  getPrettyDuration( getDuration( date1, date2 ) )
+        def getPrettyDuration(date1, date2) {
+                return getPrettyDuration(getDuration(date1, date2))
         }
-
 
         def getDurationString() {
@@ -78 +87 @@
         }
 
+        def getShortDuration() {
+                def d = getDuration()
+                def days = d.days
+                def hours = d.hours - (24 * days)
+                def minutes = d.minutes - (24 * 60 * days) - (60 * hours)
+                return "${days}d ${hours}:${minutes}"
+        }
 
         def isSamplingEvent() {
-                return ( this instanceof SamplingEvent )
-        }
-
+                return (this instanceof SamplingEvent)
+        }
 
         def String toString() {
                 return eventDescription ? eventDescription.name : ""
         }
-
 }

trunk/grails-app/domain/dbnp/studycapturing/EventDescription.groovy

@@ -21 +21 @@
 
         static constraints = {
+                name(nullable: false, blank: false)
+                description(nullable: false, blank: false)
                 classification(nullable: true, blank: true)
+                protocol(nullable: true, blank: true)
+        }
+
+        def String toString() {
+                return name
         }
 }

trunk/grails-app/domain/dbnp/studycapturing/EventGroup.groovy

@@ -1 +1 @@
 package dbnp.studycapturing
 
-class EventGroup {
-
+/**
+ * EventGroup groups events
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
+ */
+class EventGroup implements Serializable {
         String name
 
         static hasMany = [
-                subjects : Subject,
-                events : Event
+                subjects: Subject,
+                events: Event
         ]
 
-    static constraints = {
-    }
+        static constraints = {
+        }
 }

trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

@@ -185 +185 @@
                 def description = attrs.remove('description')
                 def addExampleElement = attrs.remove('addExampleElement')
+                def addExample2Element  = attrs.remove('addExample2Element')
 
                 // render a form element
@@ -208 +209 @@
                 }
 
+                // add an disabled input box for feedback purposes
+                // @see dateElement(...)
+                if (addExample2Element) {
+                        def exampleAttrs = new LinkedHashMap()
+                        exampleAttrs.name = attrs.get('name')+'Example2'
+                        exampleAttrs.class  = 'isExample'
+                        exampleAttrs.disabled = 'disabled'
+                        exampleAttrs.size = 30
+                        out << textField(exampleAttrs)
+                }
+
                 out << ' </div>'
 
@@ -243 +255 @@
         }
 
+
+        /**
+         * render a select form element
+         * @param Map attrs
+         * @param Closure body  (help text)
+         */
+        def selectElement = { attrs, body ->
+                baseElement.call(
+                        'select',
+                        attrs,
+                        body
+                )
+        }
+
+        /**
+         * render a checkBox form element
+         * @param Map attrs
+         * @param Closure body  (help text)
+         */
+        def checkBoxElement = { attrs, body ->
+                baseElement.call(
+                        'checkBox',
+                        attrs,
+                        body
+                )
+        }
+
         /**
          * render a dateElement
@@ -257 +296 @@
                 
                 // set some textfield values
-                attrs.maxlength = 10
+                attrs.maxlength = (attrs.maxlength) ? attrs.maxlength : 10
                 attrs.addExampleElement = true
                 
@@ -267 +306 @@
                 )
         }
+
+        /**
+         * render a dateElement
+         * NOTE: datepicker is attached through wizard.js!
+         * @param Map attrs
+         * @param Closure body  (help text)
+         */
+        def timeElement = { attrs, body ->
+                // transform value?
+                if (attrs.value instanceof Date) {
+                        // transform date instance to formatted string (dd/mm/yyyy)
+                        attrs.value = String.format('%td/%<tm/%<tY %<tH:%<tM', attrs.value)
+                }
+
+                attrs.addExampleElement = true
+                attrs.addExample2Element = true
+                attrs.maxlength = 16
+
+                // render a normal text field
+                //out << textFieldElement(attrs,body)
+                textFieldElement.call(
+                        attrs,
+                        body
+                )
+        }
         
         /**
@@ -283 +347 @@
 
         /**
+         * Button form element
+         * @param Map           attributes
+         * @param Closure       help content
+         */
+        def buttonElement = { attrs, body ->
+                // render template element
+                baseElement.call(
+                        'ajaxButton',
+                        attrs,
+                        body
+                )
+        }
+
+        /**
          * render a species select element
          * @param Map attrs
@@ -289 +367 @@
                 // fetch the speciesOntology
                 // note that this is a bit nasty, probably the ontologyName should
-                // be configured in a configuration file... --> TODO
+                // be configured in a configuration file... --> TODO: centralize species configuration
                 def speciesOntology = Ontology.findByName('NCBI Taxonomy')
 
@@ -331 +409 @@
                 }
                 
+                out << select(attrs)
+        }
+
+        /**
+         * Term form element
+         * @param Map           attributes
+         * @param Closure       help content
+         */
+        def termElement = { attrs, body ->
+                // render term element
+                baseElement.call(
+                        'termSelect',
+                        attrs,
+                        body
+                )
+        }
+
+        /**
+         * render a term select element
+         * @param Map attrs
+         */
+        def termSelect = { attrs ->
+                // fetch all terms
+                attrs.from = Term.findAll()     // for now, all terms as we cannot identify terms as being treatment terms...
+
+                // got a name?
+                if (!attrs.name) {
+                        attrs.name = 'term'
+                }
+
                 out << select(attrs)
         }

trunk/grails-app/views/wizard/index.gsp

@@ -24 +24 @@
         <script type="text/javascript" src="${resource(dir: 'js', file: 'grouping.js')}"></script>
         <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script>
+        <script type="text/javascript" src="${resource(dir: 'js', file: 'timepicker-0.2.1.js')}"></script>
         <script type="text/javascript" src="${resource(dir: 'js', file: 'wizard.js')}"></script>
 </head>

trunk/grails-app/views/wizard/pages/_events.gsp

@@ -16 +16 @@
 %>
 <wizard:pageContent>
-todo...
+        <wizard:selectElement name="eventDescription" description="Event Description" error="eventDescription" from="${eventDescriptions}" value="${eventDescription}">
+                The event description for this event
+        </wizard:selectElement>
+        <wizard:timeElement name="startTime" description="Start Time" error="startTime" value="${startTime}">
+                The start time of the study
+        </wizard:timeElement>
+        <wizard:timeElement name="endTime" description="End time" error="endTimee" value="${endTime}">
+                The end time of the study
+        </wizard:timeElement>
+        <wizard:buttonElement name="add" value="Add" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()"/>
+<g:if test="${events}">
+        <div class="table">
+                <div class="header">
+                        <div class="firstColumn">#</div>
+                        <div class="column">eventDescription</div>
+                        <div class="column">startTime</div>
+                        <div class="column">endTime</div>
+                        <div class="column">duration</div>
+                        <g:if test="${eventGroups}"><g:each var="eventGroup" status="i" in="${eventGroups}">
+                        <div class="column"><g:textField name="eventGroup_${i}_name" value="${eventGroup.name}" /></div>
+                        </g:each></g:if>
+                        <div class="column"><wizard:ajaxButton name="addEventGroup" value="+" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" /></div>
+                </div>
+        <g:each var="event" status="i" in="${events}">
+                <div class="row">
+                        <div class="firstColumn">${i+1}</div>
+                        <div class="column">${event.eventDescription}</div>
+                        <div class="column"><g:formatDate format="dd/MM/yyyy hh:mm" date="${event.startTime}" /></div>
+                        <div class="column"><g:formatDate format="dd/MM/yyyy hh:mm" date="${event.endTime}" /></div>
+                        <div class="column">${event.getShortDuration()}</div>
+                        <g:if test="${eventGroups}"><g:each var="eventGroup" status="j" in="${eventGroups}">
+                        <div class="column"><input type="checkbox" name="event_${i}_group_${j}"/></div>
+                        </g:each></g:if>
+                        <div class="column"></div>
+                </div>
+        </g:each>
+        </div>
+</g:if>
 </wizard:pageContent>

trunk/grails-app/views/wizard/pages/_subjects.gsp

@@ -16 +16 @@
 %>
 <wizard:pageContent>
-<wizard:ajaxButton name="add" value="Add" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" />
-<input name="addNumber" size="4" maxlength="4" value="1">
-subjects of species
-<wizard:speciesSelect name="addSpecies" />
+        <wizard:ajaxButton name="add" value="Add" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" />
+        <input name="addNumber" size="4" maxlength="4" value="1">
+        subjects of species
+        <wizard:speciesSelect name="addSpecies" />
 <g:if test="${subjects}">
-<div class="table">
-        <div class="header">
-                <div class="firstColumn">#</div>
-                <div class="column">name</div>
-                <div class="column">species</div>
-                <wizard:templateColumnHeaders template="${study.template}" class="column" />
+        <div class="table">
+                <div class="header">
+                        <div class="firstColumn">#</div>
+                        <div class="column">name</div>
+                        <div class="column">species</div>
+                        <wizard:templateColumnHeaders template="${study.template}" class="column" />
+                </div>
+        <g:each var="subject" status="i" in="${subjects}">
+                <div class="row">
+                        <div class="firstColumn">${i}</div>
+                        <div class="column"><g:textField name="subject_${i}_name" value="${subject.name}" size="12" maxlength="12" /></div>
+                        <div class="column">
+                                <wizard:speciesSelect value="${subject.species}" name="subject_${i}_species" />
+                        </div>
+                        <wizard:templateColumns id="${i}" template="${study.template}" name="subject_${i}" class="column" subject="${subject}" />
+                </div>
+        </g:each>
         </div>
-<g:each var="subject" status="i" in="${subjects}">
-        <div class="row">
-                <div class="firstColumn">${i}</div>
-                <div class="column"><g:textField name="subject_${i}_name" value="${subject.name}" size="12" maxlength="12" /></div>
-                <div class="column">
-                        <wizard:speciesSelect value="${subject.species}" name="subject_${i}_species" />
-                </div>
-                <wizard:templateColumns id="${i}" template="${study.template}" name="subject_${i}" class="column" subject="${subject}" />
+        <div class="sliderContainer">
+                <div class="slider"/>
         </div>
-</g:each>
-</div>
-<div class="sliderContainer">
-        <div class="slider"/>
-</div>
 </g:if>
 </wizard:pageContent>

trunk/web-app/css/wizard.css

@@ -140 +140 @@
     font-size: 11px;
     overflow: hidden;
+    white-space: nowrap;
 }
 

trunk/web-app/js/table-editor.js

@@ -54 +54 @@
         $(this.columnIdentifier, $(row)).each(function() {
             var input = $(':input', $(this));
-
             // does this column contain an input field
+console.log(input)
             if (input) {
                 var type = $(input).attr('type');
+console.log(input)
+console.log('type: '+type)
 
                 switch (type) {
@@ -73 +75 @@
                             that.updateSingleInputElements(input, columnNumber, 'select');
                         })
+                        break;
+                    case 'hidden':
+                        // hidden is hidden :)
                         break;
                     case null:

trunk/web-app/js/wizard.js

@@ -21 +21 @@
         var wizard = $('div#wizard')
         if (wizard.find("#warning").length == 0) {
-            wizard.html('<span id="warning" style="color:red;font-size:8px;">Firefox 3.6 contains <a href="http://code.google.com/p/fbug/issues/detail?id=2746" target="_new">a bug</a> in combination with Firebug\'s XMLHttpRequest spy which causes the wizard to not function anymore. Please make sure you have firebug\'s XMLHttpRequest spy disabled use use Firefox 3.5.7 instead...</span>' + wizard.html())
+            wizard.html('<span id="warning" style="color:red;font-size:8px;">Firefox 3.6 contains <a href="http://code.google.com/p/fbug/issues/detail?id=2746" target="_new">a bug</a> in combination with Firebug\'s XMLHttpRequest spy which causes the wizard to not function anymore. Please make sure you have Firebug\'s XMLHttpRequest spy disabled or use Firefox 3.5.7 instead...</span>' + wizard.html())
         }
     }
@@ -35 +35 @@
     attachHelpTooltips();
     attachDatePickers();
+    attachDateTimePickers();
 
     // SUBJECT PAGE
@@ -126 +127 @@
 }
 
+// add datetimepickers to date fields
+function attachDateTimePickers() {
+    $('div#wizard').find("input[type=text][name$='Time']").each(function() {
+        $(this).datepicker({
+            dateFormat      : 'dd/mm/yy',
+            altField        : '#' + $(this).attr('name') + 'Example',
+            altTimeField    : '#' + $(this).attr('name') + 'Example2',
+            altFormat       : 'DD, d MM, yy',
+            showTime        : true,
+            time24h         : true
+        });
+    })
+}
+
 // attach subject events
 function attachTableEvents() {