[sidebar] fixed form design
authorErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 17:35:03 +0000 (18:35 +0100)
committerErik Haider Forsén <erikhf@ifi.uio.no>
Thu, 3 Dec 2015 17:35:03 +0000 (18:35 +0100)
src/components/sidebar/sidebar.html
src/components/sidebar/sidebar.ts

index 4c826e6..48c5f3c 100644 (file)
@@ -1,12 +1,14 @@
 <div>
-    <div [hidden]="!active" class="form-background">
+    <div [hidden]="!active" class="form-background" style="overflow-y:auto;">
         <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
             <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
 
             <div class="form-group">
                 <label>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">
@@ -31,7 +33,7 @@
                 <label>Opening Date</label>
                 <input class="form-control" type="date" ng-control="openingDate" #openingDate="form">
 
-                <p [hidden]="openingdate.valid" class="alert alert-danger">Opening date is required</p>
+                <p [hidden]="openingdate.valid || openingdate.untouched" class="alert alert-danger">Opening date is required</p>
             </div>
             <div class="form-group">
                 <label>Closed Date</label>
 
                 <p [hidden]="url.valid" class="alert alert-danger">The specified URL is not valid</p>
             </div>
-            <fieldset class="form-group">
+            <fieldset class="form-group" *ng-if="coordinatePoint">
                 <Legend>Coordinates</Legend>
                 <div class="form-group">
                     <label>lat</label>
-                    <input class="form-control" type="number" ng-control="lat" #lat="form"/>
+                    <input class="form-control" type="number" ng-control="lat" #lat="form" step="any" max="90" min="-90"/>
                     <label>long</label>
-                    <input class="form-control" type="number" ng-control="lng" #lng="form"/>
+                    <input class="form-control" type="number" ng-control="lng" #lng="form" step="any" max="180" min="-180"/>
                 </div>
-                <p>{{lat.valid}}</p>
-
-                <p>{{lng.valid}}</p>
             </fieldset>
 
 
index 0df2a26..15d8845 100644 (file)
@@ -27,6 +27,7 @@ export class Sidebar {
     newObject: boolean;
     editmode:boolean;
     active: boolean;
+    coordinatePoint: boolean;
 
     id: Control = new Control("");
     name: Control = new Control("", Validators.required);
@@ -49,6 +50,8 @@ export class Sidebar {
         this.http = http;
         this.editmode = false;
         this.active = false;
+        this.coordinatePoint = false;
+
         this.form = fb.group({
             "id": this.id,
             "name": this.name,
@@ -77,6 +80,7 @@ export class Sidebar {
     }
 
     updateValues(res){
+
         for(control in this.form.controls){
             if(res[control] !== undefined) {
                 this.form.controls[control].updateValue(res[control]);
@@ -84,12 +88,27 @@ export class Sidebar {
             else
                 this.form.controls[control].updateValue("");
         }
+
+        if(res.featureType === "POINT"){
+            this.coordinatePoint = true;
+            let coord = new Object();
+            coord = JSON.parse(res["coordinates"]);
+            this.form.controls.lat.updateValue(coord[0]);
+            this.form.controls.lng.updateValue(coord[1]);
+        }
+        else{
+            this.coordinatePoint = false;
+        }
     }
+
+
+
     onSubmit() {
         this.editmode = false;
 
         let headers = new Headers();
         headers.append('Accept', 'application/json');
+
         headers.append('Content-Type', 'application/json');
 
         let jsonObject = this.form.value;
@@ -116,20 +135,14 @@ export class Sidebar {
                 })
                 .map(res => res.json())
                 .subscribe(res => console.log(res));
-        }else{
-            this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject),{
-                headers: headers
-            })
-            .map(res => res.json())
-            .subscribe(res => console.log(res));
+        }else {
+            this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject), {
+                    headers: headers
+                })
+                .map(res => res.json())
+                .subscribe(res => console.log(res));
         }
 
-
-
-
-        //console.log(this.form);
-
-
     }
 
     cancel(){
@@ -137,21 +150,15 @@ export class Sidebar {
     }
 
     add(data){
+        this.coordinatePoint = true;
         this.newObject=true;
-        this.setActive();
+        this.active = true;
         this.editmode = true;
-        console.log(data);
 
         this.form.controls.lat.updateValue(data.location.lat);
         this.form.controls.lng.updateValue(data.location.lng);
         this.form.controls.parent.updateValue(data.parent);
 
-        console.log("faen");
-
-    }
-
-    setActive(){
-        this.active = true;
     }
 }