]> git.uio.no Git - u/erikhf/frm.git/blobdiff - src/components/sidebar/sidebar.html
fix in adding and editing markers
[u/erikhf/frm.git] / src / components / sidebar / sidebar.html
index f91ea6b4f075f707c01c3dcce82057b1b5f708fa..41e57b15d77f712c586d8b68b8fbd93d6c1ef28f 100644 (file)
 <div>
-    <div *ng-if="activeOrgUnit">
-        <form *ng-if="editmode">
+    <div [hidden]="!active" class="form-background sidebar slide"
+         style="overflow-y:auto; position:relative; float:right; ">
+
+        <button id="slideout" class="btn btn-default" (click)="exit()"><span
+                class="glyphicon glyphicon-chevron-right"></span></button>
+
+        <form class="formsidebar" *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
+            <hr>
+
+            <legend><span class="glyphicon glyphicon-edit"></span> {{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</legend>
+            <hr>
+
             <div class="form-group">
-                <label>Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.name">
+                <label class="label-text">Name</label>
+                <input class="form-control" type="text" ng-control="name">
+
+                <p [hidden]="name.valid || name.untouched" class="alert alert-danger">
+                    Name is required
+                </p>
+
             </div>
             <div class="form-group">
-                <label>Short Name</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.shortName">
+                <label class="label-text">Short Name</label>
+                <input class="form-control" type="text" ng-control="shortName" #shortname="form">
+
+                <p [hidden]="shortname.valid || shortname.untouched" class="alert alert-danger">
+                    Short name is required
+                </p>
             </div>
+
             <div class="form-group">
-                <label>Description</label>
-                <textarea class="form-control" [(ng-model)]="activeOrgUnit.description" rows="3"></textarea>
+                <label class="label-text">Description</label>
+                <textarea class="form-control" ng-control="description" rows="3"></textarea>
             </div>
             <div class="form-group">
-                <label>Code</label>
-                <input class="form-control" type="text" [(ng-model)]="activeOrgUnit.code">
+                <label class="label-text">Code</label>
+                <input class="form-control" type="text" ng-control="code">
             </div>
+
             <div class="form-group">
-                <label>Opening Date</label>
-                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.openingDate">
+                <label class="label-text">Opening Date</label>
+                <input class="form-control" type="date" ng-control="openingDate" #openingDate="form">
+
+                <p [hidden]="openingdate.valid || openingdate.untouched" class="alert alert-danger">Opening date is
+                    required</p>
             </div>
             <div class="form-group">
-                <label>Closed Date</label>
-                <input class="form-control" type="date" [(ng-model)]="activeOrgUnit.closedDate">
+                <label class="label-text">Closed Date</label>
+                <input class="form-control" type="date" ng-control="closedDate">
             </div>
             <div class="form-group">
-                <label>URL</label>
-                <input class="form-control" type="url" [(ng-model)]="activeOrgUnit.closedDate">
+                <label class="label-text">URL</label>
+                <input class="form-control" type="url" ng-control="url" #url="form">
+
+                <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
             </div>
+            <hr>
             <fieldset class="form-group">
-                <legend>Group(s)</legend>
-                <div *ng-for="#group of activeOrgUnit.organisationUnitGroups">
-                    <input class="form-control" type="text" [(ng-model)]="group.name">
+                <Legend><span class="glyphicon glyphicon-map-marker"></span> Coordinates</Legend>
+                <hr>
+
+                <div *ng-if="featureType.value == 'POINT'" class="form-group">
+                    <label class="label-text">Latitude</label>
+                    <input class="form-control" type="number" ng-control="lat" #lat="form" step="any" max="90"
+                           min="-90"/>
+                    <label class="label-text">Longitude</label>
+                    <input class="form-control" type="number" ng-control="lng" #lng="form" step="any" max="180"
+                           min="-180"/>
+                </div>
+                <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
+                    <span class="glyphicon glyphicon-info-sign glyinfo"></span> <p>This organisation unit has no associated coordinates</p>
                 </div>
             </fieldset>
+            <hr>
+            <fieldset ng-control-group="organisationUnitGroups">
+
+                <legend><span class="glyphicon glyphicon-list-alt"></span> Groups</legend>
+                <hr>
+
+                <div class="form-group" *ng-for="#groupSet of groupSets; #i = index">
+
+                    <label class="label-text">{{groupSet.name}}</label>
+                    <select ng-control="{{i}}" class="form-control" disabled>
+                        <option>-------- not applicable --------</option>
+                        <option *ng-for="#group of groupsDoubleArray[i]">{{group.name}}</option>
+                    </select>
+                </div>
+            </fieldset>
+            <hr>
+            <fieldset class="form-group">
+
+                <legend> <span class="glyphicon glyphicon-phone-alt"></span> Contact information</legend>
+                <hr>
+                <label class="label-text">Contact person</label>
+                <input class="form-control" type="text" ng-control="contactPerson"/>
+                <label class="label-text">Address</label>
+                <input class="form-control" type="text" ng-control="address"/>
+                <label class="label-text">E-mail</label>
+                <input class="form-control" type="email" ng-control="email"/>
+                <label class="label-text">Phone number</label>
+                <input class="form-control" type="text" ng-control="phoneNumber"/>
+            </fieldset>
+            <hr>
+            <button type="button" (click)="cancel()" class="btn btn-default buttonsidebar">Cancel</button>
+            <button type="submit" [disabled]="!of.form.valid" class="btn btn-default buttonsidebar">{{newObject?"Add":"Update"}}
+            </button>
+
         </form>
-        <section *ng-if="!editmode">
-            <label for="actOrgUnitName">Name</label>
 
-            <p id="actOrgUnitName">{{(activeOrgUnit.name) || "[None]"}}</p>
 
-            <label for="actOrgUnitShortName">Short Name</label>
+        <section id="nonedit" *ng-if="!editmode">
 
-            <p id="actOrgUnitShortName">{{(activeOrgUnit.shortName)||["None"]}}</p>
 
-            <label for="actOrgUnitDescription">Description</label>
+            <hr>
+            <legend><span class="glyphicon glyphicon-home"></span> Facility</legend>
+            <hr>
 
-            <p id="actOrgUnitDescription">{{(activeOrgUnit.description)||"None"}}</p>
+            <label class="label-text" for="actOrgUnitName">Name</label>
 
-            <label for="actOrgUnitCode">Code</label>
+            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p>
 
-            <p id="actOrgUnitCode">{{(activeOrgUnit.code)||["None"]}}</p>
+            <label class="label-text" for="actOrgUnitShortName">Short Name</label>
 
-            <label for="actOrgUnitOpeningDate">Opening Date</label>
+            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p>
 
-            <p id="actOrgUnitOpeningDate">{{activeOrgUnit.openingDate||["None"]}}</p>
+            <label class="label-text" for="actOrgUnitDescription">Description</label>
 
-            <label for="actOrgUnitClosingDate">Closed Date</label>
+            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p>
 
-            <p id="actOrgUnitClosingDate">{{activeOrgUnit.closingDate||["None"]}}</p>
+            <label class="label-text" for="actOrgUnitCode">Code</label>
 
-            <label for="actOrgUnitURL">Url</label>
+            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p>
 
-            <p id="actOrgUnitURL">{{(activeOrgUnit.url) ||["None"]}}</p>
+            <label class="label-text" for="actOrgUnitOpeningDate">Opening Date</label>
+
+            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p>
+
+            <label class="label-text" for="actOrgUnitClosingDate">Closed Date</label>
+
+            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p>
+
+            <label class="label-text" for="actOrgUnitURL">Url</label>
+
+            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p>
+            <hr>
+
+
+            <fieldset>
+                <legend><span class="glyphicon glyphicon-map-marker"></span> Coordinates</legend>
+                <hr>
+
+                <div *ng-if="featureType.value == 'POINT'" class="form-group">
+                    <label class="label-text">Latitude</label>
+
+                    <p>{{form.controls.lat.value}}</p>
+                    <label class="label-text">Longitude</label>
+
+                    <p>{{form.controls.lng.value}}</p>
+                </div>
+                <div *ng-if="featureType.value == 'NONE'" class="alert alert-danger">
+                    <span class="glyphicon glyphicon-info-sign glyinfo"></span> <p>This organisation unit has no associated coordinates</p>
+                </div>
+                <div *ng-if="featureType.value == 'POLYGON' || featureType.value == 'MULTI_POLYGON'">
+                    <p>polygon</p>
+                </div>
+            </fieldset>
+            <hr>
+
+            <fieldset>
+                <legend><span class="glyphicon glyphicon-phone-alt"></span> Contact Information</legend>
+                <hr>
+
+                <label class="label-text">Contact person</label>
+
+                <p>{{form.controls.contactPerson.value || ["None"]}}</p>
+                <label class="label-text">Address</label>
+
+                <p>{{form.controls.address.value || ["None"]}}</p>
+                <label class="label-text">E-mail</label>
+
+                <p>{{form.controls.email.value || ["None"]}}</p>
+                <label class="label-text">Phone number</label>
+
+                <p>{{form.controls.phoneNumber.vaule || ["None"]}}</p>
+            </fieldset>
+            <hr>
 
-            <label>Group(s)</label>
-            <ul *ng-for="#group of activeOrgUnit.organisationUnitGroups">
-                <li>{{group.name}}</li>
-            </ul>
+            <button class="btn btn-default buttonsidebar" (click)="editmode = !editmode">Edit</button>
         </section>
-        <button class="btn btn-default" (click)="editmode = !editmode">{{editmode ? "Cancel" : "Edit"}}</button>
-        <button *ng-if="editmode" class="btn btn-default" (click)="save()">Save</button>
 
     </div>
 </div>
\ No newline at end of file