WASAPhoto/webui/src/views/HomeView.vue

93 lines
2.6 KiB
Vue
Raw Normal View History

2022-11-24 14:46:29 +01:00
<script>
export default {
2022-12-15 14:46:27 +01:00
data: function () {
2022-11-24 14:46:29 +01:00
return {
loading: false,
stream_data: [],
data_ended: false,
start_idx: 0,
limit: 1,
loadingError: false,
2022-11-24 14:46:29 +01:00
}
},
methods: {
async refresh() {
// this way we are sure that we fill the first page
// 450 is a bit more of the max height of a post
// todo: may not work in 4k screens :/
this.limit = Math.round(window.innerHeight / 450);
this.start_idx = 0;
this.data_ended = false;
this.stream_data = [];
this.loadContent();
},
async loadContent() {
2022-11-24 14:46:29 +01:00
this.loading = true;
let response = await this.$axios.get("/stream?start_index=" + this.start_idx + "&limit=" + this.limit);
2022-12-15 14:46:27 +01:00
if (response == null) {
this.loading = false
this.loadingError = true
return
2022-11-24 14:46:29 +01:00
}
if (response.data.length == 0 || response.data.length < this.limit) this.data_ended = true;
else this.stream_data = this.stream_data.concat(response.data);
this.loading = false;
2022-11-24 14:46:29 +01:00
},
2022-12-15 14:46:27 +01:00
loadMore() {
this.start_idx += this.limit
this.loadContent()
},
scroll() {
window.onscroll = () => {
2022-12-15 14:46:27 +01:00
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight >= document.documentElement.offsetHeight - 5
if (bottomOfWindow && !this.data_ended) {
2022-12-15 14:46:27 +01:00
this.loadMore()
}
}
},
2022-11-24 14:46:29 +01:00
},
mounted() {
this.scroll();
this.refresh();
2022-11-24 14:46:29 +01:00
}
}
</script>
<template>
2022-12-10 01:02:48 +01:00
<div class="mt-4">
2022-12-09 03:53:16 +01:00
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xl-6 col-lg-9">
2022-12-10 01:02:48 +01:00
<h3 class="card-title border-bottom mb-4 pb-2 text-center">Your daily WASAStream!</h3>
2022-12-09 03:53:16 +01:00
2022-12-10 01:02:48 +01:00
<div v-if="(stream_data.length == 0)" class="alert alert-secondary text-center" role="alert">
There's nothing here 😢
<br />Why don't you start following somebody? 👻
</div>
2022-12-09 03:53:16 +01:00
<div id="main-content" v-for="item of stream_data">
2022-12-15 14:46:27 +01:00
<PostCard :user_id="item.user_id" :photo_id="item.photo_id" :name="item.name" :date="item.date"
:comments="item.comments" :likes="item.likes" :liked="item.liked" />
2022-12-09 03:53:16 +01:00
</div>
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
2022-12-10 01:02:48 +01:00
This is the end of your stream. Hooray! 👻
</div>
2022-12-09 03:53:16 +01:00
<LoadingSpinner :loading="loading" /><br />
2022-12-15 14:46:27 +01:00
<div class="d-flex align-items-center flex-column">
<button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button>
<button v-if="(!data_ended && !loading)" @click="loadMore" class="btn btn-secondary py-1 mb-5"
style="border-radius: 15px">Load more</button>
</div>
2022-12-09 03:53:16 +01:00
</div>
</div>
</div>
2022-11-24 14:46:29 +01:00
</div>
</template>