Support for IOU

src/app/app-routing.module.ts

@@ -43,6 +43,9 @@ import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-
 import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component';
 import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component';
 import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
+import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
+import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
+import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
 
 const routes: Routes = [
   {
@@ -98,7 +101,11 @@ const routes: Routes = [
 
       { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
       { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent }
+      { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent },
+
+      { path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent },
+      { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent },
+      { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent }
     ]
   },
   { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent }

src/app/app.module.ts

@@ -150,6 +150,11 @@ import { DockerTemplatesComponent } from './components/preferences/docker/docker
 import { DockerConfigurationService } from './services/docker-configuration.service';
 import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component';
 import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
+import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
+import { IouService } from './services/iou.service';
+import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
+import { IouConfigurationService } from './services/iou-configuration.service';
+import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -241,7 +246,10 @@ if (environment.production) {
     DeleteTemplateComponent,
     DockerTemplatesComponent,
     AddDockerTemplateComponent,
-    DockerTemplateDetailsComponent
+    DockerTemplateDetailsComponent,
+    IouTemplatesComponent,
+    AddIouTemplateComponent,
+    IouTemplateDetailsComponent
   ],
   imports: [
     BrowserModule,
@@ -306,7 +314,9 @@ if (environment.production) {
     VmwareService,
     VmwareConfigurationService,
     DockerService,
-    DockerConfigurationService
+    DockerConfigurationService,
+    IouService,
+    IouConfigurationService
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html

@@ -0,0 +1,73 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New IOU device template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-vertical-stepper [linear]="true">
+                <mat-step label="Server type">
+                    <mat-radio-group class="radio-group">
+                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this IOU device on a remote computer</mat-radio-button>
+                        <mat-radio-button class="radio-button" value="2" (click)="setServerType('gns3 vm')" checked>Run this IOU device on the GNS3 VM</mat-radio-button>
+                    </mat-radio-group>
+                </mat-step>
+                <mat-step label="Name">
+                    <form [formGroup]="templateNameForm">
+                        <mat-form-field class="form-field">
+                            <input matInput placeholder="Name" type="text" [(ngModel)]="iouTemplate.name" formControlName="templateName"/>
+                        </mat-form-field>
+                    </form>
+                </mat-step>
+                <mat-step label="Image">
+                    <form [formGroup]="imageForm">
+                        <mat-radio-group class="radio-group">
+                            <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked>Existing image</mat-radio-button>
+                            <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')">New image</mat-radio-button>
+                        </mat-radio-group>
+                        <mat-form-field class="form-field">
+                            <mat-select 
+                                placeholder="Type" 
+                                [(ngModel)]="selectedType"
+                                [ngModelOptions]="{standalone: true}">
+                                <mat-option *ngFor="let type of types" [value]="type">
+                                    {{type}}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                        <mat-form-field class="form-field" *ngIf="!newImageSelected">
+                            <mat-select 
+                                placeholder="IOU image" 
+                                [(ngModel)]="iouTemplate.path"
+                                [ngModelOptions]="{standalone: true}">
+                                <mat-option *ngFor="let image of iouImages" [value]="image">
+                                    {{image}}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                        <div *ngIf="newImageSelected">
+                            <input
+                                type="file"
+                                accept=".bin"
+                                #file
+                                class="nonvisible"
+                                (change)="uploadImageFile($event)"
+                                ngDefaultControl/>
+                            <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+                            <mat-form-field class="file-name-form-field">
+                                <input
+                                    matInput
+                                    type="text"
+                                    [(ngModel)]="iouTemplate.path"
+                                    formControlName="imageName"
+                                    placeholder="IOU image"/>
+                            </mat-form-field>
+                        </div>
+                    </form>
+                    <div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
+                </mat-step>
+            </mat-vertical-stepper>
+        </div>
+    </div>
+</div>

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.scss

@@ -0,0 +1,30 @@
+.form-field {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+    padding-bottom: 30px;
+}
+
+.radio-group {
+    margin-bottom: 20px;
+}
+
+.buttons-bar {
+    padding-top: 20px;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { v4 as uuid } from 'uuid';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+import { IouTemplate } from '../../../../models/templates/iou-template';
+import { IouService } from '../../../../services/iou.service';
+
+
+@Component({
+    selector: 'app-add-iou-template',
+    templateUrl: './add-iou-template.component.html',
+    styleUrls: ['./add-iou-template.component.scss']
+})
+export class AddIouTemplateComponent implements OnInit {
+    server: Server;
+    iouTemplate: IouTemplate;
+    isGns3VmChosen: boolean = false;
+    isRemoteComputerChosen: boolean = false;
+    newImageSelected: boolean = false;
+    types: string[] = ['L2 image', 'L3 image'];
+    selectedType: string;
+    iouImages: string[] = [];
+
+    templateNameForm: FormGroup;
+    imageForm: FormGroup;
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iouService: IouService,
+        private toasterService: ToasterService,
+        private router: Router,
+        private formBuilder: FormBuilder,
+        private templateMocksService: TemplateMocksService
+    ) {
+        this.iouTemplate = new IouTemplate();
+
+        this.templateNameForm = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required)
+        });
+
+        this.imageForm = this.formBuilder.group({
+            imageName: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.templateMocksService.getIouTemplate().subscribe((iouTemplate: IouTemplate) => {
+                this.iouTemplate = iouTemplate;
+            })
+        });
+    }
+
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm') {
+            this.isGns3VmChosen = true;
+        } else {
+            this.isRemoteComputerChosen = true;
+        }
+    }
+
+    setDiskImage(value: string) {
+        this.newImageSelected = value === "newImage";
+    }
+
+    uploadImageFile(event) {
+        this.iouTemplate.path = event.target.files[0].name;
+    }
+
+    addTemplate() {
+        if (!this.templateNameForm.invalid && !this.imageForm.invalid) {
+            this.iouTemplate.template_id = uuid();
+
+            this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html

@@ -0,0 +1,113 @@
+<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened}">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">IOU device configuration</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="iouTemplate">
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        General settings
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field class="row">
+                    <input matInput type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input matInput type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format">
+                </mat-form-field>
+                <mat-form-field class="row">
+                        <input matInput type="text" [(ngModel)]="iouTemplate.symbol" placeholder="Symbol">
+                    </mat-form-field>
+                <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                <mat-form-field class="row">
+                    <mat-select placeholder="Category" [(ngModel)]="iouTemplate.category">
+                        <mat-option *ngFor="let category of categories" [value]="category[1]">
+                            {{category[0]}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <input
+                    type="file"
+                    accept=".bin"
+                    #file
+                    class="nonvisible"
+                    (change)="uploadImageFile($event)"
+                    ngDefaultControl/>
+                <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+                <mat-form-field class="file-name-form-field">
+                    <input
+                        matInput
+                        type="text"
+                        [(ngModel)]="iouTemplate.path"
+                        placeholder="IOU image path"/>
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input matInput type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input matInput type="text" [(ngModel)]="iouTemplate.private_config" placeholder="Private config">
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
+                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                            {{type}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-checkbox [(ngModel)]="iouTemplate.console_auto_start">
+                    Auto start console
+                </mat-checkbox><br/>
+                <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
+                    Enable layer 1 keepalive messages (non-functional)
+                </mat-checkbox><br/>
+                <mat-checkbox [(ngModel)]="defaultSettings">
+                    Use default IOU values for memories
+                </mat-checkbox>
+                <mat-form-field class="row" *ngIf="!defaultSettings">
+                    <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size">
+                </mat-form-field>
+                <mat-form-field class="row" *ngIf="!defaultSettings">
+                    <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size">
+                </mat-form-field>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Network
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field class="row">
+                    <input matInput type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input matInput type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters">
+                </mat-form-field>
+            </mat-expansion-panel>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Usage
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field class="row">
+                    <textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
+                </mat-form-field>
+            </mat-expansion-panel>
+        </mat-accordion>
+        <div class="buttons-bar"><button mat-raised-button color="primary" (click)="onSave()">Save</button></div>
+    </div>
+</div>
+<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Symbol selection</h1>
+            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <app-symbols [server]="server" [symbol]="iouTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.scss

@@ -0,0 +1,72 @@
+.row {
+    width: 100%;
+    margin-left: 0px;
+}
+
+.select {
+    width: 100%;
+}
+
+.nonvisible {
+    display: none;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-right: 2%;
+    width: 80%;
+}
+
+.configButton {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.configHideButton {
+    margin-left: 80%;
+    width: 20%;
+    margin-bottom: 10px;
+}
+
+.shadowed {
+    display: none;
+    transition: 0.25s;
+}
+
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
+.nonshadowed {
+    opacity: 0;
+    transition: 0.25s;
+}
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}
+
+.file-button {
+    width: 18%;
+}
+
+.file-name-form-field {
+    padding-left: 2%;
+    width: 80%;
+}

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
+import { IouTemplate } from '../../../../models/templates/iou-template';
+import { IouService } from '../../../../services/iou.service';
+import { IouConfigurationService } from '../../../../services/iou-configuration.service';
+
+
+@Component({
+    selector: 'app-iou-template-details',
+    templateUrl: './iou-template-details.component.html',
+    styleUrls: ['./iou-template-details.component.scss']
+})
+export class IouTemplateDetailsComponent implements OnInit {
+    server: Server;
+    iouTemplate: IouTemplate;
+
+    isSymbolSelectionOpened: boolean = false;
+    defaultSettings: boolean = true;
+
+    consoleTypes: string[] = [];
+    consoleResolutions: string[] = [];
+    categories = [];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iouService: IouService,
+        private toasterService: ToasterService,
+        private configurationService: IouConfigurationService
+    ){}
+
+    ngOnInit(){
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+            
+            this.getConfiguration();
+            this.iouService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
+                this.iouTemplate = iouTemplate;
+            });
+        });
+    }
+
+    getConfiguration(){
+        this.consoleTypes = this.configurationService.getConsoleTypes();
+        this.categories = this.configurationService.getCategories();
+    }
+
+    onSave(){
+        this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe((savedTemplate: IouTemplate) => {
+            this.toasterService.success("Changes saved");
+        });
+    }
+
+    uploadImageFile(event) {
+        this.iouTemplate.path = event.target.files[0].name;
+    }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.iouTemplate.symbol = chosenSymbol;
+    }
+}

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html

@@ -0,0 +1,25 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">IOU devices templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <mat-list-item *ngFor='let template of iouTemplates'>
+                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.scss

@@ -0,0 +1,12 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+}

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
+import { IouTemplate } from '../../../../models/templates/iou-template';
+import { IouService } from '../../../../services/iou.service';
+
+
+@Component({
+    selector: 'app-iou-templates',
+    templateUrl: './iou-templates.component.html',
+    styleUrls: ['./iou-templates.component.scss']
+})
+export class IouTemplatesComponent implements OnInit {
+    server: Server;
+    iouTemplates: IouTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private iouService: IouService 
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+            this.getTemplates();
+        });
+    }
+
+    getTemplates() {
+        this.iouTemplates = [];
+        this.iouService.getTemplates(this.server).subscribe((iouTemplates: IouTemplate[]) => {
+            iouTemplates.forEach((template) => {
+                if ((template.template_type === 'iou') && !template.builtin) {
+                    this.iouTemplates.push(template);
+                }
+            });
+        });
+    }
+
+    deleteTemplate(template: IouTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent(deletedTemplateId: string) {
+        this.getTemplates();
+    }
+}

src/app/components/preferences/preferences.component.html

@@ -17,6 +17,11 @@
                         Dynamips
                     </button>
                 </mat-list-item>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/iou/templates">
