check for, display and send extra details on open311 categories

8 files changed, 170 insertions, 3 deletions

diff --git a/www/css/fms.css b/www/css/fms.css
index bc0e682..2d51724 100644
--- a/www/css/fms.css
+++ b/www/css/fms.css
@@ -118,7 +118,33 @@
     select.noselection{
         color: #777;
     }
-    
+
+    #details-extra-page div[data-role="content"] {
+        height: auto !important;
+    }
+
+    #category_meta {
+        margin: 0px 15px 15px 15px;
+    }
+
+    #category_meta h4 {
+        display: none;
+    }
+
+    #category_meta label,
+    #category_meta input,
+    #category_meta textarea,
+    #category_meta select {
+        display: block;
+    }
+
+    #category_meta label:first {
+        padding-top: 1em;
+    }
+    #category_meta label {
+        padding-top: 0.5em;
+    }
+
     h2{
         /*padding: 0 0.25em;*/
     }
diff --git a/www/index.html b/www/index.html
index c9b6a7f..9d143da 100644
--- a/www/index.html
+++ b/www/index.html
@@ -51,6 +51,7 @@
         <script type="text/javascript" src="js/views/existing.js"></script>
         <script type="text/javascript" src="js/views/photo.js"></script>
         <script type="text/javascript" src="js/views/details.js"></script>
+        <script type="text/javascript" src="js/views/details_extra.js"></script>
         <script type="text/javascript" src="js/views/submit.js"></script>
         <script type="text/javascript" src="js/views/sent.js"></script>
 
