Attempting first go at listen page

new file: app/assets/javascripts/angular/controllers/listen.js renamed: app/assets/javascripts/directives.js -> app/assets/javascripts/angular/directives/directives.js modified: app/assets/javascripts/app.js modified: app/assets/templates/home.html new file: app/assets/templates/listen.html modified: app/assets/templates/recordings.html modified: app/views/layouts/application.html.erb -- added home link modified: config/routes.rb -- added debugging route
QutEcoacoustics · Nov 7, 2012 · 44c9923 · 44c9923
1 parent 56634e9
commit 44c9923
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 40 deletions.
diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
@@ -0,0 +1,31 @@
+"use strict";
+/*
+    The listen controller. Show a spectrogram, listen to audio, annotate the spectrogram.
+*/
+function ListenCtrl($scope, $resource, $location) {
+
+    var recordingResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
+        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    });
+    $scope.recording = recordingResource.get({recordingId:1});
+
+
+    var spectrogramResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
+        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    });
+    $scope.spectrogram = recordingResource.get({recordingId:1});
+
+
+    var audioEventResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
+        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    });
+    $scope.recording = recordingResource.get({recordingId:1});
+
+
+    $scope.refresh = function($event) {
+        //$ngModel.$render();
+    };
+
+}
+
+ListenCtrl.$inject = ['$scope', '$resource', '$location']
diff --git a/app/assets/javascripts/directives.js → ...ascripts/angular/directives/directives.js b/app/assets/javascripts/directives.js → ...ascripts/angular/directives/directives.js
@@ -1,4 +1,5 @@
-bawApp.directive('baw', function() {
+
+bawApp.directive('nsDsFade', function() {
     return function(scope, element, attrs) {
         element.css('display', 'none');
         scope.$watch(attrs.ngDsFade, function(value) {

diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -20,6 +20,9 @@ var bawApp = angular.module('baw', ['ngResource'], function($routeProvider, $loc
         when('/recordings', {templateUrl: '/assets/recordings.html',   controller: RecordingsCtrl }).
         when('/recordings/:recordingId', {templateUrl: '/assets/recording.html', controller: RecordingCtrl }).
 
+        when('/listen', {templateUrl: '/assets/listen.html', controller: ListenCtrl}).
+        when('/listen/:recordingId', {templateUrl: '/assets/listen.html', controller: ListenCtrl}).
+
         //when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
         otherwise({redirectTo: '/home'});
 

diff --git a/app/assets/templates/home.html b/app/assets/templates/home.html
@@ -7,3 +7,9 @@ <h2>Welcome</h2>
 <a href="/sites">Sites</a>
 <a href="/photos">Photos</a>
 <a href="/recordings">Audio Recordings</a>
+
+<a href="/listen">Listen</a>
+<a href="/listen/1bd0d668-1471-4396-adc3-09ccd8fe949a">Listen2</a>
+
+
+</div>
diff --git a/app/assets/templates/listen.html b/app/assets/templates/listen.html
@@ -0,0 +1,18 @@
+<div id="content" data-ng-controller="ListenCtrl">
+    <a href="/listen/1bd0d668-1471-4396-adc3-09ccd8fe949a">demo</a>
+    <a href="#" ng-click="refresh()">demo</a>
+
+    <h1>Listen</h1>
+
+    <p>Listen and annotate.</p>
+
+    <h3>Spectrogram</h3>
+    <img src="{{}}">
+
+    <h3>Audio Controls</h3>
+    <audio></audio>
+
+    <h3>Annotations</h3>
+    <table>a</table>ss
+
+</div>
diff --git a/app/assets/templates/recordings.html b/app/assets/templates/recordings.html
@@ -8,7 +8,7 @@ <h1>Audio Recording List</h1>
     <ul>
         <li data-ng-repeat="recording in recordings">
             <h3><a data-ng-href="/recordings/{{recording.id}}">{{recording.id}} ({{recording.uuid}})</a></h3>
-            <p>{{recording.duration_seconds}} seconds '{{recording.media_type}}'</p>
+            <p>{{recording.duration_seconds}} seconds '{{recording.media_type}}', {{recording.notes.fake}}</p>
         </li>
 
     </ul>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,32 +1,13 @@
 <!DOCTYPE html>
 <html ng-app="baw">
 <head>
-  <title>QubarSite</title>
+  <title>Baw Site</title>
 
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
 
   <script type="text/javascript">
-//      function PhoneListCtrl($scope, $http) {
-//
-//          $http.get('users.json').success(function(data){
-//             $scope.users = data;
-//          });
-//
-//          $scope.orderProp = 'age';
-//
-//          $scope.phones = [
-//              {"name": "Nexus S",
-//                  "snippet": "Fast just got faster with Nexus S."},
-//              {"name": "Motorola XOOM™ with Wi-Fi",
-//                  "snippet": "The Next, Next Generation tablet."},
-//              {"name": "MOTOROLA XOOM™",
-//                  "snippet": "The Next, Next Generation tablet."}
-//          ];
-//
-//          $scope.hello  = "hello world";
-//      }
   </script>
 
 </head>
@@ -36,31 +17,17 @@
 %>
 
 <div id="wrapper">
-    <header><h1>Bioacoustic Workbench</h1></header>
+    <header>
+      <h1>Bioacoustic Workbench</h1>
+      <a href="/">Home</a>
+    </header>
 
     <!-- each view must specify the controller they use -->
         <div ng-view></div>
     </div>
 </div>
 <footer></footer>
-    <!--<div ng-controller="PhoneListCtrl">-->
-      <!--<h1>{{hello}} bitches!</h1>-->
 
-      <!--<ul>-->
-        <!--<li ng-repeat="user in users">-->
-          <!--{{user.display_name}}-->
-          <!--<p ng-bind="user.created_at"></p>-->
-          <!--<p>{{user.updated_at}}</p>-->
-        <!--</li>-->
-      <!--</ul>-->
-
-      <!--<p>Total number of phones: {{phones.length}}</p>-->
-
-      <!--<table>-->
-        <!--<tr><th>row number</th></tr>-->
-        <!--<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>-->
-      <!--</table>-->
-    <!--</div>-->
 
 </body>
 </html>