+                        IOS on Unix
+                    </button>
+                </mat-list-item>
                 <mat-list-item>
                     <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
                         VPCS

src/app/models/iou/iou-image.ts

@@ -0,0 +1,6 @@
+export class IouImage {
+    filename: string;
+    filesize: number;
+    md5sum: string;
+    path: string;
+}

src/app/services/iou-configuration.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export class IouConfigurationService {
+    getConsoleTypes() {
+        return ['telnet', 'none'];
+    }
+
+    getCategories() {
+        let categories = [["Default", "guest"],
+            ["Routers", "router"],
+            ["Switches", "switch"],
+            ["End devices", "end_device"],
+            ["Security devices", "security_device"]];
+
+        return categories;
+    }
+}

src/app/services/iou.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from "@angular/core";
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Observable } from 'rxjs';
+import { IouTemplate } from '../models/templates/iou-template';
+import { IouImage } from '../models/iou/iou-image';
+
+@Injectable()
+export class IouService {
+    constructor(private httpServer: HttpServer) {}
+
+    getTemplates(server: Server): Observable<IouTemplate[]> {
+        return this.httpServer.get<IouTemplate[]>(server, '/templates') as Observable<IouTemplate[]>;
+    }
+
+    getTemplate(server: Server, template_id: string): Observable<any> {
+        return this.httpServer.get<IouTemplate>(server, `/templates/${template_id}`) as Observable<IouTemplate>;
+    }
+
+    getImages(server: Server): Observable<IouImage[]> {
+        return this.httpServer.get<IouImage[]>(server, '/compute/iou/images') as Observable<IouImage[]>;
+    }
+
+    addTemplate(server: Server, iouTemplate: any): Observable<any> {
+        return this.httpServer.post<IouTemplate>(server, `/templates`, iouTemplate) as Observable<IouTemplate>;
+    }
+
+    saveTemplate(server: Server, iouTemplate: any): Observable<any> {
+        return this.httpServer.put<IouTemplate>(server, `/templates/${iouTemplate.template_id}`, iouTemplate) as Observable<IouTemplate>;
+
+    }
+}