rayburgemeestre
/
cheerpweb
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

Implement tabs logic in Vue 

Update exec_helpers version

Fix some css issues

Add "make release" helper target
master
rayburgemeestre 6 jaren geleden
bovenliggende
c84d8d9d5b
commit
258d71d1ab
6 gewijzigde bestanden met toevoegingen van 99 en 69 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. +4
    -0
      Makefile
  2. +12
    -6
      docker_api/Pipfile.lock
  3. +3
    -12
      docker_api/api.py
  4. +64
    -39
      src/App.vue
  5. +10
    -8
      src/components/EditorComponent.vue
  6. +6
    -4
      src/mystyles.scss

+ 4
- 0
Makefile Bestand weergeven

@@ -37,3 +37,7 @@ docker_web_publish:
.PHONY: clean
clean:
rm -rf dist/*.main.js dist/*.worker.js dist/css/ dist/main.js && rm -rf docker_web/dist

.PHONY: release
release: clean build docker_api docker_web docker_api_publish docker_web_publish
echo OK

+ 12
- 6
docker_api/Pipfile.lock Bestand weergeven

@@ -147,11 +147,17 @@
},
"exec-helpers": {
"hashes": [
"sha256:13cd0b9082acd398bac46ef6fdc46240eddf8d833ee597c297440cec2b8d4142",
"sha256:64575c7a90ee0c38de83b947fbdaf0e48f9b5b320170c1cf12243563cc352960"
"sha256:114de98c53ccb5ab4e81b53beecc008e9556ecc4aed5f77e9a02c0e1eb4bcdd2",
"sha256:4f6a21b260d2df9efbf3aa33d8db60de131aa6b68854b1f019bb8603bd19c68c",
"sha256:58e4dd1e87301ac6c3ece346175c1258142f77d886db87fc67826efd49dd686d",
"sha256:7ccb6d10dda9ff1915963054984ccb0bc7bae1168af3fe9cf549354019044aa6",
"sha256:d6aeb9c54a666c14de5553b6cb8410889829921abe406ef4b5923eec96e9a63b",
"sha256:da2a62fceb29eb60ad508c840b461f8720ec445eaffe86785eb8c179ce7df464",
"sha256:eb95f6cc544c5653ebd3909849249a90094e5baadf281e6b035874ed1758edbd",
"sha256:f15f3166c50dad0f75e911ae2a120301881c466a95e184f215cfaf8ec2694edd"
],
"index": "pypi",
"version": "==2.1.2"
"version": "==3.1.0"
},
"fasteners": {
"hashes": [
@@ -194,10 +200,10 @@
},
"itsdangerous": {
"hashes": [
"sha256:a7de3201740a857380421ef286166134e10fe58846bcefbc9d6424a69a0b99ec",
"sha256:aca4fc561b7671115a2156f625f2eaa5e0e3527e0adf2870340e7968c0a81f85"
"sha256:321b033d07f2a4136d3ec762eac9f16a10ccd60f53c0c91af90217ace7ba1f19",
"sha256:b12271b2047cb23eeb98c8b5622e2e5c5e9abd9784a153e9d8ef9cb4dd09d749"
],
"version": "==1.0.0"
"version": "==1.1.0"
},
"jinja2": {
"hashes": [

+ 3
- 12
docker_api/api.py Bestand weergeven

@@ -13,6 +13,7 @@ CORS(app)
def compile():
if request.method == 'POST':
note = str(request.data.get('source', ''))
flags = str(request.data.get('flags', ''))

with open("/tmp/test.cpp", "w") as f:
f.write(note)
@@ -22,18 +23,7 @@ def compile():
stderr = ''
retcode = 0
output = ''
cmd = "/opt/cheerp/bin/clang -cheerp-no-type-optimizer -cheerp-pretty-code -cheerp-no-native-math -cheerp-no-math-imul -cheerp-no-math-fround -O3 -target cheerp /tmp/test.cpp -o /tmp/test.js"
# cmd = "sleep 10; echo 123"
# try:
# stdout = subprocess.check_output(cmd, stderr=subprocess.STDOUT, timeout=2, shell=True)
# stdout = stdout.decode("utf-8")
# except subprocess.TimeoutExpired as e:
# stderr = e.output.decode("utf-8")
# print(stderr)
# except subprocess.CalledProcessError as e:
# print(e)
# ret = e.returncode
# stderr = e.output.decode("utf-8")
cmd = "/opt/cheerp/bin/clang {} /tmp/test.cpp -o /tmp/test.js".format(flags)
with exec_helpers.Subprocess() as executor:
try:
ret = executor.check_call(cmd, shell=True, timeout=2)
@@ -56,6 +46,7 @@ def compile():
return {
'stdout': stdout,
'stderr': stderr,
'command': cmd,
'retcode': retcode,
'javascript': output
}, status.HTTP_201_CREATED

+ 64
- 39
src/App.vue Bestand weergeven

@@ -16,33 +16,20 @@

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>

<a class="navbar-item">
Documentation
</a>

<!--
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
-->
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
Load example
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<a class="navbar-item">Example 1 (TODO)</a>
<a class="navbar-item">Example 2 (TODO)</a>
<a class="navbar-item">Example 3 (TODO)</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
<a class="navbar-item">Example 4 (TODO)</a>
</div>
</div>
</div>
@@ -51,10 +38,10 @@
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" v-on:click="compile" v-shortkey.once="['ctrl', 'f9']" @shortkey="compile()">
<strong>Compile</strong>
<strong>Compile [CTRL+F9]</strong>
</a>
<a class="button is-light" v-on:click="run" v-shortkey.once="['ctrl', 'f10']" @shortkey="run()">
Run
Run [CTRL+F10]
</a>
</div>
</div>
@@ -69,12 +56,14 @@

<div class="tabs">
<ul>
<li class="is-active"><a>Code editor</a></li>
<li><a>Compiler</a></li>
<li v-bind:class="{'is-active': editor_tabs == 1}" v-on:click="editor_tabs = 1"><a>Code editor</a></li>
<li v-bind:class="{'is-active': editor_tabs == 2}" v-on:click="editor_tabs = 2"><a>Compiler</a></li>
</ul>
</div>

<editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh"/>
<editor-component v-if="editor_tabs == 1" v-model="cpp_code" name="cpp" language="cpp" height="50vh"/>

<div v-if="editor_tabs == 2" class="settings">SETTINGS HERE...</div>

</div>
<div class="row">
@@ -102,14 +91,12 @@
<div class="row">
<div class="tabs">
<ul>
<li class="is-active"><a>Compiler output</a></li>
<li><a>Run output</a></li>
<li v-bind:class="{'is-active': output_tabs == 1}" v-on:click="output_tabs = 1"><a>Compiler output</a></li>
<li v-bind:class="{'is-active': output_tabs == 2}" v-on:click="output_tabs = 2"><a>Run output</a></li>
</ul>
</div>
<!--
<textarea class="textarea" placeholder="Compiler output will be displayed here."></textarea>
-->
<iframe src="about:blank" v-on:load="onLoadIframe" name="myIframe"></iframe>
<textarea v-if="output_tabs == 1" class="textarea" placeholder="Compiler output will be displayed here.">{{ compiler_output }}</textarea>
<iframe v-if="output_tabs == 2" src="about:blank" v-on:load="onLoadIframe" name="myIframe"></iframe>
</div>
</div>
</div>
@@ -211,6 +198,14 @@ __Z7webMainv();`.trim();

export default {
props: {
editor_tabs: {
type: Number,
default: 1,
},
output_tabs: {
type: Number,
default: 1,
},
cpp_code: {
type: String,
default: cpp_code,
@@ -221,7 +216,18 @@ __Z7webMainv();`.trim();
},
js_code: {
type: String,
// default: js_code,
},
compiler_output: {
type: String,
},
compiler_flags: {
type: String,
default: '-cheerp-no-type-optimizer -cheerp-pretty-code -cheerp-no-native-math -cheerp-no-math-imul -cheerp-no-math-fround -O3 -target cheerp'
},

do_update_iframe: {
type: Boolean,
default: false
}
},
components: {
@@ -238,17 +244,28 @@ __Z7webMainv();`.trim();
},
onLoadIframe(event) {
// iframe ready, set flag?
console.log("loaded iframe");
if (this.do_update_iframe) {
this.update_iframe('myIframe');
this.do_update_iframe = false;
}
},
compile() {
this.output_tabs = 1;
// axios.post('//localhost:5000/compile', {
axios.post('https://cheerp.cppse.nl/api/compile', {
flags: '',
flags: this.compiler_flags,
source: this.cpp_code
})
.then(function (response) {
// response.data.retcode
// response.data.stdout
// response.data.stderr
const str =
'COMMAND: ' + 'response.data.command' + '\n' +
'EXIT_CODE: ' + response.data.retcode + '\n' +
'STDOUT:\n------------------------------\n' +
response.data.stdout +
'STDERR:\n------------------------------\n' +
response.data.stderr;
this.compiler_output = str;
this.js_code = response.data.javascript;
}.bind(this))
.catch(function (error) {
@@ -256,7 +273,12 @@ __Z7webMainv();`.trim();
});
},
run() {
this.update_iframe('myIframe');
this.do_update_iframe = true;
this.output_tabs = 2;
try {
this.update_iframe('myIframe');
}
catch (e) {}
},
},
watch: {
@@ -279,4 +301,7 @@ __Z7webMainv();`.trim();
justify-content: center;
align-items: center;
}
.settings {
height: calc(50vh - 6rem);
}
</style>

+ 10
- 8
src/components/EditorComponent.vue Bestand weergeven

@@ -2,9 +2,13 @@
<div>
<div class="container" :id="name" :style="{'height': `calc(${height} - ( 8rem) )`}"></div>
<div class="tags has-addons">
<span class="tag">
<label class="checkbox">
<input type="checkbox" v-model="vim_mode"><span>VIM</span>
</label>
</span>
<span class="tag"><label class="checkbox">
<input type="checkbox" v-model="vim_mode">VIM</label>
<input type="checkbox" v-model="emacs_mode">EMACS</label>
<input type="checkbox" v-model="emacs_mode"><span>EMACS</span></label>
</span>
<span class="tag is-primary" :id="`${name}_status`"></span>
</div>
@@ -20,12 +24,10 @@
vim_mode: {
type: Boolean,
default: false,
required: true
},
emacs_mode: {
type: Boolean,
default: false,
required: true
},
name: {
type: String,
@@ -51,6 +53,8 @@
automaticLayout: true,
});
/*
The themes seem not compatible with the vim style cursor.
TODO: investigate how to fix.
fetch('/themes/Dawn.json')
.then(data => data.json())
.then(data => {
@@ -59,19 +63,17 @@
});
*/
this.editor.onDidChangeModelContent(event => {
const value = this.editor.getValue()
const value = this.editor.getValue();
if (this.value !== value) {
this.$emit('input', value, event)
}
});

// this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
},
watch: {
value(new_val) {
if (this.editor) {
if (new_val !== this.editor.getValue()) {
this.editor.setValue(new_val)
this.editor.setValue(new_val);
this.$emit('input', new_val);
}
}

+ 6
- 4
src/mystyles.scss Bestand weergeven

@@ -6,8 +6,8 @@
}

iframe, textarea.textarea {
width: calc(100vh - ( 6rem) );
min-width: calc(100vh - ( 6rem) );
width: calc(50vw - ( 2.5rem) );
min-width: calc(50vw - ( 2.5rem) );
height: calc(50vh - ( 8rem) );
}

@@ -15,9 +15,11 @@ iframe, textarea.textarea {
margin-left: 10px;
margin-top: 10px;
}
.tag span {
.tag {
margin: 0;
padding: 0;
position:relative;
top:2px;
}
.tag span {
margin-left: 5px;
}

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan