Skip to content

Commit ca82e47

Browse files
ChronostasysChronostasys
committed
feat: add run button
1 parent 5a53d55 commit ca82e47

File tree

4 files changed

+168
-39
lines changed

4 files changed

+168
-39
lines changed

‎src/components/tabList.vue‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,85 @@
11
<script lang="ts" setup>
2+
import { PlMonaco } from "@pivot-lang/create-monaco";
3+
import axios from "axios";
4+
import { ref } from "vue";
5+
26
const props = defineProps<{
37
tablist: string[];
48
val: string;
9+
code: string;
510
}>();
6-
const emit = defineEmits(['updateVal']);
11+
const emit = defineEmits(["updateVal", "updateOutput"]);
712
function updateVal(val: string) {
8-
emit('updateVal', val);
13+
emit("updateVal", val);
14+
}
15+
16+
let isRunning = ref(false);
17+
18+
async function run(params: string) {
19+
isRunning.value = true;
20+
try {
21+
let re = await axios.post<{ result: string }>(
22+
"http://43.154.191.136:8080/coderunner",
23+
{
24+
code: params,
25+
}
26+
);
27+
isRunning.value = false;
28+
if (!re.data.result) {
29+
emit("updateOutput", "run success with no output");
30+
return;
31+
}
32+
emit("updateOutput", re.data.result);
33+
} catch (error) {
34+
isRunning.value = false;
35+
emit("updateOutput", error);
36+
}
937
}
1038
</script>
1139
<template>
12-
<div class="tab-list">
13-
<div @click="updateVal(tab)" v-for="tab in props.tablist" :key="tab" :class="{ selected: props.val == tab }">{{ tab }}</div>
40+
<div class="top-menu">
41+
<div class="tab-list">
42+
<div
43+
@click="updateVal(tab)"
44+
v-for="tab in props.tablist"
45+
:key="tab"
46+
:class="{ selected: props.val == tab }"
47+
>
48+
{{ tab }}
49+
</div>
50+
</div>
51+
<div v-if="!isRunning" class="run">
52+
<font-awesome-icon
53+
icon="fa-play"
54+
:style="{
55+
color: 'green',
56+
}"
57+
style="cursor: pointer"
58+
@click="run(props.code)"
59+
class=""
60+
/>
61+
</div>
62+
<div v-else class="run">
63+
<font-awesome-icon
64+
icon="fa-spinner"
65+
class="fa-spin"
66+
:style="{
67+
color: 'grey',
68+
}"
69+
/>
70+
</div>
1471
</div>
1572
</template>
1673
<style lang="scss" scoped>
74+
.top-menu {
75+
display: flex;
76+
background-color: #080808;
77+
border-radius: 10px 10px 0 0;
78+
}
1779
.tab-list {
1880
display: inline-flex;
1981
background-color: #080808;
20-
border-radius: 10px 10px 0 0;
82+
// border-radius: 10px 10px 0 0;
2183
padding: 0 10px;
2284
width: 100%;
2385
overflow: auto;
@@ -40,4 +102,9 @@ function updateVal(val: string) {
40102
border-radius: 5px 5px 0 0;
41103
}
42104
}
105+
.run {
106+
display: flex;
107+
margin: auto;
108+
padding: 10px;
109+
}
43110
</style>

‎src/constant/monacoCodes.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
export const basicCode = [
22
{
33
title: 'hello world',
4-
code: `fn main() i64 {
4+
code: `use std::io;
5+
fn main() i64 {
56
println!("hello world!");
67
return 0;
78
}
89
`,
910
},
1011
{
1112
title: 'fibonacci',
12-
code: `fn main() i64 {
13+
code: `use std::io;
14+
fn main() i64 {
1315
let result = getFibonacci(10);
1416
println!(result);
1517
return 0;
@@ -31,7 +33,7 @@ fn getFibonacci(n: i64) i64 {
3133
{
3234
title: 'fixed point',
3335
code: `use core::panic;
34-
pub fn test_fixed_point() void {
36+
pub fn main() i64 {
3537
let g = |f: |i64| => i64, x: i64| => i64 {
3638
if x == 0 {
3739
return 1;
@@ -42,7 +44,7 @@ pub fn test_fixed_point() void {
4244
for let x = 0; x < 10; x = x + 1 {
4345
panic::assert(fact(x) == fact_recursion(x));
4446
}
45-
return;
47+
return 0;
4648
}
4749
4850
struct Func<A|F> {
@@ -85,7 +87,8 @@ fn fact_recursion(x: i64) i64 {
8587
{
8688
title: 'find islands',
8789
code: `use core::panic;
88-
pub fn test_map() void {
90+
use std::io;
91+
pub fn main() i64 {
8992
// count = 5
9093
// 1, 0, 1, 1, 1
9194
// 1, 1, 0, 1, 1
@@ -94,7 +97,8 @@ pub fn test_map() void {
9497
// 1, 0, 0, 1, 1
9598
let mp = [[1, 0, 1, 1, 1], [1, 1, 0, 1, 1], [1, 0, 0, 1, 1], [0, 1, 1, 0, 0], [1, 0, 0, 1, 1]];
9699
panic::assert(count(mp) == 5);
97-
return;
100+
println!(count(mp));
101+
return 0;
98102
}
99103
100104
pub fn count(mp: [[i64 * 5] * 5]) i64 {

‎src/main.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import { createApp } from 'vue';
2-
import './style.scss';
3-
import App from './App.vue';
4-
import route from '@/route';
1+
import { createApp } from "vue";
2+
import "./style.scss";
3+
import App from "./App.vue";
4+
import route from "@/route";
55

66
/* import the fontawesome core */
7-
import { library } from '@fortawesome/fontawesome-svg-core';
7+
import { library } from "@fortawesome/fontawesome-svg-core";
88

99
/* import font awesome icon component */
10-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
10+
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
1111

1212
/* import specific icons */
13-
import { faApple, faWindows, faLinux } from '@fortawesome/free-brands-svg-icons';
13+
import {
14+
faApple,
15+
faWindows,
16+
faLinux,
17+
} from "@fortawesome/free-brands-svg-icons";
18+
import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
1419

1520
/* add icons to the library */
16-
library.add(faApple, faWindows, faLinux);
21+
library.add(faApple, faWindows, faLinux, faPlay, faSpinner);
1722

18-
createApp(App).use(route).component('font-awesome-icon', FontAwesomeIcon).mount('#app');
23+
createApp(App)
24+
.use(route)
25+
.component("font-awesome-icon", FontAwesomeIcon)
26+
.mount("#app");

‎src/pages/index.vue‎

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
<script setup lang="ts">
2-
import { Nav, FirstPage, TabList, GcEcharts, MemberCard, Bottom, MoreInfo, CodeCovEcharts, VscSupportShow, Link, CrossPlatforms } from '@/components';
3-
import { ref, onMounted, watch } from 'vue';
4-
import { basicCode } from '@/constant';
5-
import { memberList } from '@/constant';
6-
import createMonaco, { PlMonaco } from '@pivot-lang/create-monaco';
7-
const tabVal = ref('hello world');
2+
import {
3+
Nav,
4+
FirstPage,
5+
TabList,
6+
GcEcharts,
7+
MemberCard,
8+
Bottom,
9+
MoreInfo,
10+
CodeCovEcharts,
11+
VscSupportShow,
12+
Link,
13+
CrossPlatforms,
14+
} from "@/components";
15+
import { ref, onMounted, watch } from "vue";
16+
import { basicCode } from "@/constant";
17+
import { memberList } from "@/constant";
18+
import createMonaco, { PlMonaco } from "@pivot-lang/create-monaco";
19+
import codeBlock from "@/components/codeBlock.vue";
20+
import { cp } from "fs";
21+
const tabVal = ref("hello world");
822
const tabList = basicCode.map((item) => item.title);
923
let monaco: PlMonaco;
10-
24+
let code = ref("");
25+
let runresult = ref("");
1126
function gotoEmail() {
12-
window.location.href = 'mailto:[email protected]';
27+
window.location.href = "mailto:[email protected]";
1328
}
1429
1530
onMounted(async () => {
16-
monaco = createMonaco(document.getElementById('container')!, basicCode[0].code);
31+
monaco = createMonaco(
32+
document.getElementById("container")!,
33+
basicCode[0].code
34+
);
35+
code.value = basicCode[0].code;
36+
monaco.editor.onDidChangeModelContent(() => {
37+
code.value = monaco.editor.getModel()!.getValue();
38+
});
1739
});
1840
watch(
1941
() => tabVal.value,
2042
(val) => {
21-
const code = basicCode.find((item) => item.title === val)?.code || '';
22-
monaco.setContent(code);
43+
const code1 = basicCode.find((item) => item.title === val)?.code || "";
44+
code.value = code1;
45+
monaco.setContent(code1);
2346
}
2447
);
2548
</script>
@@ -30,27 +53,45 @@ watch(
3053
<FirstPage :monaco="monaco"></FirstPage>
3154
<div id="code-show">
3255
<div class="gradient-font title">Enjoy coding pivot lang now!</div>
33-
<div class="detail-describe">With the help of Web Assembly technology, we are able to provide support for some of the Pivot Lang syntax in the browser for you to experience.</div>
56+
<div class="detail-describe">
57+
With the help of Web Assembly technology, we are able to provide support
58+
for some of the Pivot Lang syntax in the browser for you to experience.
59+
</div>
3460
<div class="code-box">
35-
<TabList @updateVal="(val:string) => (tabVal = val)" :tablist="tabList" :val="tabVal"></TabList>
61+
<TabList
62+
@updateVal="(val:string) => (tabVal = val)"
63+
@updateOutput="(re) => (runresult = re)"
64+
:tablist="tabList"
65+
:val="tabVal"
66+
:code="code"
67+
></TabList>
3668
<div class="code-container">
3769
<div id="container"></div>
3870
</div>
3971
</div>
4072
</div>
73+
<codeBlock
74+
v-if="runresult"
75+
class="code-block'"
76+
:code="runresult"
77+
></codeBlock>
4178
<div id="advantage">
4279
<div class="gradient-font title">Immix Garbage Collector</div>
4380
<div class="detail-describe">
44-
Significantly outperforming the well known Boehm-Demers-Weiser (BDW) collector in the multi-thread environment, the Immix collector is a state-of-the-art garbage collector for modern hardware.
45-
It is designed to be highly concurrent and to exploit the locality of reference patterns in modern programs.
81+
Significantly outperforming the well known Boehm-Demers-Weiser (BDW)
82+
collector in the multi-thread environment, the Immix collector is a
83+
state-of-the-art garbage collector for modern hardware. It is designed
84+
to be highly concurrent and to exploit the locality of reference
85+
patterns in modern programs.
4686
</div>
4787
<GcEcharts></GcEcharts>
4888
</div>
4989
<div id="advantage">
5090
<div class="gradient-font title">Reliability</div>
5191
<div class="detail-describe">
52-
Pivot Lang is heavily tested to ensure that it is stable and reliable. We have a large number of unit tests and integration tests to ensure that the coverage of the code is as high as
53-
possible.
92+
Pivot Lang is heavily tested to ensure that it is stable and reliable.
93+
We have a large number of unit tests and integration tests to ensure
94+
that the coverage of the code is as high as possible.
5495
</div>
5596
<CodeCovEcharts></CodeCovEcharts>
5697
</div>
@@ -60,7 +101,14 @@ watch(
60101
<div class="gradient-font title">Meet The Team</div>
61102
<div class="team-card">
62103
<div class="card-container">
63-
<MemberCard v-for="member in memberList" :key="member.name" :name="member.name" :github="member.github" :avatar="member.avatar" :identity="member.identity"></MemberCard>
104+
<MemberCard
105+
v-for="member in memberList"
106+
:key="member.name"
107+
:name="member.name"
108+
:github="member.github"
109+
:avatar="member.avatar"
110+
:identity="member.identity"
111+
></MemberCard>
64112
</div>
65113
</div>
66114
</div>
@@ -69,7 +117,9 @@ watch(
69117
<div class="two-grid-container">
70118
<img class="left" src="@/assets/socialite.jpg" />
71119
<div class="detail-describe right">
72-
Pivot lang is still developing and we long for every geek joingus,completing the language together.If you are interested in pivot lang,click the button and write the email to
120+
Pivot lang is still developing and we long for every geek
121+
joingus,completing the language together.If you are interested in
122+
pivot lang,click the button and write the email to
73123
<span style="color: white">[email protected]</span>
74124
introduce yourself now!
75125
</div>

0 commit comments

Comments
 (0)