File

src/app/file/file.component.ts

Implements

OnInit

Metadata

selector app-file
styleUrls ./file.component.scss
templateUrl ./file.component.html

Index

Properties
Methods

Constructor

constructor(fileService: FileService, dataService: ApiService)
Parameters :
Name Type Optional
fileService FileService No
dataService ApiService No

Methods

Public countFiles
countFiles(directory: Directory)
Parameters :
Name Type Optional
directory Directory No
Returns : number
createDirExec
createDirExec(name: string)
Parameters :
Name Type Optional
name string No
Returns : void
createFileExec
createFileExec(file: File)
Parameters :
Name Type Optional
file File No
Returns : void
deleteDirExec
deleteDirExec($event: any)
Parameters :
Name Type Optional
$event any No
Returns : void
deleteFileExec
deleteFileExec($event: any)
Parameters :
Name Type Optional
$event any No
Returns : void
getFiles
getFiles()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onChange
onChange(event)
Parameters :
Name Optional
event No
Returns : void
onUpload
onUpload()
Returns : void
toDirectory
toDirectory(name: string, obj: any, path: string)
Parameters :
Name Type Optional
name string No
obj any No
path string No
Returns : Directory

Properties

creatingNew
Type : number
Default value : 0
deleting
Default value : false
fileToUpload
Type : File
Default value : null
loading
Default value : false
mainDir
Type : Directory
Default value : { name: '', files: [], dirs: [], path: '/' }
shortLink
Type : string
Default value : ''
user
Type : User
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;
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""