From a86a40e845bf538f3545594ce52be27fea120573 Mon Sep 17 00:00:00 2001 From: cofrizot Date: Wed, 12 Jun 2024 17:21:21 +0200 Subject: [PATCH] Bug fix and format code --- src/app/app-routing.module.ts | 7 +- .../components/editor/editor.component.scss | 3 +- src/app/components/editor/editor.component.ts | 358 +++++++++--------- .../components/header/header.component.html | 3 +- src/app/components/header/header.component.ts | 16 +- .../privacy-policy.component.scss | 4 +- .../terms-of-service.component.scss | 4 +- .../components/work/work.component.spec.ts | 9 +- src/app/components/work/work.component.ts | 23 +- .../works-list/works-list.component.html | 38 +- .../works-list/works-list.component.spec.ts | 7 +- .../works-list/works-list.component.ts | 42 +- src/app/models/work.model.ts | 12 +- src/app/services/work.service.ts | 86 +++-- src/app/services/works.service.ts | 49 +-- src/assets/i18n/en.json | 2 +- src/assets/i18n/fr.json | 2 +- 17 files changed, 341 insertions(+), 324 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1d8ce7c..3e44984 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -20,8 +20,7 @@ const routes: Routes = [ ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], }) -export class AppRoutingModule { -} +export class AppRoutingModule {} diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss index 67b2c54..af49434 100644 --- a/src/app/components/editor/editor.component.scss +++ b/src/app/components/editor/editor.component.scss @@ -73,7 +73,6 @@ select { height: 100%; } - // @mixin btn-styles($bg-color, $font-color) { // background-color: $bg-color; @@ -94,4 +93,4 @@ select { // .btn-save { // @include btn-styles(red, white); -// } \ No newline at end of file +// } diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index ea1d0b1..d7caa0f 100644 --- a/src/app/components/editor/editor.component.ts +++ b/src/app/components/editor/editor.component.ts @@ -1,195 +1,197 @@ -import {Component, ViewChild} from '@angular/core'; -import {CodeExecutionService} from 'src/app/services/codeExecution.service'; -import {Compartment} from '@codemirror/state'; -import {CodeMirrorComponent} from '@sandkasten/codemirror6-editor'; -import {LanguageDescription} from '@codemirror/language'; -import {CODE_DEFAULTS, LANGUAGES} from '../languages'; -import {SafeHTMLPipe} from '../../safe-html.pipe'; +import { Component, ViewChild } from '@angular/core'; +import { CodeExecutionService } from 'src/app/services/codeExecution.service'; +import { Compartment } from '@codemirror/state'; +import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor'; +import { LanguageDescription } from '@codemirror/language'; +import { CODE_DEFAULTS, LANGUAGES } from '../languages'; +import { SafeHTMLPipe } from '../../safe-html.pipe'; import { TranslateModule } from '@ngx-translate/core'; -import {ReactiveFormsModule, FormsModule} from '@angular/forms'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { - keymap, - highlightSpecialChars, - drawSelection, - highlightActiveLine, - dropCursor, - rectangularSelection, - crosshairCursor, - lineNumbers, - highlightActiveLineGutter, - gutter, + keymap, + highlightSpecialChars, + drawSelection, + highlightActiveLine, + dropCursor, + rectangularSelection, + crosshairCursor, + lineNumbers, + highlightActiveLineGutter, + gutter, } from '@codemirror/view'; -import {Extension, EditorState} from '@codemirror/state'; +import { Extension, EditorState } from '@codemirror/state'; import { - defaultHighlightStyle, - syntaxHighlighting, - indentOnInput, - bracketMatching, - foldGutter, - foldKeymap, + defaultHighlightStyle, + syntaxHighlighting, + indentOnInput, + bracketMatching, + foldGutter, + foldKeymap, } from '@codemirror/language'; -import {defaultKeymap, history, historyKeymap} from '@codemirror/commands'; -import {searchKeymap, highlightSelectionMatches} from '@codemirror/search'; +import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'; +import { searchKeymap, highlightSelectionMatches } from '@codemirror/search'; import { - autocompletion, - completionKeymap, - closeBrackets, - closeBracketsKeymap, + autocompletion, + completionKeymap, + closeBrackets, + closeBracketsKeymap, } from '@codemirror/autocomplete'; -import {lintKeymap} from '@codemirror/lint'; -import {WorkService} from "../../services/work.service"; +import { lintKeymap } from '@codemirror/lint'; +import { WorkService } from '../../services/work.service'; const basicSetup: Extension = (() => [ - highlightActiveLineGutter(), - highlightSpecialChars(), - history(), - foldGutter(), - drawSelection(), - dropCursor(), - EditorState.allowMultipleSelections.of(true), - indentOnInput(), - syntaxHighlighting(defaultHighlightStyle, {fallback: true}), - bracketMatching(), - closeBrackets(), - autocompletion(), - rectangularSelection(), - crosshairCursor(), - highlightActiveLine(), - highlightSelectionMatches(), - keymap.of([ - ...closeBracketsKeymap, - ...defaultKeymap, - ...searchKeymap, - ...historyKeymap, - ...foldKeymap, - ...completionKeymap, - ...lintKeymap, - ]), + highlightActiveLineGutter(), + highlightSpecialChars(), + history(), + foldGutter(), + drawSelection(), + dropCursor(), + EditorState.allowMultipleSelections.of(true), + indentOnInput(), + syntaxHighlighting(defaultHighlightStyle, { fallback: true }), + bracketMatching(), + closeBrackets(), + autocompletion(), + rectangularSelection(), + crosshairCursor(), + highlightActiveLine(), + highlightSelectionMatches(), + keymap.of([ + ...closeBracketsKeymap, + ...defaultKeymap, + ...searchKeymap, + ...historyKeymap, + ...foldKeymap, + ...completionKeymap, + ...lintKeymap, + ]), ])(); @Component({ - selector: 'app-editor', - templateUrl: './editor.component.html', - styleUrls: ['./editor.component.scss'], - standalone: true, - imports: [ - CodeMirrorComponent, - ReactiveFormsModule, - FormsModule, - SafeHTMLPipe, - TranslateModule - ], + selector: 'app-editor', + templateUrl: './editor.component.html', + styleUrls: ['./editor.component.scss'], + standalone: true, + imports: [ + CodeMirrorComponent, + ReactiveFormsModule, + FormsModule, + SafeHTMLPipe, + TranslateModule, + ], }) export class EditorComponent { - isLoaded: boolean = false; // Pour vérifier si le chargement est terminé - - readonly languages: LanguageDescription[] = LANGUAGES; - // Mode par défaut - private _selectedLanguage = this.languages.find( - (lang) => lang.name === 'JavaScript' - )!; - get selectedLanguage(): LanguageDescription { - return this._selectedLanguage; + isLoaded: boolean = false; // Pour vérifier si le chargement est terminé + + readonly languages: LanguageDescription[] = LANGUAGES; + // Mode par défaut + private _selectedLanguage = this.languages.find( + (lang) => lang.name === 'JavaScript' + )!; + get selectedLanguage(): LanguageDescription { + return this._selectedLanguage; + } + + set selectedLanguage(value: LanguageDescription) { + this._selectedLanguage = value; + if (value.name in CODE_DEFAULTS) { + this.editorContent = + CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS]; } - - set selectedLanguage(value: LanguageDescription) { - this._selectedLanguage = value; - if (value.name in CODE_DEFAULTS) { - this.editorContent = - CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS]; - } - this.selectedLanguage.load().then((language) => { - this.codemirror.editor?.dispatch({ - effects: this.languageCompartment.reconfigure(language), - }); - }); - } - - private _linesNumbers: boolean = true; - get linesNumbers() { - return this._linesNumbers; - } - - set linesNumbers(lines: boolean) { - this._linesNumbers = lines; - this.codemirror.editor?.dispatch({ - effects: this.gutterCompartment.reconfigure( - lines ? lineNumbers() : gutter({}) - ), - }); - } - - // Contenu de l'éditeur que l'on passera au serveur - editorContent: string = - CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS]; - resultContent: string = ''; - - // Message d'erreur - errorMessage: string = ''; - - @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent; - - private readonly languageCompartment = new Compartment(); - private readonly gutterCompartment = new Compartment(); - protected readonly extensions: Extension[] = [ - basicSetup, - this.gutterCompartment.of(lineNumbers()), - this.languageCompartment.of(this.selectedLanguage.support!), - ]; - - constructor(private codeExecutionService: CodeExecutionService, protected workService: WorkService) { - } - - // Efface le contenu de l'éditeur - clear(): void { - this.editorContent = ''; - } - - onRunButtonClicked() { - // Le code à exécuter est le contenu de l'éditeur - const codeToExecute = this.editorContent; - - this.codeExecutionService.executeCode( - codeToExecute, - this.selectedLanguage.name - ); - - this.resultContent = ''; - } - - loadFromFile(event: Event) { - const file = (event.target as HTMLInputElement).files![0]; - for (const language of this.languages) { - if (language.extensions.some((ext) => file.name.endsWith(`.${ext}`))) { - this.selectedLanguage = language; - const reader = new FileReader(); - reader.onload = (event) => { - this.editorContent = event.target!.result as string; - this.errorMessage = ''; - }; - reader.readAsText(file); - return; - } - } - const extensions = this.languages.flatMap((lang) => lang.extensions); - this.errorMessage = `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`; - console.error(this.errorMessage); - } - - saveToFile() { - const blob = new Blob([this.editorContent], {type: 'text/plain'}); - const a = document.createElement('a'); - a.download = `code.${this.selectedLanguage.extensions![0]}`; - a.href = URL.createObjectURL(blob); - a.click(); - } - - addToDatabase() { - this.workService.postWorkCode(this.editorContent); + this.selectedLanguage.load().then((language) => { + this.codemirror.editor?.dispatch({ + effects: this.languageCompartment.reconfigure(language), + }); + }); + } + + private _linesNumbers: boolean = true; + get linesNumbers() { + return this._linesNumbers; + } + + set linesNumbers(lines: boolean) { + this._linesNumbers = lines; + this.codemirror.editor?.dispatch({ + effects: this.gutterCompartment.reconfigure( + lines ? lineNumbers() : gutter({}) + ), + }); + } + + // Contenu de l'éditeur que l'on passera au serveur + editorContent: string = + CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS]; + resultContent: string = ''; + + // Message d'erreur + errorMessage: string = ''; + + @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent; + + private readonly languageCompartment = new Compartment(); + private readonly gutterCompartment = new Compartment(); + protected readonly extensions: Extension[] = [ + basicSetup, + this.gutterCompartment.of(lineNumbers()), + this.languageCompartment.of(this.selectedLanguage.support!), + ]; + + constructor( + private codeExecutionService: CodeExecutionService, + protected workService: WorkService + ) {} + + // Efface le contenu de l'éditeur + clear(): void { + this.editorContent = ''; + } + + onRunButtonClicked() { + // Le code à exécuter est le contenu de l'éditeur + const codeToExecute = this.editorContent; + + this.codeExecutionService.executeCode( + codeToExecute, + this.selectedLanguage.name + ); + + this.resultContent = ''; + } + + loadFromFile(event: Event) { + const file = (event.target as HTMLInputElement).files![0]; + for (const language of this.languages) { + if (language.extensions.some((ext) => file.name.endsWith(`.${ext}`))) { + this.selectedLanguage = language; + const reader = new FileReader(); + reader.onload = (event) => { + this.editorContent = event.target!.result as string; + this.errorMessage = ''; + }; + reader.readAsText(file); + return; + } } - - shareButtonClicked(){} - saveButtonClicked(){} - - protected readonly console = console; + const extensions = this.languages.flatMap((lang) => lang.extensions); + this.errorMessage = `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`; + console.error(this.errorMessage); + } + + saveToFile() { + const blob = new Blob([this.editorContent], { type: 'text/plain' }); + const a = document.createElement('a'); + a.download = `code.${this.selectedLanguage.extensions![0]}`; + a.href = URL.createObjectURL(blob); + a.click(); + } + + addToDatabase() { + this.workService.postWorkCode(this.editorContent); + } + + shareButtonClicked() {} + saveButtonClicked() {} + + protected readonly console = console; } diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index d7db694..16f134a 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -27,9 +27,8 @@