upload

projects/geoengine-app/src/app/app.component.ts

@@ -18,7 +18,7 @@ import {MatSidenav} from '@angular/material/sidenav';
 import {MatTabGroup} from '@angular/material/tabs';
 import {
     AddDataComponent,
-    AddDataListButton,
+    AddDataButton,
     Layer,
     SidenavContainerComponent,
     LayoutService,
@@ -42,7 +42,6 @@ import {
 import {DomSanitizer} from '@angular/platform-browser';
 import {ActivatedRoute} from '@angular/router';
 import {AppConfig} from './app-config.service';
-import {MockLayersComponent} from './mock-layers/mock-layers.component';
 
 @Component({
     selector: 'wave-app-root',
@@ -196,15 +195,11 @@ export class AppComponent implements OnInit, AfterViewInit {
         return {component: AddDataComponent, config: {buttons: AppComponent.createAddDataListButtons()}};
     }
 
-    private static createAddDataListButtons(): Array<AddDataListButton> {
+    private static createAddDataListButtons(): Array<AddDataButton> {
         return [
             AddDataComponent.createDataSetListButton(),
-            {
-                name: 'Mock data',
-                description: 'Mock data sets',
-                iconSrc: AddDataComponent.createIconDataUrl('mock'),
-                sidenavConfig: {component: MockLayersComponent, keepParent: true},
-            },
+            AddDataComponent.createUploadButton(),
+
             // SourceOperatorListComponent.createDrawFeaturesButton(),
             // ...SourceOperatorListComponent.createCustomFeaturesButtons(),
             // {

projects/wave-core-new/src/lib/backend/backend.model.ts

@@ -180,6 +180,10 @@ export interface DataSetDict {
     source_operator: string;
 }
 
+export interface DataSetIdDict {
+    Internal?: InternalDataSetIdDict;
+}
+
 export interface InternalDataSetIdDict {
     Internal: UUID;
 }
@@ -229,3 +233,11 @@ export interface MeasurementDict {
         };
     };
 }
+
+export interface UploadResponseDict {
+    id: UUID;
+}
+
+export interface CreateDataSetDict {
+    upload: UUID;
+}

projects/wave-core-new/src/lib/backend/backend.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+import {HttpClient, HttpEvent, HttpHeaders, HttpParams} from '@angular/common/http';
 import {Observable, Subject} from 'rxjs';
 import {Config} from '../config.service';
 import {bboxDictToExtent, unixTimestampToIsoString} from '../util/conversions';
@@ -27,6 +27,9 @@ import {
     RasterResultDescriptorDict,
     PlotResultDescriptorDict,
     VectorResultDescriptorDict,
+    UploadResponseDict,
+    DataSetIdDict,
+    CreateDataSetDict,
 } from './backend.model';
 
 @Injectable({
@@ -241,6 +244,20 @@ export class BackendService {
         });
     }
 
+    upload(sessionId: UUID, form: FormData): Observable<HttpEvent<UploadResponseDict>> {
+        return this.http.post<UploadResponseDict>(this.config.API_URL + '/upload', form, {
+            headers: BackendService.authorizationHeader(sessionId),
+            reportProgress: true,
+            observe: 'events',
+        });
+    }
+
+    createDataSet(sessionId: UUID, createDataSet: CreateDataSetDict): Observable<DataSetIdDict> {
+        return this.http.post<DataSetIdDict>(this.config.API_URL + '/dataset', createDataSet, {
+            headers: BackendService.authorizationHeader(sessionId),
+        });
+    }
+
     private static authorizationHeader(sessionId: UUID): HttpHeaders {
         return new HttpHeaders().set('Authorization', `Bearer ${sessionId}`);
     }

projects/wave-core-new/src/lib/datasets/add-data/add-data.component.ts

@@ -1,8 +1,9 @@
 import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';
 import {LayoutService, SidenavConfig} from '../../layout.service';
 import {DatasetListComponent} from '../dataset-list/dataset-list.component';
+import {UploadComponent} from '../upload/upload.component';
 
-export interface AddDataListButton {
+export interface AddDataButton {
     name: string;
     description: string;
     icon?: string;
@@ -21,7 +22,7 @@ export class AddDataComponent implements OnInit {
     /**
      * A list of data source dialogs to display
      */
-    @Input() buttons!: Array<AddDataListButton>;
+    @Input() buttons!: Array<AddDataButton>;
 
     constructor(private layoutService: LayoutService) {}
 
@@ -38,7 +39,7 @@ export class AddDataComponent implements OnInit {
         this.layoutService.setSidenavContentComponent(sidenavConfig);
     }
 
-    static createDataSetListButton(): AddDataListButton {
+    static createDataSetListButton(): AddDataButton {
         return {
             name: 'Data Sets',
             description: 'Available Data Sets',
@@ -47,6 +48,15 @@ export class AddDataComponent implements OnInit {
         };
     }
 
+    static createUploadButton(): AddDataButton {
+        return {
+            name: 'Upload',
+            description: 'Upload data from you local computer',
+            iconSrc: this.createIconDataUrl('Upload'),
+            sidenavConfig: {component: UploadComponent, keepParent: true},
+        };
+    }
+
     /**
      * Each operator type must have a method that returns
      * an icon as a data uri image. This provides a default

projects/wave-core-new/src/lib/datasets/dataset.service.ts

@@ -4,6 +4,8 @@ import {Observable} from 'rxjs';
 import {DataSet} from './dataset.model';
 import {UserService} from '../users/user.service';
 import {map, mergeMap} from 'rxjs/operators';
+import {HttpEvent} from '@angular/common/http';
+import {CreateDataSetDict, UploadResponseDict} from '../backend/backend.model';
 
 @Injectable({
     providedIn: 'root',
@@ -17,4 +19,12 @@ export class DataSetService {
             map((dataSetDicts) => dataSetDicts.map((dict) => DataSet.fromDict(dict))),
         );
     }
+
+    upload(form: FormData): Observable<HttpEvent<UploadResponseDict>> {
+        return this.userService.getSessionStream().pipe(mergeMap((session) => this.backend.upload(session.sessionToken, form)));
+    }
+
+    createDataSet(create: CreateDataSetDict): Observable<DataSetIdDict> {
+        return this.userService.getSessionStream().pipe(mergeMap((session) => this.backend.createDataSet(session.sessionToken, create)));
+    }
 }

projects/wave-core-new/src/lib/datasets/upload/upload.component.html

@@ -0,0 +1,58 @@
+<wave-sidenav-header>Add Data</wave-sidenav-header>
+
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>Select files for upload</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+        <input type="file" id="file" multiple (change)="selectFiles($event)" [disabled]="submittedUpload" />
+        <div class="actions">
+            <button type="button" mat-raised-button color="primary" (click)="upload()" [disabled]="!selectedFiles || submittedUpload">
+                Upload
+            </button>
+        </div>
+        <mat-progress-bar *ngIf="progress$ | async as progress" mode="determinate" [value]="progress"></mat-progress-bar>
+    </mat-card-content>
+</mat-card>
+
+<mat-card *ngIf="uploadId$ | async as uploadId">
+    <mat-card-header>
+        <mat-card-title>Specify loading information</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+        <p>Upload ID: {{ uploadId }}</p>
+
+        <div>Specify the loading info as Json</div>
+
+        <div>
+            <mat-form-field appearance="fill">
+                <mat-label>Choose an example</mat-label>
+                <mat-select [disabled]="submittedCreate">
+                    <mat-option *ngFor="let option of exampleLoadingInfos" [value]="option" (click)="selectLoadingInfo(option)">
+                        {{ option.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div>
+            <textarea name="loadingInfo" mdInput placeholder="Loading Info" rows="25" cols="100" [disabled]="submittedCreate">{{
+                loadingInfo
+            }}</textarea>
+        </div>
+        <div class="actions">
+            <button type="button" mat-raised-button color="primary" (click)="submitLoadingInfo(uploadId)" [disabled]="submittedCreate">
+                Create dataset
+            </button>
+        </div>
+    </mat-card-content>
+</mat-card>
+
+<mat-card *ngIf="dataSetId$ | async as dataSetId">
+    <mat-card-header>
+        <mat-card-title>Upload succesful!</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content> Dataset ID: {{ dataSetId.id.Internal }} </mat-card-content>
+</mat-card>

projects/wave-core-new/src/lib/datasets/upload/upload.component.scss

@@ -0,0 +1,7 @@
+.actions {
+    padding: 1rem;
+}
+
+mat-card {
+    margin-bottom: 1rem;
+}