merge
[u/erikhf/frm.git] / src / components / sidebar / sidebar.html
1 <div>
2     <div [hidden]="!active" class="form-background sidebar slide" style="overflow-y:auto; position:relative; float:right; ">
3         <button id="slideout" (click)="exit()"><span class="glyphicon glyphicon-chevron-right"></span> </button>
4         <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
5             <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
6
7             <div class="form-group">
8                 <label>Name</label>
9                 <input class="form-control" type="text" ng-control="name">
10                 <p [hidden]="name.valid || name.untouched" class="alert alert-danger">
11                     Name is required
12                 </p>
13
14             </div>
15             <div class="form-group">
16                 <label>Short Name</label>
17                 <input class="form-control" type="text" ng-control="shortName" #shortname="form">
18
19                 <p [hidden]="shortname.valid || shortname.untouched" class="alert alert-danger">
20                     Short name is required
21                 </p>
22             </div>
23
24             <div class="form-group">
25                 <label>Description</label>
26                 <textarea class="form-control" ng-control="description" rows="3"></textarea>
27             </div>
28             <div class="form-group">
29                 <label>Code</label>
30                 <input class="form-control" type="text" ng-control="code">
31             </div>
32
33             <div class="form-group">
34                 <label>Opening Date</label>
35                 <input class="form-control" type="date" ng-control="openingDate" #openingDate="form">
36
37                 <p [hidden]="openingdate.valid || openingdate.untouched" class="alert alert-danger">Opening date is required</p>
38             </div>
39             <div class="form-group">
40                 <label>Closed Date</label>
41                 <input class="form-control" type="date" ng-control="closedDate">
42             </div>
43             <div class="form-group">
44                 <label>URL</label>
45                 <input class="form-control" type="url" ng-control="url" #url="form">
46
47                 <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
48             </div>
49             <fieldset class="form-group">
50                 <Legend>Coordinates</Legend>
51                 <div *ng-if="featureType.value == 'POINT'" class="form-group">
52                     <label>Latitude</label>
53                     <input class="form-control" type="number" ng-control="lat" #lat="form" step="any" max="90" min="-90"/>
54                     <label>Longitude</label>
55                     <input class="form-control" type="number" ng-control="lng" #lng="form" step="any" max="180" min="-180"/>
56                 </div>
57                 <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
58                     <p>This organisation unit has no associated coordinates</p>
59                 </div>
60             </fieldset>
61
62             <fieldset ng-control-group="organisationUnitGroups">
63                 <legend>Groups</legend>
64                 <div class="form-group" *ng-for="#groupSet of groupSets; #i = index">
65
66                     <label>{{groupSet.name}}</label>
67                     <select ng-control="{{i}}" class="form-control" disabled>
68                         <option>-------- not applicable --------</option>
69                         <option *ng-for="#group of groupsDoubleArray[i]">{{group.name}}</option>
70                     </select>
71                 </div>
72             </fieldset>
73
74             <fieldset class="form-group">
75                 <legend>Contact information</legend>
76                 <label>Contact person</label>
77                 <input class="form-control" type="text" ng-control="contactPerson"/>
78                 <label>Address</label>
79                 <input class="form-control" type="text" ng-control="address"/>
80                 <label>E-mail</label>
81                 <input class="form-control" type="email" ng-control="email"/>
82                 <label>Phone number</label>
83                 <input class="form-control" type="text" ng-control="phoneNumber"/>
84             </fieldset>
85             <button type="button" (click)="cancel()" class="btn btn-default">Cancel</button>
86             <button type="submit" [disabled]="!of.form.valid" class="btn btn-default">{{newObject? "Add":"Update"}}
87             </button>
88
89         </form>
90
91
92         <section id="nonedit" *ng-if="!editmode">
93             <label class="label-text" for="actOrgUnitName">Name</label>
94
95             <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p><hr>
96
97             <label class="label-text" for="actOrgUnitShortName">Short Name</label>
98
99             <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p><hr>
100
101             <label class="label-text" for="actOrgUnitDescription">Description</label>
102
103             <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p><hr>
104
105             <label class="label-text" for="actOrgUnitCode">Code</label>
106
107             <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p><hr>
108
109             <label class="label-text" for="actOrgUnitOpeningDate">Opening Date</label>
110
111             <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p><hr>
112
113             <label class="label-text" for="actOrgUnitClosingDate">Closed Date</label>
114
115             <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p><hr>
116
117             <label class="label-text" for="actOrgUnitURL">Url</label>
118
119             <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p><hr>
120
121             <fieldset>
122                 <legend>Coordinates</legend>
123                 <div *ng-if="featureType.value == 'POINT'" class="form-group">
124                     <label>Latitude</label>
125                     <p>{{form.controls.lat.value}}</p>
126                     <label>Longitude</label>
127                     <p>{{form.controls.lng.value}}</p>
128                 </div>
129                 <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
130                     <p>This organisation unit has no associated coordinates</p>
131                 </div>
132                 <div *ng-if="featureType.value == 'POLYGON' || featureType.value == 'MULTI_POLYGON'">
133                     <p>polygon</p>
134                 </div>
135
136             </fieldset>
137
138             <fieldset>
139                 <legend>Contact Information</legend>
140                 <label>Contact person</label>
141                 <p>{{form.controls.contactPerson.value || ["None"]}}</p>
142                 <label>Address</label>
143                 <p>{{form.controls.address.value || ["None"]}}</p>
144                 <label>E-mail</label>
145                 <p>{{form.controls.email.value || ["None"]}}</p>
146                 <label>Phone number</label>
147                 <p>{{form.controls.phoneNumber.vaule || ["None"]}}</p>
148             </fieldset>
149             <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
150         </section>
151
152     </div>
153 </div>