Skip to content

Commit 551376c

Browse files
committed
fix stdout/stderr: vueified ansioutput component; call v-wait after! sending new task
1 parent b9919f9 commit 551376c

File tree

2 files changed

+59
-33
lines changed

2 files changed

+59
-33
lines changed

viplab-standalone-frontend-vue/src/components/AnsiOutput.vue

Lines changed: 51 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<template>
22
<div class="ansi-output-component">
33
<div class="ansi-editor d-flex flex-row">
4-
<div class="line-numbers-div text-center" :id="divId+'-lines'"></div>
5-
<div class="console-output pl-1 pr-1" :id="divId+'-content'"></div>
4+
<div class="line-numbers-div text-center" :id="divId+'-lines'">
5+
<pre><span v-for="index in lines.length" :key="index">{{index}}<br/></span></pre>
6+
</div>
7+
<div class="console-output pl-1 pr-1" :id="divId+'-content'">
8+
<!-- pre needed to not squeeze white space, i.e., for asci graphics -->
9+
<pre><span v-for="(line, index) in lines" :key="index"
10+
v-html="line"></span></pre>
11+
</div>
612
</div>
713
</div>
814
</template>
@@ -16,41 +22,60 @@ export default {
1622
divId: String,
1723
content: String
1824
},
19-
methods: {
20-
setAnsiOutput: function() {
21-
let ansi_up = new AU.default;
22-
23-
//var txt = "\n\n\x1B[1;33;40m 33;40 \x1B[1;33;41m 33;41 \x1B[1;33;42m 33;42 \x1B[1;33;43m 33;43 \x1B[1;33;44m 33;44 \x1B[1;33;45m 33;45 \x1B[1;33;46m 33;46 \x1B[1m\x1B[0\n\n\x1B[1;33;42m >> Tests OK\n\n"
24-
//var txt= "\u001b[31mHelloWorld";
25-
26-
27-
let lines = this.content.split(/\r?\n/);
28-
lines = lines.filter(function (el) {
29-
return el != null //&& el !== "" && el !== " ";
30-
});
31-
32-
for (let line in lines) {
33-
let html = ansi_up.ansi_to_html(lines[line]);
34-
let cdiv = document.getElementById(this.divId+"-content");
35-
cdiv.innerHTML += "<span>" + html + "<br> </span>";
36-
let linesdiv = document.getElementById(this.divId+"-lines");
37-
let linenumber = parseInt(line) + 1;
38-
linesdiv.innerHTML += linenumber + "<br>";
25+
data() {
26+
return {
27+
/* TODO: adjust height of stdout to height of right tab,
28+
maybe need computed variable for that;
29+
in css below height can be "v-bind(height)"
30+
height: '300px', */
31+
ansi: undefined,
32+
lines: []
33+
}
34+
},
35+
watch: {
36+
content: function (concat_content, old_content) {
37+
if (concat_content === '') {
38+
// should never come to that branch; instead component is mounted again
39+
// when content resets
40+
console.log('Clearing out content of ansioutput');
41+
this.lines = []
42+
} else {
43+
const new_content = concat_content.substring(old_content.length);
44+
this.renderContent(new_content);
3945
}
40-
4146
}
4247
},
48+
/* TODO: would be nice feature
49+
updated () {
50+
// auto-scroll to the bottom when the DOM is updated
51+
this.$el.scrollTop = this.$el.scrollHeight
52+
}, */
53+
beforeMount() {
54+
this.ansi = new AU.default;
55+
},
4356
mounted() {
44-
this.setAnsiOutput();
57+
this.renderContent(this.content);
58+
//console.log("ansi in mounted")
59+
},
60+
methods: {
61+
renderContent: function(content) {
62+
//console.log(this.lines.length);
63+
const new_lines = content.split(/\r?\n/);
64+
for (let line_idx in new_lines) {
65+
this.lines.push(this.ansi.ansi_to_html(
66+
new_lines[line_idx]) + '<br/>');
67+
}
68+
}
4569
}
4670
};
4771
</script>
4872

4973
<!-- Add "scoped" attribute to limit CSS to this component only -->
5074
<style scoped>
5175
.ansi-output-component {
52-
height: 250px;
53-
font-family: Consolas;
76+
min-height: 250px;
77+
height: 325px;
78+
font-family: monospace;
5479
font-size: inherit;
5580
line-height: 2;
5681
border: 1px solid #ddd;

viplab-standalone-frontend-vue/src/pages/viplab/App.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165
<b-button v-if="$config.IS_STUDENT" class="btn mr-2 btn-row" style="width:62.5px" variant="success" btn-variant="white" v-tooltip.top-center="'Save'">
166166
<font-awesome-icon icon="save" />
167167
</b-button>
168-
<b-button class="btn btn-row" id="submit" variant="primary" :disabled="invalid" v-tooltip.top-center="'Run'">
168+
<b-button class="btn btn-row" id="submit" variant="primary" :disabled="invalid" v-tooltip.top-center="'Run'" @click="sendData">
169169
<b-icon v-if="!waitingResponse" icon="play" aria-hidden="true"></b-icon>
170170
<v-wait for="wait for ws response">
171171
<spring-spinner
@@ -790,7 +790,7 @@ export default {
790790
this.waitingResponse = false;
791791
}
792792
};
793-
document.getElementById("submit").onclick = this.sendData;
793+
//document.getElementById("submit").onclick = this.sendData;
794794
795795
},
796796
/** create uuid for the template to be sent as request */
@@ -820,14 +820,11 @@ export default {
820820
821821
// reset result variables
822822
this.outputFiles = ""
823+
this.errorFiles = ""
823824
this.returnedOutputJson = ""
824825
this.returnedUnmodifiedArtifacts = ""
825826
826-
console.log("sendData " + this.returnedOutputJson)
827-
828-
// start waiting
829-
this.$wait.start("wait for ws response");
830-
this.waitingResponse = true;
827+
console.log("sendData " + this.outputFiles)
831828
832829
document.getElementById("submit").disabled = true;
833830
var task = {
@@ -840,6 +837,10 @@ export default {
840837
841838
this.ws.send(JSON.stringify(task));
842839
840+
// start waiting
841+
this.$wait.start("wait for ws response");
842+
this.waitingResponse = true;
843+
843844
return false;
844845
},
845846
stopComputation: function() {

0 commit comments

Comments
 (0)