pify8ezms
/
102201638-roller-frontend-241001
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加上传面板、事件机制

Browse Source
master
cflsxjw 1 month ago
parent 0ecda66057
commit ab8ad7873f
6 changed files with 156 additions and 31 deletions
Show Stats Download Patch File Download Diff File

1
index.html
Unescape View File

@ -9,7 +9,6 @@
<body> <body>
<div class="container"> <div class="container">
<div class="main-menu" id="menu-sidebar"></div> <div class="main-menu" id="menu-sidebar"></div>
<script type="module" src="src/javascript/main-menu.js"></script> <script type="module" src="src/javascript/main-menu.js"></script>
<div class="main-content"> <div class="main-content">
<div class="header">Roller</div> <div class="header">Roller</div>

60
src/components/event-description-board.vue
Unescape View File

@ -1,25 +1,61 @@
<script setup> <script setup>
function OnClick() import {watchEffect, onMounted} from "vue";
{ const props = defineProps(['description'])
document.getElementById('myid').click()
function DescriptionToHTML(description) {
let html = "";
const words = description.split('/');
for (let i in words) {
html += words[i] + '<br>';
}
return html;
} }
onMounted(() => {
watchEffect(() => {
document.getElementById('description').innerHTML = DescriptionToHTML(props.description);
})
})
</script> </script>
<template> <template>
<div class="event-description">
<button @click="OnClick">
open file selection <div class="container">
</button> <div class="title">
<form> event<br>description
<input type="file" style="display:none" id="myid"/> </div>
</form> <div id="description">
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.event-description { @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');
.container {
width: 20.33%; width: 20.33%;
height: 100%; height: 100%;
background-color: #537045A5; background-color: #718B64;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-size: 40px;
height: 8.3vh;
width: 13.46vw;
background-color: #58767C;
margin-top: 5.3vh;
font-family: Itim,serif;
text-align: center;
line-height: 40px;
border-radius: 20px;
}
#description {
font-size: 40px;
margin-top: 5.3vh;
text-align: center;
font-family: "ZCOOL QingKe HuangYou",serif;
} }
</style> </style>

50
src/components/main-frame.vue
Unescape View File

@ -5,13 +5,31 @@ import {ref} from "vue";
import EventDescriptionBoard from "./event-description-board.vue"; import EventDescriptionBoard from "./event-description-board.vue";
const number=ref(0); const number=ref(0);
const enable=ref(false); const enable=ref(false);
const score=ref(0); const score=ref(0.0);
const sno=ref(""); const sno=ref("");
const sname=ref(""); const sname=ref("");
function getStuInfo() const eventID=ref(0);
const eventDescription=ref("")
let init=false;
let score_variation = 0.0;
function start()
{ {
let res = fetch("http://127.0.0.1:8000/get_random_stu",{method: "GET"}); if(init)
res.then((res)=>{ {
fetch("http://localhost:8000/api/post/update_score",{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
sno: sno.value,
variation: score.value - score_variation})
})
}
init=true;
fetch("http://127.0.0.1:8000/api/get/get_random_stu",{method: "GET"})
.then((res)=>{
return res.json() return res.json()
}).then((data)=>{ }).then((data)=>{
// noinspection JSUnresolvedReference // noinspection JSUnresolvedReference
@ -19,6 +37,24 @@ function getStuInfo()
// noinspection JSUnresolvedReference // noinspection JSUnresolvedReference
sname.value = data.sname sname.value = data.sname
}) })
fetch("http://localhost:8000/api/get/get_random_event",{method: "GET"})
.then((res)=>{
return res.json()
}).then((data)=>{
// noinspection JSUnresolvedReference
eventID.value = data.event_id
enable.value = eventID.value !== 0;
// noinspection JSUnresolvedReference
eventDescription.value = data.event_description
})
switch (eventID.value) {
case 1:
score_variation = 1;
break;
case 2:
score_variation = -0.5;
break;
}
} }
</script> </script>
@ -27,9 +63,9 @@ function getStuInfo()
<score-board class="score-board" :current-score="score" @score-changed="(s)=>{score=s}"></score-board> <score-board class="score-board" :current-score="score" @score-changed="(s)=>{score=s}"></score-board>
<div class="result-board-container"> <div class="result-board-container">
<result-board class="result-board" :number :enable :sno :sname></result-board> <result-board class="result-board" :number :enable :sno :sname></result-board>
<button class="start-button" @click="getStuInfo">start</button> <button class="start-button" @click="start">start</button>
</div> </div>
<event-description-board class="event-description"></event-description-board> <event-description-board class="event-description" :description="eventDescription"></event-description-board>
</div> </div>
</template> </template>
@ -51,7 +87,7 @@ function getStuInfo()
grid-template-columns:27.3% 52.37% 20.33%; grid-template-columns:27.3% 52.37% 20.33%;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
background-color: #7B8795; background-color: #657A7E;
} }
.score-board { .score-board {
margin: 11.39vh 0 0 40.26%; margin: 11.39vh 0 0 40.26%;

10
src/components/menu-sidebar.vue
Unescape View File

@ -1,10 +0,0 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

64
src/components/upload-panel.vue
Unescape View File

@ -0,0 +1,64 @@
<script setup>
function select()
{
let file_input = document.getElementById("file-input")
file_input.click();
}
function upload()
{
let file_input = document.getElementById("file-input")
const formData = new FormData();
formData.append("file", file_input.files[0]);
console.log(file_input.files[0]);
fetch("http://localhost:8000/api/post/upload_stu_info", {
method: 'POST',
body: formData
})
}
</script>
<template>
<div class="container">
<button class="file-selector" @click="select">select file</button>
<form>
<input type="file" id="file-input" accept=".csv">
<button type="submit" class="submit-button" @click.prevent="upload">U<br>P<br>L<br>O<br>A<br>D</button>
</form>
</div>
</template>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
.container {
height: 100%;
width: 100%;
background-color: #2F3B4A;
flex-direction: column;
align-items: center;
}
.file-selector {
margin-top: 3.5vh;
width: 6.94vw;
height: 4.3vh;
border-radius: 20px;
font-size: 1.25rem;
font-family: Itim,serif;
background-color: #BE8A7D;
}
#file-input {
display: none;
}
.submit-button {
margin-top: 3.5vh;
width: 6.94vw;
height: 80.3vh;
border-radius: 30px;
background-color: #2C3031;
border: 3px solid #2C3031;
font-size: 6rem;
text-align: center;
font-family: Kalam,serif;
line-height: 140px;
}
</style>

2
src/javascript/main-menu.js
Unescape View File

@ -1,5 +1,5 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import MenuSidebar from '../components/menu-sidebar.vue' import MenuSidebar from '../components/upload-panel.vue'
const app = createApp(MenuSidebar) const app = createApp(MenuSidebar)
app.mount('#menu-sidebar') app.mount('#menu-sidebar')
Write Preview
Loading…
Cancel
Save