Merge branch 'master' of https://git.cse.iitb.ac.in/ayushjangir/sfcode

merging to move filesave.php and newdir.php upstream

src/app/file.service.ts

@@ -9,7 +9,9 @@ import { HttpClient } from '@angular/common/http';
 })
 export class FileService {
 
-  constructor(private httpClient: HttpClient) { }
+  baseApiUrl = "https://file.io";
+
+  constructor(private http: HttpClient) { }
 
   getFiles(): Observable<File[]> {
 
@@ -29,4 +31,11 @@ export class FileService {
     return of(ret);
   }
 
+  upload(file):Observable<any> { 
+
+    const formData = new FormData(); 
+    formData.append("file", file, file.name); 
+    return this.http.post(this.baseApiUrl, formData) 
+  }
+
 }

src/app/file/file.component.html

 <div id="tray">
-    <button>Upload A File</button>
+    <button style="margin-right: 10px;" routerLink="/arena" routerLinkActive="active">Create A File</button>
+    <button (click)="onClick()" id="myBtn" style="margin-left: 10px;">Upload A File</button>
 </div>
 
 <div>
@@ -11,8 +12,41 @@
   <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 style="margin-right: 15px;">Run File</button>
+  <button style="margin-left: 15px; margin-right: 15px;">Edit File</button>
+  <button style="margin-left: 15px;">Remove From Database</button>
 
   <!-- <button [routerLink]="['/arena', problem.id]" class="attempt">Attempt</button> -->
 </div>
+
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span (click)="onClick2()" class="close">&times;</span>
+
+    <div class="text-center"> 
+      <input class="form-control" type="file" 
+              (change)="onChange($event)"> 
+    
+      <button (click)="onUpload()"  
+          class="btn btn-success"> 
+          Upload 
+      </button> 
+    </div> 
+    
+    <!-- Shareable short link of  uoloaded file -->
+    <div class="container text-center jumbotron"
+        *ngIf="shortLink"> 
+        <h2> Visit Here</h2> 
+        <a href="{{shortLink}}">{{shortLink}}</a> 
+    </div> 
+      
+    <!--Flag variable is used here-->
+    <div class="container" *ngIf="loading"> 
+        <h3>Loading ...</h3> 
+    </div> 
+    
+  </div>
+
+</div>
\ No newline at end of file

src/app/file/file.component.scss

@@ -33,4 +33,43 @@
     .lang {
         margin: 10px;
     }
-}
+}
\ No newline at end of file
+
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background: var(--bgcolor);
+  margin: auto;
+  padding: 20px;
+  border: 2px solid var(--color);
+  border-radius: 10px;
+  width: 80%;
+}
+
+/* The Close Button */
+.close {
+  color: var(--color);
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: white;
+  text-decoration: none;
+  cursor: pointer;
+}

src/app/file/file.component.ts

@@ -11,6 +11,10 @@ export class FileComponent implements OnInit {
 
   constructor(private fileService: FileService) { }
   files: File[];
+
+  // File upload variables
+  shortLink: string = ""; 
+  loading: boolean = false; // Flag variable 
   fileToUpload: File = null;
 
   ngOnInit(): void {
@@ -21,4 +25,36 @@ export class FileComponent implements OnInit {
     this.fileService.getFiles()
       .subscribe(files => this.files = files);
   }
+
+  onClick(): void {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "block";
+  }
+
+  onClick2(): void {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "none";
+    this.shortLink = "";
+    this.loading = false;
+  }
+
+  onChange(event) { 
+    this.fileToUpload = event.target.files[0]; 
+  } 
+
+  onUpload() { 
+    this.loading = !this.loading; 
+    console.log(this.fileToUpload); 
+
+    this.fileService.upload(this.fileToUpload).subscribe( 
+      (event: any) => { 
+        if (typeof (event) === 'object') { 
+
+          this.shortLink = event.link; 
+          this.loading = false; 
+        } 
+      } 
+    ); 
+  } 
+
 }

src/app/ide/ide.component.html

@@ -3,6 +3,7 @@
   <div id="attempt">
     <button id="input">Input</button>
     <button id="run">Run Code</button>
+    <button id="save">Save File</button>
   </div>
   <label for="editor"></label>
   <textarea name="editor" id="editor"></textarea>

src/app/ide/ide.component.scss

@@ -24,7 +24,8 @@
     z-index: 100;
 
     #run,
-    #input {
+    #input,
+    #save {
       display: inline-block;
       background: transparent;
       color: #ddf;