Project editing page almost complete - cancel button does not reset t…

…ags, need indicator for update in progress. This structure can be reused on all other editing pages. modified: app/assets/javascripts/angular/controllers/projects.js modified: app/assets/javascripts/angular/services/services.js modified: app/assets/stylesheets/_base.css.scss modified: app/assets/stylesheets/_layout.css.scss modified: app/assets/templates/project_details.html
QutEcoacoustics · Dec 20, 2012 · 375c2ac · 375c2ac
1 parent d1f657a
commit 375c2ac
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 58 deletions.
diff --git a/app/assets/javascripts/angular/controllers/projects.js b/app/assets/javascripts/angular/controllers/projects.js
@@ -24,21 +24,40 @@ ProjectsCtrl.linkList = function (id) {
 ProjectsCtrl.$inject = ['$scope', '$resource', 'Project'];
 
 
-function ProjectCtrl($scope, $resource, $routeParams, Project) {
+function ProjectCtrl($scope, $resource, $routeParams, Project, Site) {
 
     var projectResource = Project; //$resource('/projects/:projectId', {projectId: $routeParams.projectId});
     var routeArgs = {projectId: $routeParams.projectId};
 
+    $scope.siteIds = [];
+
     $scope.editing = $routeParams.editing === "edit";
 
     $scope.project = projectResource.get(routeArgs, function () {
         $scope.links = ProjectsCtrl.linkList($scope.project.id);
 
         if ($scope.editing) {
-            $scope.original = this;
+            $scope.original = angular.copy($scope.project);
         }
-    });
 
+        // HACK: race condition requires this be done later (not sure what we're racing)
+        setTimeout(function(){
+            // need ids to pre-populate selector
+            var currentSiteIds = $scope.project.sites || [];
+            for(var index=0;currentSiteIds.length > index;index++){
+                $scope.siteIds.push(currentSiteIds[index].id.toString());
+            }
+
+            // HACK: and this too...
+            $scope.$apply(function() {  });
+        }, 800);
+
+
+        //$scope.siteIds.push(($scope.project.sites || []).map(function(value) {return value.id.toString()} );
+
+        //$scope.$apply(function() { $scope.siteIds.push(-1); });
+        //$scope.$apply(function() { $scope.siteIds.pop(); });
+    });
 
     $scope.links = {};
 
@@ -50,28 +69,27 @@ function ProjectCtrl($scope, $resource, $routeParams, Project) {
     };
 
     $scope.reset = function() {
-        $scope.project = $scope.original;
+        $scope.project = angular.copy($scope.original);
     };
 
     $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.siteIds = (this.project.sites || []).map(function(value) {return value.id} );
-
-        // validation
-        if(!p.name){
-
-        }
-
-        projectResource.update(routeArgs, p,  function() {console.log("success update")}, function() { console.log("failed update")} );
+        var p = { "project": {} };
+        p.project.name = $scope.project.name;
+        p.project.urn = $scope.project.urn;
+        p.project.description = $scope.project.description;
+        p.project.notes = $scope.project.notes;
+
+        p.project.siteIds = $scope.siteIds;
+
+        projectResource.update(routeArgs, p,  function() {
+            console.log("success update");
+            $scope.original = angular.copy($scope.project);
+        }, function() { console.log("failed update")} );
     };
 
+    $scope.allSites = Site.query();
 }
 
-ProjectCtrl.$inject = ['$scope', '$resource', '$routeParams', 'Project'];
+ProjectCtrl.$inject = ['$scope', '$resource', '$routeParams', 'Project', 'Site'];
 
diff --git a/app/assets/javascripts/angular/services/services.js b/app/assets/javascripts/angular/services/services.js
@@ -23,6 +23,10 @@
         return resourcePut($resource, '/projects/:projectId', {projectId: "@projectId"});
     });
 
+    bawss.factory('Site', function ($resource) {
+        return resourcePut($resource, '/sites/:siteId', {projectId: "@siteId"});
+    });
+
     bawss.factory('AudioRecording', function ($resource) {
         return resourcePut($resource, '/audio_recordings/:recordingId', {recordingId: '@recordingId'});
     });

diff --git a/app/assets/stylesheets/_base.css.scss b/app/assets/stylesheets/_base.css.scss
@@ -22,6 +22,8 @@ $master-dark:           #2C2C2A #1D1D0E #78787A;
 $master-dark-2:         #212120 #1D1D0E #AEADAC;
 $master-complementary:  #4A2B66 #73305F #34346A;
 
+$error-dirty:           rgba(216, 109, 132, 0.7) rgba(216, 109, 132, 0.4) rgba(216, 109, 132, 0.1);
+
 $standard-padding-horizontal: 0.5em;
 $standard-padding-vertical:   0.25em;
 $standard-padding:             $standard-padding-vertical $standard-padding-horizontal;

diff --git a/app/assets/stylesheets/_layout.css.scss b/app/assets/stylesheets/_layout.css.scss
@@ -63,11 +63,6 @@ body {
   height: 100%;
 }
 
-
-input {
-  vertical-align: middle;
-}
-
 img {
   border: none;
 }
@@ -76,17 +71,6 @@ html {
   height: 100%;
 }
 
-label {
-
-  &>span {
-    display: block;
-  }
-
-  &>span + * {
-    margin-left: 2em;
-  }
-}
-
 li {
 
   & ul, & ol {
@@ -122,11 +106,6 @@ table {
   }
 }
 
-textarea {
-  width: 400px;
-  height: 200px;
-}
-
 ul {
   @extend ol;
   list-style-type:disc;
@@ -136,11 +115,6 @@ ul {
   }
 }
 
-button {
-  padding: 1px 6px;
-  margin: 2px;
-}
-
 /* Header
 -----------------------------------------------------------------------------*/
 header {
@@ -253,20 +227,78 @@ body:before {
   min-width: 150px;
 }
 
-/* Validation Styles
---------------------------------------------------------------------------------*/
-input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty {
-  background-color: #FA787E;
+/* Form Styles
+-----------------------------------------------------------------------------*/
+
+input {
+  vertical-align: middle;
+}
+
+label {
+
+  &>span {
+    display: block;
+    font-weight: bold;
+  }
+
+  &>span + * {
+    margin-left: 2em;
+    font-weight: normal;
+  }
+
+  & > input, & > textarea {
+    //@include vendor-prefix(box-shadow, 0px 0px 8px rgba(0, 0, 0, 0.3));
+    border: 1px solid nth($primary-color, 2);
+
+  }
+}
+
+button {
+  padding: 2px 6px;
+  margin: 2px;
+  @include gradient("linear", #F5FFD9, nth($master-highlight-2,1));
+  border: 1px solid nth($master-highlight-2,2);
+  @extend .rounded-corners;
+  font-size: 11pt;
+}
+
+button:hover {
+  @include vendor-prefix(box-shadow, 0px 0px 8px nth($master-highlight-2, 2));
+  border:1px solid nth($master-highlight-2, 2);
+}
+
+textarea {
+  width: 450px;
+  height: 150px;
+}
+
+textarea:focus, input:focus{
+  outline:none;
+  @include vendor-prefix(box-shadow, 0px 0px 8px nth($master-highlight-2, 2));
+}
+
+/* Form Validation Styles
+------------------------------------------------------------------------------*/
+input, textarea{
+  background-color: nth($master-background, 2);
+}
+
+input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty,  {
+  border-color: nth($error-dirty, 2);
+  @include vendor-prefix(box-shadow, 0px 0px 8px nth($error-dirty, 2));
+  background-color: nth($error-dirty, 3);
 }
 
 input.ng-valid.ng-dirty, textarea.ng-valid.ng-dirty {
-  background-color: #78FA89;
+  border: 1px solid nth($primary-color, 2);
 }
 
 input.ng-pristine.ng-valid, textarea.ng-pristine.ng-valid {
-  background-color: #e4e4e4;
+  border: 1px solid nth($primary-color, 2);
 }
 
 input.ng-pristine.ng-invalid, textarea.ng-pristine.ng-invalid {
-  background-color: #f7c0c0;
+  border: 1px solid nth($primary-color, 3);
+  @include vendor-prefix(box-shadow, 0px 0px 8px nth($primary-color, 3));
+  background-color: nth($primary-color, 3);
 }
diff --git a/app/assets/templates/project_details.html b/app/assets/templates/project_details.html
@@ -1,11 +1,8 @@
 <div id="content" data-ng-controller="ProjectCtrl" >
     <a href="/projects">Projects</a>
     <a href="/projects/manage">Project Manager</a>
-    <a href="/">Home</a>
 
-    <h2>Project {{editing | boolToWords:' editing':'details'}}</h2>
-
-    <p>The details for a project.</p>
+    <h2>Project {{editing | boolToWords:'Editing':'Details'}}</h2>
 
     <p>
      <a ng-show="editing" ng-href="{{links.details}}" >cancel</a>
@@ -44,9 +41,14 @@ <h3>Sites</h3>
                 <textarea baw-json-binding ng-model="project.notes"></textarea>
             </label>
             <label>
-                <span>Sites</span>
-                <em> -- TO DO -- </em>
+                <span ng-click="siteIds=siteIds" title="{{siteIds|json}}">Sites </span>
+                <select ng-multiple="true" tags multiple ui-select2="{allowClear:true }"
+                        ng-model="siteIds" data-placeholder="Select Sites">
+                    <option></option>
+                    <option ng-repeat="s in allSites" value="{{s.id}}">{{s.name}}</option>
+                </select>
             </label>
+            <br><br>
             <button ng-click="reset()">Cancel</button>
             <button ng-click="update(project)">Save</button>
         </form>