diff --git a/index.html b/index.html index 99f583aa2b835f6885f2c233a0e1f6d395fa42af..d9befb03706dfa16c4a66e992c2d73fd239de5f2 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + - + - Vite App - - -
- - + Dashboard + + +
+ + diff --git a/public/favicon_oja_icon.ico b/public/favicon_oja_icon.ico new file mode 100644 index 0000000000000000000000000000000000000000..5706dbb0cf387bae9f52be41ac5209014f12cbbf Binary files /dev/null and b/public/favicon_oja_icon.ico differ diff --git a/src/App.vue b/src/App.vue index 35a80bb5e513657c2dcefe37897d5d0fa12dab47..f390fd4dbe084174fe3820eec36b83653ecbd443 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,14 @@ diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 0cef11aff125349d9e2a85c0deae478d70749791..0000000000000000000000000000000000000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/*!* color palette from *!*/ -/*:root {*/ -/* --vt-c-white: #ffffff;*/ -/* --vt-c-white-soft: #f8f8f8;*/ -/* --vt-c-white-mute: #f2f2f2;*/ - -/* --vt-c-black: #181818;*/ -/* --vt-c-black-soft: #222222;*/ -/* --vt-c-black-mute: #282828;*/ - -/* --vt-c-indigo: #2c3e50;*/ - -/* --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);*/ -/* --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);*/ -/* --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);*/ -/* --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);*/ - -/* --vt-c-text-light-1: var(--vt-c-indigo);*/ -/* --vt-c-text-light-2: rgba(60, 60, 60, 0.66);*/ -/* --vt-c-text-dark-1: var(--vt-c-white);*/ -/* --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);*/ -/*}*/ - -/*!* semantic color variables for this project *!*/ -/*:root {*/ -/* --color-background: var(--vt-c-white);*/ -/* --color-background-soft: var(--vt-c-white-soft);*/ -/* --color-background-mute: var(--vt-c-white-mute);*/ - -/* --color-border: var(--vt-c-divider-light-2);*/ -/* --color-border-hover: var(--vt-c-divider-light-1);*/ - -/* --color-heading: var(--vt-c-text-light-1);*/ -/* --color-text: var(--vt-c-text-light-1);*/ - -/* --section-gap: 160px;*/ -/*}*/ - -/*@media (prefers-color-scheme: dark) {*/ -/* :root {*/ -/* --color-background: var(--vt-c-black);*/ -/* --color-background-soft: var(--vt-c-black-soft);*/ -/* --color-background-mute: var(--vt-c-black-mute);*/ - -/* --color-border: var(--vt-c-divider-dark-2);*/ -/* --color-border-hover: var(--vt-c-divider-dark-1);*/ - -/* --color-heading: var(--vt-c-text-dark-1);*/ -/* --color-text: var(--vt-c-text-dark-2);*/ -/* }*/ -/*}*/ - -/**,*/ -/**::before,*/ -/**::after {*/ -/* box-sizing: border-box;*/ -/* margin: 0;*/ -/* font-weight: normal;*/ -/*}*/ - -/*body {*/ -/* min-height: 100vh;*/ -/* color: var(--color-text);*/ -/* background: var(--color-background);*/ -/* transition:*/ -/* color 0.5s,*/ -/* background-color 0.5s;*/ -/* line-height: 1.6;*/ -/* font-family:*/ -/* Inter,*/ -/* -apple-system,*/ -/* BlinkMacSystemFont,*/ -/* 'Segoe UI',*/ -/* Roboto,*/ -/* Oxygen,*/ -/* Ubuntu,*/ -/* Cantarell,*/ -/* 'Fira Sans',*/ -/* 'Droid Sans',*/ -/* 'Helvetica Neue',*/ -/* sans-serif;*/ -/* font-size: 15px;*/ -/* text-rendering: optimizeLegibility;*/ -/* -webkit-font-smoothing: antialiased;*/ -/* -moz-osx-font-smoothing: grayscale;*/ -/*}*/ diff --git a/src/assets/css/base.css b/src/assets/css/base.css new file mode 100644 index 0000000000000000000000000000000000000000..0b8a05b77231561de68012ec5fbe33a23b45fc6b --- /dev/null +++ b/src/assets/css/base.css @@ -0,0 +1,51 @@ +:root { + --color-white: #ffffff; + + --color-gray1: #1F2937; + --color-gray2: #374151; + --color-gray3: #4B5563; + --color-gray4: #6B7280; + --color-gray5: #9CA3AF; + --color-gray6: #C8CED3; + --color-gray7: #F3F4F6; + + --color-black: #333333; + + --color-primary: #4880FF; + --color-secondary: #CFE1F5; + --color-hover: #0C4A8F; + + --color-error: #FF0000; + + --shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + + --transition: 0.2s; + + --text-small: 0.8rem; + --text-medium: 1rem; + --text-mediumLarge: 1.5rem; + --text-large: 2rem; + + --radius-small: 5px; + --radius-medium: 10px; + --radius-large: 15px; + +} + +.dark-mode { + --color-white: #333333; + + --color-gray1: rgba(255, 255, 255, 0.7); + --color-gray2: rgba(255, 255, 255, 0.6); + --color-gray3: rgba(255, 255, 255, 0.5); + --color-gray4: rgba(255, 255, 255, 0.4); + --color-gray5: rgba(255, 255, 255, 0.3); + --color-gray6: rgba(255, 255, 255, 0.2); + --color-gray7: rgba(255, 255, 255, 0.1); + + --color-black: rgba(255, 255, 255, 0.87); + + --color-primary: #6794fd; + --color-secondary: #CFE1F5; + --color-hover: #315ea1; +} \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css new file mode 100644 index 0000000000000000000000000000000000000000..60437747398be53388efeaa2c86a6d6c979a6129 --- /dev/null +++ b/src/assets/css/main.css @@ -0,0 +1,58 @@ +@import 'base.css'; +@import 'reset.css'; +@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); + +.a11y, +legend { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + visibility: hidden; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); +} + +input, select { + height: 2rem; + border-radius: var(--radius-small); + border: 1px solid var(--color-gray5); + padding: 0 0.5rem; + background-color: var(--color-white); + color: var(--color-black); + color-scheme: light; +} + +button { + border: none; + border-radius: var(--radius-small); + transition: var(--transition); + cursor: pointer; + background-color: transparent; + color: var(--color-black); +} + +.cta { + height: 2.5rem; + background-color: var(--color-primary); + color: var(--color-white); + padding: 0 2rem; + +} + +.cta:hover { + background-color: var(--color-hover); +} + +img { + width: 1.5rem; +} + +.material-symbols-outlined { + font-variation-settings: 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24 +} + diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css new file mode 100644 index 0000000000000000000000000000000000000000..c689bc7cd913613ea6df0215cedbfff8ed4f42ea --- /dev/null +++ b/src/assets/css/reset.css @@ -0,0 +1,59 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + font-family: "pretendard"; + color: var(--color-black); +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; + background-color: var(--color-white); + transition: background 0.2s; + +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/src/assets/icons/arrow-down-s-line.svg b/src/assets/icons/arrow-down-s-line.svg new file mode 100644 index 0000000000000000000000000000000000000000..20e4817fefdcd43da25dfd33834050e55dc087d6 --- /dev/null +++ b/src/assets/icons/arrow-down-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/bar-chart-2-line.svg b/src/assets/icons/bar-chart-2-line.svg new file mode 100644 index 0000000000000000000000000000000000000000..ca8f305f055450f0758b91afc62f97abd0255c11 --- /dev/null +++ b/src/assets/icons/bar-chart-2-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/computer-line.svg b/src/assets/icons/computer-line.svg new file mode 100644 index 0000000000000000000000000000000000000000..9aa9d33d25169df2f68a0c251b5bdf5f7a110980 --- /dev/null +++ b/src/assets/icons/computer-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/dark.svg b/src/assets/icons/dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..92df48bd9ec7622f4af73a961fcf4594f53a4ada --- /dev/null +++ b/src/assets/icons/dark.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg new file mode 100644 index 0000000000000000000000000000000000000000..d85ff8930767982923023e08ab6d43d80afda023 --- /dev/null +++ b/src/assets/icons/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/discard.svg b/src/assets/icons/discard.svg new file mode 100644 index 0000000000000000000000000000000000000000..59dde22a921082cfd9f0f085654f1f2c0e0c4c69 --- /dev/null +++ b/src/assets/icons/discard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/filtered.svg b/src/assets/icons/filtered.svg new file mode 100644 index 0000000000000000000000000000000000000000..d8c9e7b93c5600ac9089292c400ff9dd45beec55 --- /dev/null +++ b/src/assets/icons/filtered.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/insert.svg b/src/assets/icons/insert.svg new file mode 100644 index 0000000000000000000000000000000000000000..665711c44330da6d0bb5e1ed9e17a7423446f88c --- /dev/null +++ b/src/assets/icons/insert.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/light.svg b/src/assets/icons/light.svg new file mode 100644 index 0000000000000000000000000000000000000000..b0548297df258771cd6e4ee21f2ea41a8d7d393b --- /dev/null +++ b/src/assets/icons/light.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/assets/icons/logout-box-r-line.svg b/src/assets/icons/logout-box-r-line.svg new file mode 100644 index 0000000000000000000000000000000000000000..d6883b8afdcdb2d9ec8f9423647d7329671853b2 --- /dev/null +++ b/src/assets/icons/logout-box-r-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/menu-line.svg b/src/assets/icons/menu-line.svg new file mode 100644 index 0000000000000000000000000000000000000000..5921138e67ae287dd77ca1bf503b7de2575c01f6 --- /dev/null +++ b/src/assets/icons/menu-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/update.svg b/src/assets/icons/update.svg new file mode 100644 index 0000000000000000000000000000000000000000..1945c041e40782445f2a52238cfe8083ebdb14c8 --- /dev/null +++ b/src/assets/icons/update.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/errorImg.png b/src/assets/images/errorImg.png new file mode 100644 index 0000000000000000000000000000000000000000..dff75601e7c3363a2af6701a7b752dae93f1c997 Binary files /dev/null and b/src/assets/images/errorImg.png differ diff --git a/src/assets/images/img.png b/src/assets/images/img.png new file mode 100644 index 0000000000000000000000000000000000000000..58f318b7d59d56a291fffded7614a44646da8cd7 Binary files /dev/null and b/src/assets/images/img.png differ diff --git a/src/assets/images/imgLarg.png b/src/assets/images/imgLarg.png new file mode 100644 index 0000000000000000000000000000000000000000..f3c9420cfd1bd5fd6c911d62c2558b156b23ba79 Binary files /dev/null and b/src/assets/images/imgLarg.png differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..b702b1d01e34c0e62b45f1306449d0bed289b697 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index d36b8985b4b6437c5e07e93063452497f8b9fa02..0000000000000000000000000000000000000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -/*@import './base.css';*/ - -/*#app {*/ -/* max-width: 1280px;*/ -/* margin: 0 auto;*/ -/* padding: 2rem;*/ -/* font-weight: normal;*/ -/*}*/ - -/*a,*/ -/*.green {*/ -/* text-decoration: none;*/ -/* color: hsla(160, 100%, 37%, 1);*/ -/* transition: 0.4s;*/ -/* padding: 3px;*/ -/*}*/ - -/*@media (hover: hover) {*/ -/* a:hover {*/ -/* background-color: hsla(160, 100%, 37%, 0.2);*/ -/* }*/ -/*}*/ - -/*@media (min-width: 1024px) {*/ -/* body {*/ -/* display: flex;*/ -/* place-items: center;*/ -/* }*/ - -/* #app {*/ -/* display: grid;*/ -/* grid-template-columns: 1fr 1fr;*/ -/* padding: 0 2rem;*/ -/* }*/ -/*}*/ diff --git a/src/components/auth/Login.vue b/src/components/auth/Login.vue index fa5d708b0e2e5669705d0143b296b8c004a17d62..580a5fd722f994cf112b069ba50b681811c05e49 100644 --- a/src/components/auth/Login.vue +++ b/src/components/auth/Login.vue @@ -2,43 +2,119 @@ export default { name: "Login", - data(){ - return{ - // id 반드시 5자리 이상 20 이하일때만 정상처리 - id:"", - password:"" + data() { + return { + id: "", + password: "", + idError: false, + passwordError: false } }, - methods:{ + methods: { async login() { + this.validateId(); + this.validatePassword(); - await this.$store.dispatch('getUser',{ - id:this.id, - password:this.password - }); - }, + if (!this.idError && !this.passwordError) { - async logout() { - await this.$store.dispatch('clearUser'); + await this.$store.dispatch('getUser', { + id: this.id, + password: this.password, + }) + } }, - + validateId() { + const idRegex = /^[a-zA-Z0-9._-]{3,16}$/; + this.idError = !idRegex.test(this.id) }, - } + validatePassword() { + const passwordRegex = /^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{8,16}$/; + this.passwordError = !passwordRegex.test(this.password) + } + + }, +} \ No newline at end of file diff --git a/src/components/auth/Logout.vue b/src/components/auth/Logout.vue index 116503ce3de5c8aa824a3ddf7d08737de0e9eed5..34fd1e78748ecf773ac9d44ace14645a30deaa1f 100644 --- a/src/components/auth/Logout.vue +++ b/src/components/auth/Logout.vue @@ -1,11 +1,19 @@ \ No newline at end of file diff --git a/src/components/info/Loading.vue b/src/components/info/Loading.vue new file mode 100644 index 0000000000000000000000000000000000000000..0313092b471daeda1a26f579d0807ec78b28f23d --- /dev/null +++ b/src/components/info/Loading.vue @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git a/src/components/info/TableDml.vue b/src/components/info/TableDml.vue deleted file mode 100644 index 723d1211f64f276a4a1c6443083416a0840f74af..0000000000000000000000000000000000000000 --- a/src/components/info/TableDml.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue new file mode 100644 index 0000000000000000000000000000000000000000..bdc9611de9af6a7dc78f8a245f5c13c0133cfd5c --- /dev/null +++ b/src/components/layout/Header.vue @@ -0,0 +1,120 @@ + + + + + \ No newline at end of file diff --git a/src/components/layout/SideBar.vue b/src/components/layout/SideBar.vue new file mode 100644 index 0000000000000000000000000000000000000000..bf82c478a798a7b7958ba353ec2d9063d5ff64e7 --- /dev/null +++ b/src/components/layout/SideBar.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index daa20e681d19dc488a54150c57407ecd01c7d42d..ca2461c62ac0d8843325bed8f6128dbfbc8e8bc9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ -import './assets/main.css' +import './assets/css/main.css' -import { createApp } from 'vue' +import {createApp} from 'vue' import App from './App.vue' import router from './router' import store from "@/store/store.js"; diff --git a/src/router/index.js b/src/router/index.js index ddb722efe01f375b6b0570593ca2c3ba0ab12662..e090dffa04bf6d351d79d0477855cf87949b861a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,26 +1,85 @@ -import { createRouter, createWebHistory } from 'vue-router' -import Login from '../components/auth/Login.vue' -import Error from '../components/info/Error.vue' -import Summery from "@/views/Summery.vue"; +import {createRouter, createWebHistory} from 'vue-router' +import Login from '@/components/auth/Login.vue' +import Error from '@/components/info/Error.vue' +import Monitoring from "@/views/Monitoring.vue" +import store from '@/store/store.js' +import Summary from "@/views/Summary.vue"; const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/Summery', - name: 'Summery', - component: Summery - }, { - path: '/login', - name: 'login', - component: Login - }, - { - path: '/error', - name: 'error', - component: Error - } - ] -}) + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'root', + beforeEnter: (to, from, next) => { + // 만약 로그인이 되어있다면 Summary 페이지로 바로 이동시켜라 + if (isAuthenticated()) { + return next('/summary'); + } else { + return next('/login'); + } + } + }, + { + path: '/login', + name: 'login', + component: Login, + beforeEnter: (to, from, next) => { + // 만약 로그인이 되어있다면 Summary 페이지로 바로 이동시켜라 + if (isAuthenticated()) { + return next('/summary'); + } else { + // 아니면 그대로 + next(); + } + } + + }, + { + path: '/summary', + name: 'summary', + component: Summary, + // 중복되는 beforeEnter 함수 재사용 가능 + beforeEnter: (to, from, next) => { + // 만약 로그인이 되어있다면 localStorage 안에 loginInfo 를 parse 로 들고와서 setUserData 에 넣어라 + if (isAuthenticated()) { + store.commit("setUserData", JSON.parse(localStorage.getItem('loginInfo'))); + next(); + // 아니면 login 페이지로 이동시켜라 + } else { + return next('/login'); + } + } + }, + { + path: '/monitoring', + name: 'Monitoring', + component: Monitoring, + // 중복되는 beforeEnter 함수 재사용 가능 + beforeEnter: (to, from, next) => { + // 만약 로그인이 되어있다면 localStorage 안에 loginInfo 를 parse 로 들고와서 setUserData 에 넣어라 + if (isAuthenticated()) { + store.commit("setUserData", JSON.parse(localStorage.getItem('loginInfo'))); + next(); + // 아니면 login 페이지로 이동시켜라 + } else { + return next('/login'); + } + + } + }, + { + path: '/error', + name: 'error', + component: Error, + } + ] +}); + + +// 로그인 이후 들어오는 모든 하위 페이지 각각 getItem 모두 적용 : 모든 페이지에서 새로고침시 로그인이 유지되도록 +function isAuthenticated() { + return localStorage.getItem('loginInfo') +} export default router diff --git a/src/store/fetchData.js b/src/store/fetchData.js index 9305e97ef038fb9a78d8747a90b5a35f3c98fb70..1d183cec313fb966a20b520874599d4e2cc9ef39 100644 --- a/src/store/fetchData.js +++ b/src/store/fetchData.js @@ -1,44 +1,50 @@ import axios from "axios"; import store from "@/store/store.js"; -axios.defaults.baseURL="http://172.16.0.60:38080/api"; - - async function login(loginData) { - return await axios.put(`/auth/login`, loginData,{ - headers: { - "Content-Type": "application/json", - }, - - }); - } - - async function logout() { - return await axios.get(`/auth/logout`, { - headers: { - "Authorization": `Bearer ${store.state.user.info.accessToken}`, - }, - - }) - - } - async function pipeline() { - return await axios.get(`/pipeline/list`, { - headers: { - "Authorization": `Bearer ${store.state.user.info.accessToken}`, - }, - - }) - } - // table 에 pipeline 에서 추출한 key 를 넣어주는 pipelinekey - async function table(pipelineKey) { - return await axios.get(`/dashboard/sql/table`, { - headers: { - "Authorization": `Bearer ${store.state.user.info.accessToken}`, - }, - params:{ - // pipeline : "fdbab7d1d9be4a3e952d903e87dcfe40" - pipeline : pipelineKey - } - }) - } - -export {login,logout,pipeline,table} + +axios.defaults.baseURL = "http://172.16.0.60:38080/api"; + +async function login(loginData) { + return await axios.put(`/auth/login`, loginData, { + headers: { + "Content-Type": "application/json", + }, + + }); +} + +async function logout() { + return await axios.get(`/auth/logout`, { + headers: { + "Authorization": `Bearer ${store.getters.getAccessToken}`, + }, + + }) + +} + +async function pipeline() { + + return await axios.get(`/pipeline/list`, { + headers: { + "Authorization": `Bearer ${store.getters.getAccessToken}`, + }, + + }) +} + +async function table(pipelineKey, startEpoch, endEpoch) { + + return await axios.get(`/dashboard/sql/table`, { + headers: { + "Authorization": `Bearer ${store.getters.getAccessToken}`, + }, + params: { + pipeline: pipelineKey, + start_epoch_time: startEpoch, + end_epoch_time: endEpoch + }, + + }) +} + +export {login, logout, pipeline, table} diff --git a/src/store/store.js b/src/store/store.js index 1aaa1e3ca6c0a7cd49e8ec22299e05d606bf6d22..3cd628c39cf9c2f4d85a9bdca5ea2216b796ed08 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,81 +1,105 @@ - import {createStore} from 'vuex' -import {login,logout} from "@/store/fetchData.js"; +import {login, logout} from "@/store/fetchData.js"; import CryptoJS from "crypto-js"; import router from '@/router'; const store = createStore({ - state(){ - return{ - user:{}, - columns:[ - // store 에 저장 : 변하지 않을 값, 여러번 참조할 - "moduleName", - "moduleType", - "tableName", - "tableMap", - "insert", - "update", - "delete", - "discard", - "filtered" - ] + state() { + return { + isLoading: true, + user: {}, + tableColumns: [ + "Pipeline Name", + "Module Name", + "Module Type", + "Table Name", + "Table Map", + "Insert", + "Update", + "Delete", + "Discard", + "Filtered" + ], + moduleColumns: [ + {name: "All", value: ""}, + {name: "Extract", value: "Extract"}, + {name: "Send", value: "Send"}, + {name: "Post", value: "Post"} + ], + errorMessage: "", } }, - actions:{ - - async getUser(store,{id,password}){ - const passwordHash=CryptoJS.SHA256(password).toString().toUpperCase() - console.log(passwordHash) - const loginData={ - id:id, - password:passwordHash + + actions: { + async getUser(store, {id, password}) { + + const passwordHash = CryptoJS.SHA256(password).toString().toUpperCase() + const loginData = { + id: id, + password: passwordHash } - const response = await login(loginData); - console.log(response) - - if(response){ - this.commit("setUserData",response.data.data.user); - console.log("스토어로 로그인에 성공"); - router.push('/Summery') - }else{ - console.log("스토어로 로그인에 실패"); + + try { + const response = await login(loginData); + + if (response && response.status === 200) { + this.commit("setUserData", response.data.data.user); + + const loginInfoStr = JSON.stringify(response.data.data.user); + await localStorage.setItem('loginInfo', loginInfoStr); + router.push('/summary'); + } + + + } catch (error) { + router.push('/error') - } + const response = error.response; + this.commit("setErrorMessage", response.data.errorMessage); + + } }, - async clearUser(){ - const response = await logout(); - console.log(response) + async clearUser() { + const response = await logout(); - if(response.status === 200){ + if (response.status === 200) { this.commit("setUserData", {}); - console.log("로그아웃 성공"); + localStorage.removeItem("loginInfo"); router.push('/login') - }else{ - console.log("로그아웃 실패"); + } else { router.push('/error') } - } - + }, }, - // accessToken getters 에 담아서 꺼내쓰기 - // getters: { - // getAccessToken() { - // return this.state.user.info.accessToken - // } - // }, + mutations: { + setUserData(state, userData) { + state.user = userData; + }, + setErrorMessage(state, message) { + state.errorMessage = message; + }, - mutations:{ - setUserData(state,userData){ - state.user = userData + setLoading(state, isLoading) { + state.isLoading = isLoading }, + }, + + getters: { + isLoading(state) { + return state.isLoading + }, + getAccessToken(state) { + return state.user.info.accessToken + } } + }) + export default store; \ No newline at end of file diff --git a/src/views/Monitoring.vue b/src/views/Monitoring.vue index 2a009303b2cc4a5f28ca329bdabcd750367e8601..7251affeb883c4c7e0c0c72d3cd8fee3790056ae 100644 --- a/src/views/Monitoring.vue +++ b/src/views/Monitoring.vue @@ -1,13 +1,343 @@ \ No newline at end of file + diff --git a/src/views/Summary.vue b/src/views/Summary.vue new file mode 100644 index 0000000000000000000000000000000000000000..7984ef1223ca36d266cb5d1314af337424959952 --- /dev/null +++ b/src/views/Summary.vue @@ -0,0 +1,437 @@ + + + + + diff --git a/src/views/Summery.vue b/src/views/Summery.vue deleted file mode 100644 index 972440f16858ecfb20411897822af1efc0c0fe31..0000000000000000000000000000000000000000 --- a/src/views/Summery.vue +++ /dev/null @@ -1,105 +0,0 @@ - - - - - \ No newline at end of file