storyboard-webclient/src/app/projects/template/new.html

142 lines
6.8 KiB
HTML

<!--
~ Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
~
~ Licensed under the Apache License, Version 2.0 (the "License"); you may
~ not use this file except in compliance with the License. You may obtain
~ a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
~ License for the specific language governing permissions and limitations
~ under the License.
-->
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" aria-hidden="true"
ng-click="close()">&times;</button>
<h3 class="panel-title">New Project</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" role="form" name="projectForm">
<div class="form-group has-feedback"
ng-class="{'has-error': projectForm.name.$invalid,
'has-success': !projectForm.name.$invalid}">
<label for="name" class="col-sm-2 control-label">
Name
</label>
<div class="col-sm-10">
<input id="name"
name="name"
type="text"
class="form-control"
ng-model="newProject.name"
required
ng-pattern="PROJECT_NAME_REGEX"
maxlength="50"
ng-minlength="5"
placeholder="Project Name">
<span class="form-control-feedback"
ng-show="projectForm.name.$invalid">
<i class="fa fa-times fa-lg"></i>
</span>
<span class="form-control-feedback"
ng-show="!projectForm.name.$invalid">
<i class="fa fa-check fa-lg"></i>
</span>
<div class="help-block text-danger"
ng-show="projectForm.name.$invalid">
<span ng-show="projectForm.name.$error.required">
A project name is required.
</span>
<span ng-show="projectForm.name.$error.pattern">
A project name must begin with a letter, and
may only contain letters, numbers, forward
slashes, periods, and dashes. It should not
start or end with a separator and must not
contain two or more sequential separators.
</span>
<span ng-show="projectForm.name.$error.minlength">
A project name must have at least 5 characters.
</span>
</div>
</div>
</div>
<hr ng-show="preview">
<div class="form-group" ng-show="preview">
<div class="col-sm-offset-1 col-sm-10">
<insert-markdown content="newProject.description">
</insert-markdown>
</div>
</div>
<hr ng-show="preview">
<div class="form-group has-feedback"
ng-class="{'has-error': projectForm.description.$invalid,
'has-success': !projectFrom.description.$invalid}">
<label for="description"
class="col-sm-2 control-label">
Description
</label>
<div class="col-sm-10">
<textarea id="description"
name="description"
class="form-control"
ng-model="newProject.description"
msd-elastic
required
placeholder="A brief project description">
</textarea>
<span class="form-control-feedback"
ng-show="projectForm.description.$invalid">
<i class="fa fa-times fa-lg"></i>
</span>
<span class="form-control-feedback"
ng-show="!projectForm.description.$invalid">
<i class="fa fa-check fa-lg"></i>
</span>
<div class="help-block text-danger"
ng-show="projectForm.description.$invalid">
<span ng-show="projectForm.description.$error.required">
A project description is required.
</span>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-xs-12 text-right">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button"
class="btn btn-primary"
ng-click="preview = !preview">
Preview Description
</button>
<button type="button"
ng-click="createProject()"
class="btn btn-primary"
ng-disabled="!projectForm.$valid">
Create project
</button>
<a href ng-click="close()"
class="btn btn-default">
Cancel
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>