mirror of
https://github.com/notherealmarco/WASAPhoto.git
synced 2025-03-14 06:06:15 +01:00
Add spinner when loading images, increase timeout to 20s
This commit is contained in:
parent
d25bf6a53e
commit
f6a61e3dd2
4 changed files with 98 additions and 76 deletions
10
webui/node_modules/.vite/deps/_metadata.json
generated
vendored
10
webui/node_modules/.vite/deps/_metadata.json
generated
vendored
|
|
@ -1,23 +1,23 @@
|
|||
{
|
||||
"hash": "0c3e4771",
|
||||
"browserHash": "01248067",
|
||||
"hash": "80447977",
|
||||
"browserHash": "b98131b5",
|
||||
"optimized": {
|
||||
"axios": {
|
||||
"src": "../../axios/index.js",
|
||||
"file": "axios.js",
|
||||
"fileHash": "d8d02cf0",
|
||||
"fileHash": "6b5eae63",
|
||||
"needsInterop": true
|
||||
},
|
||||
"vue": {
|
||||
"src": "../../vue/dist/vue.runtime.esm-bundler.js",
|
||||
"file": "vue.js",
|
||||
"fileHash": "f8034b26",
|
||||
"fileHash": "de50261f",
|
||||
"needsInterop": false
|
||||
},
|
||||
"vue-router": {
|
||||
"src": "../../vue-router/dist/vue-router.mjs",
|
||||
"file": "vue-router.js",
|
||||
"fileHash": "b4ca170f",
|
||||
"fileHash": "4cad12d6",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<script>
|
||||
export default {
|
||||
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
imageSrc: "",
|
||||
imageReady: false,
|
||||
post_liked: this.liked,
|
||||
post_like_cnt: this.likes,
|
||||
post_comments_cnt: this.comments,
|
||||
comments_data: [],
|
||||
comments_start_idx: 0,
|
||||
comments_shown: false,
|
||||
|
|
@ -13,6 +15,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
visitUser() {
|
||||
this.$router.push({ path: "/profile/" + this.user_id });
|
||||
},
|
||||
postComment() {
|
||||
this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
|
||||
"comment": this.commentMsg,
|
||||
|
|
@ -20,21 +25,33 @@ export default {
|
|||
}).then(response => {
|
||||
this.commentMsg = "";
|
||||
|
||||
this.post_comments_cnt++;
|
||||
this.comments_data = [];
|
||||
this.comments_start_idx = 0;
|
||||
this.getComments();
|
||||
})
|
||||
},
|
||||
showHideComments() {
|
||||
// If comments are already shown, hide them and reset the data
|
||||
if (this.comments_shown) {
|
||||
this.comments_shown = false;
|
||||
this.comments_data = [];
|
||||
this.comments_start_idx = 0;
|
||||
return;
|
||||
}
|
||||
this.getComments();
|
||||
},
|
||||
getComments() {
|
||||
// Get comments from the server
|
||||
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id +
|
||||
"/comments?limit=2&start_index=" + this.comments_start_idx).then(response => {
|
||||
"/comments?limit=2&start_index=" + this.comments_start_idx).then(response => {
|
||||
|
||||
if (response.data.length == 0) this.data_ended = true;
|
||||
else this.comments_start_idx += 2;
|
||||
if (response.data.length == 0) this.data_ended = true;
|
||||
else this.comments_start_idx += 2;
|
||||
|
||||
this.comments_data = this.comments_data.concat(response.data);
|
||||
this.comments_shown = true;
|
||||
})
|
||||
this.comments_data = this.comments_data.concat(response.data);
|
||||
this.comments_shown = true;
|
||||
})
|
||||
},
|
||||
like() {
|
||||
this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
|
||||
|
|
@ -51,37 +68,49 @@ export default {
|
|||
},
|
||||
|
||||
created() {
|
||||
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
|
||||
responseType: 'arraybuffer'
|
||||
}).then(response => {
|
||||
const img = document.createElement('img');
|
||||
img.src = URL.createObjectURL(new Blob([response.data]));
|
||||
img.classList.add("card-img-top");
|
||||
this.$refs.imageContainer.appendChild(img);
|
||||
});
|
||||
},
|
||||
}
|
||||
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
|
||||
responseType: 'arraybuffer'
|
||||
}).then(response => {
|
||||
const img = document.createElement('img');
|
||||
img.src = URL.createObjectURL(new Blob([response.data]));
|
||||
img.classList.add("card-img-top");
|
||||
this.$refs.imageContainer.appendChild(img);
|
||||
this.imageReady = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card mb-5">
|
||||
<div ref="imageContainer"></div>
|
||||
<div class="card mb-5">
|
||||
<div ref="imageContainer">
|
||||
<div v-if="!imageReady" class="mt-3 mb-3">
|
||||
<LoadingSpinner :loading="!imageReady" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ name }}</h5>
|
||||
<h5 @click="visitUser" class="card-title">{{ name }}</h5>
|
||||
<p class="card-text">{{ new Date(Date.parse(date)) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<div class="card-body d-flex justify-content-end" style="display: inline-flex"> <!-- not quite sure flex is the right property, but it works -->
|
||||
<a @click="getComments"><h5><i class="card-title bi bi-chat-right pe-1"></i></h5></a>
|
||||
<h6 class="card-text d-flex align-items-end text-muted">{{ comments }}</h6>
|
||||
<a v-if="!post_liked" @click="like"><h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5></a>
|
||||
<a v-if="post_liked" @click="unlike"><h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5></a>
|
||||
<div class="card-body d-flex justify-content-end" style="display: inline-flex">
|
||||
<!-- not quite sure flex is the right property, but it works -->
|
||||
<a @click="showHideComments">
|
||||
<h5><i class="card-title bi bi-chat-right pe-1"></i></h5>
|
||||
</a>
|
||||
<h6 class="card-text d-flex align-items-end text-muted">{{ post_comments_cnt }}</h6>
|
||||
<a v-if="!post_liked" @click="like">
|
||||
<h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5>
|
||||
</a>
|
||||
<a v-if="post_liked" @click="unlike">
|
||||
<h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5>
|
||||
</a>
|
||||
<h6 class="card-text d-flex align-items-end text-muted">{{ post_like_cnt }}</h6>
|
||||
<h5></h5>
|
||||
</div>
|
||||
|
|
@ -104,7 +133,8 @@ export default {
|
|||
<input v-model="commentMsg" type="text" class="form-control" placeholder="Commenta...">
|
||||
</div>
|
||||
<div class="col-1 card-body border-top text-end ps-0 d-flex">
|
||||
<button style="width: 100%" type="button" class="btn btn-primary" @click="postComment">Go</button>
|
||||
<button style="width: 100%" type="button" class="btn btn-primary"
|
||||
@click="postComment">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,6 +146,7 @@ export default {
|
|||
.like-icon:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.like-red {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import getCurrentSession from "./authentication";
|
|||
|
||||
const instance = axios.create({
|
||||
baseURL: __API_URL__,
|
||||
timeout: 1000 * 5
|
||||
timeout: 1000 * 20
|
||||
});
|
||||
|
||||
//axios.interceptors.request.use(function (config) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
requestedProfile: this.$route.params.user_id,
|
||||
errormsg: null,
|
||||
|
|
@ -9,12 +9,12 @@ export default {
|
|||
data_ended: false,
|
||||
start_idx: 0,
|
||||
limit: 1,
|
||||
user_data: [],
|
||||
user_data: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async refresh() {
|
||||
this.getMainData();
|
||||
this.getMainData();
|
||||
|
||||
// this way we are sure that we fill the first page todo: check
|
||||
// 450 is a bit more of the max height of a post
|
||||
|
|
@ -26,14 +26,14 @@ export default {
|
|||
this.loadContent();
|
||||
},
|
||||
|
||||
async getMainData() {
|
||||
try {
|
||||
let response = await this.$axios.get("/users/" + this.requestedProfile);
|
||||
this.user_data = response.data;
|
||||
} catch(e) {
|
||||
this.errormsg = e.toString();
|
||||
}
|
||||
},
|
||||
async getMainData() {
|
||||
try {
|
||||
let response = await this.$axios.get("/users/" + this.requestedProfile);
|
||||
this.user_data = response.data;
|
||||
} catch (e) {
|
||||
this.errormsg = e.toString();
|
||||
}
|
||||
},
|
||||
|
||||
async loadContent() {
|
||||
this.loading = true;
|
||||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
this.errormsg = e.toString();
|
||||
}
|
||||
},
|
||||
scroll () {
|
||||
scroll() {
|
||||
window.onscroll = () => {
|
||||
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
|
||||
if (bottomOfWindow && !this.data_ended) {
|
||||
|
|
@ -81,42 +81,32 @@ export default {
|
|||
|
||||
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
|
||||
|
||||
<UserCard :user_id = "requestedProfile"
|
||||
:name = "user_data['name']"
|
||||
:followed = "user_data['followed']"
|
||||
:banned = "user_data['banned']"
|
||||
:my_id = "this.$currentSession"
|
||||
:show_new_post = "true"
|
||||
@updateInfo = "getMainData"
|
||||
@updatePosts = "refresh" />
|
||||
<UserCard :user_id="requestedProfile" :name="user_data['name']" :followed="user_data['followed']"
|
||||
:banned="user_data['banned']" :my_id="this.$currentSession" :show_new_post="true"
|
||||
@updateInfo="getMainData" @updatePosts="refresh" />
|
||||
|
||||
<div class="row text-center mt-2 mb-3">
|
||||
<div class="col-4" style="border-right: 1px">
|
||||
<h3>{{ user_data["photos"] }}</h3>
|
||||
<h6>Photos</h6>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h3>{{ user_data["followers"] }}</h3>
|
||||
<h6>Followers</h6>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h3>{{ user_data["following"] }}</h3>
|
||||
<h6>Following</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center mt-2 mb-3">
|
||||
<div class="col-4" style="border-right: 1px">
|
||||
<h3>{{ user_data["photos"] }}</h3>
|
||||
<h6>Photos</h6>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h3>{{ user_data["followers"] }}</h3>
|
||||
<h6>Followers</h6>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h3>{{ user_data["following"] }}</h3>
|
||||
<h6>Following</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main-content" v-for="item of stream_data">
|
||||
<PostCard :user_id = "requestedProfile"
|
||||
:photo_id = "item.photo_id"
|
||||
:name = "user_data['name']"
|
||||
:date = "item.date"
|
||||
:comments = "item.comments"
|
||||
:likes = "item.likes"
|
||||
:liked = "item.liked" />
|
||||
<PostCard :user_id="requestedProfile" :photo_id="item.photo_id" :name="user_data['name']"
|
||||
:date="item.date" :comments="item.comments" :likes="item.likes" :liked="item.liked" />
|
||||
</div>
|
||||
|
||||
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
|
||||
Hai visualizzato tutti i post. Hooray! 👻
|
||||
You reached the end. Hooray! 👻
|
||||
</div>
|
||||
|
||||
<LoadingSpinner :loading="loading" /><br />
|
||||
|
|
@ -126,4 +116,5 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue