src/app/save-file/save-file.component.ts
selector | app-save-file |
styleUrls | ./save-file.component.scss |
templateUrl | ./save-file.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
constructor(fileService: FileService, router: Router)
|
|||||||||
Defined in src/app/save-file/save-file.component.ts:16
|
|||||||||
Parameters :
|
file | |
Type : File
|
|
Defined in src/app/save-file/save-file.component.ts:15
|
savedFile | |
Type : EventEmitter
|
|
Defined in src/app/save-file/save-file.component.ts:14
|
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 :
Returns :
void
|
submitFile |
submitFile()
|
Defined in src/app/save-file/save-file.component.ts:32
|
Returns :
void
|
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;
}
}