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