Worked on adding annotations and site linking

new file: app/assets/images/glyphicons-halflings-white.png new file: app/assets/images/glyphicons-halflings.png -- resource images stolen from bootstrap modified: app/assets/templates/listen.html modified: app/assets/javascripts/angular/controllers/listen.js -- worked on annotation add scenario modified: app/assets/javascripts/angular/services/services.js -- added positional id for audio_event resource modified: app/views/layouts/application.html.erb modified: app/assets/stylesheets/layout.css.scss -- modified footer so it no longer no longer sticks to window modified: app/controllers/audio_events_controller.rb modified: app/models/audio_event.rb -- added correct includes directives so records will be retrieved properly modified: app/assets/templates/site.html modified: app/controllers/sites_controller.rb modified: app/models/site.rb -- modified so we can link back to projects on site details page
QutEcoacoustics · Nov 23, 2012 · 0592065 · 0592065
1 parent d5b3557
commit 0592065
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 24 deletions.
diff --git a/app/assets/images/glyphicons-halflings-white.png b/app/assets/images/glyphicons-halflings-white.png
diff --git a/app/assets/images/glyphicons-halflings.png b/app/assets/images/glyphicons-halflings.png
diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
@@ -16,30 +16,88 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent)
     $scope.errorState = !GUID_REGEXP.test($routeParams.recordingId)
 
     if ($scope.errorState) {
-        console.warn( "Invalid guid specified in route... page rendering disabled");
+        console.warn("Invalid guid specified in route... page rendering disabled");
     }
-    else{
+    else {
+        var recordingId = $scope.recordingId = $routeParams.recordingId;
+
         $scope.recording = recordingResource.get($routeParams);
 
         // HACK:
-        $scope.recordingurl =  "/media/" + $routeParams.recordingId +"_0_120_0_11025.mp3";
+        $scope.recordingurl = "/media/" + recordingId + "_0_120_0_11025.mp3";
 
 
         var spectrogramResource = $resource('/media/:recordingId', {recordingId: '@recordingId'}, {
-            get: { method:'GET', params:{recordingId: '@recordingId'}, isArray: false }
+            get: { method: 'GET', params: {recordingId: '@recordingId'}, isArray: false }
         });
         $scope.spectrogram = spectrogramResource.get($routeParams);
 
         // HACK:
-        $scope.spectrogram.url = "/media/" + $routeParams.recordingId +"_0_120_0_11025_512_g.png";
+        $scope.spectrogram.url = "/media/" + recordingId + "_0_120_0_11025_512_g.png";
+
+        //    var audioEventResource = $resource('/audio_events?by_audio_id=:recordingId', {recordingId: '@recordingId'}, {
+        //        get:
+        //    });
+        $scope.audio_events = AudioEvent.query({by_audio_id: recordingId});
+
+
+        // HACK:
+        // this should be treated as readonly
+        $scope.tags = [
+            {text: "HALLO!", type_of_tag: null, is_taxanomic: false, id: -1},
+            {text: "Koala", type_of_tag: "common_name", is_taxanomic: true, id: -2},
+            {text: "Corrus Ovvu", type_of_tag: "species_name", is_taxanomic: true, id: -3},
+            {text: "Cawwing", type_of_tag: "sounds_like", is_taxanomic: false, id: -4}
+        ];
+
+        $scope.limits = {
+          time_min: 0.0,
+          time_max: 120.0,
+            freq_min: 0.0,
+            freq_max: 11025.0
+        };
+
+        $scope.selectedAnnotation = {
+            tags: [-1],
+            start_time_seconds: 0.05,
+            end_time_seconds: 15.23,
+            low_frequency_hertz:1000,
+            high_frequency_hertz: 8753
+        };
+
+        $scope.clearSelected = function() {
+            $scope.selectedAnnotation = {};
+        }
+
+        $scope.addAnnotation = function createAnnotation() {
+            var a = this.selectedAnnotation;
+            a.audio_recording_id = recordingId;
 
-    //    var audioEventResource = $resource('/audio_events?by_audio_id=:recordingId', {recordingId: '@recordingId'}, {
-    //        get:
-    //    });
-        $scope.audio_events = AudioEvent.query({by_audio_id:$routeParams.recordingId});
+            AudioEvent.save({audioEventId:null}, a,
+                function createAnnotationSuccess(response, getResponseHeaders) {
+                    console.log("Annotation creation successful");
 
+                    // now update tag-list
+                    $scope.audio_events.push(response);
+                },
+                function createAnnotationFailure(response, getResponseHeaders) {
+                    console.error("Annotation creation unsuccessful, response: " + response.status, response.data);
+                }
+            )
+        }
 
 
+//        $scope.update = function updateProject() {
+//            // do not send back the full object for update
+//            var p = {};
+//            p.name = this.project.name;
+//            p.urn = this.project.urn;
+//            p.description = this.project.description;
+//            p.notes = this.project.notes;
+//            p.site_ids = (this.project.sites || []).map(function(value) {return {id: value.id}});
+//
+//            projectResource.update(routeArgs, p,  (function() {console.log("success update")}));
+//        };
     }
 }
 

diff --git a/app/assets/javascripts/angular/services/services.js b/app/assets/javascripts/angular/services/services.js
@@ -34,7 +34,7 @@
           query: { method:'GET', isArray: true }
         };
 
-        var resource = resourcePut($resource, '/audio_events', actions);
+        var resource = resourcePut($resource, '/audio_events/:audioEventId', {audioEventId: '@audioEventId'}, actions);
         resource.csvLink = "/audio_events/download.csv";
         return resource;
     });

diff --git a/app/assets/stylesheets/layout.css.scss b/app/assets/stylesheets/layout.css.scss
@@ -172,12 +172,12 @@ header {
 /* Footer
 -----------------------------------------------------------------------------*/
 footer {
-    margin: -70px auto 0;
+    margin: $standard-padding-vertical auto 0;
     min-width: 768px;
     height: $footer-height;
     background: nth($master-highlight-2, 2);
-    position: relative;
-    border-top:2px solid $master-highlight;
+
+    border-top:2px solid nth($master-highlight,1);
     ul{
       list-style-type:none;
       li {
@@ -188,11 +188,17 @@ footer {
 }
 
 
+
+
 /* General Classes
 -----------------------------------------------------------------------------*/
 .short-guid {
   width: 50px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.select2-container {
+  min-width: 150px;
 }
diff --git a/app/assets/templates/listen.html b/app/assets/templates/listen.html
@@ -22,9 +22,46 @@ <h3>Audio Controls</h3>
     <h3>
         Tag edit
     </h3>
-    <form>
 
-    </form>
+        <form name="annotationEditForm" ng-model="selectedAnnotation">
+            <label>
+                <span>Tags</span>
+                <em>--TODO: support for proper tagging control--</em><br/>
+                <select ng-multiple="true" tags multiple ui-select2="{allowClear:true}" ng-model="selectedAnnotation.tags"  >
+                    <option ng-repeat="t in tags" value="{{t.id}}" >{{t.text}}<!-- ng-show={{t.type_of_tag}}-->, {{t.type_of_tag}} <!-- --></span></option>
+                </select>
+
+
+            </label>
+
+            <label>
+                <span>Duration (seconds)</span></label>
+                <input type="text" min="{{limits.time_min}}" max="{{limits.time_max}}" required  ng-model="selectedAnnotation.start_time_seconds" />
+                &nbsp;to&nbsp;
+                <input type="text" min="{{limits.time_min}}" max="{{limits.time_max}}" required  ng-model="selectedAnnotation.end_time_seconds" />
+
+            <label>
+                <span>Frequency</span> </label>
+                <input type="text" min="{{limits.freq_min}}" max="{{limits.freq_max}}" required  ng-model="selectedAnnotation.low_frequency_hertz" />
+                &nbsp;to&nbsp;
+                <input type="text" min="{{limits.freq_min}}" max="{{limits.freq_max}}" required  ng-model="selectedAnnotation.high_frequency_hertz" />
+
+
+
+            <fieldset>
+                <legend>Annotation options</legend>
+                    <label>
+                        <input type="checkbox" ng-model="selectedAnnotation.is_reference">&nbsp;Is reference tag?
+                    </label>
+            </fieldset>
+            <p>
+            data for tag: ({{selectedAnnotation.start_time_seconds}}, {{selectedAnnotation.end_time_seconds}}); ({{selectedAnnotation.low_frequency_hertz}}, {{selectedAnnotation.high_frequency_hertz}}); {{selectedAnnotation.is_reference}};
+                <span ng-bind="selectedAnnotation.tags"></span>
+            </p>
+            <button type="button" ng-click="reset()">Clear</button>
+            <button ng-click="addAnnotation()">Add annotation</button>
+
+        </form>
 
     <h3>Annotations</h3>
     <table>
@@ -53,7 +90,7 @@ <h3>Annotations</h3>
             <td>{{ae.deleter_id}}</td>
             <td>{{ae.updated_at}}</td>
             <td>{{ae.updater_id}}</td>
-            <td><span ng-repeat="t in ae.tags">{{t.text}},</span></td>
+            <td><span ng-repeat="t in ae.audio_event_tags">{{t.tag_id}},</span></td>
             <td>{{ae.start_time_seconds}} - {{ae.end_time_seconds}}</td>
             <td>{{ae.low_frequency_hertz}} - {{ae.high_frequency_hertz}}</td>
         </tr>

diff --git a/app/assets/templates/site.html b/app/assets/templates/site.html
@@ -7,9 +7,17 @@ <h2>Site</h2>
     <a href="/">Home</a>
 
     <h3>{{site.name}}</h3>
+
+    <p>
+        Projects: <span ng-repeat="p in site.projects"> <a ng-href="/projects/{{p.id}}">{{p.name}}</a>{{!$last | boolToWords:', '}}</span>
+    </p>
+
     <p ng-bind="site.latitude" ></p>
     <p ng-bind="site.longitude" ></p>
+
     <pre>{{site.notes}}</pre>
-    <small>{{site.updated_at}}</small>
+
+    <baw-record-information ng-model="project" ></baw-record-information>
+
     <p>{{site.audio_recordings.length}}</p>
 </div>
diff --git a/app/controllers/audio_events_controller.rb b/app/controllers/audio_events_controller.rb
@@ -20,9 +20,10 @@ def by_audio_id
 
     @audio_events =
         AudioEvent
-        .includes(:tags,:audio_recording)
+        .includes(:audio_recording)
         .where(:audio_recordings => { :uuid => id })
 
+    @stuff = @audio_events.map {|m| m}
 
     #@audio_recording  = (AudioRecording.find_by_uuid id)
     #@audio_events = AudioEvent.find_all_by_audio_recording_id  @audio_recording.id

diff --git a/app/controllers/sites_controller.rb b/app/controllers/sites_controller.rb
@@ -13,7 +13,11 @@ def index
   # GET /sites/1
   # GET /sites/1.json
   def show
-    @site = Site.find(params[:id])
+    @site =
+        Site
+        .includes(:photos)
+        .joins(:projects)
+        .find(params[:id])
 
     respond_to do |format|
       format.html # show.html.erb

diff --git a/app/models/audio_event.rb b/app/models/audio_event.rb
@@ -1,7 +1,7 @@
 class AudioEvent < ActiveRecord::Base
   # relations
   belongs_to :audio_recording
-  has_many :audio_event_tags, :inverse_of => :audio_event
+  has_many :audio_event_tags, :inverse_of => :audio_event, :dependent => :destroy
   has_many :tags, :through => :audio_event_tags
 
   accepts_nested_attributes_for :tags, :audio_event_tags
@@ -17,6 +17,8 @@ class AudioEvent < ActiveRecord::Base
   validates_as_paranoid
 
   # validation
+  validates :audio_recording, :presence => true
+
   validates :start_time_seconds, :presence => true, :numericality => { :greater_than_or_equal_to  => 0 }
   validates :end_time_seconds, :numericality => { :greater_than_or_equal_to  => 0 }
   validate :start_time_must_be_lte_end_time
@@ -47,9 +49,8 @@ def as_json(options={})
     super(
         :include =>
             [
-                :audio_recording => {:only => [:id, :uuid]},
-                :tags => {:only => [:id, :text]},
-                :audio_event_tags => {}
+                :audio_event_tags,
+                :audio_recording  => {:only => [:id, :uuid]}
             ],
         :except => :audio_recording_id
     )

diff --git a/app/models/site.rb b/app/models/site.rb
@@ -31,4 +31,15 @@ class Site < ActiveRecord::Base
   #scope :sites_in_project, lambda { |project_ids| where(Project.specified_projects, { :ids => project_ids } ) }
   scope :site_projects, lambda{ |project_ids| includes(:projects).where(:projects => {:id => project_ids} ) }
 
+
+  # json formatting
+  def as_json(options={})
+    super(
+        :include =>
+            [
+                :photos,
+                :projects => {:only => [:id, :name]},
+            ]
+    )
+  end
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -27,6 +27,9 @@
         <div id="content-wrapper" ng-view></div>
     </div>
 </div>
-<footer></footer>
+
+<footer>
+  Bio-Acoustic Workbench, an open source escience initiative.
+</footer>
 </body>
 </html>