rayburgemeestre
/
cheerpweb
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Implement tabs logic in Vue 

Update exec_helpers version

Fix some css issues

Add "make release" helper target
master
rayburgemeestre 7 years ago
parent
c84d8d9d5b
commit
258d71d1ab
6 changed files with 99 additions and 69 deletions
Unified View Show 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 View File

.PHONY: clean .PHONY: clean
clean: clean:
rm -rf dist/*.main.js dist/*.worker.js dist/css/ dist/main.js && rm -rf docker_web/dist 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 View File

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

+ 3
- 12
docker_api/api.py View File

def compile(): def compile():
if request.method == 'POST': if request.method == 'POST':
note = str(request.data.get('source', '')) note = str(request.data.get('source', ''))
flags = str(request.data.get('flags', ''))


with open("/tmp/test.cpp", "w") as f: with open("/tmp/test.cpp", "w") as f:
f.write(note) f.write(note)
stderr = '' stderr = ''
retcode = 0 retcode = 0
output = '' 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: with exec_helpers.Subprocess() as executor:
try: try:
ret = executor.check_call(cmd, shell=True, timeout=2) ret = executor.check_call(cmd, shell=True, timeout=2)
return { return {
'stdout': stdout, 'stdout': stdout,
'stderr': stderr, 'stderr': stderr,
'command': cmd,
'retcode': retcode, 'retcode': retcode,
'javascript': output 'javascript': output
}, status.HTTP_201_CREATED }, status.HTTP_201_CREATED

+ 64
- 39
src/App.vue View File



<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"> <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"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> <a class="navbar-link">
More
Load example
</a> </a>

<div class="navbar-dropdown"> <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"> <hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
<a class="navbar-item">Example 4 (TODO)</a>
</div> </div>
</div> </div>
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-primary" v-on:click="compile" v-shortkey.once="['ctrl', 'f9']" @shortkey="compile()"> <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>
<a class="button is-light" v-on:click="run" v-shortkey.once="['ctrl', 'f10']" @shortkey="run()"> <a class="button is-light" v-on:click="run" v-shortkey.once="['ctrl', 'f10']" @shortkey="run()">
Run
Run [CTRL+F10]
</a> </a>
</div> </div>
</div> </div>


<div class="tabs"> <div class="tabs">
<ul> <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> </ul>
</div> </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>
<div class="row"> <div class="row">
<div class="row"> <div class="row">
<div class="tabs"> <div class="tabs">
<ul> <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> </ul>
</div> </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> </div>
</div> </div>


export default { export default {
props: { props: {
editor_tabs: {
type: Number,
default: 1,
},
output_tabs: {
type: Number,
default: 1,
},
cpp_code: { cpp_code: {
type: String, type: String,
default: cpp_code, default: cpp_code,
}, },
js_code: { js_code: {
type: String, 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: { components: {
}, },
onLoadIframe(event) { onLoadIframe(event) {
// iframe ready, set flag? // iframe ready, set flag?
console.log("loaded iframe");
if (this.do_update_iframe) {
this.update_iframe('myIframe');
this.do_update_iframe = false;
}
}, },
compile() { compile() {
this.output_tabs = 1;
// axios.post('//localhost:5000/compile', { // axios.post('//localhost:5000/compile', {
axios.post('https://cheerp.cppse.nl/api/compile', { axios.post('https://cheerp.cppse.nl/api/compile', {
flags: '',
flags: this.compiler_flags,
source: this.cpp_code source: this.cpp_code
}) })
.then(function (response) { .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; this.js_code = response.data.javascript;
}.bind(this)) }.bind(this))
.catch(function (error) { .catch(function (error) {
}); });
}, },
run() { run() {
this.update_iframe('myIframe');
this.do_update_iframe = true;
this.output_tabs = 2;
try {
this.update_iframe('myIframe');
}
catch (e) {}
}, },
}, },
watch: { watch: {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.settings {
height: calc(50vh - 6rem);
}
</style> </style>

+ 10
- 8
src/components/EditorComponent.vue View File

<div> <div>
<div class="container" :id="name" :style="{'height': `calc(${height} - ( 8rem) )`}"></div> <div class="container" :id="name" :style="{'height': `calc(${height} - ( 8rem) )`}"></div>
<div class="tags has-addons"> <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"> <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>
<span class="tag is-primary" :id="`${name}_status`"></span> <span class="tag is-primary" :id="`${name}_status`"></span>
</div> </div>
vim_mode: { vim_mode: {
type: Boolean, type: Boolean,
default: false, default: false,
required: true
}, },
emacs_mode: { emacs_mode: {
type: Boolean, type: Boolean,
default: false, default: false,
required: true
}, },
name: { name: {
type: String, type: String,
automaticLayout: true, automaticLayout: true,
}); });
/* /*
The themes seem not compatible with the vim style cursor.
TODO: investigate how to fix.
fetch('/themes/Dawn.json') fetch('/themes/Dawn.json')
.then(data => data.json()) .then(data => data.json())
.then(data => { .then(data => {
}); });
*/ */
this.editor.onDidChangeModelContent(event => { this.editor.onDidChangeModelContent(event => {
const value = this.editor.getValue()
const value = this.editor.getValue();
if (this.value !== value) { if (this.value !== value) {
this.$emit('input', value, event) this.$emit('input', value, event)
} }
}); });

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

+ 6
- 4
src/mystyles.scss View File

} }


iframe, textarea.textarea { 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) ); height: calc(50vh - ( 8rem) );
} }


margin-left: 10px; margin-left: 10px;
margin-top: 10px; margin-top: 10px;
} }
.tag span {
.tag {
margin: 0; margin: 0;
padding: 0; padding: 0;
position:relative; position:relative;
top:2px;
} }
.tag span {
margin-left: 5px;
}

Write Preview
Loading…
Cancel
Save