Skip to content

N
Neuromorphic
Commit 7c53fab2 by SHINDAESUB
Options

대쉬보드 생성

parent 170070a4
Showing with 273 additions and 113 deletions
front-end/package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
front-end/package.json
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-draggable": "^2.0.6",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuedraggable": "^2.24.3",
"vuetify": "^2.4.0", "vuetify": "^2.4.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
......
front-end/public/index.html
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<title>뉴로모픽</title> <title>뉴로모픽</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
front-end/src/main.js
...@@ -4,6 +4,10 @@ import router from './router' ...@@ -4,6 +4,10 @@ import router from './router'
import store from './store' import store from './store'
import vuetify from './plugins/vuetify'; import vuetify from './plugins/vuetify';
import VueDraggable from 'vue-draggable'
Vue.use(VueDraggable)
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
......
front-end/src/router/index.js
...@@ -2,10 +2,9 @@ import Vue from 'vue' ...@@ -2,10 +2,9 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue' import Home from '../views/Home.vue'
import Login from '../views/admin/Login.vue'
import AdminMain from '../views/admin/Main.vue' import AdminMain from '../views/admin/Main.vue'
import AdminList from '../views/admin/main/List.vue' import Dashboard from '../views/admin/main/Dashboard.vue'
import AdminCreate from '../views/admin/main/Create.vue' import Create from '../views/admin/main/Create.vue'
import User from '../views/user/User.vue' import User from '../views/user/User.vue'
...@@ -18,26 +17,19 @@ const routes = [ ...@@ -18,26 +17,19 @@ const routes = [
name: 'Home', name: 'Home',
component: Home component: Home
}, },
{
path: '/login',
name: 'Login',
component: Login
},
{ {
path: '/admin', path: '/admin',
component: AdminMain, component: AdminMain,
children: [ children: [
{ {
path: '/', path: '/',
name:'Adminlist', name:'Dashboard',
component: AdminList, component: Dashboard,
}, },
{ {
path: '/create', path: '/create',
name:'AdminCreate', name:'Create',
component: AdminCreate component: Create
}, },
] ]
}, },
......
front-end/src/views/admin/Login.vue deleted 100644 → 0
<template>
<div class="container">
<form action="">
<h1>LOGIN</h1>
<div class="form-group">
<label for="">ID</label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label for="">PASSWORD</label>
<input type="password" class="form-control" required>
</div>
<input type="submit" class="btn" value="LOGIN">
</form>
</div>
</template>
<script>
export default {
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
margin: auto;
width: 500px;
max-width: 90%;
}
.container form{
width: 100%;
height: 100%;
padding:20px;
background: white;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
.container form h1{
text-align: center;
margin-bottom: 24px;
color: #222;
}
.container form .form-control{
width:100%;
height: 40px;
background: white;
border-radius: 4px;
border:1px solid silver;
margin: 10px 0 18px 0;
padding: 0 10px;
}
.container form .btn{
margin-left: 50%;
transform: translateX(-50%);
width: 120px;
height: 34px;
border:none;
outline: none;
background: skyblue;
cursor: pointer;
font-size: 16px;
text-transform: uppercase;
color:white;
border-radius: 4px;
transition: .3s;
}
.container form .btn:hover{
opacity: .7;
}
</style>
\ No newline at end of file
front-end/src/views/admin/main/Dashboard.vue 0 → 100644
<template>
<v-container class="drag-container" v-drag-and-drop:options="options">
<v-row >
<v-col v-show="group.type === 'project'" v-for="group in groups" :key="group.id" cols="3">
<v-card
class="rounded-xl mt-3 project-list"
outlined
>
<v-toolbar
color=""
elevation="0"
>
<v-toolbar-title class="font-weight-black">
PROJECT LIST
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn fab icon @click="projectAdd()">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-toolbar>
<vue-draggable-group
v-model="group.items"
:groups="groups"
:data-id="group.id"
@change="onGroupsChange"
>
<v-card-text class="drag-inner-list " :data-id="group.id">
<v-card
class="drag-item mb-3"
v-for="item in group.items" :key="item.id"
:data-id="item.id"
outlined
>
<v-card-title v-if="item.state === 'none'" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
<v-card-title v-if="item.state === 'waiting'" class="red lighten-3" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
<v-card-title v-if="item.state === 'success'" class="green white--text" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
</v-card>
</v-card-text>
</vue-draggable-group>
</v-card>
</v-col>
<v-col cols="9">
<v-container fluid>
<v-row>
<v-col v-show="group.type === 'aoi'" v-for="group in groups" :key="group.id" cols="3">
<v-card
height="200" outlined class="rounded-xl">
<v-card-title class="font-weight-black">{{group.name}}</v-card-title>
<v-card-subtitle>{{group.date}}</v-card-subtitle>
<vue-draggable-group
v-model="group.items"
:groups="groups"
:data-id="group.id"
@change="onGroupsChange"
>
<v-card-text :class="group.items.length !== 0 ? '': 'drag-inner-list'" class=" aoi-inner" :data-id="group.id">
<v-card
class="drag-item mb-3"
v-for="item in group.items" :key="item.id" :data-id="item.id"
outlined
>
<v-card-title v-if="item.state === 'none'" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
<v-card-title v-if="item.state === 'waiting'" class="red lighten-3" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
<v-card-title v-if="item.state === 'success'" class="green white--text" >
{{item.name}}
<v-spacer></v-spacer>
<v-btn small v-if="item.teaching" outlined color="red" class="rounded-xl">teaching</v-btn>
</v-card-title>
</v-card>
</v-card-text>
</vue-draggable-group>
</v-card>
</v-col>
<v-col cols="3">
<v-card height="200" outlined class="rounded-xl d-flex justify-center align-center" @click="aoiAdd()">
<v-btn icon x-large><v-icon x-large>mdi-plus</v-icon></v-btn>
</v-card>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data(){
return{
groups: [
{
id: 1,
name: "PROJECT LIST",
type:'project',
items: [
{ id: 1, name: "프로젝트 1", groupId: 1 ,state:"waiting", teaching:true },
{ id: 2, name: "프로젝트 2", groupId: 1 ,state:"success", teaching:false },
{ id: 3, name: "프로젝트 3", groupId: 1 ,state:"none" , teaching:false },
{ id: 5, name: "프로젝트 5", groupId: 1 ,state:"success", teaching:true },
{ id: 6, name: "프로젝트 6", groupId: 1 ,state:"none" , teaching:false },
{ id: 8, name: "프로젝트 8", groupId: 1 , state:"success", teaching:true },
{ id: 9, name: "프로젝트 9", groupId: 1 ,state:"none" , teaching:false },
{ id: 10, name: "프로젝트 10", groupId: 1 ,state:"none" , teaching:true },
{ id: 7, name: "프로젝트 7", groupId: 1 , state:"waiting", teaching:false },
{ id: 4, name: "프로젝트 4", groupId: 1 ,state:"waiting", teaching:false },
]
},
{
id: 2,
name: "AOI 1",
type:'aoi',
date:'2021-05-31',
items: [
]
},
{
id: 3,
name: "AOI 2",
type:'aoi',
date:'2021-05-31',
items: [
]
}
],
options: {
dropzoneSelector: ".drag-inner-list",
draggableSelector: ".drag-item"
}
}
},
methods:{
onGroupsChange(evt) {
console.log(evt );
},
projectAdd(){
let newProject = new Object()
newProject.id = this.groups[0].items.length + 1
newProject.name = "프로젝트 " + newProject.id
newProject.state = "none"
newProject.teaching = false
this.groups[0].items.push(newProject)
},
aoiAdd(){
console.log("this.groups :",this.groups)
let newId =Object.keys(this.groups).length
let newAoi = new Object()
newAoi.id = newId + 1
newAoi.name = "AOI " + newId
newAoi.type ='aoi',
newAoi.items = [],
newAoi.date = this.getToday()
this.groups.push(newAoi)
},
getToday(){
var date = new Date();
var year = date.getFullYear();
var month = ("0" + (1 + date.getMonth())).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return year +"-"+ month +"-"+ day;
},
},
}
</script>
<style lang="scss">
$ease-out: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
.drag-container {
max-width: 1000px;
}
.aoi-inner{
height: 100%;
}
.drag-item {
transition: $ease-out;
/* items grabbed state */
&[aria-grabbed="true"] {
.v-card__title{
// background: black !important;
opacity: 0.2;
}
}
}
.aoi-drag-inner{
height: 200px;
}
@keyframes nodeInserted {
from {
opacity: 0.2;
}
to {
opacity: 0.8;
}
}
.item-dropzone-area {
height: 64px;
margin-bottom: 10px;
background: #E0E0E0;
opacity: 0.8;
animation-duration: 0.5s;
animation-name: nodeInserted;
// margin-left: 0.6rem;
// margin-right: 0.6rem;
}
</style>
front-end/src/views/admin/main/List.vue deleted 100644 → 0
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
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