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

PostCard: improve code readability

Browse source
This commit is contained in:
Marco Realacci 2023-01-12 01:02:12 +01:00
parent b827b06240
commit bef9d69028
1 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,10 @@ export default {
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
data: function () {
return {
imageSrc: "",
// Whether the image is loaded (disables the spinner)
imageReady: false,
// Likes and comments
post_liked: this.liked,
post_like_cnt: this.likes,
post_comments_cnt: this.comments,
@ -12,26 +14,37 @@ export default {
comments_start_idx: 0,
comments_shown: false,
commentMsg: "",
// Whether the comments have ended (no more comments to load)
data_ended: false,
}
},
methods: {
// Visit the user's profile
visitUser() {
this.$router.push({ path: "/profile/" + this.user_id });
},
// Post a new comment
postComment() {
this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
"comment": this.commentMsg,
"user_id": this.$currentSession(),
}).then(response => {
this.commentMsg = "";
if (response == null) return // the interceptors returns null if something goes bad
// Reset the comment input and update the counter
this.commentMsg = "";
this.post_comments_cnt++;
// Fetch comments from the server
this.comments_data = [];
this.comments_start_idx = 0;
this.getComments();
})
},
// Show or hide the comments section
showHideComments() {
// If comments are already shown, hide them and reset the data
if (this.comments_shown) {
@ -42,28 +55,39 @@ export default {
}
this.getComments();
},
// Fetch comments from the server
getComments() {
this.data_ended = false
// Get comments from the server
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id +
"/comments?limit=5&start_index=" + this.comments_start_idx).then(response => {
// If there are no more comments, set the flag
if (response.data.length == 0) this.data_ended = true;
// Otherwise increment the start index
else this.comments_start_idx += 5;
// Append the comments to the array (they will be rendered)
this.comments_data = this.comments_data.concat(response.data);
this.comments_shown = true;
})
},
// Like the photo
like() {
this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
if (response == null) return
this.post_liked = true;
this.post_like_cnt++;
})
},
// Unlike the photo
unlike() {
this.$axios.delete("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
if (response == null) return
this.post_liked = false;
this.post_like_cnt--;
})
@ -71,12 +95,18 @@ export default {
},
created() {
// Fetch the image from the server and display it
this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
responseType: 'arraybuffer'
}).then(response => {
// Create an image element and append it to the container
const img = document.createElement('img');
// Set image source and css class
img.src = URL.createObjectURL(new Blob([response.data]));
img.classList.add("card-img-top");
// Append the image to the container and disable the spinner
this.$refs.imageContainer.appendChild(img);
this.imageReady = true;
});