upload

package.json

@@ -6,7 +6,7 @@
         "ng": "ng",
         "prettier": "prettier",
         "start": "ng serve",
-        "build": "npm run build-prod:core && npm run build-prod:wave && npm run build-prod:gfbio && npm run build-prod:nature40",
+        "build": "npm run build-prod:core && npm run build-prod:wave && npm run build-prod:gfbio && npm run build-prod:nature40 && npm run build-prod:core-new",
         "check": "prettier --check . && ng lint wave-core-new && ng lint geoengine-app && ng lint data-atlas-app",
         "ci-core": "ng build --prod wave-core-new",
         "serve:wave": "ng serve wave-app --proxy-config proxy.conf.json",

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,10 @@
 import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';
 import {LayoutService, SidenavConfig} from '../../layout.service';
+import {createIconDataUrl} from '../../util/icons';
 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 +23,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,47 +40,21 @@ export class AddDataComponent implements OnInit {
         this.layoutService.setSidenavContentComponent(sidenavConfig);
     }
 
-    static createDataSetListButton(): AddDataListButton {
+    static createDataSetListButton(): AddDataButton {
         return {
             name: 'Data Sets',
             description: 'Available Data Sets',
-            iconSrc: this.createIconDataUrl('DataSets'),
+            iconSrc: createIconDataUrl('DataSets'),
             sidenavConfig: {component: DatasetListComponent, keepParent: true},
         };
     }
 
-    /**
-     * Each operator type must have a method that returns
-     * an icon as a data uri image. This provides a default
-     * out of the operator name.
-     */
-    static createIconDataUrl(iconName: string): string {
-        // TODO: replace with proper icons
-        // from `http://stackoverflow.com/questions/3426404/
-        // create-a-hexadecimal-colour-based-on-a-string-with-javascript`
-        const hashCode = (str: string): number => {
-            // java String#hashCode
-            let hash = 0;
-            for (let i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash); // eslint-disable-line no-bitwise
-            }
-            return hash;
-        };
-        const intToRGB = (i: number): string => {
-            const c = (i & 0x00ffffff).toString(16).toUpperCase(); // eslint-disable-line no-bitwise
-
-            return '00000'.substring(0, 6 - c.length) + c;
+    static createUploadButton(): AddDataButton {
+        return {
+            name: 'Upload',
+            description: 'Upload data from you local computer',
+            iconSrc: createIconDataUrl('Upload'),
+            sidenavConfig: {component: UploadComponent, keepParent: true},
         };
-
-        const color = '#' + intToRGB(hashCode(iconName));
-        const size = 64;
-
-        const canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-        const context = canvas.getContext('2d');
-        context.fillStyle = color;
-        context.fillRect(0, 0, 64, 64);
-        return canvas.toDataURL('image/png');
     }
 }

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, DataSetIdDict, 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.getSessionTokenForRequest().pipe(mergeMap((token) => this.backend.upload(token, form)));
+    }
+
+    createDataSet(create: CreateDataSetDict): Observable<DataSetIdDict> {
+        return this.userService.getSessionTokenForRequest().pipe(mergeMap((token) => this.backend.createDataSet(token, 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;
+}