[sibebar] added polygon
[u/erikhf/frm.git] / src / components / sidebar / sidebar.ts
1 import {Component, NgFor, NgIf, EventEmitter, NgModel, Control, ControlGroup, ControlArray, Validators, FormBuilder, CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/angular2';
2 import {Http, Headers} from 'angular2/http';
3
4 declare var zone: Zone;
5
6 @Component({
7     selector: 'mou-sidebar',
8     directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgModel, NgIf],
9     events: ['tempmarker'],
10     templateUrl: './components/sidebar/sidebar.html',
11     styles: [`
12         .ng-valid.ng-dirty {
13             border-left: 5px solid #42A948; /* green */
14         }
15         .ng-invalid {
16             border-left: 5px solid #a94442; /* red */
17         }
18         .form-background {
19             padding: 10px;
20             background: white;
21             width: 100%;
22             float: right;
23             height: 100vh;
24             z-index: 5;
25         }
26     `]
27 })
28
29 export class Sidebar {
30
31     form: ControlGroup;
32     http:Http;
33     newObject: boolean;
34     editmode:boolean;
35     active: boolean;
36     coordinatePoint: boolean;
37
38     id: Control = new Control("");
39     name: Control = new Control("", Validators.required);
40     shortName: Control = new Control("",Validators.required);
41     description: Control = new Control("");
42     code: Control = new Control("");
43     openingDate: Control = new Control("",Validators.required);
44     closedDate: Control = new Control("");
45     url: Control = new Control("");
46     lat: Control = new Control("");
47     lng: Control = new Control("");
48     parent: Control = new Control("");
49     contactPerson: Control = new Control("");
50     address: Control = new Control("");
51     email: Control = new Control("");
52     phoneNumber: Control = new Control("");
53     featureType: Control = new Control("");
54     coordinates: Control = new Control("");
55
56
57     constructor(http:Http, fb: FormBuilder) {
58         this.http = http;
59         this.editmode = false;
60         this.active = false;
61         this.coordinatePoint = false;
62         this.tempmarker = new EventEmitter();
63
64         this.form = fb.group({
65             "id": this.id,
66             "name": this.name,
67             "shortName": this.shortName,
68             "description": this.description,
69             "code": this.code,
70             "openingDate": this.openingDate,
71             "closedDate": this.closedDate,
72             "url": this.url,
73             "lat": this.lat,
74             "lng": this.lng,
75             "parent": this.parent,
76             "contactPerson": this.contactPerson,
77             "address": this.address,
78             "email": this.email,
79             "phoneNumber": this.phoneNumber,
80             "featureType": this.featureType,
81             "coordinates": this.coordinates
82         });
83         let instance = this;
84         this.lat.valueChanges.observer({
85             next: (value) => {
86                 if(instance.lng.value && value) {
87                     let pos = {lat: value, lng: instance.lng.value};
88                     this.tempmarker.next(pos);
89                 }
90             }
91         });
92         this.lng.valueChanges.observer({
93             next: (value) => {
94                 if(instance.lat.value && value) {
95                     let pos = {lat: instance.lat.value, lng: value};
96                     this.tempmarker.next(pos);
97                 }
98             }
99         });
100     }
101
102     update(orgunitId) {
103         console.log("Skjer det noe her? ");
104         this.active = true;
105         this.newObject = false;
106         this.http.get(dhisAPI + "/api/organisationUnits/" + orgunitId)
107             .map(res => res.json())
108             .subscribe(res => this.updateValues(res))
109     }
110
111     updateValues(res){
112
113         for(control in this.form.controls){
114             if(res[control] !== undefined) {
115                 this.form.controls[control].updateValue(res[control]);
116             }
117             else
118                 this.form.controls[control].updateValue("");
119         }
120
121         // Date fix:
122         if(res["openingDate"]){
123             this.form.controls["openingDate"].updateValue((new Date(res["openingDate"].substring(0,10))).toISOString().substring(0,10));
124         }
125         if(res["closedDate"]){
126             this.form.controls["closedDate"].updateValue((new Date(res["closedDate"].substring(0,10))).toISOString().substring(0,10));
127         }
128
129         if(res.featureType === "POINT"){
130             this.coordinatePoint = true;
131             let coord = new Object();
132             coord = JSON.parse(res["coordinates"]);
133             this.form.controls.lat.updateValue(coord[0]);
134             this.form.controls.lng.updateValue(coord[1]);
135         }
136         else{
137             this.coordinatePoint = false;
138         }
139     }
140
141
142
143     onSubmit() {
144         this.editmode = false;
145
146         let headers = new Headers();
147         headers.append('Accept', 'application/json');
148
149         headers.append('Content-Type', 'application/json');
150
151         let jsonObject = this.form.value;
152
153         $.each(jsonObject, function(key, value){
154             if (value === "" || value === null){
155                 delete jsonObject[key];
156             }
157         });
158
159         jsonObject.openingDate = (new Date(this.form.value.openingDate)).toISOString();
160
161         if(this.form.value.closedDate){
162             jsonObject.closedDate = (new Date(this.form.value.closedDate)).toISOString();
163         }
164
165
166         console.log(this.form.value);
167
168         if (this.newObject) {
169             jsonObject.parent = {};
170             jsonObject.parent.id = this.form.controls.parent.value;
171             jsonObject.featureType="POINT";
172             jsonObject.coordinates="[" + this.form.controls.lat.value + ","+this.form.controls.lng.value+"]";
173             delete jsonObject["lat"];
174             delete jsonObject["lng"];
175             this.http.post(dhisAPI + "/api/organisationUnits/", JSON.stringify(jsonObject), {
176                     headers: headers
177                 })
178                 .map(res => res.json())
179                 .subscribe(res => console.log(res));
180         }else {
181             this.http.put(dhisAPI + "/api/organisationUnits/" + this.form.controls.id.value, JSON.stringify(jsonObject), {
182                     headers: headers
183                 })
184                 .map(res => res.json())
185                 .subscribe(res => console.log(res));
186         }
187
188     }
189
190     cancel(){
191         this.editmode = false;
192     }
193
194
195     add(data){
196         this.coordinatePoint = true;
197         this.newObject=true;
198         this.active = true;
199         this.editmode = true;
200
201         for(control in this.form.controls){
202             this.form.controls[control].updateValue("");
203         }
204
205         this.form.controls.lat.updateValue(data.location.lat);
206         this.form.controls.lng.updateValue(data.location.lng);
207         this.form.controls.parent.updateValue(data.parent);
208
209     }
210 }
211