diff --git a/www/js/app.js b/www/js/app.js
index bfeef55..80f1f4b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -38,7 +38,7 @@ var tpl = {
 (function (FMS, Backbone, _, $) {
     _.extend(FMS, {
         templates: [
-            'home', 'around', 'offline', 'save_offline', 'reports', 'login', 'address_search', 'existing', 'photo', 'details', 'submit', 'submit_email', 'submit_name', 'submit_password', 'submit_confirm', 'sent'
+            'home', 'around', 'offline', 'save_offline', 'reports', 'login', 'address_search', 'existing', 'photo', 'details', 'details_extra', 'submit', 'submit_email', 'submit_name', 'submit_password', 'submit_confirm', 'sent'
         ],
 
         isLoggedIn: 0,
diff --git a/www/js/models/report.js b/www/js/models/report.js
index 88e9dfd..4b4473b 100644
--- a/www/js/models/report.js
+++ b/www/js/models/report.js
@@ -69,6 +69,13 @@
                     phone: model.get('phone')
                 };
 
+                var extra_fields = model.get('extra_details');
+                if ( extra_fields && extra_fields.length > 0 ) {
+                    for ( var i = 0; i < extra_fields.length; i++ ) {
+                        params[extra_fields[i]] = model.get(extra_fields[i]);
+                    }
+                }
+
                 if ( model.get('submit_clicked') == 'submit_sign_in' ) {
                     params.submit_sign_in = 1;
                     params.password_sign_in = model.get('user').get('password');
diff --git a/www/js/router.js b/www/js/router.js
index 2646fb0..3ea4dbd 100644
--- a/www/js/router.js
+++ b/www/js/router.js
@@ -13,6 +13,7 @@
                 'existing': 'existing',
                 'photo': 'photo',
                 'details': 'details',
+                'details_extra': 'details_extra',
                 'submit-start': 'submitStart',
                 'submit': 'submit',
                 'submit-email': 'submitEmail',
@@ -79,6 +80,11 @@
                 this.changeView(detailsView);
             },
 
+            details_extra: function(){
+                var detailsExtraView = new FMS.DetailsExtraView({ model: FMS.currentDraft });
+                this.changeView(detailsExtraView);
+            },
+
             submitStart: function() {
                 var submitView;
                 if ( FMS.currentUser && FMS.isLoggedIn ) {
diff --git a/www/js/views/details.js b/www/js/views/details.js
index 6b4544a..8da8ca5 100644
--- a/www/js/views/details.js
+++ b/www/js/views/details.js
@@ -68,7 +68,29 @@
                     if ( FMS.isOffline ) {
                         this.navigate( 'save_offline' );
                     } else {
-                        this.navigate( this.next );
+                        var that = this;
+                        $.ajax( {
+                            url: CONFIG.FMS_URL + '/report/new/category_extras',
+                            type: 'POST',
+                            data: {
+                                category: this.model.get('category'),
+                                latitude: this.model.get('lat'),
+                                longitude: this.model.get('lon')
+                            },
+                            dataType: 'json',
+                            timeout: 30000,
+                            success: function( data, status ) {
+                                if ( data ) {
+                                    that.model.set('category_extras', data.category_extra);
+                                    that.navigate('details_extra');
+                                } else {
+                                    that.navigate( this.next );
+                                }
+                            },
+                            error: function() {
+                                this.navigate( this.next );
+                            }
+                        } );
                     }
                 }
             },
diff --git a/www/js/views/details_extra.js b/www/js/views/details_extra.js
new file mode 100644
index 0000000..bc030d3
--- /dev/null
+++ b/www/js/views/details_extra.js
@@ -0,0 +1,98 @@
+(function (FMS, Backbone, _, $) {
+    _.extend( FMS, {
+        DetailsExtraView: FMS.FMSView.extend({
+            template: 'details_extra',
+            id: 'details-extra-page',
+            prev: 'details',
+            next: 'submit-start',
+
+            events: {
+                'pagehide': 'destroy',
+                'pagebeforeshow': 'beforeDisplay',
+                'pageshow': 'afterDisplay',
+                'vclick .ui-btn-left': 'onClickButtonPrev',
+                'vclick .ui-btn-right': 'onClickButtonNext',
+                'blur textarea': 'updateCurrentReport',
+                'change select': 'updateCurrentReport',
+                'blur input': 'updateCurrentReport'
+            },
+
+            afterRender: function() {
+                console.log(this.model);
+                this.populateFields();
+            },
+
+            onClickButtonPrev: function() {
+                this.updateCurrentReport();
+                this.navigate( this.prev, true );
+            },
+
+            onClickButtonNext: function() {
+                this.clearValidationErrors();
+                var valid = 1;
+
+                // do validation
+
+
+                if ( valid ) {
+                    this.clearValidationErrors();
+                    this.updateCurrentReport();
+                    this.navigate( this.next );
+                }
+            },
+
+            validationError: function(id, error) {
+                var el_id = '#' + id;
+                var el = $(el_id);
+
+                el.addClass('error');
+                if ( el.val() === '' ) {
+                    el.attr('orig-placeholder', el.attr('placeholder'));
+                    el.attr('placeholder', error);
+                }
+            },
+
+            clearValidationErrors: function() {
+                $('.error').removeClass('error');
+                $('.error').each(function(el) { if ( el.attr('orig-placeholder') ) { el.attr('placeholder', el.attr('orig-placeholder') ); } } );
+            },
+
+            updateSelect: function() {
+                this.updateCurrentReport();
+            },
+
+            updateCurrentReport: function() {
+                var fields = [];
+                var that = this;
+                var update = function(index) { 
+                    var el = $(this);
+                    if ( el.val() !== '' ) {
+                        that.model.set(el.attr('name'), el.val());
+                        fields.push(el.attr('name'));
+                    } else {
+                        that.model.set(el.attr('name'), '');
+                    }
+
+                };
+
+                $('input').each(update);
+                $('select').each(update);
+                $('textarea').each(update);
+
+                this.model.set('extra_details', fields);
+                FMS.saveCurrentDraft();
+            },
+
+            populateFields: function() {
+                var that = this;
+                var populate = function(index) {
+                    console.log(that.$(this).attr('name'));
+                    that.$(this).val(that.model.get(that.$(this).attr('name')));
+                };
+                this.$('input').each(populate);
+                this.$('select').each(populate);
+                this.$('textarea').each(populate);
+            }
+        })
+    });
+})(FMS, Backbone, _, $);
diff --git a/www/templates/en/details_extra.html b/www/templates/en/details_extra.html
new file mode 100644
index 0000000..63535d6
--- /dev/null
+++ b/www/templates/en/details_extra.html
@@ -0,0 +1,7 @@
+<div data-role="header" data-position="fixed">
+        <h1>Further Details</h1>
+        <a id="next" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Next</a>
+</div>
+<div data-role="content" data-enhance="false">
+    <%= category_extras %>
+</div>