### File

`src/app/save-file/save-file.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-save-file`
styleUrls | `./save-file.component.scss`
templateUrl | `./save-file.component.html`

### Index

###### Properties

- Public fileService
- isActive
- isUploading

###### Methods

- ngOnInit
- setState
- submitFile

###### Inputs

- file

###### Outputs

- savedFile

### Constructor

`constructor(fileService: FileService, router: Router)`
Defined in src/app/save-file/save-file.component.ts:16

Parameters :

Name | Type | Optional
fileService | `FileService` | No
router | `Router` | No

### Inputs

file
Type : `File`
Defined in src/app/save-file/save-file.component.ts:15

### Outputs

savedFile
Type : `EventEmitter`
Defined in src/app/save-file/save-file.component.ts:14

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/save-file/save-file.component.ts:21
Returns : `void`

setState
`setState(value: boolean)`
Defined in src/app/save-file/save-file.component.ts:24

Parameters :

Name | Type | Optional
value | `boolean` | No

Returns : `void`

submitFile
`submitFile()`
Defined in src/app/save-file/save-file.component.ts:32
Returns : `void`

### Properties

Public fileService
Type : `FileService`
Defined in src/app/save-file/save-file.component.ts:18

isActive
Default value : `false`
Defined in src/app/save-file/save-file.component.ts:13

isUploading
Default value : `false`
Defined in src/app/save-file/save-file.component.ts:16

    import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
    import {FileService} from '../file.service';
    import {File} from '../file';
    import {Router} from '@angular/router';

    @Component({
      selector: 'app-save-file',
      templateUrl: './save-file.component.html',
      styleUrls: ['./save-file.component.scss']
    })
    export class SaveFileComponent implements OnInit {

      isActive = false;
      @Output() savedFile = new EventEmitter<boolean>();
      @Input() file: File;
      isUploading = false;

      constructor(public fileService: FileService, private router: Router) {
      }

      ngOnInit(): void {
      }

      setState(value: boolean): void {
        const text = document.getElementById('filenameInput') as HTMLTextAreaElement;
        this.isActive = value;
        if (value) {
          text.focus();
        }
      }

      submitFile(): void {
        this.isUploading = true;
        this.fileService.upload(this.file, false)
          .subscribe((response) => {
            this.isUploading = false;
            this.savedFile.emit(true);
            this.isActive = false;
            this.router.navigate(['/arena/file/', this.file.filename + this.file.language]).then();
            console.log(response);
          }, (error) => {
            console.log(error);
            this.isUploading = false;
          });
      }
    }

    <div [class.open]="isActive" id="save-cover"></div>

    <div [class.open]="isActive" id="save-popup">
      <div *ngIf="!isUploading">
        <label for="filenameInput" id="filenameInputLabel">Enter Filename:</label><br>
        <input [(ngModel)]="file.filename" id="filenameInput" name="filenameInput" type="text">
        <span>{{file.language}}</span>
        <br>
        <button (click)="isActive = false" id="save-cancel">Cancel</button>
        <button (click)="file.filename !== '' && submitFile()" [class.disabled]="file.filename === ''" id="save-done">Done
        </button>
      </div>
      <div *ngIf="isUploading">Uploading...</div>
    </div>

`./save-file.component.scss`

    #save-popup {
      position: fixed;
      top: 50%;
      width: 30vw;
      left: calc(35vw - 20px);
      border-bottom: 1px solid #ddf;
      padding: 20px;
      background: #224;
      transform: translateY(-50%) scale(0);
      opacity: 0;
      transition: all 0.25s;
      z-index: 1000;

      &.open {
        transform: translateY(-50%) scale(1);
        opacity: 1;
      }
    }

    #filenameInput {
      box-sizing: border-box;
      width: 100%;
      color: #ddf;
      font-size: 1.05em;
      background: transparent;
      border: none;
      font-family: Lato, sans-serif;
    }

    #filenameInputLabel {
      display: block;
      margin-bottom: 10px;
    }

    #save-done, #save-cancel {
      float: right;
      margin: 0 2px;
    }

    #save-cover {
      z-index: 999;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: none;

      &.open {
        display: block;
      }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""