Upload files to 'client/src/components'
This commit is contained in:
Muhammad Iqbal Rifai
parent
6e72876ebd
commit
94c68393cf
|
|
@ -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>
|
||||
Loading…
Reference in New Issue