diff options
| -rw-r--r-- | www/details.html | 27 | ||||
| -rw-r--r-- | www/js/mobile.js | 252 | ||||
| -rw-r--r-- | www/js/report.js | 5 | ||||
| -rw-r--r-- | www/photo.html | 29 | ||||
| -rw-r--r-- | www/submit.html | 88 |
5 files changed, 360 insertions, 41 deletions
diff --git a/www/details.html b/www/details.html new file mode 100644 index 0000000..760744c --- /dev/null +++ b/www/details.html @@ -0,0 +1,27 @@ + <div id="details-page" class="wrapper" data-role="page" data-add-back-btn="true"> + <div data-role="header" data-position="fixed" data-id="locate"> + <h1>Details</h1> + <a href="submit.html" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Next</a> + </div> + <div class="container" data-enhance="false"> + <div class="content" role="main"> + <div id="side-form"> + <fieldset> + <div id="problem_form"> + + <label for="form_title">Subject</label> + <input type="text" value="" name="title" id="form_title" placeholder="Provide a title" required> + + <label for="form_detail">Details</label> + <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required></textarea> + + <div id="form_category_row"> + <label class="inline" for="form_category">Category</label> + <select name="category" id="form_category" required><option>Loading...</option></select> + </div> + </div> + </fieldset> + </div> + </div> + </div> + </div> diff --git a/www/js/mobile.js b/www/js/mobile.js index 75f66ca..d3a3904 100644 --- a/www/js/mobile.js +++ b/www/js/mobile.js @@ -19,6 +19,7 @@ function touchmove(e) { e.preventDefault(); } +/* location code */ function show_around( lat, long ) { pc = $('#pc').val(); localStorage.latitude = lat; @@ -209,10 +210,186 @@ function check_for_gps() { } } +/* report editing/creation */ + +function validation_error( id, error ) { + var el_id = '#' + id; + var el = $(el_id); + var err = '<div for="' + id + '" class="form-error">' + error + '</div>'; + if ( $('div[for='+id+']').length === 0 ) { + el.before(err); + el.addClass('form-error'); + } +} + +function clear_validation_errors() { + $('div.form-error').remove(); + $('.form-error').removeClass('form-error'); +} + +function get_current_report() { + var report; + if ( localStorage.currentReport ) { + report = new Report(); + report.load(localStorage.currentReport); + } + return report; +} + +function get_current_report_or_new() { + var report = get_current_report(); + if ( !report ) { + report = new Report(); + report.save(); + localStorage.currentReport = report.id(); + } + return report; +} + +function prep_photo_page() { + var report = get_current_report_or_new(); + + if ( report.file() ) { + $('#form_photo').val(report.file()); + $('#photo').attr('src', report.file()); + $('#add_photo').hide(); + $('#display_photo').show(); + } +} + +function photo_next() { + var report = get_current_report(); + + if ( $('#form_photo').val() !== '' ) { + fileURI = $('#form_photo').val(); + report.file( fileURI ); + } else { + report.file(''); + } + + report.save(); +} + +function prep_detail_page() { + var report = get_current_report(); + + $('#form_title').val( report.title() ); + $('#form_detail').val( report.detail() ); + + if (localStorage.offline !== 1) { + $.getJSON( CONFIG.FMS_URL + 'report/new/ajax', { + latitude: localStorage.latitude, + longitude: localStorage.longitude + }, function(data) { + if (data.error) { + // XXX If they then click back and click somewhere in the area, this error will still show. + $('#side-form').html('<h1>Reporting a problem</h1><p>' + data.error + '</p>'); + return; + } + // XXX cache this... + $('#councils_text').html(data.councils_text); + $('#form_category_row').html(data.category); + var report = get_current_report(); + if ( report.category() ) { + $('#form_category').val(report.category()); + } + }); + } +} + +function detail_nav(e) { + var report = get_current_report(); + var valid = 1; + + if ( !$('#form_title').val() ) { + valid = 0; + validation_error( 'form_title', validation_strings.title ); + } + + if ( !$('#form_detail').val() ) { + valid = 0; + validation_error( 'form_detail', validation_strings.detail ); + } + + var cat = $('#form_category').val(); + if ( cat == '-- Pick a category --' && localStorage.offline !== 1 ) { + valid = 0; + validation_error( 'form_category', validation_strings.category ); + } + + if ( valid ) { + clear_validation_errors(); + report.title($('#form_title').val()); + report.detail($('#form_detail').val()); + report.category($('#form_category').val()); + report.save(); + } else { + e.preventDefault(); + return false; + } +} + +function prep_submit_page() { + var report = get_current_report(); + + $('#form_phone').val( report.phone() ); + if ( report.may_show_name() === 1 ) { + $('#form_may_show_name').prop('checked', true); + } else if ( report.may_show_name() === 0 ) { + $('#form_may_show_name').prop('checked', false); + } + + if ( localStorage.username ) { + $('#signed_in').show(); + $('#signed_out').hide(); + $('#name_details').insertAfter($('#confirm_details')); + + $('#username').text( localStorage.username ); + $('#form_name').val( localStorage.name ); + } else { + $('#form_email').val( report.email() ); + $('#form_name').val( report.name() ); + $('#name_details').insertAfter($('#let_me_confirm')); + + $('#signed_out').show(); + $('#signed_in').hide(); + } +} + +function _submit_save_report() { + var r = get_current_report(); + + r.may_show_name( $('#form_may_show_name').prop('checked') ? 1 : 0 ); + r.phone( $('#form_phone').val() ); + + if ( localStorage.username && localStorage.password && localStorage.name ) { + //r.name( localStorage.name ); + //r.email( localStorage.username ); + //params.password_sign_in = localStorage.password; + } else { + r.name( $('#form_name').val() ); + r.email( $('#form_email').val() ); + //params.password_sign_in = $('#password_sign_in').val(); + } + + r.save(); + return r; +} + +function submit_nav() { + _submit_save_report(); +} + function create_offline() { - $.mobile.changePage('submit-problem.html'); + $.mobile.changePage('photo.html'); +} + +function save_report() { + _submit_save_report(); + $.mobile.changePage('my_reports.html'); } +/* photo handling */ function takePhotoSuccess(imageURI) { $('#form_photo').val(imageURI); @@ -271,6 +448,7 @@ function remove_saved_report() { } function fileUploadSuccess(r) { + $.mobile.loading('hide'); if ( r.response ) { var data; try { @@ -302,6 +480,7 @@ function fileUploadSuccess(r) { } function fileUploadFail() { + $.mobile.loading('hide'); alert('Could not submit report'); $('input[type=submit]').prop("disabled", false); } @@ -310,24 +489,25 @@ var submit_clicked = null; function postReport(e) { $.mobile.loading( 'show' ); + var report = get_current_report(); if ( e ) { e.preventDefault(); } // the .stopImmediatePropogation call in invalidHandler should render this // redundant but it doesn't seem to work so belt and braces :( - if ( !$('#mapForm').valid() ) { return; } + // if ( !$('#mapForm').valid() ) { return; } var params = { service: 'iphone', - title: $('#form_title').val(), - detail: $('#form_detail').val(), + title: report.title(), + detail: report.detail(), may_show_name: $('#form_may_show_name').attr('checked') ? 1 : 0, - category: $('#form_category').val(), - lat: $('#fixmystreet\\.latitude').val(), - lon: $('#fixmystreet\\.longitude').val(), + category: report.category(), + lat: report.lat(), + lon: report.lon(), phone: $('#form_phone').val(), - pc: $('#pc').val() + pc: report.pc() }; if ( localStorage.username && localStorage.password && localStorage.name ) { @@ -349,8 +529,8 @@ function postReport(e) { } } - if ( $('#form_photo').val() !== '' ) { - fileURI = $('#form_photo').val(); + if ( report.file() && report.file() !== '' ) { + fileURI = report.file(); var options = new FileUploadOptions(); options.fileKey="photo"; @@ -365,7 +545,7 @@ function postReport(e) { jQuery.ajax( { url: CONFIG.FMS_URL + "report/new/mobile", type: 'POST', - data: params, + data: params, timeout: 30000, success: function(data) { if ( data.success ) { @@ -388,6 +568,7 @@ function postReport(e) { if ( data.check_name ) { check_name( data.check_name, data.errors.name ); } + $.mobile.loading('hide'); $('input[type=submit]').prop("disabled", false); } }, @@ -455,9 +636,17 @@ function set_location() { new OpenLayers.Projection("EPSG:4326") ); + var r = get_current_report_or_new(); + if ( localStorage.pc ) { + r.pc( localStorage.pc ); + } + r.lat( position.lat ); + r.lon( position.lon ); + r.save(); + localStorage.latitude = position.lat; localStorage.longitude = position.lon; - $.mobile.changePage('submit-problem.html'); + $.mobile.changePage('photo.html'); } function mark_here() { @@ -541,31 +730,6 @@ function get_report_params () { } -function _submit_save_report() { - var params = get_report_params(); - - var r; - if ( localStorage.currentReport ) { - r = new Report(); - r.load( localStorage.currentReport ); - r.update(params); - } else { - r = new Report(params); - } - r.save(); - return r; -} - -function save_report() { - _submit_save_report(); - $.mobile.changePage('my_reports.html'); -} - -function submit_back() { - var r = _submit_save_report(); - localStorage.currentReport = r.id(); -} - function display_saved_reports() { var i; if ( localStorage.getObject( 'reports' ) ) { @@ -658,7 +822,7 @@ function submit_problem_show() { } } - $('#mapForm').on('submit', postReport); + //$('#submit-page :input[type=submit]').on('vclick', postReport); $('#side-form, #site-logo').show(); $('#pc').val(localStorage.pc); $('#fixmystreet\\.latitude').val(localStorage.latitude); @@ -744,6 +908,9 @@ $(document).on('pageshow', '#report-created', function() { $('#report_url').html( '<a href="' + uri + '">' + uri + '</a>' ); }); +$(document).on('pagebeforeshow', '#photo-page', prep_photo_page); +$(document).on('pagebeforeshow', '#details-page', prep_detail_page); +$(document).on('pagebeforeshow', '#submit-page', prep_submit_page); $(document).on('pagebeforeshow', '#front-page', prep_front_page); $(document).on('pageshow', '#front-page', decide_front_page); @@ -768,6 +935,11 @@ $(document).on('vclick', '#complete_report', complete_report); $(document).on('vclick', '#delete_report', delete_report); $(document).on('vclick', '#id_photo_button', function() {takePhoto(navigator.camera.PictureSourceType.CAMERA);}); $(document).on('vclick', '#id_existing', function() {takePhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM);}); -$(document).on('vclick', '#mapForm :input[type=submit]', function() { submit_clicked = $(this); }); +$(document).on('vclick', '#submit-page :input[type=submit]', function(e) { submit_clicked = $(this); postReport(e); }); $(document).on('vclick', '#id_del_photo_button', delPhoto); -$(document).on('vclick', '#submit-header a.ui-btn-left', submit_back); +//$(document).on('vclick', '#submit-header a.ui-btn-left', submit_back); +$(document).on('vclick', '#photo-page a.ui-btn-right', photo_next); +$(document).on('vclick', '#details-page a.ui-btn-right', detail_nav); +$(document).on('vclick', '#details-page a.ui-btn-left', detail_nav); + +$(document).on('vclick', '#submit-page a.ui-btn-left', submit_nav); diff --git a/www/js/report.js b/www/js/report.js index 4a79568..43af05a 100644 --- a/www/js/report.js +++ b/www/js/report.js @@ -8,7 +8,7 @@ function Report(spec) { may_show_name: '', category: '', phone: '', - pc: '' + pc: '', }; return { @@ -17,10 +17,13 @@ function Report(spec) { lon: function(lon) { if ( lon ) { props.lon = lon; } return props.lon; }, title: function(title) { if ( title ) { props.title = title; } return props.title; }, detail: function(detail) { if ( detail ) { props.detail = detail; } return props.detail; }, + category: function(category) { if ( category ) { props.category = category; } return props.category; }, phone: function(phone) { if ( phone ) { props.phone = phone; } return props.phone; }, pc: function(pc) { if ( pc ) { props.pc = pc; } return props.pc; }, may_show_name: function(may_show_name) { if ( may_show_name ) { props.may_show_name = may_show_name; } return props.may_show_name; }, file: function(file) { if ( file ) { props.file = file; } return props.file; }, + name: function(name) { if ( name ) { props.name = name; } return props.name; }, + email: function(email) { if ( email ) { props.email = email; } return props.email; }, getLastUpdate: function(time) { if ( time ) { props.time = time; diff --git a/www/photo.html b/www/photo.html new file mode 100644 index 0000000..925bc3a --- /dev/null +++ b/www/photo.html @@ -0,0 +1,29 @@ + <div id="photo-page" class="wrapper" data-role="page" data-add-back-btn="true"> + <div data-role="header" data-position="fixed" data-id="locate"> + <h1>Add Photo</h1> + <a href="details.html" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Next</a> + </div> + <div class="container" data-enhance="false"> + <div class="content" role="main"> + <div id="side-form"> + <fieldset> + <div id="problem_form"> + <div id="add_photo"> + <label>Add a Photo</label> + <input value="Take Photo" type="button" name="photo_button" id="id_photo_button" class="green-btn"> Or + <input value="Choose" type="button" name="existing" id="id_existing" class="green-btn"> + </div> + + <div id="display_photo" style="display: none"> + <label>Your Photo</label> + <img id="photo" src="" width="200" /> + <input value="Remove Photo" type="button" name="del_photo_button" id="id_del_photo_button" class="green-btn"> + </div> + + <input type="hidden" name="photo" id="form_photo" value=""> + </div> + </fieldset> + </div> + </div> + </div> + </div> diff --git a/www/submit.html b/www/submit.html new file mode 100644 index 0000000..9c080d1 --- /dev/null +++ b/www/submit.html @@ -0,0 +1,88 @@ + <div id="submit-page" class="wrapper" data-role="page" data-add-back-btn="true"> + <div id="submit-header" data-role="header" data-position="fixed" data-id="locate"> + <h1>Submit</h1> + </div> + + <div class="container" data-role="content" data-enhance="false"> + <div class="content" role="main"> + + <form action="" method="post" name="mapForm" id="mapForm" enctype="multipart/form-data" class="validate" data-ajax="false"> + + <fieldset> + <div id="problem_form"> + <div id="signed_in"> + <p> + You are signed in as <span id="username"></span> + </p> + + <p id="confirm_details">Confirm details</p> + <div id="name_details"> + <label for="form_may_show_name">Name</label> + <input type="text" class="validName" value="" name="name" id="form_name" placeholder="Your name"> + + <div class="checkbox-group"> + <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1" checked> + <label class="inline" for="form_may_show_name">Show my name publicly</label> + </div> + + <label for="form_phone">Phone number</label> + <input type="text" value="" name="phone" id="form_phone" placeholder="Your phone number (optional)"> + </div> + + <div class="form-txt-submit-box"> + <input class="green-btn" type="submit" id="submit_signed_in" name="submit_signed_in" value="Report"> + </div> + </div> + + <div id="signed_out"> + <label for="form_email" id="email_label">Your email</label> + <input type="email" value="" name="email" id="form_email" placeholder="Please enter your email address" required> + + <div id="form_sign_in"> + <h4 id="have_password">Do you have a FixMyStreet password?</h4> + + <div id="form_sign_in_yes" class="form-box"> + + <h5><strong>Yes</strong> I have a password</h5> + + <label class="hidden-js n" for="password_sign_in">Yes I have a password</label> + <div class="form-txt-submit-box"> + <input type="password" name="password_sign_in" id="password_sign_in" placeholder="Your password" value=""> + <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="Report"> + </div> + </div> + + <div id="form_sign_in_no" class="form-box"> + <h5 id="let_me_confirm"><strong>No</strong> Let me confirm my report by email</h5> + + + <div id="password_surround"> + <label class="form-focus-hidden" for="password_register" id="password_label">Password</label> + </div> + + <div class="form-txt-submit-box form-focus-hidden"> + <input type="password" name="password_register" id="password_register" value="" placeholder="Enter a password (optional)"> + <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="Report"> + </div> + + </div> + </div> + </div> + + <div id="report_save" class="form-box"> + <h5>Save this report for completion later</h5> + <div class="form-txt-submit-box"> + <input class="green-btn" type="button" id="save_report" name="save_report" value="Save"> + </div> + </div> + </div> + </fieldset> + + <input type="hidden" name="submit_problem" value="1"> + </div> + + </div> + </form> + </div> + </div> + </div> <!-- .wrapper --> |