Skip to content

Commit 9e15f23

Browse files
previprevi
committedOct 29, 2024·
first
1 parent 516046b commit 9e15f23

File tree

4 files changed

+122
-438
lines changed

4 files changed

+122
-438
lines changed
 

‎package-lock.json

Lines changed: 31 additions & 420 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"material-design-icons-iconfont": "^6.7.0",
2222
"open-dyslexic": "^1.0.3",
2323
"prismjs": "^1.28.0",
24+
"simple-code-editor": "^2.0.9",
25+
"highlight.js": "11.8.0",
2426
"stylus-loader": "^4.0.0",
2527
"typeface-fira-mono": "^1.1.13",
2628
"typeface-open-sans": "^1.1.13",
@@ -40,16 +42,16 @@
4042
},
4143
"devDependencies": {
4244
"@cypress/code-coverage": "^3.10.0",
43-
"vite-plugin-istanbul": "^3.0.2",
4445
"@vitejs/plugin-vue": "^3.1.2",
45-
"stylus": "0.59.0",
4646
"cypress": "^12.3.0",
4747
"eslint": "^8.21.0",
4848
"eslint-config-airbnb-base": "^15.0.0",
4949
"eslint-plugin-import": "^2.25.4",
5050
"eslint-plugin-vue": "^9.3.0",
51+
"stylus": "0.59.0",
5152
"vite": "^3.2.0",
5253
"vite-plugin-environment": "^1.1.2",
54+
"vite-plugin-istanbul": "^3.0.2",
5355
"vite-plugin-static-copy": "^0.7.0",
5456
"vite-plugin-vuetify": "^1.0.0-alpha.12",
5557
"vue-cli-plugin-vuetify": "~2.5.4"

‎src/components/Activity.vue

Lines changed: 77 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,25 @@
3333
<v-main>
3434
<!-- Blockly -->
3535
<blockly-workspace
36+
v-if="activity.editor!='code'"
3637
ref="workspace"
3738
:settings="settings"
3839
:toolbox="toolbox"
3940
:theme="theme.global.name.value"
4041
@workspace-changed="onWorkspaceChanged()"
4142
>
4243
</blockly-workspace>
44+
<CodeEditor
45+
v-else
46+
theme="default"
47+
:languages="[['python', 'Python']]"
48+
:tab-spaces="4"
49+
border-radius="0px"
50+
:line-nums="true"
51+
width="100%"
52+
height="100%"
53+
v-model="code">
54+
</CodeEditor>
4355
</v-main>
4456
<!-- Hidden file input. Its file dialog it's event-click triggered by the "pickFile" method -->
4557
<input type="file" style="display: none" ref="file" @change="importProgram">
@@ -222,7 +234,17 @@
222234
<v-card id="card_program_code">
223235
<v-card-title class="headline">{{ $t("message.program_code") }}</v-card-title>
224236
<v-card-text class="text-xs-left">
225-
<prism language="python">{{ code }} </prism>
237+
<CodeEditor
238+
theme="default"
239+
:languages="[['python', 'Python']]"
240+
:tab-spaces="4"
241+
border-radius="0px"
242+
:line-nums="true"
243+
width="100%"
244+
height="100%"
245+
v-model="code"
246+
:read-only="true">
247+
</CodeEditor>
226248
</v-card-text>
227249
<v-divider></v-divider>
228250
<v-card-actions>
@@ -280,6 +302,8 @@
280302
import 'prismjs';
281303
import 'prismjs/components/prism-python.js';
282304
import Prism from 'vue-prism-component';
305+
import hljs from 'highlight.js';
306+
import CodeEditor from "simple-code-editor";
283307
import { useTheme } from 'vuetify';
284308
import sidebar from './Sidebar.vue';
285309
import BlocklyWorkspace from './BlocklyWorkspace.vue';
@@ -290,6 +314,7 @@ export default {
290314
sidebar,
291315
BlocklyWorkspace,
292316
Prism,
317+
CodeEditor,
293318
},
294319
setup() {
295320
return {
@@ -340,10 +365,15 @@ export default {
340365
}),
341366
computed: {
342367
remainingCapacity() {
343-
return this.$refs.workspace.remainingCapacity();
368+
if (this.$data.activity.editor == 'code') {
369+
return 0;
370+
} else if (this.$data.activity.editor == 'blockly') {
371+
return this.$refs.workspace.remainingCapacity();
372+
}
344373
},
345374
},
346375
mounted() {
376+
console.log(this.$data.activity)
347377
this.webcamStream = this.$coderbot.streamVideoURL();
348378
this.settings = this.$store.getters.settings;
349379
let activityName = this.$route.params.name;
@@ -417,7 +447,15 @@ export default {
417447
// Build the program object
418448
const name = this.programName;
419449
const { isDefault } = this;
420-
const { dom_code, code } = this.$refs.workspace.getProgramData();
450+
var code = '';
451+
var dom_code = '';
452+
if (this.activity.editor == 'code') {
453+
code = this.code;
454+
} else if (this.activity.editor == 'blockly') {
455+
const { _dom_code, _code } = this.$refs.workspace.getProgramCode();
456+
dom_code = _dom_code;
457+
code = _code;
458+
}
421459
return {
422460
name,
423461
dom_code,
@@ -461,7 +499,15 @@ export default {
461499
fr.readAsText(files[0]);
462500
fr.addEventListener('load', () => {
463501
const importedProgram = JSON.parse(fr.result);
464-
this.$refs.workspace.loadProgram(importedProgram.dom_code);
502+
if (this.activity.editor == 'code') {
503+
this.$data.code = importedProgram.code;
504+
} else if (this.activity.editor == 'blockly' && importedProgram.dom_code != '') {
505+
this.$refs.workspace.loadProgram(importedProgram.dom_code);
506+
} else if (this.activity.editor == 'blockly' && importedProgram.dom_code == '') {
507+
this.$data.generalDialogTitle = 'Error';
508+
this.$data.generalDialogText = 'Cannot load python program in blockly editor';
509+
this.$data.generalDialog = true;
510+
}
465511
});
466512
} else {
467513
console.error('Something went wrong importing');
@@ -528,7 +574,16 @@ export default {
528574
this.$data.carica = false;
529575
this.$data.programName = program;
530576
this.$coderbot.loadProgram(this.$data.programName).then((data) => {
531-
this.$refs.workspace.loadProgram(data.data.dom_code);
577+
if (this.activity.editor == 'code') {
578+
this.$data.code = data.data.code;
579+
} else if (this.activity.editor == 'blockly' && data.data.dom_code != '') {
580+
this.$refs.workspace.loadProgram(data.data.dom_code);
581+
} else if (this.activity.editor == 'blockly' && data.data.dom_code == '') {
582+
console.error('Cannot load python program in blockly editor');
583+
this.$data.generalDialogTitle = 'Error';
584+
this.$data.generalDialogText = 'Cannot load python program in blockly editor';
585+
this.$data.generalDialog = true;
586+
}
532587
this.$data.isDefault = data.data.default;
533588
});
534589
},
@@ -540,7 +595,9 @@ export default {
540595
clearProgram() {
541596
this.$data.programName = '';
542597
this.$data.code = '';
543-
this.$refs.workspace.clear();
598+
if (this.$data.activity.editor == 'blockly') {
599+
this.$refs.workspace.clear();
600+
}
544601
this.$data.clear = false;
545602
this.dirty = true;
546603
},
@@ -554,22 +611,33 @@ export default {
554611
if (this.$data.programName == program) {
555612
this.$data.programName = '';
556613
this.$data.code = '';
557-
this.$refs.workspace.clear();
614+
if (this.$data.activity.editor == 'blockly') {
615+
this.$refs.workspace.clear();
616+
}
558617
}
559618
this.$coderbot.deleteProgram(program).then(() => {
560619
console.info('deleted');
561620
});
562621
},
563622
564623
getProgramCode() {
565-
this.code = this.$refs.workspace.getProgramCode();
624+
if (this.$data.activity.editor == 'code') {
625+
this.code = this.$data.code;
626+
} else if (this.$data.activity.editor == 'blockly') {
627+
this.code = this.$refs.workspace.getProgramCode();
628+
}
566629
this.dialogCode = true;
567630
},
568631
569632
runProgram() {
570633
// POST /program/save
571634
console.info("Startin program");
572-
const { code } = this.$refs.workspace.getProgramData();
635+
var code = '';
636+
if(this.$data.activity.editor == 'code') {
637+
code = this.$data.code;
638+
} else if (this.$data.activity.editor == 'blockly') {
639+
code = this.$refs.workspace.getProgramData();
640+
}
573641
const programName = this.programName != '' ? this.programName : 'untitled';
574642
this.$coderbot.runProgram(programName, code).then(() => {
575643
this.runtimeDialog = true;

‎src/components/ActivityEditor.vue

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,14 +141,16 @@
141141
</v-card-title>
142142
<v-card-text>
143143
<v-layout row wrap>
144-
<!--
145-
<v-col>
146-
<v-checkbox v-model="activity.availableViews" label="Programmazione a Blocchi" value="blockly"></v-checkbox>
147-
</v-col>
148144
<v-col>
149-
<v-checkbox v-model="activity.availableViews" label="Editor Python" value="python"></v-checkbox>
145+
<v-radio-group v-model="activity.editor"
146+
v-bind:label="$t('message.activity_editor')" required
147+
@change="v$.activity.editor.$touch">
148+
<v-radio value="blockly" label="Blocchi (Blockly)"></v-radio>
149+
<v-radio value="code" label="Python"></v-radio>
150+
</v-radio-group>
151+
<!--v-checkbox v-model="activity.editor" label="Programmazione a Blocchi" value="blockly"></v-checkbox>
152+
<v-checkbox v-model="activity.editor" label="Editor Python" value="python"></v-checkbox-->
150153
</v-col>
151-
-->
152154
<v-col>
153155
<v-checkbox v-model="activity.autoRecVideo"
154156
v-bind:label="$t('message.activity_auto_rec_video')"
@@ -499,7 +501,7 @@ export default {
499501
bodyFont: 'Roboto',
500502
codeFont: 'ubuntumono',
501503
maxBlocks: 0,
502-
availableViews: [],
504+
editor: 'blockly',
503505
viewSource: null,
504506
autoRecVideo: null,
505507
toolbox: {
@@ -613,6 +615,7 @@ export default {
613615
capsSwitch: { },
614616
bodyFont: { },
615617
codeFont: { },
618+
editor: { },
616619
viewSource: { },
617620
autoRecVideo: { },
618621
name: { required: true, alphaNum },

0 commit comments

Comments
 (0)
Please sign in to comment.