Refs #4498

The controller works, started working on designing this.
parent 6b32bf8f
<div class="row">
<div class="col-xs-12 col-md-6">
<h2>New Project</h2>
<form class="form-horizontal" role="form" name="project-form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="grantNo">Grant No</label>
<div class="col-xs-2 col-md-2">
<div class="col-md-4">
<input ng-model="project.grantNo" id="grantNo" name="grantNo" type="text" placeholder="Grant No"
class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="title">Title</label>
<h2>Existing projects</h2>
<div class="col-md-4">
<input ng-model="project.titl" id="title" name="title" type="text" placeholder="Title"
class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="authEnty">AuthEnty</label>
<div class="col-md-4">
<input ng-model="project.authEnty" id="authEnty" name="authEnty" type="text" placeholder="AuthEnty"
class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="timePrd">TimePrd</label>
<div class="col-md-4">
<input ng-model="project.timePrd" id="timePrd" name="timePrd" type="text" placeholder="TimePrd"
class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fundAg">Fund Ag</label>
<div class="col-md-4">
<input ng-model="project.fundAg" id="fundAg" name="fundAg" type="text" placeholder="Fund Ag"
class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="abs">Abs</label>
<div class="alert alert-danger" role="alert" ng-show="listError != null">
{{listError}}
</div>
<div class="list-group">
<div ng-repeat="project in projects.content">
<a href class="list-group-item" ng-click="setCurrentProject(project)" ng-class="active" ng-mouseenter="active">
<h4 class="list-group-item-heading">{{project.titl}}</h4>
<p class="list-group-item-text">
<span ng-show="project.producer">Producer: {{project.producer}}</span>
<span ng-show="project.producer == null">Producer: No known producer</span>
<br/>
<span>AuthEnty: {{project.authEnty}}</span>
</p>
</a>
<p/>
</div>
</div>
<div class="col-md-4">
<input ng-model="project.abs" id="abs" name="abs" type="text" placeholder="Abs"
class="form-control input-md">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="post"></label>
<input type="button" class="btn btn-info btn-sm" value="Previous" ng-click="pagePrevious()">
<button class="btn btn-info btn-sm" value="{{projects.page.number}}" disabled><span class="badge">{{projects.page.number}}</span>
</button>
<input type="button" class="btn btn-info btn-sm" value="Next" ng-click="pageNext()">
<div class="col-md-8">
<button type="submit" id="post" name="post" class="btn btn-success" ng-click="createProject()">Save
</button>
<button id="clear" name="clear" class="btn btn-warning" ng-click="resetProjectForm()">Clear</button>
</div>
</div>
<div class="alert alert-danger" role="alert" ng-show="postError != null">
{{postError}}
</div>
</form>
</div>
<div class="col-xs-12 col-md-6">
<h2>DataSet</h2>
<div class="col-xs-10 col-md-10">
<h2>Project</h2>
<hr/>
<div class="col-xs-4 col-md-4">
<div ng-include="'/partials/project/project_current.html'" ng-show="currentProject"></div>
<div ng-include="'/partials/project/project_form.html'" ng-hide="currentProject"></div>
</div>
<div class="col-xs-6 col-md-6">
<div ng-include="'/partials/project/project_current_dataset.html'" ng-show="currentProject && currentDataSet"></div>
<div ng-include="'/partials/project/project_dataset.html'" ng-show="showDataSetForm"></div>
<div ng-include="'/partials/project/project_datasetfile.html'" ng-show="showDataSetFileForm"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="alert alert-danger" role="alert" ng-show="listError != null">
{{listError}}
</div>
<div ng-repeat="p in projects">
{{p.id}}<br/>
{{p.grantNo}}<br/>
{{p.titl}}<br/>
{{p.producer}}<br/>
{{p.authEnty}}<br/>
{{p.timePrd}}<br/>
{{p.fundAg}}<br/>
{{p.abs}}<br/>
</div>
</div>
<div class="col-xs-12 col-md-6">
<h3>DataSet Files</h3>
</div>
</div>
<div id="current-project">
GrantNo {{currentProject.grantNo}}<br/>
<h4>{{currentProject.titl}}</h4>
{{currentProject.producer}}<br/>
{{currentProject.authEnty}}<br/>
{{currentProject.timePrd}}<br/>
{{currentProject.fundAg}}<br/>
{{currentProject.abs}}<br/>
<a href ng-click="showDataSet(true)">Add DataSet</a>
<hr />
<div ng-repeat="dataset in currentProject.dataSets">
set
{{dataset.geogCover}} <br />
{{dataset.nation.name}}<br />
{{dataset.sampProc}}<br />
</div>
</div>
<div id="current-project">
<h4>Data Set</h4>
<form class="form-horizontal" role="form" name="dataSet-form">
<div class="form-group">
<label class="col-md-4 control-label" for="collDate">collDate</label>
<div class="col-md-4">
<input ng-model="dataSet.collDate" id="collDate" name="" type="text" placeholder="collDate"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="nation">nation</label>
<div class="col-md-4">
<select ng-model="dataSet.nation" class="form-control"
ng-options="nation.name for nation in nations">
<option value="" disabled selected>Select nation</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="geogCover">geogCover</label>
<div class="col-md-4">
<input ng-model="dataSet.geogCover" id="geogCover" name="geogCover" type="text" placeholder="geogCover"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="anlyUnit">anlyUnit</label>
<div class="col-md-4">
<input ng-model="dataSet.anlyUnit" id="anlyUnit" name="anlyUnit" type="text" placeholder="anlyUnit"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="universe">universe</label>
<div class="col-md-4">
<input ng-model="dataSet.universe" id="universe" name="universe" type="text" placeholder="universe"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sampProc">sampProc</label>
<div class="col-md-4">
<input ng-model="dataSet.sampProc" id="sampProc" name="sampProc" type="text" placeholder="sampProc"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="timeMeth">timeMeth</label>
<div class="col-md-4">
<input ng-model="dataSet.timeMeth" id="timeMeth" name="timeMeth" type="text" placeholder="timeMeth"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="collMode">collMode</label>
<div class="col-md-4">
<input ng-model="dataSet.collMode" id="collMode" name="collMode" type="text" placeholder="collMode"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="dataCollectorAffiliation">dataCollectorAffiliation</label>
<div class="col-md-4">
<input ng-model="dataSet.dataCollectorAffiliation" id="dataCollectorAffiliation" name="dataCollectorAffiliation" type="text" placeholder="dataCollectorAffiliation"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="isAnonymous">isAnonymous</label>
<div class="col-md-4">
<input ng-model="dataSet.isAnonymous" id="isAnonymous" name="isAnonymous" type="text" placeholder="isAnonymous"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="post"></label>
<div class="col-md-8">
<button type="submit" id="post" name="post" class="btn btn-success" ng-click="createDataSet()">Save
</button>
<button id="clear" name="clear" class="btn btn-warning" ng-click="resetDataSet()">Clear</button>
</div>
</div>
<div class="alert alert-danger" role="alert" ng-show="postError != null">
{{postError}}
</div>
</form>
<a href ng-click="showDataSetFile(true)">Add File</a>
</div>
<div class="upload-buttons">
<form name="fileForm">
<fieldset>
<legend>Add file</legend>
<input type="file" ng-file-select ng-model="file" name="file" accept="*/*" required>
<i ng-show="myForm.file.$error.required">*required</i>
<br/>
<button ng-disabled="!fileForm.$valid" ng-click="uploadFile(file)">Submit</button>
</fieldset>
<br/>
</form>
</div>
<div class="err" ng-show="errorMsg != null">{{errorMsg}}</div>
<progressbar animate="false" value="uploadProgress" type="success"><b>{{uploadProgress}}%</b></progressbar>
<div id="project-form">
<form class="form-horizontal" role="form" name="project-form">
<div class="form-group">
<label class="col-md-4 control-label" for="grantNo">Grant No</label>
<div class="col-md-4">
<input ng-model="project.grantNo" id="grantNo" name="grantNo" type="text" placeholder="Grant No"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="title">Title</label>
<div class="col-md-4">
<input ng-model="project.titl" id="title" name="title" type="text" placeholder="Title"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="authEnty">AuthEnty</label>
<div class="col-md-4">
<input ng-model="project.authEnty" id="authEnty" name="authEnty" type="text" placeholder="AuthEnty"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="timePrd">TimePrd</label>
<div class="col-md-4">
<input ng-model="project.timePrd" id="timePrd" name="timePrd" type="text" placeholder="TimePrd"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="fundAg">Fund Ag</label>
<div class="col-md-4">
<input ng-model="project.fundAg" id="fundAg" name="fundAg" type="text" placeholder="Fund Ag"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="abs">Abs</label>
<div class="col-md-4">
<input ng-model="project.abs" id="abs" name="abs" type="text" placeholder="Abs"
class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="post"></label>
<div class="col-md-8">
<button type="submit" id="post" name="post" class="btn btn-success" ng-click="createProject()">Save
</button>
<button id="clear" name="clear" class="btn btn-warning" ng-click="resetProjectForm()">Clear</button>
</div>
</div>
<div class="alert alert-danger" role="alert" ng-show="postError != null">
{{postError}}
</div>
</form>
</div>
......@@ -5,7 +5,9 @@
* This is where it is all "glued" together, more or less.
*/
var archivingPortalClient = angular.module('archivingPortalClient',
['ngRoute',
[
// AngularJS and third party modules (bower.js)
'ngRoute',
'ngAnimate',
'ngCookies',
'ngTouch',
......@@ -13,6 +15,9 @@ var archivingPortalClient = angular.module('archivingPortalClient',
'ngResource',
'ngRoute',
'ui.bootstrap',
'angularFileUpload',
// NSD Modules (/app/**)
'archivingPortalClient.directives',
'archivingPortalClient.loginService',
'archivingPortalClient.userService',
......
'use strict';
var ProjectController = function($scope, $log, $http) {
var ProjectController = function($scope, $log, $http, $upload, ProjectList, Nations, TokenService) {
// Form data stuff
$scope.nations = Nations.query();
// Scope models
$scope.project = {};
$scope.projects = [];
$scope.projects = {};
$scope.dataSet = {};
$scope.uploadProgress = 0;
// Show or hide the dataset form
$scope.showDataSet = function(show) {
$scope.showDataSetForm = !!show;
};
// Show or hide the datasetfile form
$scope.showDataSetFile = function(show) {
$scope.showDataSetFileForm = !!show;
};
// Size of project pages
var pageSize = 5;
/**
* Handle the pagination and navigation of existing projects
* for the currently logged in user.
*/
$scope.projects = ProjectList.query({size: 5, page: 0});
$scope.pageNext = function() {
$log.info($scope.projects.page);
var page = $scope.projects.page.number + 1;
$scope.projects = ProjectList.query({size: pageSize, page: page});
};
$scope.pagePrevious = function() {
$log.info($scope.projects.page);
var page = $scope.projects.page.number - 1;
$scope.projects = ProjectList.query({size: pageSize, page: page});
};
$scope.setCurrentProject = function(project) {
$log.info(project);
$scope.currentProject = project;
$scope.showDataSet(false);
$scope.showDataSetFile(false);
};
/**
* Create a new project and set the current active
* project in scope to the project returned by the server.
*/
$scope.createProject = function() {
$http.post($scope.portalApiUrl+'project/create', $scope.project)
.success(function(val) {
$log.info(val);
.success(function(project) {
$scope.currentProject = project;
}).error(function () {
$scope.postError = "There are errors in your form.";
$log.error("Unable to post -> " + angular.toJson($scope.project));
});
};
// Reset the form.
$scope.resetProjectForm = function() {
$scope.project = {};
};
$scope.list = function() {
$http({method: 'GET', url: apiUrl+'project/list'}).
success(function (data) {
$scope.projects = data;
}).
error(function (data) {
$scope.listError = "Unable to fetch projects from server";
/**
* Create a new project dataset based on the current project's i
* and set the current active dataset in scope to the dataset
* returned by the swerver.
*/
$scope.createDataSet = function() {
$http.post($scope.portalApiUrl+'project/'+$scope.currentProject.id+'/create/dataset', $scope.dataSet)
.success(function(dataSet) {
$scope.currentDataSet = dataSet;
$scope.showDataSet(false);
$scope.showDataSetFile(true);
}).error(function () {
$scope.postError = "There are errors in your form.";
$log.error("Unable to post -> " + angular.toJson($scope.dataSet));
});
};
$scope.list();
// Reset the form.
$scope.resetDataSetForm = function() {
$scope.dataSet = {};
};
/**
* Upload a file to the backend service sending
* one multipart file with the Oauth2 token.
* @param files
*/
$scope.uploadFile = function(files) {
$scope.formUpload = true;
if (files != null) {
var file = files[0];
$scope.upload = $upload.upload({
url: $scope.portalApiUrl+'project/create/dataset/1/file/',
method: 'POST',
headers: {'Authorization': 'Bearer ' + TokenService.getToken()},
file: file
}).progress(function(evt) {
$scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :'+ evt.config.file.name);
}).success(function(data, status, headers, config) {
console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
});
}
};
};
'use strict';
var projectService = angular.module('archivingPortalClient.projectService', ['ngResource']);
userService.service('ProjectList', ['$resource',
function($resource) {
return $resource(apiUrl+'project/list', {}, {
query:{
size: '@size',
page: '@page'
}
});
}
]);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment