Add editor features (#4)

Co-authored-by: hugo.pradier2 <hugo.pradier2@etu.uca.fr>
Reviewed-on: #4
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Hugo PRADIER <hugo.pradier2@etu.uca.fr>
Co-committed-by: Hugo PRADIER <hugo.pradier2@etu.uca.fr>

src/app/components/editor/editor.component.html

@@ -35,10 +35,14 @@
       id="language"
       name="language"
       [(ngModel)]="mode"
-      (ngModelChange)="changeMode()"
+      (ngModelChange)="changeMode()">
-    >
+
-      <option value="text/typescript">TypeScript</option>
+      <option value="text/typescript" selected>TypeScript</option>
-      <option value="markdown">Markdown</option>
+      <option value="text/javascript">JavaScript</option>
+      <option value="text/x-csrc">C</option>
+      <option value="text/x-c++src">C++</option>
+      <option value="text/x-sh">Shell</option>
+
     </select>
   </div>
 
@@ -51,4 +55,17 @@
     <p>Chargement: {{ loadingProgress }}%</p>
     <div class="loading-bar" [style.width.%]="loadingProgress"></div>
   </div>
+
+  <div>
+    <label for="fileInput">Charger à partir d'un fichier</label>
+    <input type="file" id="fileInput" (change)="loadFromFile($event)" />
+  </div>
+
+  <div>
+    <button type="button" (click)="saveToFile()">Sauvegarder</button>
+  </div>
+
+  <div *ngIf="errorMessage">
+    <p style="color: red">{{ errorMessage }}</p>
+  </div>
 </div>

src/app/components/editor/editor.component.ts

@@ -1,45 +1,73 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
-import { Router } from '@angular/router';
+import { Router } from "@angular/router";
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
+import { CodeExecutionService } from "src/app/services/codeExecution.service";
-
+import "codemirror/mode/shell/shell.js";
-// Exemple de code pour chaque langage
+import "codemirror/mode/clike/clike.js";
-const defaults = {
+
-  markdown:
+// Exemple de code pour chaque langage autorisé
-    '# Sankasten\n\nProjet **SAE 3A** par _FRIZOT, MAZINGUE, OLLIER, FREVILLE ET PRADIER_ text\nGit [Sankasten WEB](https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git)',
+const codeDefaults = {
-    'text/typescript': `const component = {
+  "text/typescript": `const component = {
     name: "@exemple/Typescript",
     author: "Sandkasten",
     repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
-  };
-  const hello: string = 'Bonjour ceci est un test de code en typescript';`
 };
+const hello: string = 'Bonjour ceci est un test de code en typescript';`,
+  "text/javascript": `const component = {
+    name: "@exemple/Javascript",
+    author: "Sandkasten",
+    repo: "https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web.git"
+};
+const hello = 'Bonjour ceci est un test de code en javascript';`,
+  "text/x-c++src": `#include <iostream>
+using namespace std;
+int main() {
+  cout << "Bonjour ceci est un test de code en c++" << endl;
+  return 0;
+}`,
+  "text/x-csrc": `#include <stdio.h>
+int main() {
+   printf("Bonjour ceci est un test de code en c");
+   return 0;
+}`,
+  "text/x-sh": `#!/bin/bash
+echo "Bonjour ceci est un test de code en shell"`,
+};
+
+// Langages autorisés
+type AllowedLanguage = keyof typeof codeDefaults;
 
 @Component({
-  selector: 'app-editor',
+  selector: "app-editor",
-  templateUrl: './editor.component.html',
+  templateUrl: "./editor.component.html",
-  styleUrls: ['./editor.component.scss']
+  styleUrls: ["./editor.component.scss"],
 })
-export class EditorComponent implements OnInit{
+export class EditorComponent implements OnInit {
-  
   loadingProgress: number = 0; // Pour suivre la progression du chargement
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
   // Mode par défaut
-  mode: keyof typeof defaults = 'text/typescript';
+  mode: AllowedLanguage = "text/typescript";
   options = {
     lineNumbers: true,
     mode: this.mode,
   };
-  defaults = defaults;
+  defaults = codeDefaults;
 
   // Contenu de l'éditeur que l'on passera au serveur
-  editorContent: string = defaults[this.mode];
+  editorContent: string = this.defaults[this.mode as keyof typeof codeDefaults];
-  resultContent: string = defaults[this.mode];
+  resultContent: string = "";
 
-  constructor(private router: Router, private codeExecutionService: CodeExecutionService) {}
+  // Message d'erreur
+  errorMessage: string = "";
 
-  ngOnInit(): void {
+  constructor(
+    private router: Router,
+    private codeExecutionService: CodeExecutionService
+  ) {}
 
+  ngOnInit(): void {
+    // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode
+    this.changeMode();
   }
 
   // Change le langage de l'éditeur
@@ -48,16 +76,82 @@ export class EditorComponent implements OnInit{
       ...this.options,
       mode: this.mode,
     };
+    this.editorContent = this.defaults[this.mode as keyof typeof codeDefaults];
   }
 
   // Affiche le contenu de l'éditeur
   handleChange($event: Event): void {
-    console.log('ngModelChange', $event);
+    console.log("ngModelChange", $event);
   }
 
   // Efface le contenu de l'éditeur
   clear(): void {
-    this.defaults[this.mode] = '';
+    this.editorContent = "";
+  }
+
+  loadFromFile(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      const allowedExtensions = ["sh", "js", "ts", "cpp", "c"];
+      const extension = file.name.split(".").pop()?.toLowerCase();
+
+      if (extension && allowedExtensions.includes(extension)) {
+        // Identifiez le mode en fonction de l'extension
+        const modeMap: Record<string, AllowedLanguage> = {
+          sh: "text/x-sh",
+          js: "text/javascript",
+          ts: "text/typescript",
+          cpp: "text/x-c++src",
+          c: "text/x-csrc",
+        };
+        this.mode = modeMap[extension];
+
+        // Mettez à jour le contenu de l'éditeur et le mode
+        this.changeMode();
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.editorContent = e.target?.result as string;
+          this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
+        };
+        reader.readAsText(file);
+      } else {
+        this.errorMessage =
+          "Unsupported file type. Please select a file with one of the following extensions: sh, js, ts, cpp, c";
+        console.error(this.errorMessage);
+      }
+    }
+  }
+
+  saveToFile(): void {
+    const languageExtensionMap: Record<AllowedLanguage, string> = {
+      "text/x-sh": "sh",
+      "text/javascript": "js",
+      "text/typescript": "ts",
+      "text/x-c++src": "cpp",
+      "text/x-csrc": "c",
+    };
+
+    if (languageExtensionMap[this.mode]) {
+      const extension = languageExtensionMap[this.mode];
+      if (this.editorContent.trim() === "") {
+        this.errorMessage = "Cannot save an empty file.";
+        console.error(this.errorMessage);
+      } else {
+        this.errorMessage = ""; // Réinitialisez le message d'erreur en cas de succès.
+        const blob = new Blob([this.editorContent], { type: "text/plain" });
+        const a = document.createElement("a");
+        a.href = window.URL.createObjectURL(blob);
+        a.download = `code.${extension}`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }
+    } else {
+      this.errorMessage =
+        "Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c";
+      console.error(this.errorMessage);
+    }
   }
 
   onRunButtonClicked() {
@@ -66,7 +160,7 @@ export class EditorComponent implements OnInit{
 
     this.codeExecutionService.executeCode(codeToExecute, this.mode);
 
-    this.codeExecutionService.getResult().subscribe(result => {
+    this.codeExecutionService.getResult().subscribe((result) => {
       this.resultContent = result;
     });
   }