Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added skeleton for photo-details page and a way to call this page fro…

…m each photo in PhotoView. Also fixed one instance that should have used the View in the first place
  • Loading branch information...
commit 1ab552dd72f66d993e95941152e46d83e747edea 1 parent 57615f8
@mackrauss mackrauss authored
Showing with 189 additions and 4 deletions.
  1. +14 −4 js/veos.view.js
  2. +175 −0 photo-details.html
View
18 js/veos.view.js
@@ -672,7 +672,12 @@
img = jQuery("<img style='display: block' class='photo-list-item' id='photo-"+this.model.id+"' />");
//img.attr('data-model', this.model);
img.attr('data-model', JSON.stringify(this.model.toJSON()));
- this.$el.append(img);
+
+ // wrap a link around the picture
+ photoDetails = jQuery('<a data-role="button" href="photo-details.html?id='+this.model.id+'"></a>');
+ photoDetails.append(img);
+
+ this.$el.append(photoDetails);
}
img.attr('src', this.model.thumbUrl());
img.attr('alt', this.model.get('notes'));
@@ -925,9 +930,12 @@
var photo = new veos.model.Photo({id: p.id});
function photoSuccess (model, response) {
- var img = jQuery('<img />');
- img.attr('src', model.thumbUrl());
- photoContainer.append(img);
+ // var img = jQuery('<img />');
+ // img.attr('src', model.thumbUrl());
+ // photoContainer.append(img);
+
+ var photoView = new PhotoView({model: model, el: photoContainer});
+ photoView.render();
}
function photoError (model, response) {
@@ -949,6 +957,8 @@
this.createPointDetailsMap(installation);
+ // TODO: The showPictures function will only add pictures and not reflect pictures getting less
+ // maybe we can reuse the PhotoView.render function??
if (installation.has('photos')) {
self.showPictures(installation);
}
View
175 photo-details.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>VEOS - Video Eyes On the Street</title>
+
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link rel="stylesheet" href="themes/veos.css" />
+ <link rel="stylesheet" href="css/veos.css" />
+
+ <link rel="icon" href="images/favicon.ico"/>
+
+ <script type="text/javascript" charset="utf-8" src="js/libs/cordova-2.0.0.js"></script>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+ <script type="text/javascript">
+ $.noConflict();
+ jQuery(document).bind("mobileinit", function(){
+ jQuery.mobile.defaultPageTransition = 'none'; // disable transitions
+ });
+ </script>
+ <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+
+ <script type="text/javascript"
+ src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB75fl3V3AXVEfejWZiIclVB73SuLESB8w&amp;sensor=true"></script>
+
+ <script type="text/javascript" charset="utf-8" src="js/libs/underscore-1.3.1.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/libs/backbone-0.9.2.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/veos.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/veos.map.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/veos.model.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/veos.view.js"></script>
+
+ <script type="text/javascript">
+ veos.init();
+ </script>
+ </head>
+ <body>
+ <div data-role="page" id="photo-details-page">
+ <div data-theme="a" data-role="header">
+ <span class="edit-button-container">
+ <a data-role="button" data-theme="e" data-icon="gear" data-iconpos="right" href="report.html">
+ Edit
+ </a>
+ </span>
+ <h3>
+ Photo Details
+ </h3>
+ </div>
+ <div data-role="content">
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Owner Name</b></legend>
+ <input class="field" name="owner_name" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Owner Type</b></legend>
+ <input class="field" name="owner_type" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+ <div data-role="collapsible" data-collapsed="false" id="location-container">
+ <h3>
+ Location
+ </h3>
+ <div class="map-thumbnail-container">
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend for="location-address"><b>Address or Place</b></legend>
+ <input class="field" name="loc_description" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+ </div>
+
+
+ <div data-role="collapsible-set" data-theme="" data-content-theme="" class="report">
+
+ <div data-role="collapsible" data-collapsed="true" id="photos-container">
+ <h3>
+ Photos
+ </h3>
+ <fieldset class="dashed-box">
+ <legend>Cameras</legend>
+
+ <div class="photo-thumbnail-container">
+ </div>
+
+ <hr>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend for="surveilled-space"><b>This installation is looking at</b></legend>
+ <input class="field multi-field" name="surveilled_space" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+ <hr>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend for="camera-count"><b>Number of cameras</b></legend>
+ <input class="field" name="camera_count" type="number" disabled="disabled" />
+ </fieldset>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Sign observed</b></legend>
+ <input class="field" name="has_sign" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+
+ <div data-role="collapsible-set" data-theme="" data-content-theme="">
+ <div data-role="collapsible" data-collapsed="true" id="sign-details-container">
+ <h3>
+ Sign details
+ </h3>
+
+ <fieldset class="dashed-box">
+ <legend>Sign</legend>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Text of sign</b></legend>
+ <input class="field" name="sign_text" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Visibility of sign</b></legend>
+ <input class="field" name="sign_visibility" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Stated purpose of sign</b></legend>
+ <input class="field" name="sign_stated_purpose" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Stated properties of sign</b></legend>
+ <input class="field" name="sign_properties" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
+ <legend><b>Notes</b></legend>
+ <input class="field" name="notes" value="" type="text" disabled="disabled" />
+ </fieldset>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+
+ <div data-theme="a" data-role="footer" class="footer-with-buttons">
+ <a data-role="button" data-theme="b" data-icon="back" data-iconpos="left" href="installations-list.html">
+ Back
+ </a>
+ </div>
+ </div>
+
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.