Commit 42b43f9d authored by Gyeongho Park's avatar Gyeongho Park

[Add] GUI 및 Dockerfile 포트 수정

parent 2ae59785
......@@ -8,6 +8,6 @@ RUN npm install
COPY . .
EXPOSE 5100
EXPOSE 5200
CMD [ "node", "bin/www" ]
\ No newline at end of file
......@@ -12,7 +12,7 @@ var http = require('http');
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '5100');
var port = normalizePort(process.env.PORT || '5200');
app.set('port', port);
/**
......
......@@ -4,4 +4,4 @@ sudo docker build -t ves .
sudo docker stop ves
sudo docker rm ves
sudo docker run -d --restart=always --name ves -p 5100:5100 -it ves
\ No newline at end of file
sudo docker run -d --restart=always --name ves -p 5200:5200 -it ves
\ No newline at end of file
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# ves-ui
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
This diff is collapsed.
{
"name": "ves-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.6.2",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuetify": "^2.6.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<v-app>
<v-main>
<SkipperForm/>
</v-main>
</v-app>
</template>
<script>
import SkipperForm from './components/SkipperForm';
export default {
name: 'App',
components: {
SkipperForm,
},
data: () => ({
//
}),
};
</script>
<?xml version="1.0" encoding="UTF-8"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.07 117.27"><defs><style>.cls-1{fill:#be1d2c;}</style></defs><g id="Layer_1"><path class="cls-1" d="m86.37,6.79S84.57,0,79.12,0h-2.55,0s-9.03,0-9.03,0h-9.03s0,0,0,0h-2.55c-5.45,0-7.25,6.78-7.25,6.78L0,117.27c14.52-16.31,35.19-15.97,35.19-15.97h2.03c5.53-.29,8-7.71,8-7.71l22.31-56.08,22.31,56.08s2.47,7.41,8,7.71h2.03s20.67-.33,35.19,15.97L86.37,6.79Z"/></g></svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo-color.png')"
class="my-3"
contain
height="80"
/>
</v-col>
<v-col class="mb-4">
<h3>에듀라인 스키퍼</h3>
</v-col>
<v-col cols="12" align="center" justify="center">
<v-card max-width="480" transparent flat>
<v-form
v-if="!response"
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="p_id"
:counter="32"
:rules="p_idRules"
label="p_id"
required
maxlength="32"
></v-text-field>
<v-text-field
v-model="s_id"
:rules="s_idRules"
:counter="4"
label="s_id"
required
maxlength="4"
></v-text-field>
<v-text-field
v-model="wr_id"
:rules="wr_idRules"
:counter="7"
label="wr_id"
required
maxlength="7"
></v-text-field>
<v-btn
:disabled="!valid"
color="primary"
@click="request()"
:loading="loadingRequest"
class="my-16"
large
>
스킵하기
</v-btn>
</v-form>
<div v-else>
<v-list>
<v-list-item>
<h2 class="primary--text pr-3"><v-icon left color="primary">mdi-check-circle-outline</v-icon>{{(response.filter((e) => e.status === 'success').length * 100) / response.length}}%</h2>
<v-list-item-content>
<v-progress-linear :height="10" rounded :value="(response.filter((e) => e.status === 'success').length * 100) / response.length" color="primary"></v-progress-linear>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-row no-gutters align="center" justify="center">
요청에 성공하였습니다.
</v-row>
</v-list-item-content>
</v-list-item>
<v-list-item
v-for="(item, index) in response.filter((e) => e.status !== 'success')"
:key="'response-' + index"
dense
>
<v-icon leftcolor="red">
mdi-close
</v-icon>
<v-list-item-content>
<v-list-item-title>
{{ item.result }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<v-btn @click="response = null" color="primary" class="my-16" large>
처음으로
</v-btn>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import axios from 'axios'
export default {
name: 'SkipperForm',
data: () => ({
valid: true,
p_id: '',
p_idRules: [
v => !!v || 'p_id 값을 입력해주세요.',
v => (v && v.length === 32) || 'p_id는 32자리의 문자값 입니다.',
],
s_id: '',
s_idRules: [
v => !!v || 's_id 값을 입력해주세요.',
v => (v && v.length === 4) || 's_id는 4자리의 문자값 입니다.',
],
wr_id: '',
wr_idRules: [
v => !!v || 'wr_id 값을 입력해주세요.',
v => (v && v.length === 7) || 'wr_id는 7자리의 숫자값 입니다.',
],
loadingRequest: false,
response: null
}),
mounted() {
},
methods: {
async request() {
await this.$refs.form.validate()
if(!this.valid) return
this.loadingRequest = true
this.response = null
await axios.post('http://localhost:5100/skip', {
p_id: this.p_id,
s_id: this.s_id,
wr_id: this.wr_id
})
.then(res=>{
console.log(res)
this.response = res.data
})
.catch(err=>{
console.log(err)
})
this.loadingRequest = false
},
},
watch:{
p_id(){
if(this.p_id?.length > 32) {
this.p_id = this.p_id.substring(0, 32)
}
},
s_id(){
if(this.s_id?.length > 4) {
this.s_id = this.s_id.substring(0, 4)
}
},
wr_id() {
if(this.wr_id?.length > 7) {
this.wr_id = this.wr_id.substring(0, 7)
}
}
}
}
</script>
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
});
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment