updated project, site, photo, recording views

app/assets/javascripts/angular/controllers/home.js

@@ -1,4 +1,4 @@
-'use strict'
+"use strict";
 
 //angular.module('home', []).config(function ($routeProvider, $httpProvider) {
 //

app/assets/javascripts/angular/controllers/photo.js

@@ -0,0 +1,11 @@
+"use strict";
+function PhotoCtrl($scope, $resource) {
+
+    var photoResource = $resource('/photos/:photoId', {photoId: '@id'}, {
+        get: { method:'GET', params:{photoId: '@id'}, isArray: false }
+    });
+
+    $scope.project = photoResource.get({photoId:1});
+}
+
+PhotoCtrl.$inject = ['$scope', '$resource']

app/assets/javascripts/angular/controllers/photos.js

@@ -0,0 +1,7 @@
+"use strict";
+function PhotosCtrl($scope, $resource) {
+    $scope.photosResource = $resource('/photos', {}, { get: { method:'GET', params:{}, isArray: true }});
+    $scope.photos = $scope.photosResource.get();
+}
+
+PhotosCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/angular/controllers/project.js

@@ -1,15 +1,11 @@
-'use strict'
+"use strict";
+function ProjectCtrl($scope, $resource) {
 
-
-function ProjectCtrl($scope, $http) {
-
-    $http.get('projects.json').success(function(data) {
-        $scope.projectList  = data;
+    var projectResource = $resource('/projects/:projectId', {projectId: '@id'}, {
+        get: { method:'GET', params:{projectId: '@id'}, isArray: false }
     });
 
-
-
-    $scope.ProjectName = "boobs r us";
-
-
+    $scope.project = projectResource.get({projectId:1});
 }
+
+ProjectCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/angular/controllers/projects.js

@@ -0,0 +1,7 @@
+"use strict";
+function ProjectsCtrl($scope, $resource) {
+    $scope.projectsResource = $resource('/projects', {}, { get: { method:'GET', params:{}, isArray: true }});
+    $scope.projects = $scope.projectsResource.get();
+}
+
+ProjectsCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/angular/controllers/recording.js

@@ -0,0 +1,11 @@
+"use strict";
+function RecordingCtrl($scope, $resource) {
+
+    var recordingResource = $resource('/audio_recordings/:recordingId', {recordingId: '@id'}, {
+        get: { method:'GET', params:{recordingId: '@id'}, isArray: false }
+    });
+
+    $scope.recording = recordingResource.get({recordingId:1});
+}
+
+RecordingCtrl.$inject = ['$scope', '$resource']

app/assets/javascripts/angular/controllers/recordings.js

@@ -0,0 +1,7 @@
+"use strict";
+function RecordingsCtrl($scope, $resource) {
+    $scope.recordingsResource = $resource('/audio_recordings', {}, { get: { method:'GET', params:{}, isArray: true }});
+    $scope.recordings = $scope.recordingsResource.get();
+}
+
+RecordingsCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/angular/controllers/site.js

@@ -1,9 +1,12 @@
-'use strict'
+"use strict";
 
+function SiteCtrl($scope, $resource) {
 
-function SiteCtrl($scope) {
-
-    $scope.name = "farts r us";
-
+    var siteResource = $resource('/sites/:siteId', {siteId: '@id'}, {
+        get: { method:'GET', params:{siteId: '@id'}, isArray: false }
+    });
 
+    $scope.site = siteResource.get({siteId:1});
 }
+
+SiteCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/angular/controllers/sites.js

@@ -0,0 +1,7 @@
+"use strict";
+function SitesCtrl($scope, $resource) {
+    $scope.sitesResource = $resource('/sites', {}, { get: { method:'GET', params:{}, isArray: true }});
+    $scope.sites = $scope.sitesResource.get();
+}
+
+SitesCtrl.$inject = ['$scope', '$resource'];

app/assets/javascripts/app.js

@@ -2,17 +2,36 @@
 
 /* App Module */
 
-angular.module('baw', ['$routeProvider','$locationProvider'], function($routeProvider, $locationProvider ) {
+var bawModule = angular.module('baw', ['ngResource'], function($routeProvider, $locationProvider ) {
 
     // routes
     $routeProvider.
         when('/home', {templateUrl: 'assets/home.html',   controller: HomeCtrl}).
-        when('/projects', {templateUrl: 'assets/project.html', controller: ProjectCtrl}).
-        when('/site', {templateUrl: 'assets/site.html', controller: SiteCtrl}).
+
+        when('/projects', {templateUrl: 'assets/projects.html', controller: ProjectCtrl}).
+        when('/project/:projectId', {templateUrl: 'assets/project.html', controller: ProjectsCtrl}).
+
+        when('/sites', {templateUrl: 'assets/sites.html',   controller: SitesCtrl }).
+        when('/site/:siteId', {templateUrl: 'assets/site.html', controller: SiteCtrl }).
+
+        when('/photos', {templateUrl: 'assets/photos.html',   controller: PhotosCtrl }).
+        when('/photo/:photoId', {templateUrl: 'assets/photo.html', controller: PhotoCtrl }).
+
+        when('/recordings', {templateUrl: 'assets/recordings.html',   controller: RecordingsCtrl }).
+        when('/recording/:recordingId', {templateUrl: 'assets/recording.html', controller: RecordingCtrl }).
+
         //when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
         otherwise({redirectTo: '/home'});
 
     // location config
-    $locationProvider.html5Mode(true);
+    //$locationProvider.html5Mode(true);
+
+
 
 });
+
+bawModule.factory('Todo', ['$resource', function($resource) {
+    return $resource('http://localhost:port/todos.json', {port:":3001"} , {
+        query: {method: 'GET', isArray: true}
+    });
+}]);

app/assets/stylesheets/application.css

@@ -10,139 +10,4 @@
  *
  *= require_self
  *= require_tree .
- */
-
-html {
-    background: #555;
-    font-size: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-body {
-    margin: 0;
-    padding: 0;
-    font-size: 80%;/*62.5%;*/
-    min-height: 100%;
-    position: relative;
-    font-family: Verdana, Helvetica, Arial, sans-serif;
-}
-img {
-    border-style: none;
-}
-h1 {
-    color: #fff;
-    margin: 15px 50px 0;
-}
-#outer_picture_frame {
-    padding-right: 220px;
-    padding-top: 100px;
-}
-
-#picture_frame, #selected_frame {
-    background-color: #fff;
-    -webkit-border-radius: 15px;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    -moz-box-shadow: 3px 3px 7px #333;
-    -webkit-box-shadow: 3px 3px 7px #333;
-    box-shadow: 3px 3px 7px #333;
-    overflow: hidden;
-    padding: 20px;
-}
-#picture_frame {
-    height: 482px;
-    margin: auto;
-    position: relative;
-    width: 642px;
-}
-#selected_frame {
-    height: 800px;
-    right: 5px;
-    top: 5px;
-    position: absolute;
-    width: 202px;
-}
-#photos {
-    border: 1px solid #333;
-    height: 480px;
-    overflow: hidden;
-    width: 640px;
-}
-#photos .photo {
-    cursor: pointer;
-    height: 480px;
-    position: relative;
-    width: 640px;
-}
-#photos .photo .title {
-    bottom: 5px;
-    color: #fff;
-    display: block;
-    font-size: 22px;
-    font-weight: bold;
-    position: absolute;
-    right: 5px;
-}
-#prev, #next {
-    color: #999;
-    cursor: pointer;
-    font-family: arial, helvetica, verdana, sans-serif;
-    font-size: 64px;
-    position: absolute;
-    top: 230px;
-}
-#prev {
-    left: 1px;
-}
-#next {
-    right: -1px;
-}
-.selected_photo {
-    position: relative;
-}
-.selected_photo .delete {
-    background-color: #faa;
-    -webkit-border-radius: 9px;
-    -moz-border-radius: 9px;
-    border-radius: 9px;
-    border: 3px solid #555;
-    color: #555;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
-    height: 13px;
-    line-height: 10px;
-    position: absolute;
-    right: -4px;
-    top: -4px;
-    width: 13px;
-}
-#selected_photos input {
-    width: 193px;
-}
-
-ul {
-    list-style-type: none;
-    margin: 150px auto;
-    padding: 0;
-    width: 800px;
-}
-
-li {
-    background-color: #fff;
-    border: 1px solid #333;
-    float: left;
-    font-size: 24px;
-    font-weight: strong;
-    height: 100px;
-    line-height: 1.4em;
-    margin: 20px;
-    padding: 40px 20px 20px;
-    text-align: center;
-    width: 120px;
-}
-li a {
-    color: #555;
-    text-decoration: none;
-}
+ */

app/assets/stylesheets/layout.css.scss

@@ -53,7 +53,7 @@ header {
 /* Middle
 -----------------------------------------------------------------------------*/
 #content {
-    padding: 0 0 70px;
+  margin:5px 15px;
 }
 
 /* Footer

app/assets/templates/home.html

@@ -1,6 +1,8 @@
-<h1>This is a test</h1>
+<h2>Welcome</h2>
 
-        <p>{{welcomeMessage}}</p>
+<p>{{welcomeMessage}}</p>
 
-        <a href="#/projects/" >fun times</a>
-        <a href="#/site/" >funny times</a>
+<a href="#/projects">Projects</a>
+<a href="#/sites">Sites</a>
+<a href="#/photos">Photos</a>
+<a href="#/recordings">Audio Recordings</a>

app/assets/templates/photo.html

@@ -0,0 +1,13 @@
+<div id="content" data-ng-controller="PhotoCtrl">
+    <h2>Photo</h2>
+
+    <p>The details for a site.</p>
+
+    <a href="#/photos" >Photos</a>
+    <a href="#" >Home</a>
+
+    <h3><a data-ng-href="#/photo/{{id}}" title="source: {{photo.uri}}">{{photo.name}}</a></h3>
+    <p data-ng-bind="photo.description" ></p>
+    <p data-ng-bind="photo.copyright" ></p>
+    <small>{{photo.updated_at}}</small>
+</div>

app/assets/templates/photos.html

@@ -0,0 +1,19 @@
+<div id="content" data-ng-controller="PhotosCtrl">
+    <h1>Photo List</h1>
+
+    <p>These are the available photos.</p>
+
+    <a href="#/">Home</a>
+
+    <ul>
+        <li data-ng-repeat="photo in photos">
+            <div>
+                <h3><a data-ng-href="#/photo/{{id}}" title="source: {{photo.uri}}">{{photo.name}}</a></h3>
+                <p data-ng-bind="photo.description" ></p>
+                <p data-ng-bind="photo.copyright" ></p>
+                <small>{{photo.updated_at}}</small>
+            </div>
+        </li>
+
+    </ul>
+</div>

app/assets/templates/project.html

@@ -1,20 +1,13 @@
-<h1>This is a project listing</h1>
+<div id="content" data-ng-controller="ProjectCtrl">
+    <h2>Project</h2>
 
-<p>{{ProjectName}}</p>
+    <p>The details for a project.</p>
 
-<ul>
-    <li ng-repeat="project in projectList">
-        <div>
-            <h3>{{project.name}}</h3>
-            <p ng-bind="project.description" ></p>
-            <a ng-href="{{project.urn}}">{{project.urn}}</a>
+    <a href="#/projects">Projects</a>
+    <a href="#/">Home</a>
 
-            <pre>{{project.notes}}</pre>
-
-            <small>{{updated_at}}</small>
-
-        </div>
-    </li>
-
-    </ul>
-    <a href="#/" >less fun times</a>
+    <h3><a ng-href="{{project.urn}}">{{project.name}}</a></h3>
+    <p ng-bind="project.description" ></p>
+    <pre>{{project.notes}}</pre>
+    <small>{{updated_at}}</small>
+</div>