diff options
| -rw-r--r-- | CHANGELOG.md | 5 | ||||
| -rw-r--r-- | templates/existing.html | 4 | ||||
| -rw-r--r-- | templates/offline.html | 8 | ||||
| -rw-r--r-- | templates/photo.html | 64 | ||||
| -rw-r--r-- | templates/reports.html | 2 | ||||
| -rw-r--r-- | www/css/fms.css | 22 | ||||
| -rw-r--r-- | www/js/config.js-example | 8 | ||||
| -rw-r--r-- | www/js/models/draft.js | 26 | ||||
| -rw-r--r-- | www/js/models/report.js | 122 | ||||
| -rw-r--r-- | www/js/views/home.js | 2 | ||||
| -rw-r--r-- | www/js/views/offline.js | 6 | ||||
| -rw-r--r-- | www/js/views/photo.js | 76 | ||||
| -rw-r--r-- | www/templates/en/existing.html | 4 | ||||
| -rw-r--r-- | www/templates/en/offline.html | 8 | ||||
| -rw-r--r-- | www/templates/en/photo.html | 64 | ||||
| -rw-r--r-- | www/templates/en/reports.html | 2 |
16 files changed, 288 insertions, 135 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..7273c7b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +## Releases + +* Unreleased + - New features + - Multiple photo support. #107 diff --git a/templates/existing.html b/templates/existing.html index 1c326b8..ef9effb 100644 --- a/templates/existing.html +++ b/templates/existing.html @@ -17,8 +17,8 @@ <p><% print( moment( created ).fromNow() ) %></p> </div> - <% if ( file ) { %> - <div class="photo" style="background-image: url(<%= file %>)"></div> + <% if ( files.length > 0 ) { %> + <div class="photo" style="background-image: url(<%= files[0] %>)"></div> <% } %> <% if ( details ) { %> diff --git a/templates/offline.html b/templates/offline.html index 432fb09..bba1075 100644 --- a/templates/offline.html +++ b/templates/offline.html @@ -46,7 +46,7 @@ </div> </div> - <% if ( file != '' ) { %> + <% if ( files.length > 0 ) { %> <div id="add_photo" style="display: none"> <% } else { %> <div id="add_photo"> @@ -56,16 +56,16 @@ <input data-icon="fms-photo-existing" value="[% loc('Add an existing photo') %]" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> </div> - <% if ( file == '' ) { %> + <% if ( files.length == 0 ) { %> <div id="display_photo" style="display: none"> <% } else { %> <div id="display_photo"> <% } %> <label>[% loc('Your Photo') %]</label> <div class="photo"> - <img class="small" id="photo" src="<%= file %>" /> + <img class="small" id="photo" src="<%= files[0] %>" /> </div> - <input value="[% loc('Remove Photo') %]" type="button" name="del_photo_button" id="id_del_photo_button" data-role="button" data-theme="a"> + <input value="[% loc('Remove Photo') %]" type="button" name="del_photo_button" class="del_photo_button" data-role="button" data-theme="a"> </div> </div> </div> diff --git a/templates/photo.html b/templates/photo.html index 286dac3..0646b4a 100644 --- a/templates/photo.html +++ b/templates/photo.html @@ -1,37 +1,49 @@ <div data-role="header"> <a data-rel="back" data-icon="arrow-l" class="ui-btn-left">[% loc('Back') %]</a> - <h1>[% loc('Add Photo') %]</h1> - <% if ( file == '' ) { %> - <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">[% loc('Skip') %]</a> + <h1>[% loc('Add Photos') %]</h1> + <% if ( files.length == 0 ) { %> + <% if ( !CONFIG.PHOTO_REQUIRED ) { %> + <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">[% loc('Skip') %]</a> + <% } %> <% } else { %> <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">[% loc('Next') %]</a> <% } %> </div> + <div data-role="content"> - <% var photoClass = 'nodisplay', nophotoClass = 'nodisplay'; - if ( file != '' ) { - photoClass = ''; - } else { - nophotoClass = ''; - } %> - <h2 id="nophoto_title" class="<% print( nophotoClass ); %>"> - [% loc('Add a Photo') %] <em>[% loc('(optional)') %]</em> - </h2> - <h2 id="photo_title" class="<% print( photoClass ); %>"> - [% loc('Photo for report') %] - </h2> - <div class="photo-wrapper"> - <div class="photo"> - <% if ( file == '' ) { %> - <img class="placeholder" src="images/placeholder-photo.png" alt="" id="photo"> + <% if ( files.length == 0 ) { %> + <h2 id="nophoto_title"> + [% loc('Add a Photo') %] + <% if ( !CONFIG.PHOTO_REQUIRED ) { %> + <em>[% loc('(optional)') %]</em> + <% } else if ( files.length == 0) { %> + <em>[% loc('(required)') %]</em> + <%} %> + </h2> <% } else { %> - <img class="small" id="photo" src="<%= file %>" /> + <h2 id="photo_title"> + [% loc('Photos for report') %] + </h2> <% } %> - <a data-role="none" id="id_del_photo_button" class="photo-corner-button">X</a> - </div> - </div> - <div class="bottom-btn"> - <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="[% loc('Add an existing photo') %]" > - <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="[% loc('Take a new photo') %]"> + + <div class="photo-wrapper"> + <% if ( files.length == 0 ) { %> + <div class="photo"> + <img class="placeholder" src="images/placeholder-photo.png" alt=""> + </div> + <% } else { %> + <% _.each(files, function(file, index) { %> + <div class="photo" style="background-image: url('<%= file %>');"> + <a data-role="none" class="photo-corner-button del_photo_button" data-file-index="<%= index %>">X</a> + </div> + <% });%> + <% } %> </div> + + <% if ( files.length < CONFIG.MAX_PHOTOS ) { %> + <div class="bottom-btn"> + <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="[% loc('Add an existing photo') %]" > + <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="[% loc('Take a new photo') %]"> + </div> + <% } %> </div> diff --git a/templates/reports.html b/templates/reports.html index e70dd3d..a08ffc6 100644 --- a/templates/reports.html +++ b/templates/reports.html @@ -15,7 +15,7 @@ if ( draft.get('lat') ) { classes.push('with_location'); } - if ( draft.get('file') ) { + if ( draft.get('files').length > 0 ) { classes.push('with_photo'); } var draftClass = ''; diff --git a/www/css/fms.css b/www/css/fms.css index aa93acc..c1c7365 100644 --- a/www/css/fms.css +++ b/www/css/fms.css @@ -726,11 +726,29 @@ div.photo { position: relative; display: inline-block; + background-size: contain; + background-repeat: no-repeat; + background-position: top center; + width: 100%; + margin: 0 0 1em 0; + -webkit-box-flex: 1; + flex: 1; + } + + div.photo:nth-child(3) { + margin-bottom: 0; } div.photo-wrapper { margin: auto; text-align: center; + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-align: center; + align-items: center; } img.small { @@ -744,9 +762,9 @@ width: 270px; } - #id_del_photo_button.photo-corner-button { + .del_photo_button.photo-corner-button { position: absolute; - bottom: -15px; + top: -15px; right: 0px; -webkit-border-radius: 50%; border-radius: 50%; diff --git a/www/js/config.js-example b/www/js/config.js-example index a221cb0..3ca674c 100644 --- a/www/js/config.js-example +++ b/www/js/config.js-example @@ -50,6 +50,14 @@ var CONFIG = { // elements in your CSS. HELP_DISABLED: false, + // Set this to true if the user must provide at least one photo when making + // a report. If this is true the 'skip' button on the photo page is removed + // and 'next' doesn't appear until at least one photo is attached. + PHOTO_REQUIRED: false, + + // The maximum number of photos the user can attach to a report. + MAX_PHOTOS: 3, + // If this is true then the user must login as the first step after // installing the app, and before making any reports. LOGIN_REQUIRED: false, diff --git a/www/js/models/draft.js b/www/js/models/draft.js index 56d8111..e517f1b 100644 --- a/www/js/models/draft.js +++ b/www/js/models/draft.js @@ -3,17 +3,19 @@ Draft: Backbone.Model.extend({ localStorage: new Backbone.LocalStorage(CONFIG.NAMESPACE + '-drafts'), - defaults: { - lat: 0, - lon: 0, - title: '', - details: '', - may_show_name: '', - category: '', - phone: '', - pc: '', - file: '', - created: moment.utc() + defaults: function() { + return { + lat: 0, + lon: 0, + title: '', + details: '', + may_show_name: '', + category: '', + phone: '', + pc: '', + files: [], + created: moment.utc() + }; }, description: function() { @@ -33,7 +35,7 @@ this.get('title') || this.get('details') || this.get('category') || - this.get('file') + this.get('files').length ) { return true; } diff --git a/www/js/models/report.js b/www/js/models/report.js index 1a72e73..6926980 100644 --- a/www/js/models/report.js +++ b/www/js/models/report.js @@ -3,16 +3,18 @@ Report: Backbone.Model.extend({ urlRoot: CONFIG.FMS_URL + '/report/ajax', - defaults: { - lat: 0, - lon: 0, - title: '', - details: '', - may_show_name: '', - category: '', - phone: '', - pc: '', - file: '' + defaults: function() { + return { + lat: 0, + lon: 0, + title: '', + details: '', + may_show_name: '', + category: '', + phone: '', + pc: '', + files: [] + }; }, sync: function(method, model, options) { @@ -51,6 +53,74 @@ return false; }, + _readFileAsBase64String: function(file, success, error) { + return this._readFileAsBinaryString(file, function(data) { + var b64 = btoa(data); + success(b64); + }, error); + }, + + _readFileAsBinaryString: function(file, success, error) { + var reader = new FileReader(); + reader.onloadend = function() { + success(this.result); + }; + reader.onerror = error; + return reader.readAsBinaryString(file); + }, + + _getParamName: function(field, encoding, length) { + // The FileTransfer plugin technically only supports a single + // file in each upload. However, we can force other files to + // be added with a little workaround. + // FileTransfer allows extra parameters to be sent with the + // HTTP POST request, each of which is its own part of the + // multipart-encoded request. + // For a part to be treated as a file by the backend we need + // to provide a 'filename' value in the Content-Disposition + // header. The FileTransfer code doesn't escape the names of + // extra POST parameters[0][1], so we can take advantage of this + // and essentially inject our own header lines and filename + // value with a carefully-crafted HTTP POST field name that's + // passed to FileTransfer.upload. + // FIXME: This is basically a hack, and needs a better + // solution at some point. + // [0]: https://github.com/apache/cordova-plugin-file-transfer/blob/49c21f951f51381d887646b38823222ed11c60c1/src/ios/CDVFileTransfer.m#L208 + // [1]: https://github.com/apache/cordova-plugin-file-transfer/blob/49c21f951f51381d887646b38823222ed11c60c1/src/android/FileTransfer.java#L369 + var name = field + '"; filename="' + field + '.jpg"\r\n'; + name += "Content-Type: image/jpeg\r\n"; + name += "Content-Transfer-Encoding: " + encoding + "\r\n"; + name += "Content-Length: " + length + "\r\n"; + name += 'X-Ignore-This-Header: "'; // to close the open quotes + return name; + }, + + _addExtraPhotos: function(files, options, success, error) { + var photos = []; + for (var i = 0; i < files.length; i++) { + var uri = files[i]; + photos.push({field: "photo"+(i+2), uri: uri}); + } + this._addNextExtraPhoto(photos, options, success, error); + }, + + _addNextExtraPhoto: function(photos, options, success, error) { + var photo = photos.shift(); + if (photo === undefined) { + success(); + return; + } + var self = this; + resolveLocalFileSystemURL(photo.uri, function(fileentry) { + fileentry.file(function(file) { + self._readFileAsBase64String(file, function(data) { + options.params[self._getParamName(photo.field, "base64", data.length)] = data; + self._addNextExtraPhoto(photos, options, success, error); + }, error); + }, error); + }, error); + }, + post: function(model,options) { var params = { @@ -86,7 +156,7 @@ } var that = this; - if ( model.get('file') && model.get('file') !== '' ) { + if ( model.get('files') && model.get('files').length > 0 ) { var fileUploadSuccess = function(r) { FMS.uploading = false; $.mobile.loading('hide'); @@ -122,7 +192,8 @@ } }; - fileURI = model.get('file'); + var files = model.get('files').slice(); + fileURI = files.shift(); var fileOptions = new FileUploadOptions(); fileOptions.fileKey="photo"; @@ -169,14 +240,25 @@ uploadPcnt++; } }; - $.mobile.loading('show', { - text: FMS.strings.photo_loading, - textVisible: true, - html: '<span class="ui-icon ui-icon-loading"></span><h1>' + FMS.strings.photo_loading + '</h1><span id="progress"></span>' - }); - window.setTimeout( checkUpload, 15000 ); - FMS.uploading = true; - ft.upload(fileURI, CONFIG.FMS_URL + "/report/new/mobile", fileUploadSuccess, fileUploadFail, fileOptions); + + // If file2 or file3 have been set on this model we need to + // add the photos to the file upload request manually + // as FileTransfer only supports a single file upload. + that._addExtraPhotos( + files, + fileOptions, + function() { + $.mobile.loading('show', { + text: FMS.strings.photo_loading, + textVisible: true, + html: '<span class="ui-icon ui-icon-loading"></span><h1>' + FMS.strings.photo_loading + '</h1><span id="progress"></span>' + }); + window.setTimeout( checkUpload, 15000 ); + FMS.uploading = true; + ft.upload(fileURI, CONFIG.FMS_URL + "/report/new/mobile", fileUploadSuccess, fileUploadFail, fileOptions); + }, + fileUploadFail + ); }; setupChecker(); } else { diff --git a/www/js/views/home.js b/www/js/views/home.js index 05ee2f7..d82b874 100644 --- a/www/js/views/home.js +++ b/www/js/views/home.js @@ -31,7 +31,7 @@ this.navigate( 'login' ); } else if ( FMS.currentDraft && ( FMS.currentDraft.get('title') || FMS.currentDraft.get('lat') || - FMS.currentDraft.get('details') || FMS.currentDraft.get('file') ) + FMS.currentDraft.get('details') || FMS.currentDraft.get('files').length > 0 ) ) { this.navigate( 'existing' ); } else { diff --git a/www/js/views/offline.js b/www/js/views/offline.js index 3c2f7af..c5264a1 100644 --- a/www/js/views/offline.js +++ b/www/js/views/offline.js @@ -15,7 +15,7 @@ 'vclick .ui-btn-right': 'onClickButtonNext', 'vclick #id_photo_button': 'takePhoto', 'vclick #id_existing': 'addPhoto', - 'vclick #id_del_photo_button': 'deletePhoto', + 'vclick .del_photo_button': 'deletePhoto', 'vclick #locate': 'onClickLocate', 'vclick #locate_cancel': 'onClickCancel', 'blur input': 'toggleNextButton', @@ -86,7 +86,7 @@ var that = this; move.done( function( file ) { - $('#photo').attr('src', file.toURL()); + $('.photo-wrapper .photo img').attr('src', file.toURL()); that.model.set('file', file.toURL()); FMS.saveCurrentDraft(); @@ -113,7 +113,7 @@ del.done( function() { that.model.set('file', ''); FMS.saveCurrentDraft(); - $('#photo').attr('src', ''); + $('.photo-wrapper .photo img').attr('src', ''); $('#photo-next-btn .ui-btn-text').text('Skip'); $('#display_photo').hide(); diff --git a/www/js/views/photo.js b/www/js/views/photo.js index 8891298..6ba4a01 100644 --- a/www/js/views/photo.js +++ b/www/js/views/photo.js @@ -14,17 +14,22 @@ 'vclick .ui-btn-right': 'onClickButtonNext', 'vclick #id_photo_button': 'takePhoto', 'vclick #id_existing': 'addPhoto', - 'vclick #id_del_photo_button': 'deletePhoto' + 'vclick .del_photo_button': 'deletePhoto' }, beforeDisplay: function() { this.fixPageHeight(); - this.$('#id_del_photo_button').hide(); - if ( this.model.get('file') ) { - $('#id_photo_button').parents('.ui-btn').hide(); - $('#id_existing').parents('.ui-btn').hide(); - window.setTimeout( function() { $('#id_del_photo_button').show(); }, 250 ); - } + }, + + afterDisplay: function() { + // The height of the photos container needs to be adjusted + // depending on the number of photos - if there are 3 photos + // then the 'add photo' UI isn't shown so we should use all the + // vertical space for the thumbnails. + var wrapperHeight = $(".ui-content").height(); + wrapperHeight -= $(".ui-content h2").outerHeight(true); + wrapperHeight -= $(".ui-content .bottom-btn").outerHeight(true) + $(".photo-wrapper").height(wrapperHeight); }, getOptions: function(isFromAlbum) { @@ -52,7 +57,7 @@ takePhoto: function(e) { e.preventDefault(); $.mobile.loading('show'); - $('#photo').hide(); + $('.photo-wrapper .photo img').hide(); var that = this; var options = this.getOptions(); @@ -63,7 +68,7 @@ addPhoto: function(e) { e.preventDefault(); $.mobile.loading('show'); - $('#photo').hide(); + $('.photo-wrapper .photo img').hide(); var that = this; var options = this.getOptions(true); navigator.camera.getPicture( function(imgURI) { that.addPhotoSuccess(imgURI); }, function(error) { that.addPhotoFail(error); }, options); @@ -86,25 +91,22 @@ var that = this; move.done( function( file ) { - $('#nophoto_title').hide(); - $('#photo_title').html(FMS.strings.photo_added).show(); - $('#photo').attr('src', file.toURL()).addClass('small').removeClass('placeholder'); - that.model.set('file', file.toURL()); + var files = that.model.get('files'); + files.push(file.toURL()); + that.model.set('files', files); FMS.saveCurrentDraft(); - $('#photo-next-btn .ui-btn-text').text(FMS.strings.next); - $('#id_photo_button').parents('.ui-btn').hide(); - $('#id_existing').parents('.ui-btn').hide(); - $('#photo').show(); - window.setTimeout(function() { $('#id_del_photo_button').show() }, 500); - window.setTimeout(function() { $.mobile.loading('hide') }, 100); + window.setTimeout(function() { + $.mobile.loading('hide'); + that.rerender(); + }, 100); }); move.fail( function() { that.addPhotoFail(); } ); }, addPhotoFail: function(message) { - $('#photo').show(); + $('.photo-wrapper .photo img').show(); $.mobile.loading('hide'); if ( message != 'no image selected' && message != 'Selection cancelled.' && @@ -115,22 +117,34 @@ deletePhoto: function(e) { e.preventDefault(); - var that = this; - var del = FMS.files.deleteURI( this.model.get('file') ); + var files = this.model.get('files'); + var index = parseInt($(e.target).data('fileIndex')); + var deleted_file = files.splice(index, 1)[0]; + + var del = FMS.files.deleteURI( deleted_file ); + var that = this; del.done( function() { - $('#photo_title').hide(); - $('#nophoto_title').show(); - $('#id_del_photo_button').hide(); - that.model.set('file', ''); + // $('#photo_title').hide(); + // $('#nophoto_title').show(); + // $('.del_photo_button').hide(); + that.model.set('files', files); FMS.saveCurrentDraft(true); - $('#photo').attr('src', 'images/placeholder-photo.png').addClass('placeholder').removeClass('small'); - - $('#photo-next-btn .ui-btn-text').text('Skip'); - $('#id_photo_button').parents('.ui-btn').show(); - $('#id_existing').parents('.ui-btn').show(); + that.rerender(); + // $('.photo-wrapper .photo img').attr('src', 'images/placeholder-photo.png').addClass('placeholder').removeClass('small'); + // + // $('#photo-next-btn .ui-btn-text').text('Skip'); + // $('#id_photo_button').parents('.ui-btn').show(); + // $('#id_existing').parents('.ui-btn').show(); }); + }, + + rerender: function() { + // Simply calling this.render() breaks the DOM in a weird and + // interesting way, so this is a convenience wrapper around + // the correct router call. + FMS.router.photo(); } }) }); diff --git a/www/templates/en/existing.html b/www/templates/en/existing.html index 5e27785..c0a90ec 100644 --- a/www/templates/en/existing.html +++ b/www/templates/en/existing.html @@ -17,8 +17,8 @@ <p><% print( moment( created ).fromNow() ) %></p> </div> - <% if ( file ) { %> - <div class="photo" style="background-image: url(<%= file %>)"></div> + <% if ( files.length > 0 ) { %> + <div class="photo" style="background-image: url(<%= files[0] %>)"></div> <% } %> <% if ( details ) { %> diff --git a/www/templates/en/offline.html b/www/templates/en/offline.html index 10e87d9..bbdc661 100644 --- a/www/templates/en/offline.html +++ b/www/templates/en/offline.html @@ -46,7 +46,7 @@ </div> </div> - <% if ( file != '' ) { %> + <% if ( files.length > 0 ) { %> <div id="add_photo" style="display: none"> <% } else { %> <div id="add_photo"> @@ -56,16 +56,16 @@ <input data-icon="fms-photo-existing" value="Add an existing photo" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> </div> - <% if ( file == '' ) { %> + <% if ( files.length == 0 ) { %> <div id="display_photo" style="display: none"> <% } else { %> <div id="display_photo"> <% } %> <label>Your Photo</label> <div class="photo"> - <img class="small" id="photo" src="<%= file %>" /> + <img class="small" id="photo" src="<%= files[0] %>" /> </div> - <input value="Remove Photo" type="button" name="del_photo_button" id="id_del_photo_button" data-role="button" data-theme="a"> + <input value="Remove Photo" type="button" name="del_photo_button" class="del_photo_button" data-role="button" data-theme="a"> </div> </div> </div> diff --git a/www/templates/en/photo.html b/www/templates/en/photo.html index 8dac456..3221192 100644 --- a/www/templates/en/photo.html +++ b/www/templates/en/photo.html @@ -1,37 +1,49 @@ <div data-role="header"> <a data-rel="back" data-icon="arrow-l" class="ui-btn-left">Back</a> - <h1>Add Photo</h1> - <% if ( file == '' ) { %> - <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Skip</a> + <h1>Add Photos</h1> + <% if ( files.length == 0 ) { %> + <% if ( !CONFIG.PHOTO_REQUIRED ) { %> + <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Skip</a> + <% } %> <% } else { %> <a id="photo-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Next</a> <% } %> </div> + <div data-role="content"> - <% var photoClass = 'nodisplay', nophotoClass = 'nodisplay'; - if ( file != '' ) { - photoClass = ''; - } else { - nophotoClass = ''; - } %> - <h2 id="nophoto_title" class="<% print( nophotoClass ); %>"> - Add a Photo <em>(optional)</em> - </h2> - <h2 id="photo_title" class="<% print( photoClass ); %>"> - Photo for report - </h2> - <div class="photo-wrapper"> - <div class="photo"> - <% if ( file == '' ) { %> - <img class="placeholder" src="images/placeholder-photo.png" alt="" id="photo"> + <% if ( files.length == 0 ) { %> + <h2 id="nophoto_title"> + Add a Photo + <% if ( !CONFIG.PHOTO_REQUIRED ) { %> + <em>(optional)</em> + <% } else if ( files.length == 0) { %> + <em>(required)</em> + <%} %> + </h2> <% } else { %> - <img class="small" id="photo" src="<%= file %>" /> + <h2 id="photo_title"> + Photos for report + </h2> <% } %> - <a data-role="none" id="id_del_photo_button" class="photo-corner-button">X</a> - </div> - </div> - <div class="bottom-btn"> - <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="Add an existing photo" > - <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="Take a new photo"> + + <div class="photo-wrapper"> + <% if ( files.length == 0 ) { %> + <div class="photo"> + <img class="placeholder" src="images/placeholder-photo.png" alt=""> + </div> + <% } else { %> + <% _.each(files, function(file, index) { %> + <div class="photo" style="background-image: url('<%= file %>');"> + <a data-role="none" class="photo-corner-button del_photo_button" data-file-index="<%= index %>">X</a> + </div> + <% });%> + <% } %> </div> + + <% if ( files.length < CONFIG.MAX_PHOTOS ) { %> + <div class="bottom-btn"> + <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="Add an existing photo" > + <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="Take a new photo"> + </div> + <% } %> </div> diff --git a/www/templates/en/reports.html b/www/templates/en/reports.html index 047fa76..e04f5f6 100644 --- a/www/templates/en/reports.html +++ b/www/templates/en/reports.html @@ -15,7 +15,7 @@ if ( draft.get('lat') ) { classes.push('with_location'); } - if ( draft.get('file') ) { + if ( draft.get('files').length > 0 ) { classes.push('with_photo'); } var draftClass = ''; |