Feat: added a conf card to the UI

web-aid-kit · Jan 9, 2018 · 4b490fd · 4b490fd
1 parent 0e9bc16
commit 4b490fd
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 16 deletions.
diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html
@@ -1,10 +1,11 @@
 <mat-toolbar color="primary">
-  <mat-icon style="padding-right: 1rem">menu</mat-icon>
+  <mat-icon style="padding-right: 1rem">photo</mat-icon>
   <span>ngx-image-gallery</span>
 
   <span class="fill-remaining"></span>
 
-  <mat-icon>code</mat-icon>
+  <!--todo-->
+  <mat-icon>info</mat-icon>
 </mat-toolbar>
 
 <div fxLayout="row"
@@ -28,8 +29,19 @@
         (onImageChange)="galleryImageChanged($event)"
         (onDelete)="deleteImage($event)">
       </ngx-image-gallery>
+
+      <mat-list *ngFor="let entry of ngxImageGallery.activeImage | keys">
+        <mat-list-item>
+          <code class="prettyprint">
+            {{entry.key}}: {{entry.value.toString()}}
+          </code>
+        </mat-list-item>
+      </mat-list>
     </mat-card-content>
 
+    <mat-card-footer>
+    </mat-card-footer>
+
     <mat-card-actions fxLayoutAlign="space-between center">
       <button color="accent" mat-raised-button (click)="prevImage()">Previous</button>
       <button color="accent" mat-raised-button (click)="nextImage()">Next</button>
@@ -38,19 +50,23 @@
 
   <mat-card fxFlex="20" style="margin: 2rem">
     <mat-card-title-group>
-      <mat-card-title>Information</mat-card-title>
-      <mat-card-subtitle>Configuration</mat-card-subtitle>
+      <mat-card-title>Configuration</mat-card-title>
+      <mat-card-subtitle>Image Index:
+        <code class="prettyprint">
+          {{ngxImageGallery.activeImageIndex}}
+        </code>
+      </mat-card-subtitle>
     </mat-card-title-group>
+    <mat-card-content>
+      <mat-list *ngFor="let entry of conf | keys">
+        <mat-list-item>
+          <code class="prettyprint">
+            {{entry.key}}: {{entry.value}}
+          </code>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
   </mat-card>
-  <mat-card-content>
-    3
-    <mat-list>
-      <mat-list-item>
-        <p>test</p>
-      </mat-list-item>
-    </mat-list>
-  </mat-card-content>
-
 </div>
 
 
diff --git a/demo-app/src/app/app.component.ts b/demo-app/src/app/app.component.ts
@@ -9,6 +9,8 @@ import {GALLERY_CONF, GALLERY_IMAGE, NgxImageGalleryComponent} from "ngx-image-g
 })
 export class AppComponent {
 
+  public showConf: boolean = true;
+
   @ViewChild('ngxImageGallery') ngxImageGallery: NgxImageGalleryComponent;
 
   title = 'Demo App';

diff --git a/demo-app/src/app/app.module.ts b/demo-app/src/app/app.module.ts
@@ -8,11 +8,13 @@ import {
   MatToolbarModule
 } from "@angular/material";
 import {FlexLayoutModule} from "@angular/flex-layout";
+import { KeysPipe } from './pipe/keys.pipe';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    KeysPipe
   ],
   imports: [
     BrowserModule,

diff --git a/demo-app/src/index.html b/demo-app/src/index.html
@@ -7,8 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json