sandkasten
/
sandkasten-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixup
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is failing Details

Browse Source
pull/8/head
Clément FRÉVILLE 12 months ago
parent b94c8cd1a7
commit b3dd0063ab
8 changed files with 121 additions and 78 deletions
Show Stats Download Patch File Download Diff File

5
package.json
Unescape View File

@ -12,7 +12,6 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^17.1.1",
"@angular/cdk": "^17.1.1",
"@angular/common": "^17.1.1",
@ -26,8 +25,6 @@
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/state": "^6.4.0",
"@codemirror/view": "^6.23.1",
"@angular/material": "^17.1.0",
"@emailjs/browser": "^3.12.1",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
@ -61,4 +58,4 @@
"prettier": "^3.2.4",
"typescript": "~5.3.3"
}
}
}

152
src/app/components/editor/editor.component.html
Unescape View File

@ -1,66 +1,108 @@
<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>
<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>
<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 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">
<select id="language" [(ngModel)]="selectedLanguage">
@for (language of languages; track language.name) {
<option [ngValue]="language">{{ language.name }}</option>
}
</select>
<div *ngIf="errorMessage" class="param-editor">
<p style="color: red">{{ errorMessage }}</p>
</div>
<select id="language" [(ngModel)]="selectedLanguage">
@for (language of languages; track language.name) {
<option [ngValue]="language">{{ language.name }}</option>
}
</select>
<div class="param-editor">
<button class="button-icon" class="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>
@if (errorMessage) {
<div class="param-editor">
<p style="color: red">{{ errorMessage }}</p>
</div>
}
<div class="param-editor">
<button
class="button-icon"
class="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>
</div>
<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>
</div>
</div>
<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>
</div>
</div>

20
src/app/components/editor/editor.component.scss
Unescape View File

@ -1,4 +1,4 @@
#editor-bar-header{
#editor-bar-header {
display: flex;
align-items: center;
justify-content: space-between;
@ -13,10 +13,9 @@
gap: 1rem;
}
.button-icon {
border:0;
background:transparent;
border: 0;
background: transparent;
cursor: pointer;
}
@ -31,7 +30,7 @@ svg {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #04AA6D;
background-color: #04aa6d;
border: none;
color: white;
padding: 12px 16px;
@ -41,8 +40,7 @@ svg {
border-radius: 10px;
}
select{
select {
background-color: #0000f0;
border: none;
color: white;
@ -50,13 +48,11 @@ select{
font-size: 16px;
cursor: pointer;
border-radius: 10px;
}
/*editor*/
.editor-center{
.editor-center {
height: 700px;
display: flex;
align-items: center;
@ -64,7 +60,7 @@ select{
margin: 0px 0px 0px 0px;
}
.editor-child-element{
.editor-child-element {
min-height: 100px;
height: 100%;
width: 1000px;
@ -75,4 +71,4 @@ select{
::ng-deep .codemirror6-editor {
height: 100%;
}
}

1
src/app/components/editor/editor.component.ts
Unescape View File

@ -150,7 +150,6 @@ export class EditorComponent {
this.resultContent = '';
}
loadFromFile(event: Event) {
const file = (event.target as HTMLInputElement).files![0];
for (const language of this.languages) {

BIN
src/assets/img/download.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/assets/img/open-file.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

10
src/index.html
Unescape View File

@ -8,9 +8,13 @@
<link rel="icon" type="image/x-icon" href="assets/img/logo.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>

11
src/styles.scss
Unescape View File

@ -13,6 +13,11 @@ body {
margin: 0;
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
}

Write Preview
Loading…
Cancel
Save