Showing
14 changed files
with
313 additions
and
160 deletions
| ... | @@ -4,17 +4,16 @@ var path = require('path'); | ... | @@ -4,17 +4,16 @@ var path = require('path'); |
| 4 | var cookieParser = require('cookie-parser'); | 4 | var cookieParser = require('cookie-parser'); |
| 5 | var logger = require('morgan'); | 5 | var logger = require('morgan'); |
| 6 | var history = require('connect-history-api-fallback'); | 6 | var history = require('connect-history-api-fallback'); |
| 7 | -var cors = require('cors') | 7 | +var cors = require('cors'); |
| 8 | var app = express(); | 8 | var app = express(); |
| 9 | -var mongoDB = require('./lib/db_info') | 9 | +var mongoDB = require('./lib/db_info'); |
| 10 | 10 | ||
| 11 | app.use(logger('dev')); | 11 | app.use(logger('dev')); |
| 12 | app.use(express.json()); | 12 | app.use(express.json()); |
| 13 | app.use(express.urlencoded({ extended: false })); | 13 | app.use(express.urlencoded({ extended: false })); |
| 14 | app.use(cookieParser()); | 14 | app.use(cookieParser()); |
| 15 | 15 | ||
| 16 | -if (process.env.NODE_ENV !== 'production') | 16 | +if (process.env.NODE_ENV !== 'production') app.use(cors()); |
| 17 | - app.use(cors()); | ||
| 18 | app.use('/api', require('./routes/api')); | 17 | app.use('/api', require('./routes/api')); |
| 19 | app.use(history()); | 18 | app.use(history()); |
| 20 | app.use(express.static(path.join(__dirname, '../frontend', 'dist'))); | 19 | app.use(express.static(path.join(__dirname, '../frontend', 'dist'))); |
| ... | @@ -37,9 +36,13 @@ app.use(function (err, req, res, next) { | ... | @@ -37,9 +36,13 @@ app.use(function (err, req, res, next) { |
| 37 | 36 | ||
| 38 | module.exports = app; | 37 | module.exports = app; |
| 39 | 38 | ||
| 40 | -const mongoose = require('mongoose') | 39 | +const mongoose = require('mongoose'); |
| 41 | 40 | ||
| 42 | -mongoose.connect(mongoDB.db, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: true }, (err) => { | ||
| 43 | - if (err) return console.error(err) | ||
| 44 | - console.log('mongoose connected') | ||
| 45 | -}) | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 41 | +mongoose.connect( | ||
| 42 | + mongoDB.db, | ||
| 43 | + { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: true }, | ||
| 44 | + (err) => { | ||
| 45 | + if (err) return console.error(err); | ||
| 46 | + console.log('mongoose connected'); | ||
| 47 | + } | ||
| 48 | +); | ... | ... |
| ... | @@ -13,7 +13,7 @@ | ... | @@ -13,7 +13,7 @@ |
| 13 | "express": "~4.16.1", | 13 | "express": "~4.16.1", |
| 14 | "http-errors": "~1.6.3", | 14 | "http-errors": "~1.6.3", |
| 15 | "moment": "^2.24.0", | 15 | "moment": "^2.24.0", |
| 16 | - "mongoose": "^5.9.6", | 16 | + "mongoose": "^5.9.7", |
| 17 | "morgan": "~1.9.1", | 17 | "morgan": "~1.9.1", |
| 18 | "multer": "^1.4.2", | 18 | "multer": "^1.4.2", |
| 19 | "pug": "2.0.0-beta11" | 19 | "pug": "2.0.0-beta11" | ... | ... |
| 1 | var express = require('express'); | 1 | var express = require('express'); |
| 2 | var createError = require('http-errors'); | 2 | var createError = require('http-errors'); |
| 3 | var router = express.Router(); | 3 | var router = express.Router(); |
| 4 | -const post = require('../../../model/video') | 4 | +const post = require('../../../model/video'); |
| 5 | +const tags = require('../../../model/tagList'); | ||
| 5 | 6 | ||
| 6 | router.get('/list', (req, res, next) => { | 7 | router.get('/list', (req, res, next) => { |
| 7 | - let { tag, skip } = req.query | 8 | + let { tags, skip } = req.query; |
| 8 | - let joinedTag = tag.join("|") | 9 | + let joinedTag; |
| 9 | - let regexsearch = { tag: { $regex: joinedTag, $options: 'si' } } | 10 | + console.log(tags); |
| 10 | - skip = parseInt(skip) | 11 | + if (tags) joinedTag = tags.join('|'); |
| 11 | - post.find() | 12 | + else { |
| 12 | - .sort({'_id': -1}) | 13 | + joinedTag = ''; |
| 13 | - .limit(12) | 14 | + } |
| 15 | + let regexsearch = { tag: { $regex: joinedTag, $options: 'si' } }; | ||
| 16 | + skip = parseInt(skip); | ||
| 17 | + post | ||
| 18 | + .find(regexsearch) | ||
| 19 | + .sort({ _id: -1 }) | ||
| 20 | + .limit(10) | ||
| 14 | .skip(skip) | 21 | .skip(skip) |
| 15 | - .then(rs => { | 22 | + .then((rs) => { |
| 16 | - console.log(rs) | 23 | + res.send({ success: true, d: rs }); |
| 17 | - res.send({ success: true, d: rs, }) | ||
| 18 | }) | 24 | }) |
| 19 | - .catch(e => { | 25 | + .catch((e) => { |
| 20 | - console.log(e) | 26 | + console.log(e); |
| 21 | - res.send({ success: false, msg: e.message }) | 27 | + res.send({ success: false, msg: e.message }); |
| 28 | + }); | ||
| 29 | +}); | ||
| 30 | + | ||
| 31 | +router.get('/tag', (req, res, next) => { | ||
| 32 | + tags | ||
| 33 | + .find() | ||
| 34 | + .then((rs) => { | ||
| 35 | + var temp = []; | ||
| 36 | + rs.forEach((element) => { | ||
| 37 | + element.tag.forEach((element) => { | ||
| 38 | + temp.push(element); | ||
| 39 | + }); | ||
| 40 | + }); | ||
| 41 | + var uniqArray = Array.from(new Set(temp)); | ||
| 42 | + res.send({ success: true, d: uniqArray }); | ||
| 22 | }) | 43 | }) |
| 23 | -}) | 44 | + .catch((e) => { |
| 45 | + console.log(e); | ||
| 46 | + res.send({ success: false, msg: e.message }); | ||
| 47 | + }); | ||
| 48 | +}); | ||
| 24 | 49 | ||
| 25 | router.delete('/:_id', (req, res, next) => { | 50 | router.delete('/:_id', (req, res, next) => { |
| 26 | - const _id = req.params._id | 51 | + const _id = req.params._id; |
| 27 | - post.findOne({ _id }) | 52 | + post |
| 28 | - .then(r => { | 53 | + .findOne({ _id }) |
| 29 | - console.log(r) | 54 | + .then((r) => { |
| 30 | - return post.deleteOne({ _id }) | 55 | + console.log(r); |
| 56 | + return post.deleteOne({ _id }); | ||
| 31 | }) | 57 | }) |
| 32 | - .then(r => { | 58 | + .then((r) => { |
| 33 | - res.send({ success: true, d: r}) | 59 | + res.send({ success: true, d: r }); |
| 34 | }) | 60 | }) |
| 35 | - .catch(e => { | 61 | + .catch((e) => { |
| 36 | - console.log(e) | 62 | + console.log(e); |
| 37 | - res.send({ success: false, msg: e.message }) | 63 | + res.send({ success: false, msg: e.message }); |
| 38 | - }) | 64 | + }); |
| 39 | -}) | 65 | +}); |
| 40 | 66 | ||
| 41 | router.all('*', function (req, res, next) { | 67 | router.all('*', function (req, res, next) { |
| 42 | - next(new Error ('Wrong Url!')); | 68 | + next(new Error('Wrong Url!')); |
| 43 | }); | 69 | }); |
| 44 | 70 | ||
| 45 | module.exports = router; | 71 | module.exports = router; | ... | ... |
| ... | @@ -2,12 +2,11 @@ var createError = require('http-errors'); | ... | @@ -2,12 +2,11 @@ var createError = require('http-errors'); |
| 2 | var express = require('express'); | 2 | var express = require('express'); |
| 3 | var router = express.Router(); | 3 | var router = express.Router(); |
| 4 | 4 | ||
| 5 | -router.use('/home', require('./home')) | 5 | +router.use('/home', require('./home')); |
| 6 | -router.use('/upload', require('./upload')) | 6 | +router.use('/upload', require('./upload')); |
| 7 | 7 | ||
| 8 | -router.all('*', function(req, res, next) { | 8 | +router.all('*', function (req, res, next) { |
| 9 | - next(createError(404, 'This page is not exisit')) | 9 | + next(createError(404, 'This page is not exisit')); |
| 10 | -}) | 10 | +}); |
| 11 | - | ||
| 12 | -module.exports = router | ||
| 13 | 11 | ||
| 12 | +module.exports = router; | ... | ... |
| 1 | var express = require('express'); | 1 | var express = require('express'); |
| 2 | var createError = require('http-errors'); | 2 | var createError = require('http-errors'); |
| 3 | var router = express.Router(); | 3 | var router = express.Router(); |
| 4 | -const post = require('../../../model/video') | 4 | +const post = require('../../../model/video'); |
| 5 | -const multer = require('multer') | 5 | +const tags = require('../../../model/tagList'); |
| 6 | -var moment = require('moment') | 6 | +const multer = require('multer'); |
| 7 | -var fs = require('fs') | 7 | +var moment = require('moment'); |
| 8 | +var fs = require('fs'); | ||
| 8 | // event post | 9 | // event post |
| 9 | -router.post('/video', multer({dest: 'videos/'}).single('bin'), (req, res, next) => { | 10 | +router.post( |
| 10 | - console.log(req.file) | 11 | + '/video', |
| 12 | + multer({ dest: 'videos/' }).single('bin'), | ||
| 13 | + (req, res, next) => { | ||
| 14 | + console.log(req.file); | ||
| 11 | 15 | ||
| 12 | - fs.rename(`../../../videos/${req.file.filename}`, `../../../videos/${req.file.originalname}`, (r) => { | 16 | + fs.rename( |
| 13 | - console.log(r) | 17 | + `../../../videos/${req.file.filename}`, |
| 14 | - }) | 18 | + `../../../videos/${req.file.originalname}`, |
| 15 | - var atc = { | 19 | + (r) => { |
| 16 | - videoUrl : req.file.location, | 20 | + console.log(r); |
| 17 | - title : req.body.title, | ||
| 18 | - tag: req.body.tag | ||
| 19 | } | 21 | } |
| 22 | + ); | ||
| 23 | + var atc = { | ||
| 24 | + videoUrl: req.file.location, | ||
| 25 | + title: req.body.title, | ||
| 26 | + tag: req.body.tag, | ||
| 27 | + }; | ||
| 20 | // post.create(atc) | 28 | // post.create(atc) |
| 21 | // .then( r => { | 29 | // .then( r => { |
| 22 | // res.send({ success: true, d: r, token: req.token }) | 30 | // res.send({ success: true, d: r, token: req.token }) |
| ... | @@ -25,25 +33,30 @@ router.post('/video', multer({dest: 'videos/'}).single('bin'), (req, res, next) | ... | @@ -25,25 +33,30 @@ router.post('/video', multer({dest: 'videos/'}).single('bin'), (req, res, next) |
| 25 | // console.log(err); | 33 | // console.log(err); |
| 26 | // res.send({ success: false, msg: err.message }) | 34 | // res.send({ success: false, msg: err.message }) |
| 27 | // }); | 35 | // }); |
| 28 | -}) | ||
| 29 | -router.post('/post', (req,res,next) => { | ||
| 30 | - console.log(req.body) | ||
| 31 | - var atc = { | ||
| 32 | - title : req.body.title, | ||
| 33 | - tag: req.body.tag | ||
| 34 | } | 36 | } |
| 35 | - post.create(atc) | 37 | +); |
| 36 | - .then( r => { | 38 | +router.post('/post', (req, res, next) => { |
| 37 | - res.send({ success: true, d: r, token: req.token }) | 39 | + console.log(req.body); |
| 40 | + var atc = { | ||
| 41 | + title: req.body.title, | ||
| 42 | + tag: req.body.tag, | ||
| 43 | + }; | ||
| 44 | + tags | ||
| 45 | + .create({ tag: req.body.tag }) | ||
| 46 | + .then(() => { | ||
| 47 | + return post.create(atc); | ||
| 48 | + }) | ||
| 49 | + .then((r) => { | ||
| 50 | + res.send({ success: true, d: r, token: req.token }); | ||
| 38 | }) | 51 | }) |
| 39 | .catch((err) => { | 52 | .catch((err) => { |
| 40 | console.log(err); | 53 | console.log(err); |
| 41 | - res.send({ success: false, msg: err.message }) | 54 | + res.send({ success: false, msg: err.message }); |
| 42 | }); | 55 | }); |
| 43 | -}) | 56 | +}); |
| 44 | 57 | ||
| 45 | -router.all('*', function(req, res, next) { | 58 | +router.all('*', function (req, res, next) { |
| 46 | - next(createError(404, 'This page is not exisit')) | 59 | + next(createError(404, 'This page is not exisit')); |
| 47 | -}) | 60 | +}); |
| 48 | 61 | ||
| 49 | -module.exports = router | 62 | +module.exports = router; | ... | ... |
This file is too large to display.
| ... | @@ -597,10 +597,10 @@ mongoose-legacy-pluralize@1.0.2: | ... | @@ -597,10 +597,10 @@ mongoose-legacy-pluralize@1.0.2: |
| 597 | resolved "https://registry.yarnpkg.com/mongoose-legacy-pluralize/-/mongoose-legacy-pluralize-1.0.2.tgz#3ba9f91fa507b5186d399fb40854bff18fb563e4" | 597 | resolved "https://registry.yarnpkg.com/mongoose-legacy-pluralize/-/mongoose-legacy-pluralize-1.0.2.tgz#3ba9f91fa507b5186d399fb40854bff18fb563e4" |
| 598 | integrity sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ== | 598 | integrity sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ== |
| 599 | 599 | ||
| 600 | -mongoose@^5.9.6: | 600 | +mongoose@^5.9.7: |
| 601 | - version "5.9.6" | 601 | + version "5.9.7" |
| 602 | - resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-5.9.6.tgz#47e2e234638eede4caa52d961e3a7459b55530ef" | 602 | + resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-5.9.7.tgz#03c581860d0e2f60f6008f9457ab0c2905609875" |
| 603 | - integrity sha512-EfFGO2QUoenf/4eFeF5y2R8aBLKHtqwrMk1pVGgl3OyNWufP5XLLPIuihP006YqR1+6xM1YsBzGpgBjMZkINGA== | 603 | + integrity sha512-WJOBh9WMvivqBK8my9HFtSzSySKdUxJPNGAwswEakAasWUcPXJl3yHMtZ4ngGnKbwTT9KnAr75xamlt/PouR9w== |
| 604 | dependencies: | 604 | dependencies: |
| 605 | bson "~1.1.1" | 605 | bson "~1.1.1" |
| 606 | kareem "2.3.1" | 606 | kareem "2.3.1" | ... | ... |
web/frontend/src/components/List.vue
0 → 100644
| 1 | -import Vue from "vue"; | 1 | +import Vue from 'vue'; |
| 2 | -import App from "./App.vue"; | 2 | +import App from './App.vue'; |
| 3 | -import router from "./router"; | 3 | +import router from './router'; |
| 4 | -import store from "./store"; | 4 | +import store from './store'; |
| 5 | -import vuetify from "./plugins/vuetify"; | 5 | +import vuetify from './plugins/vuetify'; |
| 6 | -import "roboto-fontface/css/roboto/roboto-fontface.css"; | 6 | +import 'roboto-fontface/css/roboto/roboto-fontface.css'; |
| 7 | -import "@mdi/font/css/materialdesignicons.css"; | 7 | +import '@mdi/font/css/materialdesignicons.css'; |
| 8 | -import * as VeeValidate from "vee-validate"; | 8 | +import * as VeeValidate from 'vee-validate'; |
| 9 | -import "./vee-validate"; | 9 | +import './vee-validate'; |
| 10 | -import infiniteScroll from "vue-infinite-scroll"; | 10 | +import infiniteScroll from 'vue-infinite-scroll'; |
| 11 | 11 | ||
| 12 | Vue.config.productionTip = false; | 12 | Vue.config.productionTip = false; |
| 13 | Vue.use(infiniteScroll); | 13 | Vue.use(infiniteScroll); |
| ... | @@ -17,5 +17,5 @@ new Vue({ | ... | @@ -17,5 +17,5 @@ new Vue({ |
| 17 | router, | 17 | router, |
| 18 | store, | 18 | store, |
| 19 | vuetify, | 19 | vuetify, |
| 20 | - render: h => h(App) | 20 | + render: (h) => h(App), |
| 21 | -}).$mount("#app"); | 21 | +}).$mount('#app'); | ... | ... |
| ... | @@ -12,12 +12,14 @@ export default new Vuetify({ | ... | @@ -12,12 +12,14 @@ export default new Vuetify({ |
| 12 | themes: { | 12 | themes: { |
| 13 | light: { | 13 | light: { |
| 14 | primary: "#7DC1E8", | 14 | primary: "#7DC1E8", |
| 15 | - secondary: "#EBC478", | 15 | + secondary: "#FFCE67", |
| 16 | - accent: "#82B1FF", | 16 | + accent: "#ddeefc", |
| 17 | error: "#FF5252", | 17 | error: "#FF5252", |
| 18 | info: "#2196F3", | 18 | info: "#2196F3", |
| 19 | - success: "#4CAF50", | 19 | + blue: "#173f5f", |
| 20 | - warning: "#FFC107", | 20 | + lightblue: "#72b1e4", |
| 21 | + success: "#2779bd", | ||
| 22 | + warning: "#12283a", | ||
| 21 | grey300: "#eceeef", | 23 | grey300: "#eceeef", |
| 22 | grey500: "#aaaaaa", | 24 | grey500: "#aaaaaa", |
| 23 | grey700: "#5a5a5a", | 25 | grey700: "#5a5a5a", | ... | ... |
| 1 | -import Vue from "vue"; | 1 | +import Vue from 'vue'; |
| 2 | -import Vuex from "vuex"; | 2 | +import Vuex from 'vuex'; |
| 3 | - | ||
| 4 | Vue.use(Vuex); | 3 | Vue.use(Vuex); |
| 5 | 4 | ||
| 6 | export default new Vuex.Store({ | 5 | export default new Vuex.Store({ |
| 7 | state: { | 6 | state: { |
| 8 | - tags: [] | 7 | + tags: [], |
| 8 | + videoList: [], | ||
| 9 | }, | 9 | }, |
| 10 | mutations: { | 10 | mutations: { |
| 11 | setTags(state, tags) { | 11 | setTags(state, tags) { |
| 12 | state.tags = tags; | 12 | state.tags = tags; |
| 13 | - } | 13 | + }, |
| 14 | + setVideoList(state, list) { | ||
| 15 | + state.videoList = list; | ||
| 16 | + }, | ||
| 14 | }, | 17 | }, |
| 15 | getters: { | 18 | getters: { |
| 16 | - getTags: state => { | 19 | + getTags: (state) => { |
| 17 | return state.tags; | 20 | return state.tags; |
| 18 | - } | 21 | + }, |
| 22 | + getList: (state) => { | ||
| 23 | + return state.videoList; | ||
| 24 | + }, | ||
| 19 | }, | 25 | }, |
| 20 | actions: { | 26 | actions: { |
| 21 | - commitSetTags: context => { | 27 | + LoadTags: (context) => { |
| 22 | - return context.commit("setTags"); | 28 | + return context.commit('setTags'); |
| 23 | - } | 29 | + }, |
| 24 | }, | 30 | }, |
| 25 | - modules: {} | 31 | + modules: {}, |
| 26 | }); | 32 | }); | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <v-sheet> | 2 | <v-sheet> |
| 3 | <!-- autocomplete에 저장된 tag 넣어서(동영상 업로드 할 때마다 tag가 저장됨) 자동완성 되게끔.--> | 3 | <!-- autocomplete에 저장된 tag 넣어서(동영상 업로드 할 때마다 tag가 저장됨) 자동완성 되게끔.--> |
| 4 | - <v-text-field | 4 | + <v-layout justify-center> |
| 5 | - class="mx-10 mt-4 mb-5" | 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" | ||
| 6 | prepend-inner-icon="mdi-shape" | 18 | prepend-inner-icon="mdi-shape" |
| 7 | - v-model="search" | 19 | + chips |
| 8 | - label="Tag" | 20 | + multiple |
| 9 | - placeholder="Search Tag" | 21 | + deletable-chips |
| 10 | - type="text" | 22 | + item-color="primary" |
| 11 | - > | 23 | + ></v-autocomplete> |
| 12 | - </v-text-field> | ||
| 13 | <!-- 동영상 리스트 --> | 24 | <!-- 동영상 리스트 --> |
| 14 | - <v-layout justify-center> | 25 | + <div |
| 15 | - <v-row class="mx-5"> | 26 | + v-infinite-scroll="getPost" |
| 16 | - <v-flex | 27 | + infinite-scroll-disabled="busy" |
| 17 | - xs12 | 28 | + infinite-scroll-distance="10" |
| 18 | - sm6 | 29 | + class="mb-2" |
| 19 | - v-for="(post, index) in postList" | ||
| 20 | - :key="index" | ||
| 21 | - class="mx-0" | ||
| 22 | > | 30 | > |
| 23 | - <v-card class="mx-2 my-1"> | 31 | + <v-row class="mx-5"> |
| 24 | - <div>{{ post.title }}1</div> | 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.tag" :key="index">#{{ tag }}</v-chip> | ||
| 50 | + </v-chip-group> | ||
| 25 | </v-card> | 51 | </v-card> |
| 26 | </v-flex> | 52 | </v-flex> |
| 27 | </v-row> | 53 | </v-row> |
| 54 | + </div> | ||
| 55 | + </v-flex> | ||
| 28 | </v-layout> | 56 | </v-layout> |
| 29 | </v-sheet> | 57 | </v-sheet> |
| 30 | </template> | 58 | </template> |
| ... | @@ -36,23 +64,69 @@ export default { | ... | @@ -36,23 +64,69 @@ export default { |
| 36 | data() { | 64 | data() { |
| 37 | return { | 65 | return { |
| 38 | postList: [], | 66 | postList: [], |
| 39 | - search: "", | 67 | + tagsList: [], |
| 68 | + busy: false, | ||
| 40 | params: { | 69 | params: { |
| 41 | - tag: ["", ""], | 70 | + tags: [], |
| 42 | - skip: 0 | 71 | + skip: 0, |
| 72 | + page: 1 | ||
| 43 | } | 73 | } |
| 44 | }; | 74 | }; |
| 45 | }, | 75 | }, |
| 46 | - mounted() { | 76 | + watch: { |
| 77 | + "params.tags"(newValue, oldValue) { | ||
| 78 | + console.log(newValue, oldValue); | ||
| 79 | + this.postList = []; | ||
| 80 | + this.params.page = 1; | ||
| 47 | this.getPost(); | 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(); | ||
| 48 | }, | 93 | }, |
| 49 | methods: { | 94 | methods: { |
| 50 | getPost() { | 95 | getPost() { |
| 96 | + this.busy = true; | ||
| 97 | + this.params.skip = this.setSkip; | ||
| 98 | + if (this.postList.length !== (this.params.page - 1) * 10) { | ||
| 99 | + return; | ||
| 100 | + } | ||
| 101 | + | ||
| 51 | this.$axios | 102 | this.$axios |
| 52 | .get("/home/list", { params: this.params }) | 103 | .get("/home/list", { params: this.params }) |
| 53 | .then(r => { | 104 | .then(r => { |
| 54 | - this.postList = r.data.d; | 105 | + for (let i = 0; i < r.data.d.length; i++) { |
| 55 | - console.log(this.postList); | 106 | + this.postList.push(r.data.d[i]); |
| 107 | + } | ||
| 108 | + this.busy = false; | ||
| 109 | + this.params.page++; | ||
| 110 | + }) | ||
| 111 | + .catch(e => { | ||
| 112 | + console.log(e); | ||
| 113 | + }); | ||
| 114 | + }, | ||
| 115 | + getTags() { | ||
| 116 | + this.$axios | ||
| 117 | + .get("/home/tag") | ||
| 118 | + .then(r => { | ||
| 119 | + this.tagsList = r.data.d; | ||
| 120 | + }) | ||
| 121 | + .catch(e => { | ||
| 122 | + console.log(e); | ||
| 123 | + }); | ||
| 124 | + }, | ||
| 125 | + delete(atc) { | ||
| 126 | + this.$axios | ||
| 127 | + .delete(`/home/${atc._id}`) | ||
| 128 | + .then(() => { | ||
| 129 | + window.location.reload(); | ||
| 56 | }) | 130 | }) |
| 57 | .catch(e => { | 131 | .catch(e => { |
| 58 | console.log(e); | 132 | console.log(e); | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <v-sheet> | 2 | <v-sheet> |
| 3 | <v-layout justify-center> | 3 | <v-layout justify-center> |
| 4 | + <v-overlay :value="loading"> | ||
| 5 | + <v-progress-circular indeterminate size="80"></v-progress-circular> | ||
| 6 | + </v-overlay> | ||
| 4 | <v-flex xs12 sm8 md6> | 7 | <v-flex xs12 sm8 md6> |
| 5 | - <v-row justify="center" class="mx-0 mt-10"> | 8 | + <v-row justify="center" class="mx-0 my-12"> |
| 6 | - <v-icon color="grey500">mdi-power-on</v-icon> | 9 | + <v-icon color="lightblue">mdi-power-on</v-icon> |
| 7 | <div | 10 | <div |
| 8 | style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; " | 11 | style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; " |
| 9 | - > | 12 | + >Upload Video</div> |
| 10 | - Upload Video | 13 | + <v-icon color="lightblue">mdi-power-on</v-icon> |
| 11 | - </div> | ||
| 12 | - <v-icon color="grey500">mdi-power-on</v-icon> | ||
| 13 | </v-row> | 14 | </v-row> |
| 14 | <v-card elevation="0"> | 15 | <v-card elevation="0"> |
| 15 | <v-text-field | 16 | <v-text-field |
| 16 | - class="mx-10 mt-8 mb-6" | 17 | + class="mx-10 mt-12 mb-6" |
| 17 | prepend-inner-icon="mdi-pen" | 18 | prepend-inner-icon="mdi-pen" |
| 18 | v-model="form.title" | 19 | v-model="form.title" |
| 19 | :counter="40" | 20 | :counter="40" |
| 20 | label="Title" | 21 | label="Title" |
| 21 | placeholder="Please input Title" | 22 | placeholder="Please input Title" |
| 22 | type="text" | 23 | type="text" |
| 23 | - > | 24 | + ></v-text-field> |
| 24 | - </v-text-field> | ||
| 25 | <!-- file upload --> | 25 | <!-- file upload --> |
| 26 | - <div class="mx-10"> | 26 | + <div class="mx-10 mb-6"> |
| 27 | <video-upload /> | 27 | <video-upload /> |
| 28 | </div> | 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> | ||
| 29 | <v-card outlined class="pa-2 mx-10" elevation="0" min-height="67"> | 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> | ||
| 30 | <v-chip-group column> | 45 | <v-chip-group column> |
| 31 | <v-chip | 46 | <v-chip |
| 32 | color="secondary" | 47 | color="secondary" |
| 33 | - v-for="(tag, index) in form.tags" | 48 | + v-for="(tag, index) in form.tag" |
| 34 | :key="index" | 49 | :key="index" |
| 35 | @click="deleteTags(index)" | 50 | @click="deleteTags(index)" |
| 36 | > | 51 | > |
| 37 | {{ tag }} | 52 | {{ tag }} |
| 53 | + <v-icon small style="margin-left: 3px; margin-top: -2px">mdi-close-circle</v-icon> | ||
| 38 | </v-chip> | 54 | </v-chip> |
| 39 | </v-chip-group> | 55 | </v-chip-group> |
| 40 | </v-card> | 56 | </v-card> |
| 41 | <v-text-field | 57 | <v-text-field |
| 42 | - class="mx-10 mt-3 mb-5" | 58 | + class="mx-10 my-7" |
| 43 | prepend-inner-icon="mdi-shape" | 59 | prepend-inner-icon="mdi-shape" |
| 44 | v-model="tag" | 60 | v-model="tag" |
| 45 | :counter="20" | 61 | :counter="20" |
| ... | @@ -49,14 +65,11 @@ | ... | @@ -49,14 +65,11 @@ |
| 49 | @click:append="addTags(tag)" | 65 | @click:append="addTags(tag)" |
| 50 | @keydown.enter="addTags(tag)" | 66 | @keydown.enter="addTags(tag)" |
| 51 | type="text" | 67 | type="text" |
| 52 | - > | 68 | + ></v-text-field> |
| 53 | - </v-text-field> | ||
| 54 | </v-card> | 69 | </v-card> |
| 55 | - <v-row justify="center" style="margin-bottom: 30px"> | 70 | + <v-row justify="center" style="margin-top: 30px"> |
| 56 | <v-btn elevation="0" large color="primary" @click="submit()"> | 71 | <v-btn elevation="0" large color="primary" @click="submit()"> |
| 57 | - <span style="font-size: 24px; font-weight: 300; letter-spacing: 2px" | 72 | + <span style="font-size: 24px; font-weight: 300; letter-spacing: 2px">Upload</span> |
| 58 | - >Upload</span | ||
| 59 | - > | ||
| 60 | </v-btn> | 73 | </v-btn> |
| 61 | </v-row> | 74 | </v-row> |
| 62 | </v-flex> | 75 | </v-flex> |
| ... | @@ -77,7 +90,7 @@ export default { | ... | @@ -77,7 +90,7 @@ export default { |
| 77 | form: { | 90 | form: { |
| 78 | title: "", | 91 | title: "", |
| 79 | videoUrl: "", | 92 | videoUrl: "", |
| 80 | - tags: [ | 93 | + tag: [ |
| 81 | "Work", | 94 | "Work", |
| 82 | "Home Improvement", | 95 | "Home Improvement", |
| 83 | "Vacation", | 96 | "Vacation", |
| ... | @@ -90,20 +103,24 @@ export default { | ... | @@ -90,20 +103,24 @@ export default { |
| 90 | ] | 103 | ] |
| 91 | }, | 104 | }, |
| 92 | successDialog: false, | 105 | successDialog: false, |
| 93 | - errorDialog: false | 106 | + errorDialog: false, |
| 107 | + loading: false | ||
| 94 | }; | 108 | }; |
| 95 | }, | 109 | }, |
| 96 | - mounted() { | 110 | + created() { |
| 97 | - this.form.tags = this.$store.getters.getTags; | 111 | + this.form.tag = []; |
| 98 | }, | 112 | }, |
| 113 | + | ||
| 99 | methods: { | 114 | methods: { |
| 100 | submit() { | 115 | submit() { |
| 101 | - if (this.form.tags.length || this.form.title) { | 116 | + if (!(this.form.tag.length && this.form.title)) { |
| 102 | this.errorDialog = true; | 117 | this.errorDialog = true; |
| 118 | + return; | ||
| 103 | } else { | 119 | } else { |
| 104 | this.$axios | 120 | this.$axios |
| 105 | .post("/upload/post", this.form) | 121 | .post("/upload/post", this.form) |
| 106 | .then(r => { | 122 | .then(r => { |
| 123 | + window.location.reload(); | ||
| 107 | console.log(r); | 124 | console.log(r); |
| 108 | this.successDialog = true; | 125 | this.successDialog = true; |
| 109 | }) | 126 | }) |
| ... | @@ -114,25 +131,25 @@ export default { | ... | @@ -114,25 +131,25 @@ export default { |
| 114 | } | 131 | } |
| 115 | }, | 132 | }, |
| 116 | deleteTags(index) { | 133 | deleteTags(index) { |
| 117 | - for (let i = 0; i < this.form.tags.length; i++) { | 134 | + for (let i = 0; i < this.form.tag.length; i++) { |
| 118 | - const element = this.form.tags[i]; | 135 | + const element = this.form.tag[i]; |
| 119 | - if (this.form.tags[index] === element) { | 136 | + if (this.form.tag[index] === element) { |
| 120 | - this.form.tags[i] = this.form.tags[this.form.tags.length - 1]; | 137 | + this.form.tag[i] = this.form.tag[this.form.tag.length - 1]; |
| 121 | break; | 138 | break; |
| 122 | } | 139 | } |
| 123 | } | 140 | } |
| 124 | - this.form.tags.pop(); | 141 | + this.form.tag.pop(); |
| 125 | }, | 142 | }, |
| 126 | addTags(tag) { | 143 | addTags(tag) { |
| 127 | let i; | 144 | let i; |
| 128 | let check = true; | 145 | let check = true; |
| 129 | - for (i = 0; i < this.form.tags.length; i++) { | 146 | + for (i = 0; i < this.form.tag.length; i++) { |
| 130 | - const element = this.form.tags[i]; | 147 | + const element = this.form.tag[i]; |
| 131 | if (tag === element) { | 148 | if (tag === element) { |
| 132 | check = false; | 149 | check = false; |
| 133 | } | 150 | } |
| 134 | } | 151 | } |
| 135 | - if (tag && check) this.form.tags.push(tag); | 152 | + if (tag && check) this.form.tag.push(tag); |
| 136 | this.tag = ""; | 153 | this.tag = ""; |
| 137 | } | 154 | } |
| 138 | } | 155 | } | ... | ... |
-
Please register or login to post a comment