src/app/file/file.component.ts
selector | app-file |
styleUrls | ./file.component.scss |
templateUrl | ./file.component.html |
Properties |
Methods |
constructor(fileService: FileService, dataService: ApiService)
|
|||||||||
Defined in src/app/file/file.component.ts:26
|
|||||||||
Parameters :
|
Public countFiles | ||||||
countFiles(directory: Directory)
|
||||||
Defined in src/app/file/file.component.ts:129
|
||||||
Parameters :
Returns :
number
|
createDirExec | ||||||
createDirExec(name: string)
|
||||||
Defined in src/app/file/file.component.ts:119
|
||||||
Parameters :
Returns :
void
|
createFileExec | ||||||
createFileExec(file: File)
|
||||||
Defined in src/app/file/file.component.ts:114
|
||||||
Parameters :
Returns :
void
|
deleteDirExec | ||||||
deleteDirExec($event: any)
|
||||||
Defined in src/app/file/file.component.ts:107
|
||||||
Parameters :
Returns :
void
|
deleteFileExec | ||||||
deleteFileExec($event: any)
|
||||||
Defined in src/app/file/file.component.ts:100
|
||||||
Parameters :
Returns :
void
|
getFiles |
getFiles()
|
Defined in src/app/file/file.component.ts:37
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/file/file.component.ts:32
|
Returns :
void
|
onChange | ||||
onChange(event)
|
||||
Defined in src/app/file/file.component.ts:45
|
||||
Parameters :
Returns :
void
|
onUpload |
onUpload()
|
Defined in src/app/file/file.component.ts:50
|
Returns :
void
|
toDirectory |
toDirectory(name: string, obj: any, path: string)
|
Defined in src/app/file/file.component.ts:71
|
Returns :
Directory
|
creatingNew |
Type : number
|
Default value : 0
|
Defined in src/app/file/file.component.ts:26
|
deleting |
Default value : false
|
Defined in src/app/file/file.component.ts:24
|
fileToUpload |
Type : File
|
Default value : null
|
Defined in src/app/file/file.component.ts:25
|
loading |
Default value : false
|
Defined in src/app/file/file.component.ts:23
|
mainDir |
Type : Directory
|
Default value : {
name: '',
files: [],
dirs: [],
path: '/'
}
|
Defined in src/app/file/file.component.ts:16
|
shortLink |
Type : string
|
Default value : ''
|
Defined in src/app/file/file.component.ts:22
|
user |
Type : User
|
Defined in src/app/file/file.component.ts:15
|
import {Component, OnInit} from '@angular/core';
import {File} from '../file';
import {FileService} from '../file.service';
import {ApiService} from '../api.service';
import {User} from '../user';
import {Directory} from '../directory';
@Component({
selector: 'app-file',
templateUrl: './file.component.html',
styleUrls: ['./file.component.scss']
})
export class FileComponent implements OnInit {
user: User;
mainDir: Directory = {
name: '',
files: [],
dirs: [],
path: '/'
};
shortLink = '';
loading = false; // Flag variable
deleting = false; // Flag variable
fileToUpload: File = null;
creatingNew = 0;
constructor(private fileService: FileService,
private dataService: ApiService) {
}
ngOnInit(): void {
this.user = JSON.parse(this.dataService.getToken());
this.getFiles();
}
getFiles(): void {
this.fileService.getFileList(this.user.username)
.subscribe(data => {
this.mainDir = this.toDirectory('', data, '/');
console.log(this.mainDir);
});
}
onChange(event): void {
this.fileToUpload = event.target.files[0];
console.log(this.fileToUpload);
}
onUpload(): void {
if ((document.getElementById('file-upload-input') as HTMLInputElement).value === '') {
return;
}
this.loading = true;
console.log(this.fileToUpload);
this.fileService.upload2(this.fileToUpload).subscribe(
(event: any) => {
if (typeof (event) === 'object') {
this.fileToUpload = null;
(document.getElementById('file-upload-input') as HTMLInputElement).value = '';
this.shortLink = event.link;
this.loading = false;
}
}
);
}
toDirectory(name: string, obj: any, path: string): Directory {
const ret: Directory = {
name,
dirs: [],
files: [],
path: path === '/' ? path : path + '/'
};
for (const file of obj.files) {
const sp = file.split('.');
const f: File = {
username: this.user.username,
filename: file.replace(/\.[^/.]+$/, ''),
language: '.' + sp[sp.length - 1],
text: '',
path: path + '/' + name
};
ret.files.push(f);
}
for (const dir in obj.dirs) {
if (obj.dirs.hasOwnProperty(dir)) {
ret.dirs.push(this.toDirectory(dir, obj.dirs[dir], ret.path + name));
}
}
return ret;
}
deleteFileExec($event: any): void {
const index = this.mainDir.files.indexOf($event, 0);
if (index > -1) {
this.mainDir.files.splice(index, 1);
}
}
deleteDirExec($event: any): void {
const index = this.mainDir.dirs.indexOf($event, 0);
if (index > -1) {
this.mainDir.dirs.splice(index, 1);
}
}
createFileExec(file: File): void {
this.mainDir.files.push(file);
this.creatingNew = 0;
}
createDirExec(name: string): void {
this.mainDir.dirs.push({
name,
dirs: [],
files: [],
path: '/'
});
this.creatingNew = 0;
}
public countFiles(directory: Directory): number {
let count = directory.files.length;
for (const dir of directory.dirs) {
count += this.countFiles(dir);
}
return count;
}
}
<div id="tray">
<button (click)="creatingNew = 2" style="margin-right: 10px;">Create A New File</button>
<button (click)="creatingNew = 1" id="myBtn" style="margin-left: 10px;">Create New Directory</button>
</div>
<div class="container">
{{mainDir.dirs.length}} directories, {{mainDir.files.length}} files (Total {{countFiles(mainDir)}} files):
</div>
<app-file-dir-card *ngIf="creatingNew !== 0" [parentPath]="''" [isNew]="true" [isFile]="creatingNew === 2" (createFile)="createFileExec($event)" (createDir)="createDirExec($event)" (cancelled)="creatingNew = 0" [parentDirs]="this.mainDir.dirs" [parentFiles]="this.mainDir.files"></app-file-dir-card>
<app-file-dir-card *ngFor="let dir of mainDir.dirs" [isFile]="false" [directory]="dir" [level]="0" [trace]="[mainDir.dirs.indexOf(dir)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)" [isNew]="false" [noEdits]="dir.name === 'attempts'"></app-file-dir-card>
<app-file-dir-card *ngFor="let file of mainDir.files" [isFile]="true" [file]="file" [level]="0" [trace]="[mainDir.files.indexOf(file)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)" [isNew]="false"></app-file-dir-card>
<!--<div [class.open]="uploadPopupActive" id="file-upload-cover"></div>-->
<!--<div [class.open]="uploadPopupActive" id="file-upload-popup">-->
<!-- <p>Upload a file:</p>-->
<!-- <input (change)="onChange($event)" id="file-upload-input" type="file">-->
<!-- <div *ngIf="shortLink !== ''" style="margin-top: 10px">-->
<!-- <a href="{{shortLink}}" target="_blank">Link to last upload</a>-->
<!-- </div>-->
<!-- <p *ngIf="!loading">-->
<!-- <button (click)="uploadPopupActive = false;" id="upload-cancel-btn">Close</button>-->
<!-- <button (click)="onUpload()" id="file-upload-btn" [class.disabled]="fileToUpload == null || fileToUpload == undefined">Upload</button>-->
<!-- </p>-->
<!-- <p *ngIf="loading" style="margin-top: 20px; text-align: center">-->
<!-- Uploading...-->
<!-- </p>-->
<!--</div>-->
./file.component.scss
#tray {
text-align: center;
width: 100%;
button {
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
text-align: center;
font-size: 1rem;
}
}
.container {
margin-bottom: 20px;
}
.card {
padding: 15px;
background: var(--dark);
border-bottom: 1px solid #fff;
button {
float: right;
border: none;
}
.title {
padding: 10px 20px;
font-size: 1.1em;
}
.details {
margin: 10px;
}
.lang {
margin: 10px;
}
}
#file-upload-popup {
position: fixed;
top: calc(40vh - 100px);
width: 30vw;
left: calc(35vw - 20px);
border-bottom: 1px solid #ddf;
padding: 20px;
background: #224;
transform: scale(0);
opacity: 0;
transition: all 0.25s;
z-index: 1000;
a {
font-size: 0.7em;
}
&.open {
transform: none;
opacity: 1;
}
#file-upload-input {
font-family: inherit;
position: relative;
&::-webkit-file-upload-button {
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid #ddf;
padding: 5px 10px;
font-family: Lato, sans-serif;
color: #ddf;
cursor: pointer;
}
}
p {
margin: 0 10px 20px 0;
}
}
#file-upload-btn, #upload-cancel-btn {
float: right;
margin: 10px 2px 0 2px;
}
#file-upload-cover {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
transition: all 0.25s;
&.open {
display: block;
background: #0015;
}
}