Add full IDE page (omegaup#7794)

# Description This is initial code for new page `ephemeral/grader/`. There are a couple of problems: 1- The icons for `upload` and `download` buttons do not appear on standalone page, but they do appear in problem page (for smaller size editor). ![image](https://github.com/user-attachments/assets/0d323c8b-d58a-4876-be10-1d75c0f5dcc9) ![image](https://github.com/user-attachments/assets/62782b03-00a1-4faf-ba08-95e9d9114759). **Edit**: This is addressed in omegaup#7799, where I have used `font-awesome` components instead of vanilla CSS classes. 2- The editor exceeds height of the body ![image](https://github.com/user-attachments/assets/76062c3c-67b7-4484-ae23-229fb68bbcdb) ![image](https://github.com/user-attachments/assets/cfcda0c1-72f8-4857-adac-23fc6751e129) **Edit**: I made some changes with styling and now it works as intended: https://github.com/user-attachments/assets/642e5de0-a2f3-4e27-94ce-399561f94e34 Fixes: omegaup#7793 # Checklist: - [x] The code follows the [coding guidelines](https://github.com/omegaup/omegaup/wiki/Coding-guidelines) of omegaUp. - [x] The tests were executed and all of them passed.
pabo99 · Sep 12, 2024 · c0260ac · c0260ac
1 parent c3680c4
commit c0260ac
Show file tree

Hide file tree

Showing 25 changed files with 192 additions and 52 deletions.
diff --git a/frontend/server/nginx.rewrites b/frontend/server/nginx.rewrites
@@ -11,7 +11,6 @@ location /preguntas/ {
 		rewrite ^/preguntas/(.+)$ /preguntas/?qa-rewrite=$1&$query_string last;
 	}
 }
-
 rewrite ^/admin/user/([a-zA-Z0-9_+.-]+)/?$ /admin/user.php?username=$1 last;
 rewrite ^/admin/support/?$ /admin/support.php last;
 rewrite ^/arena/admin/?$ /arena/admin.php last;
@@ -63,6 +62,7 @@ rewrite ^/course/([a-zA-Z0-9_+-]+)/student/([a-zA-Z0-9_+-]+)/?$ /course/student.
 rewrite ^/course/([a-zA-Z0-9_+-]+)/student/([a-zA-Z0-9_+-]+)/assignment/([a-zA-Z0-9_+-]+)/?$ /course/studentWithAssignment.php?course=$1&student=$2&assignment_alias=$3 last;
 rewrite ^/course/([a-zA-Z0-9_+-]+)/students/?$ /course/students.php?course=$1 last;
 rewrite ^/dependents/?$ /profile/dependents.php last;
+rewrite ^/grader/ephemeral/$ /grader/grader.php last;
 rewrite ^/group/?$ /group/list.php last;
 rewrite ^/group/new/?$ /group/new.php last;
 rewrite ^/group/([a-zA-Z0-9_+:-]+)/edit/?$ /group/edit.php?group=$1 last;

diff --git a/frontend/server/src/Controllers/Grader.php b/frontend/server/src/Controllers/Grader.php
@@ -24,4 +24,22 @@ public static function apiStatus(\OmegaUp\Request $r): array {
             'grader' => \OmegaUp\Grader::getInstance()->status(),
         ];
     }
+    /**
+     * @psalm-return array{templateProperties: array{title: \OmegaUp\TranslationString, fullWidth?: bool, hideFooterAndHeader?: bool, payload: array<string, mixed>}, entrypoint: string, inContest?: bool, navbarSection?: string}
+    */
+    public static function getGraderForTypeScript(
+        \OmegaUp\Request $r
+    ): array {
+        return [
+            'templateProperties' => [
+                'title' => new \OmegaUp\TranslationString(
+                    'problemlessGrader'
+                ),
+                'fullWidth' => true,
+                'hideFooterAndHeader' => true,
+                'payload' => [],
+            ],
+            'entrypoint' => 'grader_ide',
+        ];
+    }
 }
