Major commit for getting angular working and setting up same pages

modified: .gitignore -- added media folders to ignore list modified: Gemfile modified: Gemfile.lock -- upgraded headless version modified: app/assets/javascripts/app.js -- worked out how to properly include the angularjs-ui directives (in the dependencies array) modified: app/assets/javascripts/angular/controllers/listen.js modified: app/assets/javascripts/angular/directives/directives.js modified: app/assets/javascripts/application.js modified: app/assets/stylesheets/base.css.scss modified: app/assets/stylesheets/layout.css.scss modified: app/assets/stylesheets/photos.css.scss modified: app/assets/stylesheets/projects.css.scss modified: app/assets/stylesheets/scaffolds.css.scss modified: app/assets/templates/listen.html modified: app/assets/templates/projects.html modified: app/controllers/audio_events_controller.rb modified: app/controllers/media_controller.rb modified: app/controllers/projects_controller.rb modified: app/views/layouts/application.html.erb -- continued development of project and audio listening page. refactored some sass. also fixed up defult color templates modified: config/initializers/mime_types.rb -- removed a wav mimetype - can't remember why modified: config/routes.rb -- added dummy route until proper "redirect all html route to angular" can be made to work modified: db/development_seeds.rb -- fixed formatting eroors new file: vendor/assets/javascripts/jQuery.jPlayer.2.2.0/Jplayer.swf new file: vendor/assets/javascripts/jQuery.jPlayer.2.2.0/add-on/jplayer.playlist.min.js new file: vendor/assets/javascripts/jQuery.jPlayer.2.2.0/add-on/jquery.jplayer.inspector.js new file: vendor/assets/javascripts/jQuery.jPlayer.2.2.0/jquery.jplayer.min.js new file: vendor/assets/javascripts/jQuery.jPlayer.2.2.0/popcorn/popcorn.jplayer.js -- added jplayer to project - not yet used
QutEcoacoustics · Nov 9, 2012 · a4ec467 · a4ec467
1 parent 4c1bff6
commit a4ec467
Show file tree

Hide file tree

Showing 21 changed files with 1,411 additions and 137 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,9 @@ doc/
 
 # rubymine stuff
 /.idea
+
+
+# media folder
+/media/original/*
+/media/cachedimages/*
+/media/cachedaudio/*
diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
@@ -2,30 +2,62 @@
 /*
     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 }
+function ListenCtrl($scope, $resource, $routeParams) {
+
+    var recordingResource = $resource('/audio_recordings/:recordingId', {recordingId: '@recordingId'}, {
+        get: { method:'GET', params:{recordingId: '@recordingId'}, isArray: false }
     });
-    $scope.recording = recordingResource.get({recordingId:1});
+    $scope.recording = recordingResource.get($routeParams);
+
+    // HACK:
+    $scope.recordingurl =  "/media/1bd0d668-1471-4396-adc3-09ccd8fe949a_0_120_0_11025.mp3";
 
 
-    var spectrogramResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
-        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    var spectrogramResource = $resource('/media/:recordingId', {recordingId: '@recordingId'}, {
+        get: { method:'GET', params:{recordingId: '@recordingId'}, isArray: false }
     });
-    $scope.spectrogram = recordingResource.get({recordingId:1});
+    $scope.spectrogram = spectrogramResource.get($routeParams);
 
+    // HACK:
+    $scope.spectrogram.url = "/media/1bd0d668-1471-4396-adc3-09ccd8fe949a_0_120_0_11025_512_g.png"
 
-    var audioEventResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
-        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    var audioEventResource = $resource('/audio_events?by_audio_id=:recordingId', {recordingId: '@recordingId'}, {
+        get: { method:'GET', params:{recordingId: '@recordingId'}, isArray: true }
     });
-    $scope.recording = recordingResource.get({recordingId:1});
-
+    $scope.audio_events = audioEventResource.get($routeParams);
+    $scope.event_keys = function    () {
+        return Object.keys($scope.audio_events[0]);
+    }
 
     $scope.refresh = function($event) {
         //$ngModel.$render();
     };
 
+
+    $scope.print = function () {
+        var seen = [];
+        var badKeys = ["$digest", "$$watchers", "$$childHead", "$$childTail", "$$listeners", "$$nextSibling", "$$prevSibling", "$root", "this", "$parent"];
+        var str = JSON.stringify($scope,
+            (function (key, val) {
+                if (badKeys.indexOf(key) >= 0) {
+                    return "[Can't do that]";
+                }
+                if (typeof val == "object") {
+                    if (seen.indexOf(val) >= 0) {
+                        return "";
+                    }
+                    seen.push(val);
+                }
+                return val;
+            }), 4);
+        return str;
+    }
+
+    $scope.showHide = false;
+
+
+
 }
 
-ListenCtrl.$inject = ['$scope', '$resource', '$location']
+ListenCtrl.$inject = ['$scope', '$resource', '$routeParams']
diff --git a/app/assets/javascripts/angular/directives/directives.js b/app/assets/javascripts/angular/directives/directives.js
@@ -1,4 +1,5 @@
 
+// HACK: this is a very bad way to do this!
 bawApp.directive('nsDsFade', function() {
     return function(scope, element, attrs) {
         element.css('display', 'none');
@@ -12,4 +13,15 @@ bawApp.directive('nsDsFade', function() {
         });
     }
 
-});
+});
+//    .directive('uiToggle', [function() {
+//    return function(scope, elm, attrs) {
+//        scope.$watch(attrs.uiToggle, function(newVal, oldVal){
+//            if (newVal) {
+//                elm.removeClass('ui-hide').addClass('ui-show');
+//            } else {
+//                elm.removeClass('ui-show').addClass('ui-hide');
+//            }
+//        });
+//    }
+//}]);
diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -2,7 +2,7 @@
 
 /* App Module */
 
