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
Methods
Inputs
Outputs

Constructor

constructor(fileService: FileService, router: Router)
Parameters :
Name Type Optional
fileService FileService No
router Router No

Inputs

file
Type : File

Outputs

savedFile
Type : EventEmitter

Methods

ngOnInit
ngOnInit()
Returns : void
setState
setState(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
submitFile
submitFile()
Returns : void

Properties

Public fileService
Type : FileService
isActive
Default value : false
isUploading
Default value : false
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 ""