diff --git a/frontend/templates/en.lang b/frontend/templates/en.lang
@@ -1387,6 +1387,7 @@ problemVersionUpdated = "Problem version updated."
 problemVersionUsername = "Account name"
 problemVersionVersion = "Problem version"
 problemcollectionViewProblems = "View problems"
+problemlessGrader = "omegaUp IDE"
 problemsOrderUpdated = "Problems' order has been updated"
 problemsetIdentityNotFound = "Account or identity is not associated with this course, contest or task."
 problemsetNotFound = "Problemset does not exist."

diff --git a/frontend/templates/es.lang b/frontend/templates/es.lang
@@ -1387,6 +1387,7 @@ problemVersionUpdated = "Versión del problema actualizada."
 problemVersionUsername = "Nombre de la cuenta"
 problemVersionVersion = "Versión del problema"
 problemcollectionViewProblems = "Ver problemas"
+problemlessGrader = "omegaUp IDE"
 problemsOrderUpdated = "Se actualizó el orden de los problemas"
 problemsetIdentityNotFound = "La cuenta o identidad no está asociada con el curso, concurso o tarea."
 problemsetNotFound = "Conjunto de problemas no encontrado."

diff --git a/frontend/templates/pseudo.lang b/frontend/templates/pseudo.lang
diff --git a/frontend/templates/pt.lang b/frontend/templates/pt.lang
@@ -1387,6 +1387,7 @@ problemVersionUpdated = "Versão do problema atualizada."
 problemVersionUsername = "Nome da conta"
 problemVersionVersion = "Versão do problema"
 problemcollectionViewProblems = "Ver problemas"
+problemlessGrader = "omegaUp IDE"
 problemsOrderUpdated = "A ordem dos problemas foi atualizada."
 problemsetIdentityNotFound = "A conta ou identidade não está associada ao curso, concurso ou tarefa."
 problemsetNotFound = "Conjunto de problemas não encontrado."

diff --git a/frontend/www/grader/grader.php b/frontend/www/grader/grader.php
@@ -0,0 +1,11 @@
+<?php
+namespace OmegaUp;
+require_once(dirname(__DIR__, 2) . '/server/bootstrap.php');
+
+\OmegaUp\UITools::render(
+    function (\OmegaUp\Request $r): array {
+        return \OmegaUp\Controllers\Grader::getGraderForTypeScript(
+            $r
+        );
+    }
+);
diff --git a/frontend/www/js/omegaup/components/arena/EphemeralGrader.vue b/frontend/www/js/omegaup/components/arena/EphemeralGrader.vue
@@ -5,6 +5,8 @@
     :problem="problem"
     :can-submit="canSubmit"
     :can-run="canRun"
+    :is-embedded="isEmbedded"
+    :theme="theme"
   >
     <template #zip-buttons><div></div></template>
   </ephemeral-ide>
