2020-1-capstone-design1 / PKH_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Yoonjunhyeon
2b2d4aa9 1 parent 6c076b39

change front design

Inline Side-by-side
Showing 19 changed files with 466 additions and 0 deletions
1 +> 1%
2 +last 2 versions
3 +not dead
1 +[*.{js,jsx,ts,tsx,vue}]
2 +indent_style = space
3 +indent_size = 2
4 +end_of_line = lf
5 +trim_trailing_whitespace = true
6 +insert_final_newline = true
7 +max_line_length = 200
1 +module.exports = {
2 + root: true,
3 + env: {
4 + browser: true,
5 + es6: true,
6 + node: true,
7 + },
8 + extends: [
9 + 'plugin:vue/essential',
10 + '@vue/airbnb',
11 + ],
12 + parserOptions: {
13 + parser: 'babel-eslint',
14 + },
15 + rules: {
16 + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17 + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
18 + 'linebreak-style': ['error', 'unix'],
19 + 'max-len': ['error', { code: 200 }],
20 + },
21 +};
1 +.DS_Store
2 +node_modules
3 +/dist
4 +
5 +# local env files
6 +.env.local
7 +.env.*.local
8 +
9 +# Log files
10 +npm-debug.log*
11 +yarn-debug.log*
12 +yarn-error.log*
13 +
14 +# Editor directories and files
15 +.idea
16 +.vscode
17 +*.suo
18 +*.ntvs*
19 +*.njsproj
20 +*.sln
21 +*.sw?
1 +# front
2 +
3 +## Project setup
4 +```
5 +yarn install
6 +```
7 +
8 +### Compiles and hot-reloads for development
9 +```
10 +yarn serve
11 +```
12 +
13 +### Compiles and minifies for production
14 +```
15 +yarn build
16 +```
17 +
18 +### Lints and fixes files
19 +```
20 +yarn lint
21 +```
22 +
23 +### Customize configuration
24 +See [Configuration Reference](https://cli.vuejs.org/config/).
1 +module.exports = {
2 + presets: [
3 + '@vue/cli-plugin-babel/preset',
4 + ],
5 +};
1 +{
2 + "name": "front",
3 + "version": "0.1.0",
4 + "private": true,
5 + "scripts": {
6 + "serve": "vue-cli-service serve",
7 + "build": "vue-cli-service build",
8 + "lint": "vue-cli-service lint"
9 + },
10 + "dependencies": {
11 + "@mdi/font": "^3.6.95",
12 + "axios": "^0.19.2",
13 + "core-js": "^3.6.5",
14 + "filepond": "^4.13.4",
15 + "filepond-plugin-file-validate-type": "^1.2.5",
16 + "filepond-plugin-image-preview": "^4.6.2",
17 + "moment": "^2.24.0",
18 + "roboto-fontface": "*",
19 + "vue": "^2.6.11",
20 + "vue-filepond": "^6.0.2",
21 + "vue-router": "^3.1.6",
22 + "vuetify": "^2.2.11",
23 + "vuex": "^3.1.3"
24 + },
25 + "devDependencies": {
26 + "@vue/cli-plugin-babel": "~4.3.0",
27 + "@vue/cli-plugin-eslint": "~4.3.0",
28 + "@vue/cli-plugin-router": "~4.3.0",
29 + "@vue/cli-plugin-vuex": "~4.3.0",
30 + "@vue/cli-service": "~4.3.0",
31 + "@vue/eslint-config-airbnb": "^5.0.2",
32 + "babel-eslint": "^10.1.0",
33 + "eslint": "^6.7.2",
34 + "eslint-plugin-import": "^2.20.2",
35 + "eslint-plugin-vue": "^6.2.2",
36 + "node-sass": "^4.12.0",
37 + "sass": "^1.19.0",
38 + "sass-loader": "^8.0.2",
39 + "vue-cli-plugin-vuetify": "~2.0.5",
40 + "vue-template-compiler": "^2.6.11",
41 + "vuetify-loader": "^1.3.0"
42 + }
43 +}
No preview for this file type
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <title><%= htmlWebpackPlugin.options.title %></title>
9 + </head>
10 + <body>
11 + <noscript>
12 + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 + </noscript>
14 + <div id="app"></div>
15 + <!-- built files will be auto injected -->
16 + </body>
17 +</html>
1 +<template>
2 + <v-app>
3 + <v-app-bar app color="primary" elevation="1" hide-on-scroll>
4 + <div style="color: #ffffff; font-size: 20px; font-weight: 400;">Youtube Auto Tagger</div>
5 + <v-spacer></v-spacer>
6 + <v-tooltip bottom>
7 + <template v-slot:activator="{ on }">
8 + <v-btn icon v-on="on" color="white" @click="clickInfo=true">
9 + <v-icon size="30">mdi-information</v-icon>
10 + </v-btn>
11 + </template>
12 + <span>Service Info</span>
13 + </v-tooltip>
14 + </v-app-bar>
15 + <v-dialog v-model="clickInfo" max-width="600" class="pa-2">
16 + <v-card elevation="0" outlined class="pa-4">
17 + <v-row justify="center" class="mx-0 mb-8 mt-2">
18 + <v-icon color="lightblue">mdi-power-on</v-icon>
19 + <div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;">
20 + Information of This Service
21 + </div>
22 + <v-icon color="lightblue">mdi-power-on</v-icon>
23 + </v-row>
24 + <div>Used Opensource</div>
25 + </v-card>
26 + </v-dialog>
27 + <v-content>
28 + <router-view />
29 + </v-content>
30 + <v-footer>
31 + <v-row justify="center">
32 + <v-avatar size="25" tile style="border-radius: 4px">
33 + <v-img src="./assets/logo.png"></v-img>
34 + </v-avatar>
35 + <a href="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1">
36 + <div style="margin-left: 4px; font-size: 16px; color: #5a5a5a; font-weight: 400">
37 + Profit-Hunter
38 + </div>
39 + </a>
40 + </v-row>
41 + </v-footer>
42 + </v-app>
43 +</template>
44 +<script>
45 +export default {
46 + name: 'App',
47 + data() {
48 + return {
49 + clickInfo: false,
50 + };
51 + },
52 +};
53 +</script>
54 +<style lang="scss">
55 +a:hover {text-decoration: none;}
56 +a:link {text-decoration: none;}
57 +a:visited {text-decoration: none;}
58 +</style>
1 +<template>
2 + <div>
3 + <file-pond
4 + name="bin"
5 + ref="pond"
6 + allow-multiple="false"
7 + accepted-file-types="video/mp4, video/avi"
8 + max-files="1"
9 + :server="server"
10 + v-bind:files="myFiles"
11 + v-on:init="handleFilePondInit"
12 + v-on:processfile="onload"
13 + />
14 + </div>
15 +</template>
16 +
17 +<script>
18 +// Import Vue FilePond
19 +import vueFilePond from 'vue-filepond';
20 +
21 +// Import FilePond styles
22 +import 'filepond/dist/filepond.min.css';
23 +
24 +// Import FilePond plugins
25 +// Please note that you need to install these plugins separately
26 +
27 +// Import image preview plugin styles
28 +import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
29 +
30 +// Import image preview and file type validation plugins
31 +import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
32 +import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
33 +
34 +// Create component
35 +const FilePond = vueFilePond(
36 + FilePondPluginFileValidateType,
37 + FilePondPluginImagePreview,
38 +);
39 +
40 +export default {
41 + name: 'app',
42 + data() {
43 + return {
44 + myFiles: [],
45 + server: {
46 + url: `${this.$apiRootPath}upload/video`,
47 + process: {},
48 + },
49 + };
50 + },
51 + methods: {
52 + handleFilePondInit() {
53 + console.log('FilePond has initialized');
54 + // FilePond instance methods are available on `this.$refs.pond`
55 + },
56 + onload(e, r) {
57 + console.log(r);
58 + // this.$store.dispatch(r);
59 + },
60 + },
61 + components: {
62 + FilePond,
63 + },
64 +};
65 +</script>
66 +
67 +<style scoped>
68 +.filepond--item {
69 + width: calc(50% - .5em);
70 +}
71 +.filepond--panel-root {
72 + background-color: transparent;
73 + border: 2px solid #2c3340;
74 +}
75 +</style>
1 +import Vue from 'vue';
2 +import App from './App.vue';
3 +import router from './router';
4 +import store from './store';
5 +import vuetify from './plugins/vuetify';
6 +import 'roboto-fontface/css/roboto/roboto-fontface.css';
7 +import '@mdi/font/css/materialdesignicons.css';
8 +
9 +Vue.config.productionTip = false;
10 +
11 +new Vue({
12 + router,
13 + store,
14 + vuetify,
15 + render: (h) => h(App),
16 +}).$mount('#app');
1 +import Vue from 'vue';
2 +import Vuetify from 'vuetify/lib';
3 +
4 +Vue.use(Vuetify);
5 +
6 +export default new Vuetify({
7 + theme: {
8 + themes: {
9 + light: {
10 + primary: '#7DC1E8',
11 + secondary: '#FFCE67',
12 + accent: '#ddeefc',
13 + error: '#FF5252',
14 + info: '#2196F3',
15 + blue: '#173f5f',
16 + lightblue: '#72b1e4',
17 + success: '#2779bd',
18 + warning: '#12283a',
19 + grey300: '#eceeef',
20 + grey500: '#aaaaaa',
21 + grey700: '#5a5a5a',
22 + grey900: '#212529',
23 + },
24 + dark: {
25 + primary: '#7DC1E8',
26 + secondary: '#FFCE67',
27 + accent: '#ddeefc',
28 + error: '#FF5252',
29 + info: '#2196F3',
30 + blue: '#173f5f',
31 + lightblue: '#72b1e4',
32 + success: '#2779bd',
33 + warning: '#12283a',
34 + grey300: '#eceeef',
35 + grey500: '#aaaaaa',
36 + grey700: '#5a5a5a',
37 + grey900: '#212529',
38 + },
39 + },
40 + },
41 +});
1 +import Vue from 'vue';
2 +import VueRouter from 'vue-router';
3 +import axios from 'axios';
4 +import Home from '../views/Home.vue';
5 +
6 +Vue.prototype.$axios = axios;
7 +const apiRootPath = process.env.NODE_ENV !== 'production'
8 + ? 'http://localhost:8000/api/'
9 + : '/api/';
10 +Vue.prototype.$apiRootPath = apiRootPath;
11 +axios.defaults.baseURL = apiRootPath;
12 +
13 +Vue.use(VueRouter);
14 +
15 +const routes = [
16 + {
17 + path: '/',
18 + name: 'Home',
19 + component: Home,
20 + },
21 +];
22 +
23 +const router = new VueRouter({
24 + mode: 'history',
25 + base: process.env.BASE_URL,
26 + routes,
27 +});
28 +
29 +export default router;
1 +import Vue from 'vue';
2 +import Vuex from 'vuex';
3 +
4 +Vue.use(Vuex);
5 +
6 +export default new Vuex.Store({
7 + state: {
8 + },
9 + mutations: {
10 + },
11 + actions: {
12 + },
13 + modules: {
14 + },
15 +});
1 +<template>
2 + <v-sheet>
3 + <v-layout justify-center>
4 + <v-flex xs12 sm8 md6>
5 + <v-row justify="center" class="mx-0 my-12">
6 + <div style="text-align: center; font-size: 24px; font-weight: 400; color: #343a40;">
7 + What is This Service?
8 + </div>
9 + </v-row>
10 + <v-card elevation="0">
11 + <!-- file upload -->
12 + <div style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;">
13 + Just Upload your Video!
14 + </div>
15 + <div class="mx-10 mb-12 mt-6">
16 + <video-upload />
17 + </div>
18 + <div style="text-align: center; font-size: 18px; font-weight: 400; color: #343a40;">
19 + If the Video is analyzed successfully,
20 + </div>
21 + <div style="text-align: center; font-size: 20px; font-weight: 400; color: #343a40;">
22 + Then, Result Show up below!
23 + </div>
24 + <v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67">
25 + <div
26 + style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
27 + >Generated Tags</div>
28 + <v-chip-group column>
29 + <v-chip
30 + color="secondary"
31 + v-for="(tag, index) in generatedTag"
32 + :key="index"
33 + >
34 + {{ tag }}
35 + </v-chip>
36 + </v-chip-group>
37 + </v-card>
38 + <v-card outlined class="pa-2 mx-10 mt-8" elevation="0" min-height="67">
39 + <div
40 + style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 140px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
41 + >Related Youtube Link</div>
42 + <v-flex v-for="(url) in YoutubeUrl" :key="url">
43 + <div>
44 + <a :href="url">{{url}}</a>
45 + </div>
46 + </v-flex>
47 + </v-card>
48 + </v-card>
49 + </v-flex>
50 + </v-layout>
51 + </v-sheet>
52 +</template>
53 +<script>
54 +import videoUpload from '../components/uploadFile.vue';
55 +
56 +export default {
57 + name: 'Home',
58 + components: {
59 + videoUpload,
60 + },
61 + data() {
62 + return {
63 + myFiles: [],
64 + YoutubeUrl: [],
65 + generatedTag: [],
66 + successDialog: false,
67 + errorDialog: false,
68 + loading: false,
69 + };
70 + },
71 + created() {
72 + this.YoutubeUrl = [
73 +
74 + ];
75 + this.generatedTag = [
76 +
77 + ];
78 + },
79 +
80 + methods: {
81 + loadVideoInfo() {
82 +
83 + },
84 + },
85 +};
86 +</script>
1 +module.exports = {
2 + transpileDependencies: [
3 + 'vuetify',
4 + ],
5 +};
This diff could not be displayed because it is too large.