Merge pull request #27 from SEED-platform/upload_btns

1st iteration of property and tax lot upload buttons

src/app/app.module.ts

@@ -20,6 +20,8 @@ import { MaterialModule } from './material-module';
 import { SharedModule } from './shared/shared.module';
 import { MapComponent } from './map/map.component';
 import { InventoryComponent } from './inventory/inventory.component';
+import { PropertiesUploadComponent } from './properties-upload/properties-upload.component';
+import { TaxlotsUploadComponent } from './taxlots-upload/taxlots-upload.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -33,7 +35,9 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     HeaderComponent,
     LeftNavComponent,
     MapComponent,
-    InventoryComponent
+    InventoryComponent,
+    PropertiesUploadComponent,
+    TaxlotsUploadComponent
   ],
   imports: [
     AppRoutingModule,

src/app/home/home.component.html

@@ -15,4 +15,7 @@ <h1 class="title">Running: {{ status.running }}</h1>
   </div>
 
   <textarea disabled>{{ latestQueryResult }}</textarea>
+
+  <app-properties-upload></app-properties-upload>
+  <app-taxlots-upload></app-taxlots-upload>
 </div>

src/app/home/home.component.scss

@@ -10,5 +10,5 @@
 
 textarea {
   width: 600px;
-  height: 400px;
+  height: 200px;
 }

src/app/map/map.component.ts

@@ -53,12 +53,12 @@ export class MapComponent implements OnInit {
       values[0].forEach(property => {
         if (property.footprint) {
           const footprintCoords = property.footprint.coordinates[0].map(coords => {
-            return new Microsoft.Maps.Location(...coords)
+            return new Microsoft.Maps.Location(...coords.reverse())
           })
           const polygon = new Microsoft.Maps.Polygon(footprintCoords);
           const infobox = new Microsoft.Maps.Infobox(footprintCoords[0], {
             title: 'Property Information',
-            description: property.ubid,
+            description: JSON.stringify(property.extra_data),
             visible: false
           });
           infobox.setMap(this.map);
@@ -80,12 +80,12 @@ export class MapComponent implements OnInit {
       values[1].forEach(taxlot => {
         if (taxlot.footprint) {
           const footprintCoords = taxlot.footprint.coordinates[0].map(coords => {
-            return new Microsoft.Maps.Location(...coords)
+            return new Microsoft.Maps.Location(...coords.reverse())
           })
           const polygon = new Microsoft.Maps.Polygon(footprintCoords, this.styles.polygonOptions);
           const infobox = new Microsoft.Maps.Infobox(footprintCoords[0], {
             title: 'Tax Lot Information',
-            description: taxlot.ulid,
+            description: JSON.stringify(taxlot.extra_data),
             visible: false
           });
           infobox.setMap(this.map);
@@ -106,10 +106,12 @@ export class MapComponent implements OnInit {
       this.map.layers.insert(propertyLayer);
       this.map.layers.insert(taxlotLayer);
 
-      // allFootprints used because can't find attribute of map or layers to get shapes
-      this.map.setView({
-        bounds: new Microsoft.Maps.LocationRect.fromShapes(allFootprints)
-      })
+      if (allFootprints.length) {
+        // allFootprints used because can't find attribute of map or layers to get shapes
+        this.map.setView({
+          bounds: new Microsoft.Maps.LocationRect.fromShapes(allFootprints)
+        });
+      }
     })
   }
 }

src/app/properties-upload/properties-upload.component.html

@@ -0,0 +1,8 @@
+<div>
+    <label for="file">Choose building GeoJSON file</label>
+    <input 
+        type="file"
+        id="file"
+        accept=".geojson"
+        (change)="handleFileInput($event.target.files)">
+</div>

src/app/properties-upload/properties-upload.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PropertiesUploadComponent } from './properties-upload.component';
+
+describe('PropertiesUploadComponent', () => {
+  let component: PropertiesUploadComponent;
+  let fixture: ComponentFixture<PropertiesUploadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PropertiesUploadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PropertiesUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/properties-upload/properties-upload.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { PropertyService } from '../core/services/property/property.service';
+
+
+@Component({
+  selector: 'app-properties-upload',
+  templateUrl: './properties-upload.component.html',
+  styleUrls: ['./properties-upload.component.scss']
+})
+export class PropertiesUploadComponent implements OnInit {
+
+  constructor(private propertyService: PropertyService) { }
+
+  ngOnInit(): void {
+  }
+
+  handleFileInput(files: FileList): void {
+    if (files[0]) {
+      files[0].text().then(text => {
+        const geojson = JSON.parse(text);
+        const crs = geojson.crs ? geojson.crs : { type: 'name', properties: { name: 'EPSG:4326'} };
+
+        geojson.features.forEach(feature => {
+          const extra_data = feature.properties;
+          feature.geometry.crs = crs;
+
+          // extract non-extra_data attributes
+          const ubid = extra_data.UBID;
+          delete extra_data.UBID;
+
+          this.propertyService.model.create({
+            extra_data: extra_data,
+            footprint: feature.geometry,
+            ubid: ubid
+          }).catch((err) => { 
+            console.error(err);
+          });
+        });
+      })
+    }
+  }
+
+}

src/app/taxlots-upload/taxlots-upload.component.html

@@ -0,0 +1,8 @@
+<div>
+    <label for="file">Choose tax lot GeoJSON file</label>
+    <input 
+        type="file"
+        id="file"
+        accept=".geojson"
+        (change)="handleFileInput($event.target.files)">
+</div>

src/app/taxlots-upload/taxlots-upload.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaxlotsUploadComponent } from './taxlots-upload.component';
+
+describe('TaxlotsUploadComponent', () => {
+  let component: TaxlotsUploadComponent;
+  let fixture: ComponentFixture<TaxlotsUploadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TaxlotsUploadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaxlotsUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/taxlots-upload/taxlots-upload.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { TaxLotService } from '../core/services/tax-lot/tax-lot.service';
+
+@Component({
+  selector: 'app-taxlots-upload',
+  templateUrl: './taxlots-upload.component.html',
+  styleUrls: ['./taxlots-upload.component.scss']
+})
+export class TaxlotsUploadComponent implements OnInit {
+
+  constructor(private taxlotService: TaxLotService) { }
+
+  ngOnInit(): void {
+  }
+
+  handleFileInput(files: FileList): void {
+    if (files[0]) {
+      files[0].text().then(text => {
+        const geojson = JSON.parse(text);
+        const crs = geojson.crs ? geojson.crs : { type: 'name', properties: { name: 'EPSG:4326'} };
+
+        geojson.features.forEach(feature => {
+          const extra_data = feature.properties;
+          feature.geometry.crs = crs;
+
+          // extract non-extra_data attributes
+          const ubid = extra_data.UBID;
+          delete extra_data.UBID;
+
+          this.taxlotService.model.create({
+            extra_data: extra_data,
+            footprint: feature.geometry,
+            ulid: ubid
+          }).catch((err) => { 
+            console.error(err);
+          });
+        });
+      })
+    }
+  }
+
+}