Merge branch 'dev' of Devowo/Mpoknimu into master
This commit is contained in:
Muhammad Iqbal Rifai
Gitea
commit
bb2c6ddacf
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["env", {
|
||||||
|
"modules": false,
|
||||||
|
"targets": {
|
||||||
|
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
"stage-2"
|
||||||
|
],
|
||||||
|
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = false
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
"plugins": {
|
||||||
|
"postcss-import": {},
|
||||||
|
"postcss-url": {},
|
||||||
|
// to edit target browsers: use "browserslist" field in package.json
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
# client
|
||||||
|
|
||||||
|
> A Vue.js project
|
||||||
|
|
||||||
|
## Build Setup
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
# install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# serve with hot reload at localhost:8080
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# build for production with minification
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# build for production and view the bundle analyzer report
|
||||||
|
npm run build --report
|
||||||
|
```
|
||||||
|
|
||||||
|
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
'use strict'
|
||||||
|
const merge = require('webpack-merge')
|
||||||
|
const prodEnv = require('./prod.env')
|
||||||
|
|
||||||
|
module.exports = merge(prodEnv, {
|
||||||
|
NODE_ENV: '"development"'
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
'use strict'
|
||||||
|
// Template version: 1.3.1
|
||||||
|
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||||
|
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
dev: {
|
||||||
|
|
||||||
|
// Paths
|
||||||
|
assetsSubDirectory: 'static',
|
||||||
|
assetsPublicPath: '/',
|
||||||
|
proxyTable: {},
|
||||||
|
|
||||||
|
// Various Dev Server settings
|
||||||
|
host: 'localhost', // can be overwritten by process.env.HOST
|
||||||
|
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||||
|
autoOpenBrowser: false,
|
||||||
|
errorOverlay: true,
|
||||||
|
notifyOnErrors: true,
|
||||||
|
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Source Maps
|
||||||
|
*/
|
||||||
|
|
||||||
|
// https://webpack.js.org/configuration/devtool/#development
|
||||||
|
devtool: 'cheap-module-eval-source-map',
|
||||||
|
|
||||||
|
// If you have problems debugging vue-files in devtools,
|
||||||
|
// set this to false - it *may* help
|
||||||
|
// https://vue-loader.vuejs.org/en/options.html#cachebusting
|
||||||
|
cacheBusting: true,
|
||||||
|
|
||||||
|
cssSourceMap: true
|
||||||
|
},
|
||||||
|
|
||||||
|
build: {
|
||||||
|
// Template for index.html
|
||||||
|
index: path.resolve(__dirname, '../dist/index.html'),
|
||||||
|
|
||||||
|
// Paths
|
||||||
|
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||||
|
assetsSubDirectory: 'static',
|
||||||
|
assetsPublicPath: '/',
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Source Maps
|
||||||
|
*/
|
||||||
|
|
||||||
|
productionSourceMap: true,
|
||||||
|
// https://webpack.js.org/configuration/devtool/#production
|
||||||
|
devtool: '#source-map',
|
||||||
|
|
||||||
|
// Gzip off by default as many popular static hosts such as
|
||||||
|
// Surge or Netlify already gzip all static assets for you.
|
||||||
|
// Before setting to `true`, make sure to:
|
||||||
|
// npm install --save-dev compression-webpack-plugin
|
||||||
|
productionGzip: false,
|
||||||
|
productionGzipExtensions: ['js', 'css'],
|
||||||
|
|
||||||
|
// Run the build command with an extra argument to
|
||||||
|
// View the bundle analyzer report after build finishes:
|
||||||
|
// `npm run build --report`
|
||||||
|
// Set to `true` or `false` to always turn it on or off
|
||||||
|
bundleAnalyzerReport: process.env.npm_config_report
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
'use strict'
|
||||||
|
module.exports = {
|
||||||
|
NODE_ENV: '"production"'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
https://alligator.io/vuejs/rest-api-axios/
|
||||||
|
https://alligator.io/vuejs/component-lifecycle/
|
||||||
|
https://alligator.io/vuejs/lazy-loading-routes/
|
||||||
|
https://alligator.io/vuejs/progressive-image-loader/
|
||||||
|
http://vuejs-templates.github.io/webpack/static.html
|
||||||
|
https://jsfiddle.net/mani04/dLnz4rbL/
|
||||||
|
https://jsfiddle.net/c1ghkw2p/
|
||||||
|
https://stackoverflow.com/questions/35596389/vuejs-how-to-make-pagination-with-limiter-and-range
|
||||||
|
https://m.dotdev.co/simple-vue-js-pagination-with-laravel-33b7cfbb5ccc
|
||||||
|
|
||||||
|
https://rollbar.com/blog/top-10-javascript-errors/
|
||||||
|
|
||||||
|
|
||||||
|
https://github.com/vuejs/Discussion/issues/214
|
||||||
|
https://philipwalton.github.io/solved-by-flexbox/
|
||||||
|
//webs anime
|
||||||
|
http://youngjump.jp/shinman/
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>client</title>
|
||||||
|
<!-- <link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css"> -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<section class="links">
|
||||||
|
<a href="#">Start</a>
|
||||||
|
<a href="#">Blog</a>
|
||||||
|
<a href="#">Project</a>
|
||||||
|
<a href="#">Contact</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="social">
|
||||||
|
<a href="#">FB</a>
|
||||||
|
<a href="#">TW</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"name": "client",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A Vue.js project",
|
||||||
|
"author": "Hushino <frostshock@outlook.com>",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||||
|
"start": "npm run dev",
|
||||||
|
"build": "node build/build.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.17.1",
|
||||||
|
"firebase": "^4.9.0",
|
||||||
|
"firebaseui": "^2.5.1",
|
||||||
|
"vue": "^2.5.13",
|
||||||
|
"vue-router": "^3.0.1",
|
||||||
|
"vue-script2": "^2.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^7.1.2",
|
||||||
|
"babel-core": "^6.22.1",
|
||||||
|
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||||
|
"babel-loader": "^7.1.1",
|
||||||
|
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||||
|
"babel-plugin-transform-runtime": "^6.22.0",
|
||||||
|
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||||
|
"babel-preset-env": "^1.3.2",
|
||||||
|
"babel-preset-stage-2": "^6.22.0",
|
||||||
|
"chalk": "^2.0.1",
|
||||||
|
"copy-webpack-plugin": "^4.0.1",
|
||||||
|
"css-loader": "^0.28.0",
|
||||||
|
"extract-text-webpack-plugin": "^3.0.0",
|
||||||
|
"file-loader": "^1.1.4",
|
||||||
|
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||||
|
"html-webpack-plugin": "^2.30.1",
|
||||||
|
"node-notifier": "^5.1.2",
|
||||||
|
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||||
|
"ora": "^1.2.0",
|
||||||
|
"portfinder": "^1.0.13",
|
||||||
|
"postcss-import": "^11.0.0",
|
||||||
|
"postcss-loader": "^2.0.8",
|
||||||
|
"postcss-url": "^7.2.1",
|
||||||
|
"rimraf": "^2.6.0",
|
||||||
|
"semver": "^5.3.0",
|
||||||
|
"shelljs": "^0.7.6",
|
||||||
|
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||||
|
"url-loader": "^0.5.8",
|
||||||
|
"vue-loader": "^13.3.0",
|
||||||
|
"vue-style-loader": "^3.0.1",
|
||||||
|
"vue-template-compiler": "^2.5.2",
|
||||||
|
"webpack": "^3.10.0",
|
||||||
|
"webpack-bundle-analyzer": "^2.9.0",
|
||||||
|
"webpack-dev-server": "^2.9.1",
|
||||||
|
"webpack-merge": "^4.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 8.0.0",
|
||||||
|
"npm": ">= 4.0.0"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not ie <= 10"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div class="contenedor" >
|
||||||
|
<div id="app">
|
||||||
|
<header>
|
||||||
|
<div class="logo">
|
||||||
|
<router-link to='/' exact> Home</router-link>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<router-link to='/' exact> Start</router-link>
|
||||||
|
<router-link to='/series' exact> series</router-link>
|
||||||
|
<router-link to='/user' exact> user</router-link>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import User from "./components/User";
|
||||||
|
import Serie from "./components/Series";
|
||||||
|
import InfoSerie from "./components/InfoSerie";
|
||||||
|
import Ver from "./components/Ver";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
components: {
|
||||||
|
User,
|
||||||
|
Serie,
|
||||||
|
InfoSerie,
|
||||||
|
Ver
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,280 @@
|
||||||
|
/*!
|
||||||
|
STYLE GUIDE
|
||||||
|
1. NAV-BAR
|
||||||
|
2. Series
|
||||||
|
3.
|
||||||
|
*/
|
||||||
|
|
||||||
|
#app {
|
||||||
|
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-shadow: rgb(0, 0, 0) 0px 1px 1px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caps {
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.episodeimage {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
width: auto;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-width: 220px;
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
/* videoplayer */
|
||||||
|
.container {
|
||||||
|
width: 880px;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementoVideo {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elemento {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
margin: 10px;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-items: baseline;
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementoAnime {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
margin: 10px;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
/* height: auto;
|
||||||
|
flex-basis: auto;*/
|
||||||
|
flex-flow: column wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* que todos abarquen el 100%
|
||||||
|
flex-grow:1;*/
|
||||||
|
/* align-content: center; */
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementoDash {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
margin: 10px;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
/* height: auto;
|
||||||
|
flex-basis: auto;*/
|
||||||
|
flex-flow: column wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* que todos abarquen el 100%
|
||||||
|
flex-grow:1;*/
|
||||||
|
/* align-content: center; */
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sada1 {
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.contenedor {
|
||||||
|
background: #212121;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
/* Flexbox */
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: #263238;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
/* Flexbox */
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo img {
|
||||||
|
width: 50px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
|
width: 50%;
|
||||||
|
/* Flexbox */
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a {
|
||||||
|
background: #455a64;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
/* Flexbox */
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav a:hover {
|
||||||
|
background: #78909c;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: #263238;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
/* Flexbox */
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .links {
|
||||||
|
background: #455a64;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .links a {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .links a:hover {
|
||||||
|
background: #78909c;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social {
|
||||||
|
background: #455a64;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.contenedor {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .logo {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.pagination a {
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a.active {
|
||||||
|
background-color: #455a64;
|
||||||
|
color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination a:hover:not(.active) {
|
||||||
|
background-color: #78909c;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.sada1 {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
footer {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Series */
|
||||||
|
|
||||||
|
#dash {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Auth</h1>
|
||||||
|
<div id="firebaseui-auth-container"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import firebase from "firebase";
|
||||||
|
import firebaseui from "firebaseui";
|
||||||
|
import { config } from "../helpers/firebaseConfig";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "auth",
|
||||||
|
mounted() {
|
||||||
|
var uiConfig = {
|
||||||
|
signInSuccessUrl: "/success",
|
||||||
|
signInOptions: [
|
||||||
|
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
|
||||||
|
firebase.auth.EmailAuthProvider.PROVIDER_ID
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var ui = new firebaseui.auth.AuthUI(firebase.auth());
|
||||||
|
ui.start("#firebaseui-auth-container", uiConfig);
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Success</h1>
|
||||||
|
<button @click='logOut'>Logout</button>
|
||||||
|
<!-- <img :src="photo" alt="photo"> -->
|
||||||
|
<p>{{name}}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import firebase from "firebase";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: "",
|
||||||
|
photo: "",
|
||||||
|
user: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.user = firebase.auth().currentUser;
|
||||||
|
if (this.user) {
|
||||||
|
this.name = this.user.displayName;
|
||||||
|
this.photo = this.user.photoURL;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
logOut() {
|
||||||
|
firebase.auth().signOut();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<div class="contenedor">
|
||||||
|
<div class="elemento">
|
||||||
|
|
||||||
|
<router-link tag="div" class="caps" v-bind:to="{name:'Ver',params: {slug: home.slug}}"
|
||||||
|
v-for="home in episodes" :key="home.title" >
|
||||||
|
<a :href="(`${home.imageCap}`)"><img class="episodeimage" :src="(`${home.imageCap}`)"></a>
|
||||||
|
<h4>
|
||||||
|
{{ home.title | normalize | suspensivos }}
|
||||||
|
</h4>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "home",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
episodes: [],
|
||||||
|
errors: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
try {
|
||||||
|
const response = await axios
|
||||||
|
.get("http://localhost:9000/")
|
||||||
|
.then(response => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.episodes = response.data;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
this.errors.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<div class="anime">
|
||||||
|
<h3>Info Anime</h3>
|
||||||
|
<div><p><strong>Anime Name: </strong>{{ episodes.title }}</p></div>
|
||||||
|
<h1>Episode</h1>
|
||||||
|
<ul>
|
||||||
|
<li v-for="episode in episodes.episodes" :key="episode.episodes">
|
||||||
|
{{ episode.slug }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h1>Genre</h1>
|
||||||
|
<ul>
|
||||||
|
<li v-for="episode in episodes.tags" :key="episode.tags">
|
||||||
|
{{ episode }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="errors && errors.length">
|
||||||
|
<li v-for="error of errors" :key="error.errors">
|
||||||
|
{{error.message}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button @click="volver">return</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "anime",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
episodes: [],
|
||||||
|
errors: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
volver(){
|
||||||
|
this.$router.push({name: 'Series'});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* usarlo junto a child-route
|
||||||
|
watch: {
|
||||||
|
async $route() {
|
||||||
|
let slug = this.$route.params.slug;
|
||||||
|
try {
|
||||||
|
const response = await axios
|
||||||
|
.get("http://localhost:9000/series/1/" + slug)
|
||||||
|
.then(response => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.episodes = response.data;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
this.errors.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, */
|
||||||
|
async created() {
|
||||||
|
let slug = this.$route.params.slug;
|
||||||
|
try {
|
||||||
|
const response = await axios
|
||||||
|
.get("http://localhost:9000/series/1/" + slug)
|
||||||
|
.then(response => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.episodes = response.data;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
this.errors.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template >
|
||||||
|
<div class="contenedor">
|
||||||
|
<template v-if="isloaded===false">
|
||||||
|
<p>Loading Data</p>
|
||||||
|
</template>
|
||||||
|
<div class="elemento">
|
||||||
|
<router-link tag="div" class="sada1" v-bind:to="{name:'InfoSerie',params: {slug: serie.slug}}"
|
||||||
|
v-for="serie in paginate" :key="serie.title" >
|
||||||
|
<a :href="(`${serie.slug}`)" class="card-link"> <img class="image" id="image-home" :src="(`${serie.cover}`)" alt="Card image cap"></a>
|
||||||
|
<h4 class="card-title">
|
||||||
|
{{ serie.title | normalize | suspensivos }}
|
||||||
|
</h4>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="pagination">
|
||||||
|
<li v-for="pageNumber in totalPages" v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages || pageNumber == 1" :key="pageNumber">
|
||||||
|
<a ref="myBtn" id="myBtn" href="#" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }}</a >
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<ul v-if="errors && errors.length">
|
||||||
|
<li v-for="error of errors" :key="error.errors">
|
||||||
|
{{error.message}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
created() {
|
||||||
|
this.getSeries();
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
serieUrl: "http://localhost:9000/series/1",
|
||||||
|
series: [],
|
||||||
|
errors: [],
|
||||||
|
currentPage: 1,
|
||||||
|
itemsPerPage: 3,
|
||||||
|
resultCount: 0,
|
||||||
|
isloaded: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
totalPages: function() {
|
||||||
|
return Math.ceil(this.resultCount / this.itemsPerPage);
|
||||||
|
},
|
||||||
|
paginate: function() {
|
||||||
|
if (this.isloaded === true) {
|
||||||
|
//middleware funciona igual sin el
|
||||||
|
if (!this.series || this.series.length != this.series.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.resultCount = this.series.length;
|
||||||
|
if (this.currentPage >= this.totalPages) {
|
||||||
|
this.currentPage = this.totalPages;
|
||||||
|
}
|
||||||
|
|
||||||
|
const index = this.currentPage * this.itemsPerPage - this.itemsPerPage;
|
||||||
|
return this.series.slice(index, index + this.itemsPerPage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
paginate: function(val) {
|
||||||
|
/* alert("yes, computed property changed"); */
|
||||||
|
console.log("changed");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
setPage: function(pageNumber) {
|
||||||
|
this.currentPage = pageNumber;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getSeries() {
|
||||||
|
let self = this;
|
||||||
|
try {
|
||||||
|
const response = await axios
|
||||||
|
.get(this.serieUrl, { params: this.serieData })
|
||||||
|
.then(response => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.series = response.data;
|
||||||
|
self.isloaded = true;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
this.errors.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
.current {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
margin: 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.first::after {
|
||||||
|
content: "...";
|
||||||
|
}
|
||||||
|
|
||||||
|
a.last::before {
|
||||||
|
content: "...";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div class="user">
|
||||||
|
<input type="text" name="name" v-model="name">
|
||||||
|
<input type="text" name="lasname" v-model="lastname">
|
||||||
|
<span v-text="fullname"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'user',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
lastname: '',
|
||||||
|
title: '<h1>user view</h1>'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
fullname : function(){
|
||||||
|
return this.name+ ' ' +this.lastname;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div class="show">
|
||||||
|
<div class="elementoVideo">
|
||||||
|
<div class="container" style="">
|
||||||
|
<div class="row">
|
||||||
|
<h1>
|
||||||
|
{{ show.title }} {{ show.chapter }}
|
||||||
|
</h1>
|
||||||
|
<div class="media80">
|
||||||
|
<div id="myElement"></div>
|
||||||
|
<!-- https://www.w3schools.com/html/mov_bbb.mp4 -->
|
||||||
|
<script2 src="https://content.jwplatform.com/libraries/bfIbW5Pe.js"></script2>
|
||||||
|
<script2>
|
||||||
|
var playerInstance = jwplayer("myElement");
|
||||||
|
playerInstance.setup({
|
||||||
|
file:"../../static/citrus5.mp4",
|
||||||
|
width: "100%",
|
||||||
|
image: "../../static/image.jpg",
|
||||||
|
aspectratio: "16:9",
|
||||||
|
playbackRateControls: [0.25, 1, 1.25, 2],
|
||||||
|
preload: "metadata"
|
||||||
|
});
|
||||||
|
</script2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul v-if="errors && errors.length">
|
||||||
|
<li v-for="error of errors" :key="error">
|
||||||
|
{{error.message}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
show: [],
|
||||||
|
errors: []
|
||||||
|
}),
|
||||||
|
async created() {
|
||||||
|
let slug = this.$route.params.slug;
|
||||||
|
try {
|
||||||
|
const response = await axios
|
||||||
|
.get("http://localhost:9000/" + slug)
|
||||||
|
.then(response => {
|
||||||
|
console.log(response.data);
|
||||||
|
this.show = response.data;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
this.errors.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
export const config = {
|
||||||
|
// Initialize Firebase
|
||||||
|
|
||||||
|
apiKey: "AIzaSyBt1o_ptz8WW6eF-Sa2ybTjdm_BdO0D9WI",
|
||||||
|
authDomain: "anime-999e6.firebaseapp.com",
|
||||||
|
databaseURL: "https://anime-999e6.firebaseio.com",
|
||||||
|
projectId: "anime-999e6",
|
||||||
|
storageBucket: "anime-999e6.appspot.com",
|
||||||
|
messagingSenderId: "389822907706"
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
// The Vue build version to load with the `import` command
|
||||||
|
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App";
|
||||||
|
import router from "./router";
|
||||||
|
import axios from "axios";
|
||||||
|
import firebase from "firebase";
|
||||||
|
import firebaseui from "firebaseui";
|
||||||
|
import { config } from "./helpers/firebaseConfig";
|
||||||
|
import "./assets/css/app.css";
|
||||||
|
import AsyncMethods from "vue-async-methods";
|
||||||
|
|
||||||
|
Vue.use(AsyncMethods);
|
||||||
|
Vue.config.productionTip = true;
|
||||||
|
let app;
|
||||||
|
|
||||||
|
Vue.filter("suspensivos", function(texto) {
|
||||||
|
return texto.substring(0, 18) + "...";
|
||||||
|
});
|
||||||
|
Vue.filter("normalize", function(texto) {
|
||||||
|
return texto.toUpperCase();
|
||||||
|
});
|
||||||
|
|
||||||
|
Vue.use(require("vue-script2"));
|
||||||
|
/* eslint-disable no-new */
|
||||||
|
firebase.initializeApp(config);
|
||||||
|
firebase.auth().onAuthStateChanged(function(user) {
|
||||||
|
if (!app) {
|
||||||
|
/* eslint-disable no-new */
|
||||||
|
app = new Vue({
|
||||||
|
el: "#app",
|
||||||
|
template: "<App/>",
|
||||||
|
components: { App },
|
||||||
|
router
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* new Vue({
|
||||||
|
el: "#app",
|
||||||
|
router,
|
||||||
|
created() {
|
||||||
|
firebase.initializeApp(config);
|
||||||
|
firebase.auth().onAuthStateChanged((user) => {
|
||||||
|
if (user) {
|
||||||
|
this.$router.push('/success')
|
||||||
|
}else {
|
||||||
|
this.$router.push('/auth')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
components: { App },
|
||||||
|
template: "<App/>"
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
template: `
|
||||||
|
<div id='app'>
|
||||||
|
<ul>
|
||||||
|
<li> <router-link to='/' > App</router-link> </li>
|
||||||
|
<li> <router-link to='/home' > home</router-link> </li>
|
||||||
|
<li> <router-link to='/user' > user</router-link> </li>
|
||||||
|
</ul>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}).$mount('#app')
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import Router from "vue-router";
|
||||||
|
import Home from "@/components/Home";
|
||||||
|
import User from "@/components/User";
|
||||||
|
import Serie from "@/components/Series";
|
||||||
|
import InfoSerie from "@/components/InfoSerie";
|
||||||
|
import Ver from "@/components/Ver";
|
||||||
|
import AuthSuccess from "@/components/AuthSuccess";
|
||||||
|
import Auth from "@/components/Auth";
|
||||||
|
import firebase from "firebase";
|
||||||
|
|
||||||
|
Vue.use(Router);
|
||||||
|
let router = new Router({
|
||||||
|
/* export default new Router({ */
|
||||||
|
mode: "history",
|
||||||
|
base: __dirname,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "Home",
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/user",
|
||||||
|
name: "User",
|
||||||
|
component: User
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/series",
|
||||||
|
name: "Series",
|
||||||
|
component: Serie/* ,
|
||||||
|
meta: { requiresAuth: true } */
|
||||||
|
},
|
||||||
|
{ path: "/series/:slug", component: InfoSerie, name: "InfoSeries" },
|
||||||
|
{ path: "/ver/:slug", component: Ver, name: "Ver" },
|
||||||
|
{ path: "/auth", component: Auth },
|
||||||
|
{ path: "/success", component: AuthSuccess }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
let currentUser = firebase.auth().currentUser;
|
||||||
|
let requiresAuth = to.matched.some(record => record.meta.requiresAuth);
|
||||||
|
|
||||||
|
if (requiresAuth && !currentUser) next('auth')
|
||||||
|
else if (!requiresAuth && currentUser) next('hello')
|
||||||
|
else next()
|
||||||
|
}) */
|
||||||
|
export default router;
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue