Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add detailed info for responses, scans, forms.

When the user clicks on an entry in the list, they can view detailed
information on each item.
  • Loading branch information...
commit db9b1fb1219aa6af6683d13707d71a94fcc76c20 1 parent 5c4730c
@prashtx prashtx authored
View
19 static/forms.html
@@ -72,8 +72,8 @@
<tr>
</thead>
<tbody data-bind="foreach: forms">
- <tr>
- <td data-bind="text: id"/>
+ <tr data-bind="click: $parent.formInfoModal.activate">
+ <td><a href="" data-bind="text: id"/></td>
<td data-bind="text: type"/>
<td><a class="btn" data-bind="click: $parent.confirmRemoveForm">Delete</a></td>
</tr>
@@ -103,6 +103,21 @@
<p>&copy; Code for America 2012</p>
</footer>
+ <!-- Form info modal -->
+ <div class="modal hide" id="formInfoModal" data-bind="with: formInfoModal">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+ <h3>Form Information</h3>
+ </div>
+ <div class="modal-body">
+ <p>Paper Form Description (JSON):</p>
+ <pre data-bind="text: formJSON"></pre>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-primary" data-dismiss="modal">Cool, thanks! :)</a>
+ </div>
+ </div> <!-- /modal -->
+
<!-- Delete confirmation modal -->
<div class="modal hide" id="deleteModal" data-bind="with: deleteModal">
<div class="modal-header">
View
25 static/forms.js
@@ -1,10 +1,35 @@
//
var BASE_URL = 'http://' + window.location.host;
+var FormInfoModalVM = function() {
+ var self = this;
+
+ self.formJSON = ko.observable();
+
+ // TODO: separate this explicit markup interaction. This ViewModel is already
+ // bound to the View, so we should be able to control the View without
+ // manipulating the markup.
+ self.view = $('#formInfoModal');
+
+ // Activate the Delete Confirmation Modal.
+ self.activate = function(item) {
+ self.formJSON(JSON.stringify(item, null, ' '));
+ self.view.modal('show');
+ };
+
+ // XXX
+ //self.dismiss = function() {
+ // self.view.modal('hide');
+ //};
+}
+
// Main ViewModel for the page
var PageVM = function(pageName) {
var self = SurveyPageVM(pageName);
+ // Form information VM
+ self.formInfoModal = new FormInfoModalVM();
+
// Delete confirmation VM
self.deleteModal = new DeleteModalVM();
View
21 static/responses.html
@@ -74,8 +74,8 @@
<tr>
</thead>
<tbody data-bind="foreach: responses">
- <tr>
- <td data-bind="text: id"/>
+ <tr data-bind="click: $parent.responseInfoModal.activate">
+ <td><a href="" data-bind="text: id"/></td>
<td data-bind="text: parcel_id"/>
<td data-bind="text: JSON.stringify($data)"/>
<td><a class="btn" data-bind="click: $parent.confirmRemoveResponse">Delete</a></td>
@@ -106,6 +106,23 @@
<p>&copy; Code for America 2012</p>
</footer>
+ <!-- Response info modal -->
+ <div class="modal hide" id="responseInfoModal" data-bind="with: responseInfoModal">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+ <h3>Submitted Response</h3>
+ </div>
+ <div class="modal-body">
+ <p>Response Information (JSON):</p>
+ <pre data-bind="text: responseJSON"></pre>
+ <p>Scanned Image:</p>
+ <a data-bind="attr: {href: imageUrl}"><img width="232" height="300" data-bind="attr: {src: imageUrl}"/></a>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-primary" data-dismiss="modal">Cool, thanks! :)</a>
+ </div>
+ </div> <!-- /modal -->
+
<!-- Delete confirmation modal -->
<div class="modal hide" id="deleteModal" data-bind="with: deleteModal">
<div class="modal-header">
View
37 static/responses.js
@@ -1,10 +1,47 @@
//
var BASE_URL = 'http://' + window.location.host;
+var ResponseInfoModalVM = function(pageVM) {
+ var self = this;
+
+ self.responseJSON = ko.observable();
+ self.imageUrl = ko.observable();
+
+ // TODO: separate this explicit markup interaction. This ViewModel is already
+ // bound to the View, so we should be able to control the View without
+ // manipulating the markup.
+ self.view = $('#responseInfoModal');
+
+ // Activate the modal.
+ self.activate = function(item) {
+ console.log('activating response info modal.');
+ self.responseJSON(JSON.stringify(item, null, ' '));
+
+ // If this is a paper-based response, get the scanned image.
+ if (item.source && item.source.type == 'paper') {
+ var scan_url = BASE_URL
+ + '/surveys/'
+ + pageVM.survey_id()
+ + '/scans/'
+ + item.source.scan;
+ $.ajax(scan_url, { dataType: 'json' })
+ .done(function(data) {
+ if (data.scan) {
+ self.imageUrl(data.scan.url);
+ }
+ });
+ }
+
+ self.view.modal('show');
+ };
+}
+
// Main ViewModel for the page
var PageVM = function(pageName) {
var self = SurveyPageVM(pageName);
+ // Response information VM
+ self.responseInfoModal = new ResponseInfoModalVM(self);
// Delete confirmation VM
self.deleteModal = new DeleteModalVM();
View
19 static/scans.html
@@ -74,7 +74,7 @@
<tr>
</thead>
<tbody data-bind="foreach: scans">
- <tr>
+ <tr data-bind="click: $parent.scanInfoModal.activate">
<td><a data-bind="attr: {href: url}, text: id"/></td>
<td data-bind="text: filename"/>
<td data-bind="text: status"/>
@@ -106,6 +106,23 @@
<p>&copy; Code for America 2012</p>
</footer>
+ <!-- Scan info modal -->
+ <div class="modal hide" id="scanInfoModal" data-bind="with: scanInfoModal">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+ <h3>Scanned Paper Form</h3>
+ </div>
+ <div class="modal-body">
+ <p>Scanned Form Information (JSON):</p>
+ <pre data-bind="text: scanJSON"></pre>
+ <p>Scanned Image:</p>
+ <a data-bind="attr: {href: imageUrl}"><img width="232" height="300" data-bind="attr: {src: imageUrl}"/></a>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-primary" data-dismiss="modal">Cool, thanks! :)</a>
+ </div>
+ </div> <!-- /modal -->
+
<!-- Delete confirmation modal -->
<div class="modal hide" id="deleteModal" data-bind="with: deleteModal">
<div class="modal-header">
View
21 static/scans.js
@@ -1,10 +1,31 @@
//
var BASE_URL = 'http://' + window.location.host;
+var ScanInfoModalVM = function() {
+ var self = this;
+
+ self.scanJSON = ko.observable();
+ self.imageUrl = ko.observable();
+
+ // TODO: separate this explicit markup interaction. This ViewModel is already
+ // bound to the View, so we should be able to control the View without
+ // manipulating the markup.
+ self.view = $('#scanInfoModal');
+
+ // Activate the modal.
+ self.activate = function(item) {
+ self.scanJSON(JSON.stringify(item, null, ' '));
+ self.imageUrl(item.url);
+ self.view.modal('show');
+ };
+}
+
// Main ViewModel for the page
var PageVM = function(pageName) {
var self = SurveyPageVM(pageName);
+ // Scan information VM
+ self.scanInfoModal = new ScanInfoModalVM();
// Delete confirmation VM
self.deleteModal = new DeleteModalVM();

0 comments on commit db9b1fb

Please sign in to comment.
Something went wrong with that request. Please try again.