Add spinner when loading images, increase timeout to 20s

webui/node_modules/.vite/deps/_metadata.json

@@ -1,23 +1,23 @@
 {
-  "hash": "0c3e4771",
+  "hash": "80447977",
-  "browserHash": "01248067",
+  "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
     }
   },

webui/src/components/PostCard.vue

@@ -4,8 +4,10 @@ export default {
 	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,12 +25,24 @@ 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 => {
 
@@ -58,6 +75,7 @@ export default {
 			img.src = URL.createObjectURL(new Blob([response.data]));
 			img.classList.add("card-img-top");
 			this.$refs.imageContainer.appendChild(img);
+			this.imageReady = true;
 		});
 	},
 }
@@ -65,23 +83,34 @@ export default {
 
 <template>
 	<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="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 -->
+					<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>
 						<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;
 }

webui/src/services/axios.js

@@ -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) {

webui/src/views/ProfileView.vue

@@ -81,14 +81,9 @@ export default {
 
 					<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="col-4" style="border-right: 1px">
@@ -106,17 +101,12 @@ export default {
 					</div>
 
 					<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 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>