@@ -26,7 +28,8 @@ export default class EphemeralGrader extends Vue {
   @Prop({ default: true }) canRun!: boolean;
   @Prop({ default: () => [] }) acceptedLanguages!: string[];
   @Prop({ default: 'cpp17-gcc' }) preferredLanguage!: string;
-
+  @Prop({ default: true }) isEmbedded!: boolean;
+  @Prop({ default: 'vs' }) theme!: string;
   // note: initial source is for the IDE is also supported
   get initialLanguage() {
     if (!this.acceptedLanguages.includes(this.preferredLanguage)) {

diff --git a/frontend/www/js/omegaup/graderv2/CaseSelector.vue b/frontend/www/js/omegaup/graderv2/CaseSelector.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="root d-flex flex-column h-100"
-    :class="{ 'bg-dark': theme == 'vs-dark', 'text-white': theme == 'vs-dark' }"
-  >
+  <div class="root d-flex flex-column h-100">
     <div class="summary">
       {{ summary }}
     </div>
@@ -41,7 +38,8 @@
             type="button"
             :class="{
               'in-group': group.explicit,
-              active: currentCase == item.name,
+              active: currentCase == item.name && theme == 'vs',
+              'vs-dark': currentCase == item.name && theme == 'vs-dark',
             }"
             @click="selectCase(item.name)"
           >
@@ -79,9 +77,13 @@
         <input v-model="newCaseName" class="form-control" type="text" />
         <div class="input-group-append">
           <button
-            class="btn btn-secondary"
+            class="btn"
+            :class="{
+              'btn-primary': theme == 'vs',
+              'btn-secondary': theme == 'vs-dark',
+            }"
             type="submit"
-            :disabled="newCaseName.length == 1"
+            :disabled="!newCaseName.length"
             @click="createCase()"
           >
             +
@@ -217,7 +219,9 @@ export default class CaseSelector extends Vue {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '../../../sass/main.scss';
+
 button.in-group {
   border-left-width: 6px;
   padding-left: 15px;
@@ -259,4 +263,9 @@ input[type='number'].case-weight {
   border-left-width: 6px;
   padding-left: 15px;
 }
+
+.vs-dark {
+  background: var(--vs-dark-background-color);
+  color: var(--vs-dark-font-color);
+}
 </style>
diff --git a/frontend/www/js/omegaup/graderv2/Ephemeral.vue b/frontend/www/js/omegaup/graderv2/Ephemeral.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="navbar navbar-light bg-light py-0 border-bottom">
+  <div class="d-flex flex-column h-100">
+    <div class="navbar py-0" :class="theme">
       <span class="navbar-brand">
         omegaUp ephemeral grader
         <sup>&alpha;</sup>
@@ -82,7 +82,7 @@
         </button>
       </form>
     </div>
-    <section ref="layout-root" class="col px-0"></section>
+    <section ref="layout-root" class="col px-0 flex-grow-1"></section>
   </div>
 </template>
 
@@ -153,6 +153,10 @@ export default class Ephemeral extends Vue {
 
   @Ref('layout-root') readonly layoutRoot!: HTMLElement;
 
+  readonly themeToRef: { [key: string]: string } = {
+    vs: `https://golden-layout.com/assets/css/goldenlayout-light-theme.css`,
+    'vs-dark': `https://golden-layout.com/assets/css/goldenlayout-dark-theme.css`,
+  };
   goldenLayout: GoldenLayout | null = null;
   componentMapping: { [key: string]: GraderComponent } = {};
   T = T;
@@ -636,6 +640,10 @@ export default class Ephemeral extends Vue {
     } else {
       store.dispatch('reset');
     }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = this.themeToRef[this.theme];
+    document.head.appendChild(link);
   }
   onResized() {
     if (!this.layoutRoot.clientWidth) return;
@@ -672,11 +680,21 @@ export default class Ephemeral extends Vue {
 @import '../../../sass/main.scss';
 
 div > section {
-  min-height: 70em;
+  min-height: 60em;
+}
+div {
+  &.vs-dark {
+    background: var(--vs-dark-background-color);
+    color: var(--vs-dark-font-color);
+    border-bottom: 1px solid var(--vs-dark-background-color);
+  }
+  &.vs {
+    background: var(--vs-background-color);
+    border-bottom: 1px solid var(--vs-background-color);
+  }
 }
 a:hover {
   color: var(--zip-button-color--hover);
 }
 @import url('https://golden-layout.com/assets/css/goldenlayout-base.css');
-@import url('https://golden-layout.com/assets/css/goldenlayout-light-theme.css');
 </style>
diff --git a/frontend/www/js/omegaup/graderv2/GoldenLayoutConfigs.ts b/frontend/www/js/omegaup/graderv2/GoldenLayoutConfigs.ts
@@ -111,29 +111,36 @@ export const UNEMBEDDED_CONFIG: GoldenLayout.Config = {
               type: 'stack',
               id: 'source-and-settings',
               content: [
-                createMonacoEditorComponent(),
+                {
+                  type: 'column',
+                  title: 'code',
+                  content: [
+                    createMonacoEditorComponent(),
+                    {
+                      type: 'stack',
+                      content: [
+                        createTextEditorComponent({
+                          contents: 'compilerOutput',
+                          readOnly: true,
+                          extension: 'out/err',
+                          id: 'compiler',
+                        }),
+                        createTextEditorComponent({
+                          contents: 'logs',
+                          readOnly: true,
+                          extension: 'txt',
+                          id: 'logs',
+                        }),
+                        createZipViewerComponent(),
+                      ],
+                      height: 20,
+                    },
+                  ],
+                  isClosable: false,
+                },
                 createSettingsComponent(),
               ],
             },
-            {
-              type: 'stack',
-              content: [
-                createTextEditorComponent({
-                  contents: 'compilerOutput',
-                  readOnly: true,
-                  extension: 'out/err',
-                  id: 'compiler',
-                }),
-                createTextEditorComponent({
-                  contents: 'logs',
-                  readOnly: true,
-                  extension: 'txt',
-                  id: 'logs',
-                }),
-                createZipViewerComponent(),
-              ],
-              height: 20,
-            },
           ],
           isClosable: false,
         },

diff --git a/frontend/www/js/omegaup/graderv2/IDESettings.vue b/frontend/www/js/omegaup/graderv2/IDESettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <form>
+  <form class="h-100" :class="theme">
     <div class="form-row">
       <div class="form-group col-md-4">
         <label for="inputTimeLimit">{{ T.settingsTimeLimit }}</label>
@@ -132,6 +132,7 @@ import T from '../lang';
 })
 export default class IDESettings extends Vue {
   @Prop({ required: true }) storeMapping!: any;
+  @Prop({ default: 'vs' }) theme!: string;
 
   T = T;
   get timeLimit(): number {
@@ -244,3 +245,17 @@ export default class IDESettings extends Vue {
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../../sass/main.scss';
+form {
+  &.vs-dark {
+    background: var(--vs-dark-background-color);
+    color: var(--vs-dark-font-color);
+  }
+  &.vs {
+    background: var(--vs-background-color);
+    color: var(--vs-font-color);
+  }
+}
+</style>
diff --git a/frontend/www/js/omegaup/graderv2/TextEditor.vue b/frontend/www/js/omegaup/graderv2/TextEditor.vue
@@ -56,12 +56,13 @@ textarea {
   resize: none;
 
   &.vs {
-    background: var(--textarea-vs-background-color);
+    background: var(--vs-background-color);
+    color: var(--vs-font-color);
   }
 
   &.vs-dark {
-    background: var(--textarea-vs-dark-background-color);
-    color: var(--textarea-vs-dark-font-color);
+    background: var(--vs-dark-background-color);
+    color: var(--vs-dark-font-color);
   }
 }
 </style>
diff --git a/frontend/www/js/omegaup/graderv2/ZipViewer.vue b/frontend/www/js/omegaup/graderv2/ZipViewer.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="root d-flex flex-row h-100"
-    :class="{
-      'bg-dark': theme === 'vs-dark',
-      'text-white': theme === 'vs-dark',
-    }"
-  >
+  <div class="root d-flex flex-row h-100">
     <div class="filenames">
       <div class="list-group">
         <button
@@ -21,15 +15,23 @@
           :key="name"
           class="text-truncate list-group-item list-group-item-action"
           type="button"
-          :class="{ active: active === name }"
+          :class="{
+            active: active === name && theme === 'vs',
+            'vs-dark': active === name && theme === 'vs-dark',
+          }"
           :title="name"
           @click="select(item)"
         >
           {{ name }}
         </button>
       </div>
     </div>
-    <textarea v-model="contents" class="editor" readonly></textarea>
+    <textarea
+      v-model="contents"
+      class="editor"
+      :class="theme"
+      readonly
+    ></textarea>
   </div>
 </template>
 
@@ -75,5 +77,18 @@ button.list-group-item {
 
 textarea {
   flex: 1;
+  font-family: 'Droid Sans Mono', 'Courier New', monospace,
+    'Droid Sans Fallback';
+  border: 0px;
+  resize: none;
+}
+
+.vs {
+  background: var(--vs-background-color);
+  color: var(--vs-font-color);
+}
+.vs-dark {
+  background: var(--vs-dark-background-color);
+  color: var(--vs-dark-font-color);
 }
 </style>