2020-1-capstone-design1 / PKH_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Yoonjunhyeon
600f08ea 1 parent 8463d9d4

옛날 프론트엔드 삭제 및 yt8m 폴더 위치 변경

Inline Side-by-side
Showing 45 changed files with 0 additions and 688 deletions
...@@ -24,10 +24,6 @@ class VideoViewSet(viewsets.ModelViewSet): ...@@ -24,10 +24,6 @@ class VideoViewSet(viewsets.ModelViewSet):
24 queryset = Video.objects.all() 24 queryset = Video.objects.all()
25 serializer_class = VideoSerializer 25 serializer_class = VideoSerializer
26 26
27 -
28 -
29 -
30 -
31 class VideoFileViewSet(viewsets.ModelViewSet): 27 class VideoFileViewSet(viewsets.ModelViewSet):
32 queryset = VideoFile.objects.all() 28 queryset = VideoFile.objects.all()
33 serializer_class = VideoFileSerializer 29 serializer_class = VideoFileSerializer
......
1 -# frontend
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: ["@vue/cli-plugin-babel/preset"]
3 -};
1 -{
2 - "name": "frontend",
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": "^5.0.45",
12 - "axios": "^0.19.2",
13 - "core-js": "^3.6.4",
14 - "filepond": "^4.13.0",
15 - "filepond-plugin-file-validate-type": "^1.2.5",
16 - "filepond-plugin-image-preview": "^4.6.1",
17 - "moment": "^2.24.0",
18 - "roboto-fontface": "*",
19 - "vee-validate": "^3.2.5",
20 - "vue": "^2.6.11",
21 - "vue-filepond": "^6.0.2",
22 - "vue-infinite-scroll": "^2.0.2",
23 - "vue-router": "^3.1.5",
24 - "vue-video-player": "^5.0.2",
25 - "vuetify": "^2.2.11",
26 - "vuex": "^3.1.2"
27 - },
28 - "devDependencies": {
29 - "@vue/cli-plugin-babel": "~4.2.0",
30 - "@vue/cli-plugin-eslint": "~4.2.0",
31 - "@vue/cli-plugin-router": "~4.2.0",
32 - "@vue/cli-plugin-vuex": "~4.2.0",
33 - "@vue/cli-service": "~4.2.0",
34 - "@vue/eslint-config-prettier": "^6.0.0",
35 - "babel-eslint": "^10.0.3",
36 - "eslint": "^6.7.2",
37 - "eslint-plugin-prettier": "^3.1.1",
38 - "eslint-plugin-vue": "^6.1.2",
39 - "node-sass": "^4.12.0",
40 - "prettier": "^1.19.1",
41 - "sass": "^1.19.0",
42 - "sass-loader": "^8.0.2",
43 - "vue-cli-plugin-vuetify": "~2.0.5",
44 - "vue-template-compiler": "^2.6.11",
45 - "vuetify-loader": "^1.3.0"
46 - },
47 - "eslintConfig": {
48 - "root": true,
49 - "env": {
50 - "node": true
51 - },
52 - "extends": [
53 - "plugin:vue/essential",
54 - "eslint:recommended",
55 - "@vue/prettier"
56 - ],
57 - "parserOptions": {
58 - "parser": "babel-eslint"
59 - },
60 - "rules": {}
61 - },
62 - "browserslist": [
63 - "> 1%",
64 - "last 2 versions"
65 - ]
66 -}
1 -<!DOCTYPE html>
2 -<html lang="ko">
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="#ffffff" elevation="1">
4 - <v-tabs grow v-model="tab">
5 - <v-tab @click="$router.push('/')">Home</v-tab>
6 - <v-tab @click="$router.push('/upload')">Upload</v-tab>
7 - </v-tabs>
8 - </v-app-bar>
9 - <v-content>
10 - <router-view />
11 - </v-content>
12 - <v-footer>
13 - <v-row justify="center" @click="exDialog = true">
14 - <v-avatar size="25" tile style="border-radius: 4px">
15 - <v-img src="./assets/logo.png"></v-img>
16 - </v-avatar>
17 - <div>
18 - <span
19 - style="margin-left: 2px; font-size: 15px; color: #5a5a5a; font-weight: 400"
20 - >
21 - Profit-Hunter
22 - </span>
23 - <div
24 - style="margin-left: 4px; margin-top: -1px; font-size: 10px; color: #888; font-weight: 400"
25 - >
26 - Used OpenSource
27 - </div>
28 - </div>
29 - </v-row>
30 - </v-footer>
31 - </v-app>
32 -</template>
33 -
34 -<script>
35 -export default {
36 - name: "App",
37 -
38 - data: () => ({
39 - tab: null,
40 - search: "",
41 - exDialog: false
42 - }),
43 - mounted() {
44 - console.log(window.location.href.substring(22));
45 - if (window.location.href.substring(22) === "") {
46 - this.tab = 0;
47 - } else if (window.location.href.substring(22) === "upload") {
48 - this.tab = 1;
49 - } else {
50 - this.tab = null;
51 - }
52 - }
53 -};
54 -</script>
1 -<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>
1 -<template>
2 - <div>
3 - <v-layout></v-layout>
4 - <v-card></v-card>
5 - </div>
6 -</template>
7 -
8 -<script>
9 - export default {};
10 -</script>
11 -
12 -<style scoped></style>
1 -<template>
2 - <div>
3 - <file-pond
4 - name="bin"
5 - ref="pond"
6 - allow-multiple="false"
7 - max-files="1"
8 - :server="server"
9 - v-bind:files="myFiles"
10 - v-on:init="handleFilePondInit"
11 - v-on:processfile="onload"
12 - />
13 - </div>
14 -</template>
15 -
16 -<script>
17 -// Import Vue FilePond
18 -import vueFilePond from "vue-filepond";
19 -
20 -// Import FilePond styles
21 -import "filepond/dist/filepond.min.css";
22 -
23 -// Import FilePond plugins
24 -// Please note that you need to install these plugins separately
25 -
26 -// Import image preview plugin styles
27 -import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
28 -
29 -// Import image preview and file type validation plugins
30 -import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
31 -import FilePondPluginImagePreview from "filepond-plugin-image-preview";
32 -
33 -// Create component
34 -const FilePond = vueFilePond(
35 - FilePondPluginFileValidateType,
36 - FilePondPluginImagePreview
37 -);
38 -
39 -export default {
40 - name: "app",
41 - data() {
42 - return {
43 - myFiles: [],
44 - server: {
45 - url: `${this.$apiRootPath}upload/video`,
46 - process: {}
47 - }
48 - };
49 - },
50 - methods: {
51 - handleFilePondInit() {
52 - console.log("FilePond has initialized");
53 - // FilePond instance methods are available on `this.$refs.pond`
54 - },
55 - onload(e, r) {
56 - console.log(r);
57 - // this.$store.dispatch(r);
58 - }
59 - },
60 - components: {
61 - FilePond
62 - }
63 -};
64 -</script>
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 -import * as VeeValidate from 'vee-validate';
9 -import './vee-validate';
10 -import infiniteScroll from 'vue-infinite-scroll';
11 -
12 -Vue.config.productionTip = false;
13 -Vue.use(infiniteScroll);
14 -Vue.use(VeeValidate);
15 -
16 -new Vue({
17 - router,
18 - store,
19 - vuetify,
20 - render: (h) => h(App),
21 -}).$mount('#app');
1 -import Vue from "vue";
2 -import Vuetify from "vuetify/lib";
3 -import ko from "vuetify/es5/locale/ko";
4 -
5 -Vue.use(Vuetify);
6 -
7 -export default new Vuetify({
8 - theme: {
9 - options: {
10 - customProperties: true
11 - },
12 - themes: {
13 - light: {
14 - primary: "#7DC1E8",
15 - secondary: "#FFCE67",
16 - accent: "#ddeefc",
17 - error: "#FF5252",
18 - info: "#2196F3",
19 - blue: "#173f5f",
20 - lightblue: "#72b1e4",
21 - success: "#2779bd",
22 - warning: "#12283a",
23 - grey300: "#eceeef",
24 - grey500: "#aaaaaa",
25 - grey700: "#5a5a5a",
26 - grey900: "#212529"
27 - }
28 - }
29 - },
30 - lang: {
31 - locales: { ko },
32 - current: "ko"
33 - }
34 -});
1 -import Vue from "vue";
2 -import VueRouter from "vue-router";
3 -import axios from "axios";
4 -Vue.prototype.$axios = axios;
5 -const apiRootPath =
6 - process.env.NODE_ENV !== "production"
7 - ? "http://localhost:8000/api/"
8 - : "/api/";
9 -Vue.prototype.$apiRootPath = apiRootPath;
10 -axios.defaults.baseURL = apiRootPath;
11 -
12 -Vue.use(VueRouter);
13 -
14 -const routes = [
15 - {
16 - path: "/",
17 - name: "Home",
18 - component: () => import("../views/Home.vue")
19 - },
20 - {
21 - path: "/upload",
22 - name: "upload",
23 - component: () => import("../views/Upload.vue")
24 - }
25 -];
26 -
27 -const router = new VueRouter({
28 - mode: "history",
29 - base: process.env.BASE_URL,
30 - routes
31 -});
32 -
33 -export default router;
1 -import Vue from 'vue';
2 -import Vuex from 'vuex';
3 -Vue.use(Vuex);
4 -
5 -export default new Vuex.Store({
6 - state: {
7 - tags: [],
8 - videoList: [],
9 - },
10 - mutations: {
11 - setTags(state, tags) {
12 - state.tags = tags;
13 - },
14 - setVideoList(state, list) {
15 - state.videoList = list;
16 - },
17 - },
18 - getters: {
19 - getTags: (state) => {
20 - return state.tags;
21 - },
22 - getList: (state) => {
23 - return state.videoList;
24 - },
25 - },
26 - actions: {
27 - LoadTags: (context) => {
28 - return context.commit('setTags');
29 - },
30 - },
31 - modules: {},
32 -});
1 -import { required, max, min } from "vee-validate/dist/rules";
2 -import { extend } from "vee-validate";
3 -
4 -extend("required", {
5 - ...required,
6 - message: "This field is required"
7 -});
8 -
9 -extend("max", {
10 - ...max,
11 - message: "This field must be {length} characters or less"
12 -});
13 -
14 -extend("min", {
15 - ...min,
16 - message: "This field must have at least {length} characters"
17 -});
1 -<template>
2 - <v-sheet>
3 - <!-- autocomplete에 저장된 tag 넣어서(동영상 업로드 할 때마다 tag가 저장됨) 자동완성 되게끔.-->
4 - <v-layout justify-center>
5 - <v-flex xs12 sm8 md8 lg6>
6 - <v-row class="mx-0 mt-10 mb-8" justify="center">
7 - <v-icon color="lightblue">mdi-power-on</v-icon>
8 - <div
9 - style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; "
10 - >Video List</div>
11 - <v-icon color="lightblue">mdi-power-on</v-icon>
12 - </v-row>
13 - <v-autocomplete
14 - class="mx-5"
15 - v-model="params.tags"
16 - :items="tagsList"
17 - placeholder="Click to search Tags"
18 - prepend-inner-icon="mdi-shape"
19 - chips
20 - multiple
21 - deletable-chips
22 - item-color="primary"
23 - ></v-autocomplete>
24 - <!-- 동영상 리스트 -->
25 - <div
26 - v-infinite-scroll="getPost"
27 - infinite-scroll-disabled="busy"
28 - infinite-scroll-distance="10"
29 - class="mb-2"
30 - >
31 - <v-row class="mx-5">
32 - <v-flex xs12 md6 v-for="(post, index) in postList" :key="index" class="mx-0">
33 - <v-card class="mx-1 my-1" elevation="0" outlined>
34 - <div class="mx-2 my-1" style="font-size: 18px; color: #5a5a5a">{{ post.title }}</div>
35 - <v-img height="250" style="border-top: 1px solid; solid;;border-color: #e0e0e0">
36 - <div style="background-color: #7DC1E8; height: 250px">
37 - <v-row justify="end" class="mx-0">
38 - <v-avatar @click="delte()" size="30" color="#888" class="mt-1 mr-1">
39 - <v-icon color="white">mdi-delete</v-icon>
40 - </v-avatar>
41 - </v-row>
42 - <div
43 - style="margin-left: 130px; margin-top: 70px; color: #ffff; font-size: 20px"
44 - >Sample</div>
45 - </div>
46 - </v-img>
47 - <v-divider></v-divider>
48 - <v-chip-group column class="mx-1">
49 - <v-chip color="secondary" v-for="(tag, index) in post.tags" :key="index">#{{ tag }}</v-chip>
50 - </v-chip-group>
51 - </v-card>
52 - </v-flex>
53 - </v-row>
54 - </div>
55 - </v-flex>
56 - </v-layout>
57 - </v-sheet>
58 -</template>
59 -<script>
60 -// @ is an alias to /src
61 -export default {
62 - name: "Home",
63 - components: {},
64 - data() {
65 - return {
66 - postList: [],
67 - tagsList: [],
68 - busy: false,
69 - params: {
70 - tags: [],
71 - skip: 0,
72 - page: 1
73 - }
74 - };
75 - },
76 - watch: {
77 - "params.tags"(newValue, oldValue) {
78 - console.log(newValue, oldValue);
79 - this.postList = [];
80 - this.params.page = 1;
81 - this.getPost();
82 - }
83 - },
84 - computed: {
85 - setSkip() {
86 - if (this.params.page <= 0) return 0;
87 - return (this.params.page - 1) * 10;
88 - }
89 - },
90 - created() {
91 - this.getPost();
92 - this.getTags();
93 - },
94 - methods: {
95 - getPost() {
96 - this.busy = true;
97 -
98 - this.params.skip = this.setSkip;
99 - if (this.postList.length !== (this.params.page - 1) * 10) {
100 - return;
101 - }
102 -
103 - this.$axios
104 - .get("/video", { params: this.params })
105 - .then(r => {
106 - let tags = []
107 - for (let i = 0; i < r.data.length; i++) {
108 - tags = r.data[i].tags.split(',')
109 - r.data[i].tags = tags
110 - this.postList.push(r.data[i]);
111 - }
112 - this.busy = false;
113 - this.params.page++;
114 - })
115 - .catch(e => {
116 - console.log(e);
117 - });
118 - },
119 - getTags() {
120 - this.$axios
121 - .get("/loadtag")
122 - .then(r => {
123 - let tags = []
124 - for (let i = 0; i < r.data.length; i++) {
125 - tags.push(r.data[i].tag)
126 - }
127 - this.tagsList = [...new Set(tags)]
128 - })
129 - .catch(e => {
130 - console.log(e);
131 - });
132 - },
133 - delete(atc) {
134 - this.$axios
135 - .delete(`/${atc._id}`)
136 - .then(() => {
137 - window.location.reload();
138 - })
139 - .catch(e => {
140 - console.log(e);
141 - });
142 - }
143 - }
144 -};
145 -</script>
1 -<template>
2 - <v-sheet>
3 - <v-layout justify-center>
4 - <v-overlay :value="loading">
5 - <v-progress-circular indeterminate size="80"></v-progress-circular>
6 - </v-overlay>
7 - <v-flex xs12 sm8 md6>
8 - <v-row justify="center" class="mx-0 my-12">
9 - <v-icon color="lightblue">mdi-power-on</v-icon>
10 - <div
11 - style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; "
12 - >Upload Video</div>
13 - <v-icon color="lightblue">mdi-power-on</v-icon>
14 - </v-row>
15 - <v-card elevation="0">
16 - <v-text-field
17 - class="mx-10 mt-12 mb-6"
18 - prepend-inner-icon="mdi-pen"
19 - v-model="form.title"
20 - :counter="40"
21 - label="Title"
22 - placeholder="Please input Title"
23 - type="text"
24 - ></v-text-field>
25 - <!-- file upload -->
26 - <div class="mx-10 mb-12 mt-6">
27 - <video-upload />
28 - </div>
29 - <v-dialog max-width="400" v-model="successDialog">
30 - <v-card max-width="400" class="pt-3">
31 - <div
32 - style="text-align: center; font-size: 20px;color: #5a5a5a; font-weight: 400"
33 - >Notice</div>
34 - <v-divider class="mt-2 mb-3"></v-divider>
35 - <div
36 - style="margin-left: 10px; margin-right: 10px; text-align: center; font-size: 18px; font-weight: 400"
37 - >Your Video's tags are successfully extracted</div>
38 - <v-btn class="mt-4" elevation="0" block color="primary">Close</v-btn>
39 - </v-card>
40 - </v-dialog>
41 - <v-card outlined class="pa-2 mx-10" elevation="0" min-height="67">
42 - <div
43 - style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 95px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
44 - >Selected Tags</div>
45 - <v-chip-group column>
46 - <v-chip
47 - color="secondary"
48 - v-for="(tag, index) in form.tag"
49 - :key="index"
50 - @click="deleteTags(index)"
51 - >
52 - {{ tag }}
53 - <v-icon small style="margin-left: 3px; margin-top: -2px">mdi-close-circle</v-icon>
54 - </v-chip>
55 - </v-chip-group>
56 - </v-card>
57 - <v-text-field
58 - class="mx-10 my-12"
59 - prepend-inner-icon="mdi-shape"
60 - v-model="tag"
61 - :counter="20"
62 - label="Tag"
63 - placeholder="Type to add Tag"
64 - append-icon="mdi-arrow-up-bold"
65 - @click:append="addTags(tag)"
66 - @keydown.enter="addTags(tag)"
67 - type="text"
68 - ></v-text-field>
69 - </v-card>
70 - <v-row justify="center" style="margin-top: 30px">
71 - <v-btn elevation="0" large color="primary" @click="submit()">
72 - <span style="font-size: 24px; font-weight: 300; letter-spacing: 2px">Upload</span>
73 - </v-btn>
74 - </v-row>
75 - </v-flex>
76 - </v-layout>
77 - </v-sheet>
78 -</template>
79 -<script>
80 -import videoUpload from "../components/uploadFile";
81 -export default {
82 - name: "Upload",
83 - components: {
84 - videoUpload
85 - },
86 - data() {
87 - return {
88 - myFiles: [],
89 - tag: "",
90 - form: {
91 - title: "",
92 - videoUrl: "",
93 - tag: [
94 - "Work",
95 - "Home Improvement",
96 - "Vacation",
97 - "Food",
98 - "Drawers",
99 - "Shopping",
100 - "Art",
101 - "Tech",
102 - "Creative Writing"
103 - ]
104 - },
105 - successDialog: false,
106 - errorDialog: false,
107 - loading: false
108 - };
109 - },
110 - created() {
111 - this.form.tag = [];
112 - },
113 -
114 - methods: {
115 - submit() {
116 - if (!(this.form.tag.length && this.form.title)) {
117 - this.errorDialog = true;
118 - return;
119 - } else {
120 - this.$axios
121 - .post("/home", this.form)
122 - .then(r => {
123 - window.location.reload();
124 - console.log(r);
125 - this.successDialog = true;
126 - })
127 - .catch(e => {
128 - console.log(e);
129 - this.errorDialog = true;
130 - });
131 - }
132 - },
133 - deleteTags(index) {
134 - for (let i = 0; i < this.form.tag.length; i++) {
135 - const element = this.form.tag[i];
136 - if (this.form.tag[index] === element) {
137 - this.form.tag[i] = this.form.tag[this.form.tag.length - 1];
138 - break;
139 - }
140 - }
141 - this.form.tag.pop();
142 - },
143 - addTags(tag) {
144 - let i;
145 - let check = true;
146 - for (i = 0; i < this.form.tag.length; i++) {
147 - const element = this.form.tag[i];
148 - if (tag === element) {
149 - check = false;
150 - }
151 - }
152 - if (tag && check) this.form.tag.push(tag);
153 - this.tag = "";
154 - }
155 - }
156 -};
157 -</script>
1 -module.exports = {
2 - transpileDependencies: ['vuetify'],
3 - transpileDependencies: ['vuex-persist'],
4 -};
This diff could not be displayed because it is too large.