Co-authored-by: bastien ollier <bastien.ollier@etu.uca.fr> Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr> Reviewed-on: #8 Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr> Co-authored-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr> Co-committed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>editor-settings
parent
6b5055a50e
commit
0368ba4278
@ -1,40 +1,107 @@
|
||||
<div>
|
||||
<div>
|
||||
<codemirror6-editor
|
||||
[(ngModel)]="editorContent"
|
||||
[extensions]="extensions"></codemirror6-editor>
|
||||
<div id="editor">
|
||||
<div id="editor-bar-header">
|
||||
<div class="editor-section-bar-header">
|
||||
<div class="param-editor">
|
||||
<label for="fileInput">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1 5C1 3.34315 2.34315 2 4 2H8.55848C9.84977 2 10.9962 2.82629 11.4045 4.05132L11.7208 5H20C21.1046 5 22 5.89543 22 7V9.00961C23.1475 9.12163 23.9808 10.196 23.7695 11.3578L22.1332 20.3578C21.9603 21.3087 21.132 22 20.1654 22H3C1.89543 22 1 21.1046 1 20V5ZM20 9V7H11.7208C10.8599 7 10.0956 6.44914 9.82339 5.63246L9.50716 4.68377C9.37105 4.27543 8.98891 4 8.55848 4H4C3.44772 4 3 4.44772 3 5V12.2709L3.35429 10.588C3.54913 9.66249 4.36562 9 5.31139 9H20ZM3.36634 20C3.41777 19.9109 3.4562 19.8122 3.47855 19.706L5.31139 11L21 11H21.8018L20.1654 20L3.36634 20Z"
|
||||
fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</label>
|
||||
<input
|
||||
style="display: none"
|
||||
type="file"
|
||||
id="fileInput"
|
||||
(change)="loadFromFile($event)" />
|
||||
</div>
|
||||
|
||||
<pre [innerHTML]="resultContent | safeHTML"></pre>
|
||||
<div class="param-editor">
|
||||
<button class="button-icon" type="button" (click)="saveToFile()">
|
||||
<svg
|
||||
width="800px"
|
||||
height="800px"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15"
|
||||
stroke="#1C274C"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
d="M12 3V16M12 16L16 11.625M12 16L8 11.625"
|
||||
stroke="#1C274C"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-section-bar-header">
|
||||
@if (errorMessage) {
|
||||
<div class="param-editor">
|
||||
<p style="color: red">{{ errorMessage }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div>
|
||||
<label for="language">Langage de programmation</label>
|
||||
<select id="language" [(ngModel)]="selectedLanguage">
|
||||
@for (language of languages; track language.name) {
|
||||
<option [ngValue]="language">{{ language.name }}</option>
|
||||
}
|
||||
</select>
|
||||
<label for="showLines">Afficher les numéros de lignes</label>
|
||||
<input type="checkbox" [(ngModel)]="linesNumbers" id="showLines" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" (click)="clear()">Remettre à zéro</button>
|
||||
<div class="param-editor">
|
||||
<button
|
||||
class="button-icon button-run"
|
||||
type="button"
|
||||
(click)="onRunButtonClicked()"
|
||||
[disabled]="isLoaded">
|
||||
<div>RUN</div>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="#000000">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
d="M2.78 2L2 2.41v12l.78.42 9-6V8l-9-6zM3 13.48V3.35l7.6 5.07L3 13.48z"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6 14.683l8.78-5.853V8L6 2.147V3.35l7.6 5.07L6 13.48v1.203z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button (click)="onRunButtonClicked()" [disabled]="isLoaded">Lancer</button>
|
||||
|
||||
<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 class="editor-center">
|
||||
<div class="editor-child-element">
|
||||
<codemirror6-editor [(ngModel)]="editorContent" [extensions]="extensions">
|
||||
</codemirror6-editor>
|
||||
</div>
|
||||
<div class="editor-child-element">
|
||||
<pre id="resultDiv" [innerHTML]="resultContent | safeHTML"></pre>
|
||||
</div>
|
||||
@if (errorMessage) {
|
||||
<div>
|
||||
<p style="color: red">{{ errorMessage }}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,74 @@
|
||||
.ngx-codemirror {
|
||||
border: 1px solid #060202;
|
||||
padding-top: 10px;
|
||||
#editor-bar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.editor-section-bar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-run {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #04aa6d;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: #0000f0;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*editor*/
|
||||
|
||||
.editor-center {
|
||||
height: 700px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.editor-child-element {
|
||||
min-height: 100px;
|
||||
height: 100%;
|
||||
width: 1000px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
border-right: 10px solid gray;
|
||||
}
|
||||
|
||||
::ng-deep .codemirror6-editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue