implemented model list

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { HelpComponent } from './help/help.component';
 import { ModelTemplatesComponent } from './model-templates/model-templates.component';
+import { SizePipe } from './size.pipe';
 
 @NgModule({
   declarations: [
@@ -54,7 +55,8 @@ import { ModelTemplatesComponent } from './model-templates/model-templates.compo
     DocumentationDatabaseComponent,
     PredictionComponent,
     HelpComponent,
-    ModelTemplatesComponent
+    ModelTemplatesComponent,
+    SizePipe
   ],
   imports: [
     LocalStorageModule.forRoot({

src/app/model-templates/model-templates.component.html

@@ -25,7 +25,7 @@
   </rb-icon-button>
 </form>
 
-<rb-table class="space-above">
+<rb-table class="space-above space-below">
   <tr>
     <th>Name</th>
     <th>URL</th>
@@ -49,14 +49,27 @@
       </td>
       <td>
         <span class="rb-ic rb-ic-delete clickable"
-              (click)="deleteModel(group.group, modelItem.name, modalDeleteConfirm)"></span>
+              (click)="delete(modalDeleteConfirm, modelItem.name, group.group)"></span>
       </td>
     </tr>
   </ng-container>
 </rb-table>
 
+<rb-table>
+  <tr>
+    <th>Model files</th>
+    <th></th>
+    <th></th>
+  </tr>
+  <tr *ngFor="let file of d.arr.modelFiles">
+    <td>{{file.name}}</td>
+    <td>{{file.size | size:'M'}}</td>
+    <td><span class="rb-ic rb-ic-delete clickable" (click)="delete(modalDeleteConfirm, file.name)"></span></td>
+  </tr>
+</rb-table>
+
 <ng-template #modalDeleteConfirm>
   <rb-alert alertTitle="Are you sure?" type="danger" okBtnLabel="Delete model" cancelBtnLabel="Cancel">
-    Do you really want to delete this model?
+    Do you really want to delete?
   </rb-alert>
 </ng-template>

src/app/model-templates/model-templates.component.ts

@@ -35,13 +35,14 @@ export class ModelTemplatesComponent implements OnInit {
     this.d.load('modelGroups', () => {
       this.groups = this.d.arr.modelGroups.map(e => e.group);
     });
+    this.d.load('modelFiles');
   }
 
   saveModel() {
     console.log(this.modelGroup);
     console.log(this.oldModelGroup);
     if (this.oldModelGroup !== '' && this.modelGroup !== this.oldModelGroup) {  // group was changed, delete model in old group
-      this.deleteModel(this.oldModelGroup, this.oldModelName);
+      this.deleteModel(null, this.oldModelGroup, this.oldModelName);
     }
     this.api.post('/model/' + this.modelGroup, this.model, () => {
       this.newModel = false;
@@ -53,7 +54,7 @@ export class ModelTemplatesComponent implements OnInit {
     });
   }
 
-  deleteModel(group, name, modal = null) {
+  delete(modal, name, group = null) {
     new Promise(resolve => {
       if (modal) {
         this.modal.open(modal).then(result => {
@@ -65,10 +66,17 @@ export class ModelTemplatesComponent implements OnInit {
       }
     }).then(res => {
       if (res) {
+        if (group) {  // delete group
           this.api.delete(`/model/${group}/${name}`, () => {
             this.loadGroups();
           });
         }
+        else {  // delete file
+          this.api.delete(`/model/file/${name}`, () => {
+            this.d.arr.modelFiles.splice(this.d.arr.modelFiles.findIndex(e => e.name === name), 1);
+          });
+        }
+      }
     });
   }
 

src/app/models/model-file.model.spec.ts

@@ -0,0 +1,7 @@
+import { ModelFileModel } from './model-file.model';
+
+describe('ModelFile.Model', () => {
+  it('should create an instance', () => {
+    expect(new ModelFileModel()).toBeTruthy();
+  });
+});

src/app/models/model-file.model.ts

@@ -0,0 +1,6 @@
+import {BaseModel} from './base.model';
+
+export class ModelFileModel extends BaseModel {
+  name = '';
+  size = 0;
+}

src/app/services/data.service.ts

@@ -5,6 +5,7 @@ import {MaterialModel} from '../models/material.model';
 import {BaseModel} from '../models/base.model';
 import {UserModel} from '../models/user.model';
 import {ModelItemModel} from '../models/model-item.model';
+import {ModelFileModel} from '../models/model-file.model';
 
 @Injectable({
   providedIn: 'root'
@@ -25,6 +26,7 @@ export class DataService {
     sampleNotesFields: {path: '/sample/notes/fields', model: TemplateModel, type: 'idArray'},
     users: {path: '/users', model: UserModel, type: 'idArray'},
     modelGroups: {path: '/model/groups', model: ModelItemModel, type: 'array'},
+    modelFiles: {path: '/model/files', model: ModelFileModel, type: 'array'},
     user: {path: '/user', model: UserModel, type: 'string'},
     userKey: {path: '/user/key', model: BaseModel, type: 'string'}
   };

src/app/size.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SizePipe } from './size.pipe';
+
+describe('SizePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SizePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/size.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'size'
+})
+export class SizePipe implements PipeTransform {
+
+  transform(value: number, exp: string): string {
+    const divide = ['', 'k', 'M', 'G', 'T'].indexOf(exp);
+    for (let i = 0; i < divide; i ++) {
+      value = value / 1024;
+    }
+    return `${value.toFixed(2)} ${exp}B`;
+  }
+
+}