file upload frontend

src/app/app-routing.module.ts

@@ -7,12 +7,14 @@ import { IdeComponent } from './ide/ide.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { AuthGuard } from './auth.guard';
+import { FileComponent } from './file/file.component';
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
   { path: 'arena/:id', component: ArenaComponent, canActivate: [AuthGuard] },
   { path: 'arena', component: IdeComponent, canActivate: [AuthGuard] },
   { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
+  { path: 'files', component: FileComponent, canActivate: [AuthGuard] }, 
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
   { path: '**', redirectTo: '/home' },

src/app/app.module.ts

@@ -10,13 +10,15 @@ import { HeaderComponent } from './header/header.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { LDModeComponent } from './l-d-mode/l-d-mode.component';
 import { ApiService } from './api.service';
+import { FileComponent } from './file/file.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     routerComponents,
-    LDModeComponent
+    LDModeComponent,
+    FileComponent
   ],
   imports: [
     BrowserModule,

src/app/file.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { FileService } from './file.service';
+
+describe('FileService', () => {
+  let service: FileService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FileService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/file.service.ts

+import { Injectable } from '@angular/core';
+import { File } from './file';
+import { Observable, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+
+  constructor(private httpClient: HttpClient) { }
+
+  getFiles(): Observable<File[]> {
+
+    const ret: File[] = [];
+
+    const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+    for (const item of arr) {
+      ret.push({
+        id: item,
+        filename: "lambda",
+        language: "cpp/py/java",
+        text: "Random Shit",
+      });
+    }
+
+    return of(ret);
+  }
+
+}

src/app/file.ts

+export interface File {
+    id: number;
+    filename: string;
+    language: string;
+    text: string;
+}
+  
\ No newline at end of file

src/app/file/file.component.html

+<div id="tray">
+    <button>Upload A File</button>
+</div>
+
+<div>
+    All submitted Files are listed Below!
+</div>
+
+<div *ngFor="let file of files" class="card">
+  <div class="title">{{file.filename}}</div>
+  <div class="lang">{{file.language}}</div>
+  <div class="details">{{file.text}}</div>
+
+  <button style="margin-right: 20px;">Run File</button>
+  <button style="margin-left: 20px;">Remove from Database</button>
+
+  <!-- <button [routerLink]="['/arena', problem.id]" class="attempt">Attempt</button> -->
+</div>

src/app/file/file.component.scss

+#tray {
+    text-align: center;
+    // border: 3px solid white;
+    width: 100%;
+    button {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: inline-block;
+        text-align: center;
+        font-size: 1rem;
+    }
+}
+
+.card {
+    margin: 50px 20px;
+    border: 2px solid var(--color);
+    padding: 15px;
+    background: var(--dark);
+  
+    .title {
+      position: absolute;
+      transform: translateY(calc(-25px - 1.2em));
+      background: var(--color);
+      color: var(--bgcolor);
+      padding: 10px 20px;
+      font-size: 1.1em;
+    }
+  
+    .details {
+      margin: 10px;
+    }
+
+    .lang {
+        margin: 10px;
+    }
+}
\ No newline at end of file

src/app/file/file.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileComponent } from './file.component';
+
+describe('FileComponent', () => {
+  let component: FileComponent;
+  let fixture: ComponentFixture<FileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/file/file.component.ts

+import { Component, OnInit } from '@angular/core';
+import { File } from '../file';
+import { FileService } from '../file.service';
+
+@Component({
+  selector: 'app-file',
+  templateUrl: './file.component.html',
+  styleUrls: ['./file.component.scss']
+})
+export class FileComponent implements OnInit {
+
+  constructor(private fileService: FileService) { }
+  files: File[];
+  fileToUpload: File = null;
+
+  ngOnInit(): void {
+    this.getFiles();
+  }
+
+  getFiles(): void {
+    this.fileService.getFiles()
+      .subscribe(files => this.files = files);
+  }
+}

src/app/header/header.component.html

@@ -3,5 +3,6 @@
   <a *ngIf="!loggedIn" routerLink="/login" routerLinkActive="active">Login</a>
   <a *ngIf="loggedIn" routerLink="/home" routerLinkActive="active">Home</a>
   <a *ngIf="loggedIn" routerLink="/arena" routerLinkActive="active">Arena</a>
+  <a *ngIf="loggedIn" routerLink="/files" routerLinkActive="active">Files</a>
   <a *ngIf="loggedIn" routerLink="/user" routerLinkActive="active">User</a>
 </nav>
\ No newline at end of file