reforma formularios de cliente y repositorio

Plantillas netboot
y envio de comandos

12 files changed, 383 insertions, 365 deletions

diff --git a/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
index 2ee85086..c082d264 100644
--- a/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
+++ b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
@@ -11,7 +11,7 @@ export class ClientFormType extends GlobunetFormType {
     this.setFieldType(form, 'netboot', 'select');
     this.getField(form, 'oglive').options = {
       label: 'iso',
-      value: 'iso'
+      value: 'directory'
     };
     this.getField(form, 'repository').options = {
       label: 'name',
@@ -20,9 +20,10 @@ export class ClientFormType extends GlobunetFormType {
       label: 'name',
     };
     this.getField(form, 'netboot').options = {
-      label: 'name',
+      label: 'name'
     };
 
+
     return form;
   }
 }
diff --git a/admin/WebConsole3/frontend/src/app/model/repository.ts b/admin/WebConsole3/frontend/src/app/model/repository.ts
index 36838128..93a717db 100644
--- a/admin/WebConsole3/frontend/src/app/model/repository.ts
+++ b/admin/WebConsole3/frontend/src/app/model/repository.ts
@@ -3,7 +3,8 @@ import { Resource } from 'globunet-angular/core/models/api/resource';
 export class Repository extends Resource {
   name: string;
   ip: string;
-  password: string;
+  randomId: string;
+  secret: string;
   description: string;
   info: any;
 
@@ -11,7 +12,8 @@ export class Repository extends Resource {
     super();
     this.name = '';
     this.ip = '';
-    this.password = '';
+    this.randomId = '';
+    this.secret = '';
     this.description = '';
   }
 }
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.html b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.html
index d45463ba..7e010811 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.html
@@ -1,15 +1,15 @@
-<div class="form-row" *ngFor="let row of formType.rows;  let index = index">

-  <div class="form-group {{getCol(index)}}" *ngFor="let field of row" >

-    <label>

-      {{field.label|translate}}

-    </label>

-    <div class="input-group">

-      <input class="form-control" *ngIf="field.type != 'textarea' && field.type != 'checkbox' && field.type != 'select'" [type]="field.type" [name]="field.name" [(ngModel)]="model[field.field]"/>

-      <textarea class="form-control" *ngIf="field.type == 'textarea'" [name]="field.name" [(ngModel)]="model[field.field]"></textarea>

-      <input *ngIf="field.type == 'checkbox'" [name]="field.name" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="model[field.field]" />

-      <select *ngIf="field.type == 'select'" [name]="field.name" [(ngModel)]="model[field.field]">

-        <option *ngFor="let option of field.options.items" [value]="getValue(field, option)">{{option[field.options.label]|translate}}</option>

-      </select>

-    </div>

-  </div>

-</div>

+<div class="form-row" *ngFor="let row of formType.rows;  let index = index">
+  <div class="form-group {{getCol(index)}}" *ngFor="let field of row" >
+    <label>
+      {{field.label|translate}}
+    </label>
+    <div class="input-group">
+      <input class="form-control" *ngIf="field.type != 'textarea' && field.type != 'checkbox' && field.type != 'select'" [type]="field.type" [name]="field.name" [(ngModel)]="model[field.field]"/>
+      <textarea class="form-control" *ngIf="field.type == 'textarea'" [name]="field.name" [(ngModel)]="model[field.field]"></textarea>
+      <input *ngIf="field.type == 'checkbox'" [name]="field.name" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="model[field.field]" />
+      <select *ngIf="field.type == 'select'" [compareWith]="compareFn" [name]="field.name" [(ngModel)]="model[field.field]">
+        <option *ngFor="let option of field.options.items" [ngValue]="getValue(field, option)">{{option[field.options.label]|translate}}</option>
+      </select>
+    </div>
+  </div>
+</div>
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
index 86412ad0..2cb113be 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
@@ -9,7 +9,7 @@ export class FormInputComponent {
   private _cols: number;
 
   @Input() model;
-
+    
   @Input()
   set cols(cols) {
     this._cols = (typeof cols !== 'undefined') ? (12 / cols) : 6;
@@ -43,4 +43,15 @@ export class FormInputComponent {
     }
     return result;
   }
+
+  compareFn = (a, b) => {
+    let result = false;
+    if (a !== null && b !== null && typeof a === 'object' && typeof b === 'object') {
+      result = (a.id === b.id);
+    } else{
+      result = (a === b);
+    }
+    return result;
+  }
+
 }
diff --git a/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.html b/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.html
index 5b43af7e..bf8d9955 100644
--- a/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.html
@@ -1,37 +1,37 @@
-<section class="content-header">

-  <h1 translate="{{netboot.name||'new_netboot'}}">

-  </h1>

-  <ol class="breadcrumb">

-    <li><a [routerLink]="'app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>

-    <li><a [routerLink]="'app/netboots'" ><i class="fa fa-th"></i> {{'netboot_templates'|translate}}</a></li>

-    <li class="active" translate="netboot"></li>

-  </ol>

-</section>

-<section fixed-toolboxbar class="toolboxbar">

-  <div>

-    <div class="col-md-12">

-      <div class="box-tools pull-right">

-        <button class="btn btn-primary" translate="save" (click)="save()"></button>

-      </div>

-    </div>

-  </div>

-</section>

-<section class="content">

-  <div class="row">

-    <div class="col-md-12">

-      <div class="box box-primary">

-        <div class="box-header with-border">

-          <h3 class="box-title" translate="netboot_data"></h3>

-        </div>

-        <div class="box-body">

-          <form role="form" name="Form">

-            <app-form-input [formType]="form" [model]="netboot" [cols]="1"></app-form-input>

-

-          </form>

-        </div>

-        <div class="box-footer">

-        </div>

-      </div>

-    </div>

-  </div>

-</section>

+<section class="content-header">
+  <h1 translate="{{netboot.name||'new_netboot'}}">
+  </h1>
+  <ol class="breadcrumb">
+    <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+    <li><a [routerLink]="'/app/netboots'" ><i class="fa fa-th"></i> {{'netboot_templates'|translate}}</a></li>
+    <li class="active" translate="netboot"></li>
+  </ol>
+</section>
+<section fixed-toolboxbar class="toolboxbar">
+  <div>
+    <div class="col-md-12">
+      <div class="box-tools pull-right">
+        <button class="btn btn-primary" translate="save" (click)="save()"></button>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="content">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+          <h3 class="box-title" translate="netboot_data"></h3>
+        </div>
+        <div class="box-body">
+          <form role="form" name="Form">
+            <app-form-input [formType]="form" [model]="netboot" [cols]="1"></app-form-input>
+
+          </form>
+        </div>
+        <div class="box-footer">
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.ts b/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.ts
index 8e74784f..360e8fff 100644
--- a/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/netboot/edit/netboot-edit.component.ts
@@ -1,63 +1,64 @@
-import {Component, OnInit} from '@angular/core';

-

-import { NetbootService } from 'src/app/api/netboot.service';

-import { Netboot } from 'src/app/model/netboot';

-import {OgSweetAlertService} from '../../../service/og-sweet-alert.service';

-import {ToasterService} from '../../../service/toaster.service';

-import {TranslateService} from '@ngx-translate/core';

-import {ActivatedRoute, Router} from '@angular/router';

-import {NetbootFormType} from '../../../form-type/netboot.form-type';

-

-@Component({

-  selector: 'app-netboot',

-  templateUrl: './netboot-edit.component.html',

-  styleUrls: [ './netboot-edit.component.scss' ]

-})

-export class NetbootEditComponent implements OnInit {

-  private form: any[];

-  public netboot: Netboot;

-

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(public netbootService: NetbootService, private router: Router, private activatedRoute: ActivatedRoute,  private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private  translate: TranslateService) {

-    this.form = new NetbootFormType().getForm();

-  }

-

-  ngOnInit(): void {

-    this.activatedRoute.paramMap.subscribe(

-      (data: any) => {

-        if (data.params.id) {

-          this.netbootService.read(data.params.id).subscribe(

-            response => {

-              this.netboot = response;

-            },

-            error => {

-              this.toaster.pop({type: 'error', title: 'error', body: error});

-            }

-          );

-        } else {

-          this.netboot = new Netboot();

-        }

-      }

-    );

-

-  }

-

-

-  save() {

-    let request;

-    if (this.netboot.id === 0) {

-      request = this.netbootService.create(this.netboot);

-    } else {

-      request = this.netbootService.update(this.netboot);

-    }

-    request.subscribe(

-      data => {

-        this.router.navigate(['/app/netboots']);

-      },

-      error => {

-        this.toaster.pop({type: 'error', title: 'error', body: error});

-      }

-    );

-  }

-}

