Merge pull request #158 from SPARSH1608/mysql

Added MySQL 10 support to Frontend Code

Author: vdvibhu20

app/helpers/json-to-table.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import convertToTable from '../util/json-to-table'; // Ensure correct path
+
+export default helper(function jsonToTable([data]) {
+    return convertToTable(data);
+});

app/pods/components/code-editor-component/template.hbs

@@ -18,6 +18,7 @@
       </div>
     {{/if}}
     <SubmissionResult 
+      @allowedLanguages={{contest.allowedLanguages}}
       @fullScreen={{fullScreen}}
       @judgeResult={{if (not submission.codeTaskGroup.isRunning) lastResult}} />
   </div>

app/pods/components/code-window/component.js

@@ -1,7 +1,10 @@
 import Component from '@ember/component';
 import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class CodeWindowComponent extends Component {
+  @service('language-selection') languageSelection;
+
   isLanguageSelectOpen = false
   customInputOpen = true
   customInput = ''
@@ -48,9 +51,15 @@ export default class CodeWindowComponent extends Component {
       code: "csharp",
       mode: "csharp",
       source: ""
+    },
+    {
+      name: "MySQL 10",
+      code: "mysql",
+      mode: "mysql",
+      source: ""
     }
   ]
-
+ 
   setSubmission = () => {
     this.set('selectedLanguage', this.languageSpecs.find(spec => spec.code === this.submission.language))
     this.set('selectedLanguage.source', window.atob(this.submission.solution.source))
@@ -80,11 +89,10 @@ export default class CodeWindowComponent extends Component {
 
   @action
   selectLanguage(languageCode) {
-    // console.log(languageCode)
-    this.set('selectedLanguage', this.get('languageSpecs').find((spec) => {
-      return spec.code === languageCode
-    }))
-    this.trigger("restoreCodeFromStorage")
+    let selectedLanguage = this.languageSpecs.find((spec) => spec.code === languageCode);
+    this.set('selectedLanguage', selectedLanguage);
+    this.languageSelection.set('selectedLanguage', selectedLanguage);
+    this.trigger("restoreCodeFromStorage");
   }
 
   @action

app/pods/components/problem-explanation/component.js

@@ -1,4 +1,16 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import {jsonToTable} from '../../../util/json-to-table'
 
 export default Component.extend({
+  languageSelection: service('language-selection'),
+
+  init() {
+    this._super(...arguments);
+    let contest = this.get('contest');
+  },
+  jsonToTable(data) {
+    const table = jsonToTable(data);
+    return table;
+  }
 });

app/pods/components/problem-explanation/template.hbs

@@ -1,33 +1,39 @@
+
+
 <div class="py-4">
-  <p>
-    {{markdown-to-html problem.details.description}}
-  </p>
+  <p>{{markdown-to-html problem.details.description}}</p>
+
   <div class="extra-bold">Input Format</div>
-  <p>
-    {{markdown-to-html problem.details.input_format}}
-  </p>
+
+    <pre>{{problem.details.input_format}}</pre>
+ 
+
   <div class="extra-bold">Constraints</div>
   <div class="bg-grey br-5 w-60 px-4 py-2 my-2">
-    <p>
-      {{markdown-to-html problem.details.constraints}}
-    </p>
+    <p>{{markdown-to-html problem.details.constraints}}</p>
   </div>
+
   <div class="extra-bold">Output Format</div>
-  <p>
-    {{markdown-to-html problem.details.output_format}}
-  </p>
+    <pre>{{problem.details.output_format}}</pre>
   <div class="extra-bold">Sample Input</div>
   <div class="bg-grey br-5 w-60 px-4 py-2 my-2">
-    <pre>{{problem.details.sample_input}}</pre>
+    <pre>{{ problem.details.sample_input}}</pre>
   </div>
+
   <div class="extra-bold">Sample Output</div>
   <div class="bg-grey br-5 w-60 px-4 py-2 my-2">
+     {{#if (includes contest.allowedLanguages "mysql")}}
+    <pre>{{json-to-table problem.details.sample_output}}</pre>
+  {{else}}
     <pre>{{problem.details.sample_output}}</pre>
+  {{/if}}
+
   </div>
+
   {{#if problem.details.explanation}}
     <div class="extra-bold">Explanation</div>
     <div class="bg-grey br-5 w-60 px-4 py-2 my-2">
       {{markdown-to-html problem.details.explanation}}
     </div>
   {{/if}}
-</div>
+</div>

app/pods/components/problem-view/template.hbs

@@ -33,7 +33,7 @@
 
   {{#liquid-if (eq selectedTab "problem")}}
   <ProblemExplanation
-    @problem={{problem}} />
+    @problem={{problem}}  @contest={{contest}} />
   {{else if (eq selectedTab "submissions")}}
   <SubmissionsList 
     @contest={{contest}}

app/pods/components/project-view/template.hbs

@@ -57,9 +57,11 @@
     {{/if}}
   </div>
 </div>
+
 {{#if (or submitProjectTask.isRunning lastResult)}}
   <div class="mt-4">
     <SubmissionResult
+    @allowedLanguages={{contest.allowedLanguages}}
       @contentType={{content.type}}
       @judgeResult={{if (not submitProjectTask.isRunning) lastResult}}
     />

app/pods/components/run-result/component.js

@@ -4,10 +4,12 @@ import { computed } from '@ember/object';
 export default class RunResultComponent extends Component {
   didRender() {
     this.element.scrollIntoView({behavior: "smooth", block: "end" })
+ 
   }
 
   @computed('judgeResult')
   get output() {    
+
     if (this.judgeResult.data){
       return window.atob(this.judgeResult.data.output)
     } else if (this.judgeResult.error) {

app/pods/components/submission-result/component.js

@@ -1,44 +1,48 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { jsonToTable } from '../../../util/json-to-table';
+
+export default Component.extend({
 
-export default class SubmissionResult extends Component {
   didRender() {
-    this.element.scrollIntoView({ behavior: "smooth", block: "end" })
-  }
+    this._super(...arguments); 
+    this.element.scrollIntoView({ behavior: "smooth", block: "end" });
+  },
 
-  @computed('judgeResult')
-  get isRunning() {
-    return !this.judgeResult
-  }
+  isRunning: computed('judgeResult', function() {
+    return !this.get('judgeResult');
+  }),
 
-  @computed('judgeResult')
-  get isErrored() {
-    return !!this.judgeResult.stderr
-  }
+  isErrored: computed('judgeResult', function() {
+    return !!this.get('judgeResult')?.stderr;
+  }),
 
-  @computed('judgeResult')
-  get isSubmission() {    
-    return !!(this.judgeResult.testcases)
-  }
+  isSubmission: computed('judgeResult', function() {
+    return !!this.get('judgeResult')?.testcases;
+  }),
 
-  @computed('isErrored')
-  get errorPayload() {    
-    if (this.isErrored) {      
-      return window.atob(this.judgeResult.stderr || this.judgeResult.stdout)
+  errorPayload: computed('isErrored', function() {
+    if (this.get('isErrored')) {
+      return window.atob(this.get('judgeResult')?.stderr || this.get('judgeResult')?.stdout);
     }
-  }
+  }),
+
+  output: computed('isSubmission', function() {
+    if (!this.get('isSubmission')) {
+      const output = window.atob(this.get('judgeResult')?.stdout);
 
-  @computed('isSubmission')
-  get output() {
-    if (!this.isSubmission) {
-      return window.atob(this.judgeResult.stdout)
+      return output;
     }
-  }
+  }),
 
-  @computed('isSubmission')
-  get testcasesPayload() {
-    if (this.isSubmission) {
-      return this.judgeResult.testcases
+  testcasesPayload: computed('isSubmission', function() {
+    if (this.get('isSubmission')) {
+      return this.get('judgeResult')?.testcases;
     }
+  }),
+
+  jsonToTable(data) {
+    const table = jsonToTable(data);
+    return table;
   }
-}
+});

app/pods/components/submission-result/submission-success/template.hbs

@@ -2,7 +2,12 @@
   <span class="font-sm bold">
     Compilation Successful
   </span>
+
   {{#if output}}
-    <pre class="mt-3 bg-grey p-4">{{output}}</pre>
+    {{#if (includes allowedLanguages "mysql")}}
+      <pre class="mt-3 bg-grey p-4">{{json-to-table output}}</pre>
+    {{else}}
+      <pre class="mt-3 bg-grey p-4">{{output}}</pre>
+    {{/if}}
   {{/if}}
 </div>

app/pods/components/submission-result/template.hbs

@@ -1,11 +1,18 @@
 <div class="{{unless fullScreen "border-card mb-5"}} p-0">
+ 
+
   {{#if isRunning}}
     <SubmissionResult::SubmissionStatus />
   {{else if isErrored}}
     <SubmissionResult::SubmissionError @output={{errorPayload}} />
   {{else if isSubmission}}
     <SubmissionResult::SubmissionTestcases @testcases={{testcasesPayload}} />
   {{else}}
-    <SubmissionResult::SubmissionSuccess @message={{message}} @output={{output}} />
+<SubmissionResult::SubmissionSuccess 
+  @message={{message}} 
+  @output={{output}} 
+  @allowedLanguages={{allowedLanguages}} 
+/>
+
   {{/if}}
 </div>

app/services/language-selection.js

@@ -0,0 +1,5 @@
+import Service from '@ember/service';
+
+export default Service.extend({
+  selectedLanguage: null
+});

app/util/json-to-table.js

@@ -0,0 +1,26 @@
+export default function convertToTable(data) {
+    // console.log('datta',data)
+    data = JSON.parse(data);
+    if (!Array.isArray(data) || data.length === 0) {
+        return "Invalid data format. Expected an array of objects.";
+    }
+
+    const headers = Array.from(new Set(data.flatMap(Object.keys)));
+    const columnWidths = headers.map(header =>
+        Math.max(header.length, ...data.map(row => String(row[header] ?? '').length))
+    );
+
+    const createRow = (row) => '| ' + row.map((cell, i) => (cell ?? '').toString().padEnd(columnWidths[i])).join(' | ') + ' |';
+    const separator = '+-' + columnWidths.map(width => '-'.repeat(width)).join('-+-') + '-+';
+
+    const table = [
+        separator,
+        createRow(headers),
+        separator,
+        ...data.map(row => createRow(headers.map(header => row[header] ?? ''))),
+        separator
+    ];
+
+    return table.join('\n');
+}
+

config/environment.js

@@ -101,4 +101,4 @@ module.exports = function (environment) {
     ENV.apiHost + "/api/v2/jwt/refresh/";
 
   return ENV;
-};
+};