2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
a75c14cd 1 parent 45e2cd7c

코드정리

Inline Side-by-side
Showing 18 changed files with 970 additions and 982 deletions
<template>
<tool-view></tool-view>
<tool-view></tool-view>
</template>
<script>
import ToolView from './components/ToolView'
import ToolView from './components/ToolView';
export default {
data() {
return {
}
},
components: {
ToolView,
}
}
</script>
\ No newline at end of file
export default {
data() {
return {};
},
components: {
ToolView,
},
};
</script>
......
......@@ -79,15 +79,15 @@ function downloadFile(fileData) {
},
});
}
function accessedList(curData){
function accessedList(curData) {
return axios.get('api/quick', {
params:{
id: curData.id
params: {
id: curData.id,
},
});
}
function modifyFile(fileData){
return axios.post(`/api/file/modify/${fileData.name}`, fileData)
function modifyFile(fileData) {
return axios.post(`/api/file/modify/${fileData.name}`, fileData);
}
function delFavorite(folderData) {
return axios.post('api/favorites/delfolder', folderData);
......@@ -127,5 +127,5 @@ export {
addFavoriteFile,
accessedList,
detailFile,
modifyFile
modifyFile,
};
......
<template>
<v-card
max-width="98%"
class="mx-auto"
>
<v-toolbar
color="light-blue"
dark
>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
<v-card max-width="98%" class="mx-auto">
<v-toolbar color="light-blue" dark>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
export default {
data: () => ({
items: [
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Photos',
subtitle: 'Jan 9, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Recipes',
subtitle: 'Jan 17, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Work',
subtitle: 'Jan 28, 2014',
},
],
items2: [
{
icon: 'assignment',
iconClass: 'blue white--text',
title: 'Vacation itinerary',
subtitle: 'Jan 20, 2014',
},
{
icon: 'call_to_action',
iconClass: 'amber white--text',
title: 'Kitchen remodel',
subtitle: 'Jan 10, 2014',
},
],
}),
};
</script>
......
<template>
<v-card
max-width="98%"
class="mx-auto"
>
<v-toolbar
color="light-blue"
dark
>
<v-toolbar-title>파일</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
<v-card max-width="98%" class="mx-auto">
<v-toolbar color="light-blue" dark>
<v-toolbar-title>파일</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
export default {
data: () => ({
items: [
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Photos',
subtitle: 'Jan 9, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Recipes',
subtitle: 'Jan 17, 2014',
},
{
icon: 'folder',
iconClass: 'grey lighten-1 white--text',
title: 'Work',
subtitle: 'Jan 28, 2014',
},
],
items2: [
{
icon: 'assignment',
iconClass: 'blue white--text',
title: 'Vacation itinerary',
subtitle: 'Jan 20, 2014',
},
{
icon: 'call_to_action',
iconClass: 'amber white--text',
title: 'Kitchen remodel',
subtitle: 'Jan 10, 2014',
},
],
}),
};
</script>
......
<template lang="html">
<v-dialog
v-model="dialog"
max-width="290"
>
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline"
>Use Google's location service?</v-card-title
>
<v-card-text>
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
</v-card-text>
<v-card-text>
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="dialog = false"
>
Disagree
</v-btn>
<v-btn color="green darken-1" text @click="dialog = false">
Disagree
</v-btn>
<v-btn
color="green darken-1"
text
@click="dialog = false"
>
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-btn color="green darken-1" text @click="dialog = false">
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data(){
return{
dialog: false,
}
},
}
data() {
return {
dialog: false,
};
},
};
</script>
<style lang="css" scoped>
</style>
<style lang="css" scoped></style>
......
......@@ -45,7 +45,10 @@
v-for="item in this.$store.getters.fileL"
:key="item.title"
@click.right="showF(item, $event)"
@dblclick="detailF(item, $event); file_detail(item);"
@dblclick="
detailF(item, $event);
file_detail(item);
"
@click=""
>
<v-list-item-avatar>
......@@ -65,29 +68,29 @@
</v-list-item>
</v-list>
<!--file detial -->
<v-dialog
v-model="showdetailF"
max-width="290"
>
<v-card>
<v-card-title class="headline">
<v-text-field v-model="current_filename" ></v-text-field>
</v-card-title>
<v-card-text>
<v-text-field v-model="current_filedata" ></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="showdetailF = false; modify_file();"
>
save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="showdetailF" max-width="290">
<v-card>
<v-card-title class="headline">
<v-text-field v-model="current_filename"></v-text-field>
</v-card-title>
<v-card-text>
<v-text-field v-model="current_filedata"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="
showdetailF = false;
modify_file();
"
>
save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Move Folder -->
<v-dialog v-model="dialog2" width="500px">
<v-card>
......@@ -300,7 +303,7 @@ import {
delFavoriteFile,
addFavoriteFile,
detailFile,
modifyFile
modifyFile,
} from '../api/index';
import Axios from 'axios';
export default {
......@@ -320,7 +323,7 @@ export default {
howMenu: false,
showMenu: false,
showMenuF: false, //파일 관련 메뉴
showdetailF:false, //txt 파일 상세정보 및 수정
showdetailF: false, //txt 파일 상세정보 및 수정
x: 0,
y: 0,
dialog2: false,
......@@ -609,43 +612,43 @@ export default {
this.dialog3 = false;
}
},
async file_detail(){
try{
async file_detail() {
try {
const currentData = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.cfilename.file_name
}
const detailData = await detailFile(currentData)
fileName: this.cfilename.file_name,
};
const detailData = await detailFile(currentData);
this.current_filename = detailData.data.file_name;
this.current_filedata = detailData.data.content;
console.log(this.current_filename);
console.log(this.current_filedata);
}catch(error){
} catch (error) {
console.log('에러');
console.log(error);
}
},
async modify_file() {
try {
const modifyData = {
user_id: this.cfilename.user_id,
cur: this.cfilename.location,
name: this.current_filename,
content: this.current_filedata,
};
const result = await modifyFile(modifyData);
const after_data = {
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.current_filename,
};
const detailData = await detailFile(after_data);
} catch (error) {
console.log('에러');
console.log(error);
}
},
async modify_file(){
try{
const modifyData = {
user_id: this.cfilename.user_id,
cur: this.cfilename.location,
name: this.current_filename,
content: this.current_filedata
}
const result = await modifyFile(modifyData);
const after_data={
id: this.cfilename.user_id,
cur: this.cfilename.location,
fileName: this.current_filename
}
const detailData = await detailFile(after_data)
}catch(error){
console.log('에러');
console.log(error);
}
},
show(folderObj, e) {
e.preventDefault();
this.curfName = folderObj;
......
<template lang="html">
<v-flex>
<h1>빠른액세스</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">File ID</th>
<th class="text-left">Name</th>
<th class="text-left">Dir</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in recent_list" :key="item.name">
<td>{{ item.file_id }}</td>
<td>{{ item.file_name}}</td>
<td>{{ item.location }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
<v-flex>
<h1>빠른액세스</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">File ID</th>
<th class="text-left">Name</th>
<th class="text-left">Dir</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in recent_list" :key="item.name">
<td>{{ item.file_id }}</td>
<td>{{ item.file_name }}</td>
<td>{{ item.location }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</template>
<script>
import { accessedList } from '../api/index';
import Axios from 'axios';
export default {
data() {
return {
recent_list : []
}
},
async created(){
try {
const curData = {
id : this.$store.state.id,
}
console.log(curData);
const list_reponse = await accessedList(curData);
this.$store.commit('setRecentList', list_reponse.data)
this.recent_list = this.$store.getters.recentL;
console.log(this.$store.getters.recentL);
} catch (error) {
console.log("에러");
console.log(error);
}
},
methods:{
}
}
import { accessedList } from '../api/index';
import Axios from 'axios';
export default {
data() {
return {
recent_list: [],
};
},
async created() {
try {
const curData = {
id: this.$store.state.id,
};
console.log(curData);
const list_reponse = await accessedList(curData);
this.$store.commit('setRecentList', list_reponse.data);
this.recent_list = this.$store.getters.recentL;
console.log(this.$store.getters.recentL);
} catch (error) {
console.log('에러');
console.log(error);
}
},
methods: {},
};
</script>
<style lang="css" scoped>
</style>
<style lang="css" scoped></style>
......
import Vue from 'vue'
import App from './App.vue'
import router from './routes/index'
import store from './store/index'
import Vue from 'vue';
import App from './App.vue';
import router from './routes/index';
import store from './store/index';
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app');
......
......@@ -10,7 +10,7 @@ export default new Vuex.Store({
files: [],
cur: '/',
parent: '/',
recentList:[]
recentList: [],
},
mutations: {
setId(state, userid) {
......@@ -31,9 +31,9 @@ export default new Vuex.Store({
setParent(state, parent) {
state.parent = parent;
},
setRecentList(state, list){
setRecentList(state, list) {
state.recentList = list;
}
},
},
getters: {
isLogin(state) {
......@@ -48,7 +48,7 @@ export default new Vuex.Store({
fileL(state) {
return state.files;
},
recentL(state){
recentL(state) {
return state.recentList;
},
cur(state) {
......
<template lang="html">
<contact></contact>
<contact></contact>
</template>
<script>
import contact from '@/components/make_contact.vue'
export default {
components:{
contact
}
}
import contact from '@/components/make_contact.vue';
export default {
components: {
contact,
},
};
</script>
<style lang="css" scoped>
</style>
<style lang="css" scoped></style>
......
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<div>
<v-toolbar flat>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="즐겨찾기 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="즐겨찾기 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon>{{ item.iconClass }}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
>{{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon> {{ item.iconClass }}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
export default {
data: () => ({
items: [
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Photos',
subtitle: 'Jan 9, 2014',
},
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Recipes',
subtitle: 'Jan 17, 2014',
},
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Work',
subtitle: 'Jan 28, 2014',
},
],
items2: [
{
icon: 'assignment',
iconClass: 'mdi-file',
title: 'Vacation itinerary',
subtitle: 'Jan 20, 2014',
},
{
icon: 'call_to_action',
iconClass: 'mdi-PdfBox',
title: 'Kitchen remodel',
subtitle: 'Jan 10, 2014',
},
],
}),
};
</script>
......
<template lang="html">
<v-container fluid>
<FileList></FileList>
</v-container>
<v-container fluid>
<FileList></FileList>
</v-container>
</template>
<script>
import FileList from '@/components/FileList'
import Favlist from '@/components/Fav_list'
export default {
components:{
FileList,
Favlist
},
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
import FileList from '@/components/FileList';
import Favlist from '@/components/Fav_list';
export default {
components: {
FileList,
Favlist,
},
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format: 'dir',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format: 'dir',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format: 'pdf',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format: 'file',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format: 'dir',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt: 'file',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt: 'pdf',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt: 'dir',
},
],
favorite: [
{
name: 'KitKat',
date: '20.05.17',
},
{
name: 'Vuetify',
date: '20.05.17',
},
],
};
},
};
</script>
......
<template lang="html">
<FileDetail></FileDetail>
<FileDetail></FileDetail>
</template>
<script>
import FileDetail from '@/components/FileDetail'
import FileDetail from '@/components/FileDetail';
export default {
components:{
FileDetail
}
}
components: {
FileDetail,
},
};
</script>
<style lang="css" scoped>
</style>
<style lang="css" scoped></style>
......
<template lang="html">
<v-container>
<div>
<h2>안녕하세요!</h2>
<br><br>
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex xs6>
<v-flex>
<h1>파일</h1>
<v-data-table
:headers="headers"
:items="desserts"
:expand-icon="home"
:items-per-page="5"
class="elevation-1"
></v-data-table>
<v-spacer></v-spacer>
</v-flex>
<v-flex><br><v-divider></v-divider><br></v-flex>
<v-container>
<accessList></accessList>
</v-container>
</v-flex>
<v-flex><br><v-divider></v-divider><br></v-flex>
<v-flex xs6>
<h1>즐겨찾기</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
<v-container>
<div>
<h2>안녕하세요!</h2>
<br /><br />
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex xs6>
<v-flex>
<h1>파일</h1>
<v-data-table
:headers="headers"
:items="desserts"
:expand-icon="home"
:items-per-page="5"
class="elevation-1"
></v-data-table>
<v-spacer></v-spacer>
</v-flex>
<v-flex><br /><v-divider></v-divider><br /></v-flex>
<v-container>
<accessList></accessList>
</v-container>
</v-flex>
<v-flex><br /><v-divider></v-divider><br /></v-flex>
<v-flex xs6>
<h1>즐겨찾기</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import accessList from '@/components/accessList.vue'
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
import accessList from '@/components/accessList.vue';
export default {
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format: 'dir',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format: 'dir',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format: 'pdf',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format: 'file',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format: 'dir',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt: 'file',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt: 'pdf',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt: 'dir',
},
],
favorite: [
{
name: 'KitKat',
date: '20.05.17',
},
{
name: 'Vuetify',
date: '20.05.17',
},
],
};
},
};
</script>
......
<template>
<div>
<LoginForm></LoginForm>
</div>
<div>
<LoginForm></LoginForm>
</div>
</template>
<script>
import LoginForm from '../components/LoginForm'
import LoginForm from '../components/LoginForm';
export default {
components: {
LoginForm,
}
}
components: {
LoginForm,
},
};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
......
<template lang="html">
<v-container>
<div>
<h2>안녕하세요!</h2>
<br><br>
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex lg6>
<v-flex>
<Filecard></Filecard>
</v-flex>
<v-flex><br><br></v-flex>
</v-flex>
<v-flex><br><br></v-flex>
<v-flex lg6>
<Favlist></Favlist>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout column>
<v-flex>
<v-toolbar flat>
<v-toolbar-title>빠른 액세스</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-container>
<accessList></accessList>
</v-container>
<!--
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
-->
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-container>
<v-container>
<div>
<h2>안녕하세요!</h2>
<br /><br />
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex lg6>
<v-flex>
<Filecard></Filecard>
</v-flex>
<v-flex><br /><br /></v-flex>
</v-flex>
<v-flex><br /><br /></v-flex>
<v-flex lg6>
<Favlist></Favlist>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout column>
<v-flex>
<v-container>
<accessList></accessList>
</v-container>
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import accessList from '@/components/accessList.vue'
import FileList from '@/components/FileList'
import Favlist from '@/components/Fav_list'
import Filecard from '@/components/FileCardlist.vue'
export default {
components:{
FileList,
Favlist,
Filecard,
accessList
},
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
import accessList from '@/components/accessList.vue';
import FileList from '@/components/FileList';
import Favlist from '@/components/Fav_list';
import Filecard from '@/components/FileCardlist.vue';
export default {
components: {
FileList,
Favlist,
Filecard,
accessList,
},
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format: 'dir',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format: 'dir',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format: 'pdf',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format: 'file',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format: 'dir',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt: 'file',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt: 'pdf',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt: 'dir',
},
],
favorite: [
{
name: 'KitKat',
date: '20.05.17',
},
{
name: 'Vuetify',
date: '20.05.17',
},
],
};
},
};
</script>
......
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>빠른액세스</v-toolbar-title>
<div>
<v-toolbar flat>
<v-toolbar-title>빠른액세스</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-list two-line subheader>
<v-list-item v-for="item in items" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon>{{ item.iconClass }}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
>{{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item v-for="item in items2" :key="item.title" @click="">
<v-list-item-avatar>
<v-icon> {{ item.iconClass }}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
export default {
data: () => ({
items: [
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Photos',
subtitle: 'Jan 9, 2014',
},
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Recipes',
subtitle: 'Jan 17, 2014',
},
{
icon: 'folder',
iconClass: 'mdi-folder',
title: 'Work',
subtitle: 'Jan 28, 2014',
},
],
items2: [
{
icon: 'assignment',
iconClass: 'mdi-file',
title: 'Vacation itinerary',
subtitle: 'Jan 20, 2014',
},
{
icon: 'call_to_action',
iconClass: 'mdi-PdfBox',
title: 'Kitchen remodel',
subtitle: 'Jan 10, 2014',
},
],
}),
};
</script>
......
<template>
<div>
<SignupForm></SignupForm>
</div>
<div>
<SignupForm></SignupForm>
</div>
</template>
<script>
import SignupForm from '../components/SignupForm'
import SignupForm from '../components/SignupForm';
export default {
components: {
SignupForm,
}
}
components: {
SignupForm,
},
};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
......