-var bawApp = angular.module('baw', ['ngResource'], function($routeProvider, $locationProvider ) {
+var bawApp = angular.module('baw', ['ngResource', 'ui.directives', 'ui.filters'], function($routeProvider, $locationProvider ) {
 
     // routes
     $routeProvider.

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -14,8 +14,8 @@
 //= require jquery_ujs
 //= require angular.js
 //= require angular-resource.js
-// require angular-ui.js
-// require angular-ui-ieshiv.js
+//= require angular-ui.js
+//= require angular-ui-ieshiv.js
 //= require app
 //= require_tree .
 

diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
@@ -1,7 +1,68 @@
+/**********************************************************
+ *
+ *                  Reusable components
+ *
+ **********************************************************/
+
+
+/*
+ *
+ *  Global variables
+ *
+ */
+
 // https://kuler.adobe.com/#themeID/1080677
 // http://colorschemedesigner.com/
-$master-background: #E9E7C2;
-$master-highlight: #787C39;
-$master-highlight-2: #908221 #D4DEB8;
-$master-dark: #2C2C2A;
-$master-dark-2: #584B28;
+$primary-color:         #E9E7C2 #D4DEB8 #e8e7e4;
+$master-background:     #E9E7C2 #E9EFD8 #e8e7e4;
+$master-highlight:      #7B903C #7A903C #97904A;
+$master-highlight-2:    #D4DEB8 #ADC7A5 #97764A;
+$master-dark:           #2C2C2A #1D1D0E #78787A;
+$master-dark-2:         #212120 #1D1D0E #AEADAC;
+$master-complementary:  #4A2B66 #73305F #34346A;
+
+$standard-padding-horizontal: 0.5em;
+$standard-padding-vertical:   0.25em;
+$standrd-padding:             $standard-padding-vertical $standard-padding-horizontal;
+
+
+/*
+ *
+ *  Functions
+ *
+ */
+
+@mixin vendor-prefix($name, $arguments...) {
+  #{$name}: $arguments;
+  -webkit-#{$name}: $arguments;
+  -ms-#{$name}: $arguments;
+  -moz-#{$name}: $arguments;
+  -o-#{$name}: $arguments;
+}
+
+/*
+ *
+ *  Animations
+ *
+ */
+
+.standard-transition{
+  @include vendor-prefix(transition, all 0.5s ease);
+}
+
+.ui-show {
+  @extend .standard-transition;
+}
+.ui-hide {
+  opacity: 0;
+  @extend .standard-transition;
+
+}
+
+
+/*
+ *
+ *  Styles
+ *  // see layout.css.scss
+ */
+
diff --git a/app/assets/stylesheets/layout.css.scss b/app/assets/stylesheets/layout.css.scss
@@ -1,49 +1,111 @@
 @import 'base.css.scss';
 
+/**********************************************************
+ *
+ *                  Default styles
+ *
+ * - elements sorted alphabetically
+ * - classes sorted alphabetically
+ * - properties sorted in logical order
+ * - no magic numbers / colors allowed. this is what SASS is for.
+ **********************************************************/
+
+/*
+ *
+ *  Elements
+ *
+ */
+
 * {
     margin: 0;
     padding: 0;
+    color: nth($master-dark, 1);
 }
-html {
-    height: 100%;
+
+a {
+  outline: none;
+  text-decoration: underline;
+  color: nth($master-dark, 1);
+
+  &:visited {
+    color: nth($master-dark-2, 1);;
+  }
+
+  &:hover{
+    text-decoration: none;
+    color: nth($master-highlight, 1);
+  }
+
+  &:active {
+    color: nth($master-complementary, 1)
+  }
 }
+
 body {
-    background-color: $master-background;
-    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
-    height: 100%;
+  background-color: nth($master-background, 1);
+  font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
+  height: 100%;
 }
-a {
-    color: blue;
-    outline: none;
-    text-decoration: underline;
+
+
+input {
+  vertical-align: middle;
 }
-a:hover {
-    text-decoration: none;
+
+img {
+  border: none;
+}
+
+html {
+    height: 100%;
 }
+
+li {
+
+  & ul, & ol {
+    margin:0 1.5em;
+  }
+}
+
 p {
-    margin: 0 0 18px
+    margin: 0 0 18px;
 }
-img {
-    border: none;
+
+pre {
+  font-family: sans-serif;
+  background-color: nth($master-background, 3);
+  color: nth($master-dark, 3);
+
 }
-input {
-    vertical-align: middle;
+
+ol {
+  margin:0 1.5em;
+  list-style-type:decimal;
 }
 
-#wrapper {
-    width: 100%;
-    min-width: 768px;
-    min-height: 100%;
-    height: auto !important;
-    height: 100%;
+ul {
+  @extend ol;
+  list-style-type:disc;
+
+  & ol{
+    margin:0 1.5em 1.5em 1.5em;
+  }
 }
 
+/*
+ *
+ *  Specific styles
+ *
+ */
+$footer-height: 40px;
+
+
 /* Header
 -----------------------------------------------------------------------------*/
 header {
     height: 75px;
-    background: nth($master-highlight-2, 2);
-    border-bottom:2px solid $master-highlight;
+    background: nth($master-highlight-2, 1);
+    border-bottom:2px solid nth($master-highlight, 1);
     h1 {
       font-size:2em;
       padding:15px 0 0 15px;
@@ -52,16 +114,34 @@ header {
 
 /* Middle
 -----------------------------------------------------------------------------*/
+#page-wrapper {
+  width: 100%;
+  min-width: 768px;
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+}
+
+#content-wrapper{
+  margin-top:    5px;
+  margin-right:  15px;
+  margin-left:   15px;
+  margin-bottom: $footer-height;
+
+}
+
+
 #content {
   margin:5px 15px;
 }
 
+
 /* Footer
 -----------------------------------------------------------------------------*/
 footer {
     margin: -70px auto 0;
     min-width: 768px;
-    height: 70px;
+    height: $footer-height;
     background: nth($master-highlight-2, 2);
     position: relative;
     border-top:2px solid $master-highlight;

diff --git a/app/assets/stylesheets/photos.css.scss b/app/assets/stylesheets/photos.css.scss
@@ -1,3 +1,3 @@
-// Place all the styles related to the Photos controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+
+
+