diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2ec202c..0157bb2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,26 +1,29 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { EditorComponent } from './components/editor/editor.component';
-import { LandingPageComponent } from './components/landing-page/landing-page.component';
-import { DocumentationComponent } from './components/documentation/documentation.component';
-import { FormComponent } from './components/form/form.component';
-import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
-import { OurStoryComponent } from './components/our-story/our-story.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {EditorComponent} from './components/editor/editor.component';
+import {LandingPageComponent} from './components/landing-page/landing-page.component';
+import {DocumentationComponent} from './components/documentation/documentation.component';
+import {FormComponent} from './components/form/form.component';
+import {TermsOfServiceComponent} from './components/terms-of-service/terms-of-service.component';
+import {OurStoryComponent} from './components/our-story/our-story.component';
+import {PrivacyPolicyComponent} from './components/privacy-policy/privacy-policy.component';
+import {WorksListComponent} from "./components/works-list/works-list.component";
// Toutes les routes de l'application sont définies ici
const routes: Routes = [
- { path: '', component: LandingPageComponent },
- { path: 'editor', component: EditorComponent },
- { path: 'documentation', component: DocumentationComponent },
- { path: 'contact', component: FormComponent },
- { path: 'our-story', component: OurStoryComponent },
- { path: 'terms-of-service', component: TermsOfServiceComponent },
- { path: 'privacy-policy', component: PrivacyPolicyComponent },
+ {path: '', component: LandingPageComponent},
+ {path: 'editor', component: EditorComponent},
+ {path: 'documentation', component: DocumentationComponent},
+ {path: 'contact', component: FormComponent},
+ {path: 'our-story', component: OurStoryComponent},
+ {path: 'terms-of-service', component: TermsOfServiceComponent},
+ {path: 'privacy-policy', component: PrivacyPolicyComponent},
+ {path: 'works', component: WorksListComponent},
];
@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.html b/src/app/components/editor/editor.component.html
index df54939..a4cc5fd 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -1,107 +1,112 @@
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index d8793e5..09cb48c 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -1,179 +1,190 @@
-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 { ReactiveFormsModule, FormsModule } from '@angular/forms';
+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 {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 {lintKeymap} from '@codemirror/lint';
+import {WorksService} from "../../services/works.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,
- ],
+ selector: 'app-editor',
+ templateUrl: './editor.component.html',
+ styleUrls: ['./editor.component.scss'],
+ standalone: true,
+ imports: [
+ CodeMirrorComponent,
+ ReactiveFormsModule,
+ FormsModule,
+ SafeHTMLPipe,
+ ],
})
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;
- }
- set selectedLanguage(value: LanguageDescription) {
- this._selectedLanguage = value;
- if (value.name in CODE_DEFAULTS) {
- this.editorContent =
- CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS];
+ 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];
+ }
+ this.selectedLanguage.load().then((language) => {
+ this.codemirror.editor?.dispatch({
+ effects: this.languageCompartment.reconfigure(language),
+ });
+ });
}
- 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) {}
-
- // 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;
- }
+
+ private _linesNumbers: boolean = true;
+ get linesNumbers() {
+ return this._linesNumbers;
}
- 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();
- }
+
+ 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: WorksService) {
+ }
+
+ // 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);
+ }
+
+ protected readonly console = console;
}
diff --git a/src/app/components/works-list/works-list.component.css b/src/app/components/works-list/works-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/works-list/works-list.component.html b/src/app/components/works-list/works-list.component.html
new file mode 100644
index 0000000..0d10fc6
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.html
@@ -0,0 +1,21 @@
+Works
+
+
+ -
+ {{ work.id_work }} - {{ work.link }} - {{ work.content }}
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/works-list/works-list.component.spec.ts b/src/app/components/works-list/works-list.component.spec.ts
new file mode 100644
index 0000000..113215e
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorksListComponent } from './works-list.component';
+
+describe('WorksListComponent', () => {
+ let component: WorksListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [WorksListComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(WorksListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/works-list/works-list.component.ts b/src/app/components/works-list/works-list.component.ts
new file mode 100644
index 0000000..b2c7c26
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.ts
@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {Work} from "../../models/work.model";
+import {WorksService} from "../../services/works.service";
+import {NgForOf} from "@angular/common";
+import {FormsModule, NgForm} from "@angular/forms";
+
+@Component({
+ selector: 'app-works-list',
+ standalone: true,
+ imports: [
+ NgForOf,
+ FormsModule
+ ],
+ templateUrl: './works-list.component.html',
+ styleUrl: './works-list.component.css'
+})
+export class WorksListComponent {
+ works: Work[] = [];
+
+ constructor(protected workService: WorksService) {
+ }
+
+ ngOnInit() {
+ this.workService.getWorks().subscribe((response: Work[]) => this.works = response)
+ }
+
+ onSubmit(form: NgForm) {
+ this.workService.postWork(form);
+ }
+}
diff --git a/src/app/models/work.model.ts b/src/app/models/work.model.ts
new file mode 100644
index 0000000..abc6e90
--- /dev/null
+++ b/src/app/models/work.model.ts
@@ -0,0 +1,7 @@
+export interface Work {
+ id_work: number,
+ link: string,
+ user_id: number,
+ language_id: number,
+ content: string
+}
\ No newline at end of file
diff --git a/src/app/services/works.service.ts b/src/app/services/works.service.ts
new file mode 100644
index 0000000..fda8a26
--- /dev/null
+++ b/src/app/services/works.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Work} from "../models/work.model";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {NgForm} from "@angular/forms";
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class WorksService {
+ API_URL = 'http://127.0.0.1:3000'
+
+ private works: Work[] = [];
+
+ constructor(private http: HttpClient) {
+ }
+
+ getWorks(): Observable {
+ return this.http.get(`${this.API_URL}/works`);
+ }
+
+ postWork(form: NgForm): void {
+ let body = {link: form.value.link, id_user: 1, id_language: 1, code: form.value.content}
+ this.http.post(`${this.API_URL}/works`, body).subscribe();
+ }
+
+ postWorkCode(code: string): void {
+ let body = {link: 'TODO', id_user: 1, id_language: 1, code: code}
+ this.http.post(`${this.API_URL}/works`, body).subscribe();
+ }
+}
\ No newline at end of file