marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-03-14 14:16:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add spinner when loading images, increase timeout to 20s

Browse source
This commit is contained in:
Marco Realacci 2022-12-15 13:38:16 +01:00
parent d25bf6a53e
commit f6a61e3dd2
4 changed files with 98 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webui/node_modules/.vite/deps/_metadata.json generated vendored
View file

@ -1,23 +1,23 @@
{ {
"hash": "0c3e4771", "hash": "80447977",
"browserHash": "01248067", "browserHash": "b98131b5",
"optimized": { "optimized": {
"axios": { "axios": {
"src": "../../axios/index.js", "src": "../../axios/index.js",
"file": "axios.js", "file": "axios.js",
"fileHash": "d8d02cf0", "fileHash": "6b5eae63",
"needsInterop": true "needsInterop": true
}, },
"vue": { "vue": {
"src": "../../vue/dist/vue.runtime.esm-bundler.js", "src": "../../vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js", "file": "vue.js",
"fileHash": "f8034b26", "fileHash": "de50261f",
"needsInterop": false "needsInterop": false
}, },
"vue-router": { "vue-router": {
"src": "../../vue-router/dist/vue-router.mjs", "src": "../../vue-router/dist/vue-router.mjs",
"file": "vue-router.js", "file": "vue-router.js",
"fileHash": "b4ca170f", "fileHash": "4cad12d6",
"needsInterop": false "needsInterop": false
} }
}, },

83
webui/src/components/PostCard.vue
View file

@ -1,11 +1,13 @@
<script> <script>
export default { export default {
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"], props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
data: function() { data: function () {
return { return {
imageSrc: "", imageSrc: "",
imageReady: false,
post_liked: this.liked, post_liked: this.liked,
post_like_cnt: this.likes, post_like_cnt: this.likes,
post_comments_cnt: this.comments,
comments_data: [], comments_data: [],
comments_start_idx: 0, comments_start_idx: 0,
comments_shown: false, comments_shown: false,
@ -13,6 +15,9 @@ export default {
} }
}, },
methods: { methods: {
visitUser() {
this.$router.push({ path: "/profile/" + this.user_id });
},
postComment() { postComment() {
this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", { this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
"comment": this.commentMsg, "comment": this.commentMsg,
@ -20,21 +25,33 @@ export default {
}).then(response => { }).then(response => {
this.commentMsg = ""; this.commentMsg = "";
this.post_comments_cnt++;
this.comments_data = []; this.comments_data = [];
this.comments_start_idx = 0; this.comments_start_idx = 0;
this.getComments(); 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() { getComments() {
// Get comments from the server
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id + 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; if (response.data.length == 0) this.data_ended = true;
else this.comments_start_idx += 2; else this.comments_start_idx += 2;
this.comments_data = this.comments_data.concat(response.data); this.comments_data = this.comments_data.concat(response.data);
this.comments_shown = true; this.comments_shown = true;
}) })
}, },
like() { like() {
this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => { this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
@ -51,37 +68,49 @@ export default {
}, },
created() { created() {
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, { this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
responseType: 'arraybuffer' responseType: 'arraybuffer'
}).then(response => { }).then(response => {
const img = document.createElement('img'); const img = document.createElement('img');
img.src = URL.createObjectURL(new Blob([response.data])); img.src = URL.createObjectURL(new Blob([response.data]));
img.classList.add("card-img-top"); img.classList.add("card-img-top");
this.$refs.imageContainer.appendChild(img); this.$refs.imageContainer.appendChild(img);
}); this.imageReady = true;
}, });
} },
}
</script> </script>
<template> <template>
<div class="card mb-5"> <div class="card mb-5">
<div ref="imageContainer"></div> <div ref="imageContainer">
<div v-if="!imageReady" class="mt-3 mb-3">
<LoadingSpinner :loading="!imageReady" />
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-10"> <div class="col-10">
<div class="card-body"> <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> <p class="card-text">{{ new Date(Date.parse(date)) }}</p>
</div> </div>
</div> </div>
<div class="col-2"> <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 --> <div class="card-body d-flex justify-content-end" style="display: inline-flex">
<a @click="getComments"><h5><i class="card-title bi bi-chat-right pe-1"></i></h5></a> <!-- not quite sure flex is the right property, but it works -->
<h6 class="card-text d-flex align-items-end text-muted">{{ comments }}</h6> <a @click="showHideComments">
<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> <h5><i class="card-title bi bi-chat-right pe-1"></i></h5>
<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> </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> <h6 class="card-text d-flex align-items-end text-muted">{{ post_like_cnt }}</h6>
<h5></h5> <h5></h5>
</div> </div>
@ -104,7 +133,8 @@ export default {
<input v-model="commentMsg" type="text" class="form-control" placeholder="Commenta..."> <input v-model="commentMsg" type="text" class="form-control" placeholder="Commenta...">
</div> </div>
<div class="col-1 card-body border-top text-end ps-0 d-flex"> <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> </div>
</div> </div>
@ -116,6 +146,7 @@ export default {
.like-icon:hover { .like-icon:hover {
color: #ff0000; color: #ff0000;
} }
.like-red { .like-red {
color: #ff0000; color: #ff0000;
} }

2
webui/src/services/axios.js
View file

@ -3,7 +3,7 @@ import getCurrentSession from "./authentication";
const instance = axios.create({ const instance = axios.create({
baseURL: __API_URL__, baseURL: __API_URL__,
timeout: 1000 * 5 timeout: 1000 * 20
}); });
//axios.interceptors.request.use(function (config) { //axios.interceptors.request.use(function (config) {

75
webui/src/views/ProfileView.vue
View file

@ -1,6 +1,6 @@
<script> <script>
export default { export default {
data: function() { data: function () {
return { return {
requestedProfile: this.$route.params.user_id, requestedProfile: this.$route.params.user_id,
errormsg: null, errormsg: null,
@ -9,12 +9,12 @@ export default {
data_ended: false, data_ended: false,
start_idx: 0, start_idx: 0,
limit: 1, limit: 1,
user_data: [], user_data: [],
} }
}, },
methods: { methods: {
async refresh() { async refresh() {
this.getMainData(); this.getMainData();
// this way we are sure that we fill the first page todo: check // 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 // 450 is a bit more of the max height of a post
@ -26,14 +26,14 @@ export default {
this.loadContent(); this.loadContent();
}, },
async getMainData() { async getMainData() {
try { try {
let response = await this.$axios.get("/users/" + this.requestedProfile); let response = await this.$axios.get("/users/" + this.requestedProfile);
this.user_data = response.data; this.user_data = response.data;
} catch(e) { } catch (e) {
this.errormsg = e.toString(); this.errormsg = e.toString();
} }
}, },
async loadContent() { async loadContent() {
this.loading = true; this.loading = true;
@ -48,7 +48,7 @@ export default {
this.errormsg = e.toString(); this.errormsg = e.toString();
} }
}, },
scroll () { scroll() {
window.onscroll = () => { window.onscroll = () => {
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
if (bottomOfWindow && !this.data_ended) { if (bottomOfWindow && !this.data_ended) {
@ -81,42 +81,32 @@ export default {
<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg> <ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
<UserCard :user_id = "requestedProfile" <UserCard :user_id="requestedProfile" :name="user_data['name']" :followed="user_data['followed']"
:name = "user_data['name']" :banned="user_data['banned']" :my_id="this.$currentSession" :show_new_post="true"
:followed = "user_data['followed']" @updateInfo="getMainData" @updatePosts="refresh" />
: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="row text-center mt-2 mb-3">
<div class="col-4" style="border-right: 1px"> <div class="col-4" style="border-right: 1px">
<h3>{{ user_data["photos"] }}</h3> <h3>{{ user_data["photos"] }}</h3>
<h6>Photos</h6> <h6>Photos</h6>
</div> </div>
<div class="col-4"> <div class="col-4">
<h3>{{ user_data["followers"] }}</h3> <h3>{{ user_data["followers"] }}</h3>
<h6>Followers</h6> <h6>Followers</h6>
</div> </div>
<div class="col-4"> <div class="col-4">
<h3>{{ user_data["following"] }}</h3> <h3>{{ user_data["following"] }}</h3>
<h6>Following</h6> <h6>Following</h6>
</div> </div>
</div> </div>
<div id="main-content" v-for="item of stream_data"> <div id="main-content" v-for="item of stream_data">
<PostCard :user_id = "requestedProfile" <PostCard :user_id="requestedProfile" :photo_id="item.photo_id" :name="user_data['name']"
:photo_id = "item.photo_id" :date="item.date" :comments="item.comments" :likes="item.likes" :liked="item.liked" />
:name = "user_data['name']"
:date = "item.date"
:comments = "item.comments"
:likes = "item.likes"
:liked = "item.liked" />
</div> </div>
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert"> <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> </div>
<LoadingSpinner :loading="loading" /><br /> <LoadingSpinner :loading="loading" /><br />
@ -126,4 +116,5 @@ export default {
</div> </div>
</template> </template>
<style> <style>
</style> </style>