+import {Component, OnInit} from '@angular/core';
+
+import { NetbootService } from 'src/app/api/netboot.service';
+import { Netboot } from 'src/app/model/netboot';
+import {OgSweetAlertService} from '../../../service/og-sweet-alert.service';
+import {ToasterService} from '../../../service/toaster.service';
+import {TranslateService} from '@ngx-translate/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NetbootFormType} from '../../../form-type/netboot.form-type';
+
+@Component({
+  selector: 'app-netboot',
+  templateUrl: './netboot-edit.component.html',
+  styleUrls: [ './netboot-edit.component.scss' ]
+})
+export class NetbootEditComponent implements OnInit {
+  private form: any[];
+  public netboot: Netboot;
+
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(public netbootService: NetbootService, private router: Router, private activatedRoute: ActivatedRoute,  private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private  translate: TranslateService) {
+    this.form = new NetbootFormType().getForm();
+    this.netboot = new Netboot();
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.paramMap.subscribe(
+      (data: any) => {
+        if (data.params.id) {
+          this.netbootService.read(data.params.id).subscribe(
+            response => {
+              this.netboot = response;
+            },
+            error => {
+              this.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+          );
+        } else {
+          this.netboot = new Netboot();
+        }
+      }
+    );
+
+  }
+
+
+  save() {
+    let request;
+    if (this.netboot.id === 0) {
+      request = this.netbootService.create(this.netboot);
+    } else {
+      request = this.netbootService.update(this.netboot);
+    }
+    request.subscribe(
+      data => {
+        this.router.navigate(['/app/netboots']);
+      },
+      error => {
+        this.toaster.pop({type: 'error', title: 'error', body: error});
+      }
+    );
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/netboot/netboot.component.ts b/admin/WebConsole3/frontend/src/app/pages/netboot/netboot.component.ts
index 78718ca9..a275e0be 100644
--- a/admin/WebConsole3/frontend/src/app/pages/netboot/netboot.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/netboot/netboot.component.ts
@@ -1,89 +1,89 @@
-import {Component, OnInit} from '@angular/core';

-

-import { NetbootService } from 'src/app/api/netboot.service';

-import { Netboot } from 'src/app/model/netboot';

-import {OgSweetAlertService} from '../../service/og-sweet-alert.service';

-import {ToasterService} from '../../service/toaster.service';

-import {TranslateService} from '@ngx-translate/core';

-import {Router} from '@angular/router';

-

-@Component({

-  selector: 'app-netboot',

-  templateUrl: './netboot.component.html',

-  styleUrls: [ './netboot.component.scss' ]

-})

-export class NetbootComponent implements OnInit {

-  searchText: any;

-  netboots: any[];

-  tableOptions: any;

-

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(public netbootService: NetbootService, private router: Router, private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private  translate: TranslateService) {

-    this.tableOptions = {

-        override: false,

-        buttons: [

-          {

-            action: 'edit'

-          },

-          {

-            action: 'copy',

-            label: 'copy',

-            handler: (rowData) => this.goToNetbootCopy(rowData),

-            classes: 'btn-default'

-          },

-          {

-            action: 'delete'

-          }

-        ]

-    };

-  }

-

-  ngOnInit(): void {

-    this.netbootService.list().subscribe(

-      response => {

-        this.netboots = response;

-      },

-      error => {

-        this.toaster.pop({type: 'error', title: 'error', body: error});

-      }

-    );

-  }

-

-  deleteNetboot(id) {

-    const self = this;

-    this.ogSweetAlert.question(this.translate.instant('sure_to_delete') + '?', this.translate.instant('action_cannot_be_undone'), function() {

-      self.netbootService.delete(id).subscribe(

-        (response) => {

-          self.toaster.pop({type: 'success', title: self.translate.instant('success'), body: self.translate.instant('successfully_deleted')});

-          const index = self.netboots.findIndex((object) => object.id === id);

-          if (index !== -1) {

-            self.netboots.splice(index, 1);

-          }

-        },

-        (error) => {

-          self.toaster.pop({type: 'error', title: 'error', body: error});

-        }

-      );

-    });

-  }

-

-  goToNetbootEdit(id) {

-    this.router.navigate(['/app/netboots/', id, 'edit']);

-  }

-

-  goToNetbootCopy(template: Netboot) {

-    const copy = Object.assign({}, template);

-    this.netbootService.create(copy).subscribe(

-      data => {

-        // Comprobar que en data viene el id

-        const newId = data.id;

-        this.goToNetbootEdit(newId);

-      },

-      error => {

-        this.toaster.pop({type: 'error', title: 'error', body: error});

-      }

-    );

-

-  }

-}

+import {Component, OnInit} from '@angular/core';
+
+import { NetbootService } from 'src/app/api/netboot.service';
+import { Netboot } from 'src/app/model/netboot';
+import {OgSweetAlertService} from '../../service/og-sweet-alert.service';
+import {ToasterService} from '../../service/toaster.service';
+import {TranslateService} from '@ngx-translate/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-netboot',
+  templateUrl: './netboot.component.html',
+  styleUrls: [ './netboot.component.scss' ]
+})
+export class NetbootComponent implements OnInit {
+  searchText: any;
+  netboots: any[];
+  tableOptions: any;
+
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(public netbootService: NetbootService, private router: Router, private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private  translate: TranslateService) {
+    this.tableOptions = {
+        override: false,
+        buttons: [
+          {
+            action: 'edit'
+          },
+          {
+            action: 'copy',
+            label: 'copy',
+            handler: (rowData) => this.goToNetbootCopy(rowData),
+            classes: 'btn-default'
+          },
+          {
+            action: 'delete',
+          }
+        ]
+    };
+  }
+
+  ngOnInit(): void {
+    this.netbootService.list().subscribe(
+      response => {
+        this.netboots = response;
+      },
+      error => {
+        this.toaster.pop({type: 'error', title: 'error', body: error});
+      }
+    );
+  }
+
+  deleteNetboot(id) {
+    const self = this;
+    this.ogSweetAlert.question(this.translate.instant('sure_to_delete') + '?', this.translate.instant('action_cannot_be_undone'), function() {
+      self.netbootService.delete(id).subscribe(
+        (response) => {
+          self.toaster.pop({type: 'success', title: self.translate.instant('success'), body: self.translate.instant('successfully_deleted')});
+          const index = self.netboots.findIndex((object) => object.id === id);
+          if (index !== -1) {
+            self.netboots.splice(index, 1);
+          }
+        },
+        (error) => {
+          self.toaster.pop({type: 'error', title: 'error', body: error});
+        }
+      );
+    });
+  }
+
+  goToNetbootEdit(id) {
+    this.router.navigate(['/app/netboots/', id, 'edit']);
+  }
+
+  goToNetbootCopy(template: Netboot) {
+    const copy = Object.assign({}, template);
+    this.netbootService.create(copy).subscribe(
+      data => {
+        // Comprobar que en data viene el id
+        const newId = data.id;
+        this.goToNetbootEdit(newId);
+      },
+      error => {
+        this.toaster.pop({type: 'error', title: 'error', body: error});
+      }
+    );
+
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.html b/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.html
index a2d0cf28..a8d072f8 100644
--- a/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.html
@@ -40,7 +40,7 @@
       </div>
       <div class="box-footer">
         <mk-box header="{{'filesystem_info'|translate}}" [isCollapsable]="true" [isRemovable]="false" contentClasses="table-responsive">
-          <button type="button" [disabled]="repository.password.length == 0" class="btn btn-primary pull-right"  (click)="refreshRepoInfo(repository)">
+          <button type="button" [disabled]="!repository.randomId || repository.randomId.length == 0" class="btn btn-primary pull-right"  (click)="refreshRepoInfo(repository)">
             <i class="fa fa-refresh"></i> <span translate="refresh_info"></span>
           </button>
           <div class="box-body no-padding" >
diff --git a/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.ts b/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.ts
index 12c82d70..76723533 100644
--- a/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/repository/repository.component.ts
@@ -1,150 +1,151 @@
-import {Component, OnInit} from '@angular/core';

-

-import { RepositoryService } from 'src/app/api/repository.service';

-import { Repository } from 'src/app/model/repository';

-import {OgCommonService} from '../../service/og-common.service';

-import {RepositoryFormType} from '../../form-type/repository.form-type';

-import {OgSweetAlertService} from '../../service/og-sweet-alert.service';

-import {TranslateService} from '@ngx-translate/core';

-import {ToasterService} from '../../service/toaster.service';

-

-@Component({

-  selector: 'app-repository',

-  templateUrl: './repository.component.html',

-  styleUrls: [ './repository.component.scss' ]

-})

-export class RepositoryComponent implements OnInit {

-  repositories: Repository[];

-  OGCommonService: any;

-  formType: any;

-  loaderFlags: object = {};

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(public repositoryService: RepositoryService, private ogCommonService: OgCommonService, private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private translate: TranslateService) {

-    this.OGCommonService = ogCommonService;

-    this.formType = new RepositoryFormType().getForm();

-  }

-

-  ngOnInit(): void {

-    this.repositoryService.list().subscribe(

-      data => {

-        this.repositories = data;

-      },

-      error => {

-        // TODO

-        alert(error);

-      }

-    );

-  }

-

-   newRepository() {

-    this.repositories.push(new Repository());

-  }

-

-   saveRepository(Form, repository) {

-    const result = true;

-

-    // Si no hubo ningun error se guardan todas las pgms

-    if (result === true) {

-      this.loaderFlags[repository.id] = true;

-

-      // Con angular.toJson se eliminan los atributos que empiecen por $$

-      let method;

-      if (!repository.id) {

-        method = this.repositoryService.create(repository);

-      } else {

-        method = this.repositoryService.update(repository);

-      }

-      method.subscribe(

-        (response) => {

-          this.loaderFlags[repository.id] = false;

-          repository.id = response.id;

-          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully saved'});

-        },

-        (error) => {

-          this.loaderFlags[repository.id] = false;

-          this.toaster.pop({type: 'error', title: 'error', body: error});

-        }

-      );

-    }

-  }

-

-   deleteRepository(repository) {

-    this.ogSweetAlert.question(this.translate.instant('opengnsys_question'), this.translate.instant('sure_to_delete') + '?', (yes) => {

-      if (repository.id) {

-        this.repositoryService.delete(repository.id).subscribe(

-          (response) => {

-            this.removeRepositoryFromArray(repository);

-          },

-          (error) => {

-            this.toaster.pop({type: 'error', title: 'error', body: error});

-          }

-        );

-      } else {

-        this.removeRepositoryFromArray(repository);

-      }

-    });

-  }

-

-   removeRepositoryFromArray(repository) {

-    const index = this.repositories.indexOf(repository);

-    if (index !== -1) {

-      this.repositories.splice(index, 1);

-    }

-    this.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});

-  }

-

-   refreshRepoInfo(repository) {

-    this.loaderFlags[repository.id] = true;

-    this.repositoryService.getInfo(repository).subscribe(

-      (response) => {

-        this.loaderFlags[repository.id] = false;

-        repository.info = response;

-        const fileGroups = {};

-        // Agrupamos los ficheros de imágenes según su nombre

-        repository.info.files.forEach(function(file, key) {

-          let basename = file.name.split('.')[0];

-          // Es una imagen de backup

-          if (file.name.match(/\.ant$/)) {

-            basename += '.ant';

-          }

-

-          if (!fileGroups[basename]) {

-            fileGroups[basename] = [];

-          }

-          fileGroups[basename].push(file);

-

-        });

-

-        repository.info.files = fileGroups;

-      },

-      (error) => {

-        this.loaderFlags[repository.id] = false;

-      }

-    );

-  }

-

-   isImageFile(file) {

-    return !(file.name.match(/(\.img$)|(\.img.ant$)/) === null);

-  }

-

-   deleteImageFile(file) {

-    this.ogSweetAlert.question(

-      this.translate.instant('opengnsys_question'),

-      this.translate.instant('sure_to_delete') + '?',

-      (yes) => {

-        // TODO - borrar el fichero físico y también la imagen asociada

-      }

-    );

-  }

-

-  isRepositoryLoading(repository): boolean {

-    let result = false;

-    if (repository && repository.id) {

-      if (this.loaderFlags && this.loaderFlags[repository.id]) {

-        result = this.loaderFlags[repository.id];

-      }

-    }

-    return result;

-  }

-}

+import {Component, OnInit} from '@angular/core';
+
+import { RepositoryService } from 'src/app/api/repository.service';
+import { Repository } from 'src/app/model/repository';
+import {OgCommonService} from '../../service/og-common.service';
+import {RepositoryFormType} from '../../form-type/repository.form-type';
+import {OgSweetAlertService} from '../../service/og-sweet-alert.service';
+import {TranslateService} from '@ngx-translate/core';
+import {ToasterService} from '../../service/toaster.service';
+
+@Component({
+  selector: 'app-repository',
+  templateUrl: './repository.component.html',
+  styleUrls: [ './repository.component.scss' ]
+})
+export class RepositoryComponent implements OnInit {
+  repositories: Repository[];
+  OGCommonService: any;
+  formType: any;
+  loaderFlags: object = {};
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(public repositoryService: RepositoryService, private ogCommonService: OgCommonService, private ogSweetAlert: OgSweetAlertService, private toaster: ToasterService, private translate: TranslateService) {
+    this.OGCommonService = ogCommonService;
+    this.formType = new RepositoryFormType().getForm();
+    this.repositories = [];
+  }
+
+  ngOnInit(): void {
+    this.repositoryService.list().subscribe(
+      data => {
+        this.repositories = data;
+      },
+      error => {
+        // TODO
+        alert(error);
+      }
+    );
+  }
+
+   newRepository() {
+    this.repositories.push(new Repository());
+  }
+
+   saveRepository(Form, repository) {
+    const result = true;
+
+    // Si no hubo ningun error se guardan todas las pgms
+    if (result === true) {
+      this.loaderFlags[repository.id] = true;
+
+      // Con angular.toJson se eliminan los atributos que empiecen por $$
+      let method;
+      if (!repository.id) {
+        method = this.repositoryService.create(repository);
+      } else {
+        method = this.repositoryService.update(repository);
+      }
+      method.subscribe(
+        (response) => {
+          this.loaderFlags[repository.id] = false;
+          repository.id = response.id;
+          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully saved'});
+        },
+        (error) => {
+          this.loaderFlags[repository.id] = false;
+          this.toaster.pop({type: 'error', title: 'error', body: error});
+        }
+      );
+    }
+  }
+
+   deleteRepository(repository) {
+    this.ogSweetAlert.question(this.translate.instant('opengnsys_question'), this.translate.instant('sure_to_delete') + '?', (yes) => {
+      if (repository.id) {
+        this.repositoryService.delete(repository.id).subscribe(
+          (response) => {
+            this.removeRepositoryFromArray(repository);
+          },
+          (error) => {
+            this.toaster.pop({type: 'error', title: 'error', body: error});
+          }
+        );
+      } else {
+        this.removeRepositoryFromArray(repository);
+      }
+    });
+  }
+
+   removeRepositoryFromArray(repository) {
+    const index = this.repositories.indexOf(repository);
+    if (index !== -1) {
+      this.repositories.splice(index, 1);
+    }
+    this.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
+  }
+
+   refreshRepoInfo(repository) {
+    this.loaderFlags[repository.id] = true;
+    this.repositoryService.getInfo(repository).subscribe(
+      (response) => {
+        this.loaderFlags[repository.id] = false;
+        repository.info = response;
+        const fileGroups = {};
+        // Agrupamos los ficheros de imágenes según su nombre
+        repository.info.files.forEach(function(file, key) {
+          let basename = file.name.split('.')[0];
+          // Es una imagen de backup
+          if (file.name.match(/\.ant$/)) {
+            basename += '.ant';
+          }
+
+          if (!fileGroups[basename]) {
+            fileGroups[basename] = [];
+          }
+          fileGroups[basename].push(file);
+
+        });
+
+        repository.info.files = fileGroups;
+      },
+      (error) => {
+        this.loaderFlags[repository.id] = false;
+      }
+    );
+  }
+
+   isImageFile(file) {
+    return !(file.name.match(/(\.img$)|(\.img.ant$)/) === null);
+  }
+
+   deleteImageFile(file) {
+    this.ogSweetAlert.question(
+      this.translate.instant('opengnsys_question'),
+      this.translate.instant('sure_to_delete') + '?',
+      (yes) => {
+        // TODO - borrar el fichero físico y también la imagen asociada
+      }
+    );
+  }
+
+  isRepositoryLoading(repository): boolean {
+    let result = false;
+    if (repository && repository.id) {
+      if (this.loaderFlags && this.loaderFlags[repository.id]) {
+        result = this.loaderFlags[repository.id];
+      }
+    }
+    return result;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
index 694e15f9..9ee7427f 100644
--- a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
+++ b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
@@ -5,11 +5,11 @@ export class ClientSerializer extends Serializer {
 
     toJson(client: Client): any {
         // @ts-ignore
-        client.repository = (client.repository) ? client.repository.id : null;
+        client.repository = (typeof client.repository === 'object') ? client.repository.id : client.repository;
         // @ts-ignore
         client.hardwareProfile = (client.hardwareProfile) ? client.hardwareProfile.id : null;
         // @ts-ignore
-        client.netboot = (client.netboot) ? client.netboot.id : null;
+        client.netboot = (typeof client.netboot === 'object') ? client.netboot.id : client.netboot;
         return super.toJson(client);
     }
 }
diff --git a/admin/WebConsole3/frontend/src/environments/environment.ts b/admin/WebConsole3/frontend/src/environments/environment.ts
index ef17e26d..16b61e25 100644
--- a/admin/WebConsole3/frontend/src/environments/environment.ts
+++ b/admin/WebConsole3/frontend/src/environments/environment.ts
@@ -1,7 +1,7 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-const url = 'https://SERVERIP/opengnsys3';
+const url = 'https://172.16.140.210/opengnsys3';
 export const environment = {
   production: false,
   BASE_URL: url,
@@ -9,8 +9,8 @@ export const environment = {
   API_PUBLIC_URL: url + '/api',
   API_BASE_URL: '/backend/web/app_dev.php/api',
   OAUTH_DOMAIN: '/backend/web/app_dev.php/oauth/v2/token',
-  OAUTH_CLIENT_ID: 'CLIENTID',
-  OAUTH_CLIENT_SECRET: 'CLIENTSECRET',
+  OAUTH_CLIENT_ID: '1_23amzbdp4kskg80444oscko4w0w8wokocs88k0g8w88o4oggs4',
+  OAUTH_CLIENT_SECRET: '46rttt2trwo4gocgoc4w80k4s8ok48sg8s84kk0cw48csks8o8',
   BASE_DIR: 'opengnsys3',
   clientstatus: ['off', 'initializing', 'oglive', 'busy', 'linux', 'linux_session', 'macos', 'windows', 'windows_session'],
   windowsboots: ['reboot', 'directo (kexec)'],
diff --git a/admin/WebConsole3/frontend/src/styles.scss b/admin/WebConsole3/frontend/src/styles.scss
index b0a5eaec..febcea42 100644
--- a/admin/WebConsole3/frontend/src/styles.scss
+++ b/admin/WebConsole3/frontend/src/styles.scss
@@ -22,9 +22,11 @@ table.table-no-border {
 .loader {
   position: absolute;
   top: 0;
+  right: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
+  background: rgba(21,21,21,0.2);
 }
 
 #loading-bar .bar {