finished files page

BetterIServ.Mobile/src/app/pages/files/files.page.html

@@ -0,0 +1,95 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Dateien</ion-title>
+    <ion-progress-bar type="indeterminate" *ngIf="loading" />
+    <ion-progress-bar [value]="progress" *ngIf="progress != -1" />
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Dateien</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-button (click)="upload.click()"><ion-icon ios="arrow-up-circle-outline" md="arrow-up-circle-sharp" /></ion-button>
+        <ion-button id="create-folder"><ion-icon ios="add-circle-outline" md="add-circle-sharp" ></ion-icon></ion-button>
+        <form #uploadForm>
+          <input type="file" hidden="hidden" multiple (change)="onUpload(upload.files, uploadForm)" #upload>
+        </form>
+
+        <ion-modal trigger="create-folder" (willDismiss)="createFolder($event)" #modal>
+          <ng-template>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-button (click)="modal.dismiss(null, 'cancel')">Abbrechen</ion-button>
+                </ion-buttons>
+                <ion-title>Neuer Ordner</ion-title>
+                <ion-buttons slot="end">
+                  <ion-button (click)="modal.dismiss(newFolder.value, 'confirm')" [strong]="true">Erstellen</ion-button>
+                </ion-buttons>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <ion-item>
+                <ion-label position="stacked">Name</ion-label>
+                <ion-input aria-label="Name" type="text" #newFolder/>
+              </ion-item>
+            </ion-content>
+          </ng-template>
+        </ion-modal>
+      </ion-col>
+      <ion-col *ngIf="clipboard">
+        <ion-button (click)="onMove()">Verschieben</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <section class="container">
+    <ion-list>
+      <ion-list-header>{{currentDirectory}}</ion-list-header>
+
+      <ion-item *ngIf="currentDirectory != '/'">
+        <ion-icon ios="folder-outline" md="folder-sharp"></ion-icon>
+        <ion-label (click)="goUpFolder()">Übergeordnetes Verzeichnis</ion-label>
+      </ion-item>
+
+      <ion-item *ngFor="let item of directoryContent">
+        <ion-icon [ios]="(item.type == 'dir' ? 'folder' : 'document') + '-outline'" [md]="(item.type == 'dir' ? 'folder' : 'document') + '-sharp'" />
+        <ion-label (click)="interact(item)">{{item.name}}</ion-label>
+        <ion-button fill="none" (click)="openMenu(item)">
+          <ion-icon ios="ellipsis-vertical-outline" md="ellipsis-vertical-sharp" />
+        </ion-button>
+      </ion-item>
+    </ion-list>
+  </section>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <ion-tab-button (click)="switchDirectory('/Files')" [ngClass]="{'active': currentDirectory.startsWith('/Files')}">
+            <ion-icon ios="folder-outline" md="folder-sharp" />
+            Eigene
+          </ion-tab-button>
+        </ion-col>
+        <ion-col>
+          <ion-tab-button (click)="switchDirectory('/Groups')" [ngClass]="{'active': currentDirectory.startsWith('/Groups')}">
+            <ion-icon ios="people-outline" md="people-sharp" />
+            Gruppen
+          </ion-tab-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-toolbar>
+</ion-footer>