From 3ef54ee56ed9f8dc5f6efb5a3af939ac7f88377b Mon Sep 17 00:00:00 2001 From: "hugo.pradier2" Date: Thu, 18 Jan 2024 13:13:53 +0100 Subject: [PATCH] Apply suggestion and add coloration for c, c++ and shell --- src/app/components/editor/editor.component.ts | 98 ++++++++++--------- 1 file changed, 52 insertions(+), 46 deletions(-) diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index 6563ebc..07f941c 100644 --- a/src/app/components/editor/editor.component.ts +++ b/src/app/components/editor/editor.component.ts @@ -1,50 +1,52 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { CodeExecutionService } from 'src/app/services/codeExecution.service'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { CodeExecutionService } from "src/app/services/codeExecution.service"; +import "codemirror/mode/shell/shell.js"; +import "codemirror/mode/clike/clike.js"; // Exemple de code pour chaque langage autorisé 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';`, - 'text/javascript': `const component = { + "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 + "text/x-c++src": `#include using namespace std; int main() { cout << "Bonjour ceci est un test de code en c++" << endl; return 0; }`, - 'text/x-csrc': `#include + "text/x-csrc": `#include 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"` + "text/x-sh": `#!/bin/bash +echo "Bonjour ceci est un test de code en shell"`, }; // Langages autorisés -type AllowedLanguage = 'text/x-sh' | 'text/javascript' | 'text/typescript' | 'text/x-c++src' | 'text/x-csrc'; +type AllowedLanguage = keyof typeof codeDefaults; @Component({ - selector: 'app-editor', - templateUrl: './editor.component.html', - styleUrls: ['./editor.component.scss'] + selector: "app-editor", + templateUrl: "./editor.component.html", + styleUrls: ["./editor.component.scss"], }) 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: AllowedLanguage = 'text/typescript'; + mode: AllowedLanguage = "text/typescript"; options = { lineNumbers: true, mode: this.mode, @@ -53,13 +55,15 @@ export class EditorComponent implements OnInit { // Contenu de l'éditeur que l'on passera au serveur editorContent: string = this.defaults[this.mode as keyof typeof codeDefaults]; - resultContent: string = ''; + resultContent: string = ""; // Message d'erreur - errorMessage: string = ''; + errorMessage: string = ""; - constructor(private router: Router, private codeExecutionService: CodeExecutionService) { - } + constructor( + private router: Router, + private codeExecutionService: CodeExecutionService + ) {} ngOnInit(): void { // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode @@ -77,65 +81,66 @@ export class EditorComponent implements OnInit { // 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.editorContent = ''; + 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(); - + 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 = { - 'sh': 'text/x-sh', - 'js': 'text/javascript', - 'ts': 'text/typescript', - 'cpp': 'text/x-c++src', - 'c': 'text/x-csrc' + 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. + 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'; + 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 = { - "text/x-sh" : 'sh', - "text/javascript": 'js', - "text/typescript": 'ts', - "text/x-c++src" : 'cpp', - "text/x-csrc": 'c' + "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.'; + 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'); + 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); @@ -143,7 +148,8 @@ export class EditorComponent implements OnInit { document.body.removeChild(a); } } else { - this.errorMessage = 'Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c'; + this.errorMessage = + "Unsupported language. Please select one of the following languages: shell, javascript, typescript, c++, c"; console.error(this.errorMessage); } } @@ -154,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; }); }