danielvici123/esp-projekt
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

comments in posts sieht mann jetzt, link zum post copyn geht und kleine änderungen

Browse Source
This commit is contained in:
danielvici123
2025-03-24 20:28:47 +01:00
parent 834149ffb9
commit f1b8dfe92f
4 changed files with 82 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/home_components/feed.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import router from "../../router"; import router from "../../router";
// PLACEHOLDER // PLACEHOLDER
const upc = ref([]); // user post computed const upc = ref([]); // user post computed
let post_nr = ""; let post_nr = "";
@@ -77,10 +77,16 @@ onMounted(async () => {
} }
} }
function gotoPost(post_id: number) { function gotoPost(post_id: string | number) {
localStorage.setItem("viewedpost", post_id.toString()); localStorage.setItem("viewedpost", post_id.toString());
router.push(`/post/${post_id}`); router.push(`/post/${post_id}`);
} }
function copyLink(post_id: string | number) {
const tocopy = `http://localhost:5173/post/${post_id}`;
navigator.clipboard.writeText(tocopy);
alert("Copied to clipboard");
}
</script> </script>
<template> <template>
@@ -101,7 +107,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="overflow-y-auto h-[650px] scrollbar"> <!-- CONTENT --> <div class="overflow-y-auto h-screen scrollbar"> <!-- CONTENT -->
<ul> <ul>
<li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex"> <li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
<!-- POST --> <!-- POST -->
@@ -127,7 +133,8 @@ onMounted(async () => {
</div> </div>
<div class="flex items-center mx-2"> <!-- View Post --> <div class="flex items-center mx-2"> <!-- View Post -->
<button @click="gotoPost(postitem.post_id)" class="text-weiss">View Post</button> <button @click="gotoPost(postitem.post_id)" class="text-schwarz mx-1 px-1 rounded-lg bg-button-farbe">View Post</button>
<button @click="copyLink(postitem.post_id)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
</div><!-- ENDE --> </div><!-- ENDE -->
</div> </div>
</div> </div>

97
src/components/posts.vue
View File

@@ -1,11 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'; import {useRoute, useRouter} from 'vue-router';
import Navigationbar from './home_components/navigationbar.vue'; import Navigationbar from './home_components/navigationbar.vue';
import Contacts from './home_components/contacts.vue'; import Contacts from './home_components/contacts.vue';
import Legal from './home_components/legal.vue'; import Legal from './home_components/legal.vue';
import router from '../router';
import {consoleLog} from "vite-plugin-checker/dist/logger";
interface Post { interface Post {
post_uuid: number; post_uuid: number;
@@ -25,39 +23,57 @@ interface User {
} }
interface Comment { interface Comment {
comment_uuid: number; comment_id: number;
user_id: number; author_user_id: number;
post_id: number; post_id: number;
comment_text: string; text: string;
likes: number;
created_at: string; created_at: string;
displayname: string; displayname: string;
username: string; username: string;
} }
const route = useRoute();
const router = useRouter();
const post = ref<Post | null>(null); const post = ref<Post | null>(null);
const user = ref<User | null>(null); const user = ref<User | null>(null);
const comments = ref<Comment[] | null>(null); const comments = ref<Comment[] | null>(null);
let post_id = ref();
onMounted(async () => { onMounted(async () => {
const post_id = localStorage.getItem('viewedpost'); console.log("PARAMS: "+ route.path);
console.log(post_id); const pathArray = route.path.split('/');
if (post_id === null) { console.log(pathArray);
alert('No post selected. You will be redirected to the feed.');
if (pathArray.length > 2) {
post_id.value = pathArray[2];
}
if (!post_id) {
alert('No post selected. Redirecting to feed.');
await router.push('/'); await router.push('/');
return; return;
} }
getPost(parseInt(post_id)); getPost(parseInt(post_id.value));
getComment(parseInt(post_id)); getComment(parseInt(post_id.value));
}); });
async function getPost(post_id: number) { async function getPost(post_id: any) {
try { try {
const post_response = await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' }); const post_response = await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' });
const fetchedPost: Post = await post_response.json(); const fetchedPost: Post = await post_response.json();
if(post_response.status === 404) {
console.error("No comments found.");
await router.push('/');
return;
}
const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' }); const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
const usersDATA = await user_response.json(); const usersDATA = await user_response.json();
@@ -76,8 +92,7 @@ async function getPost(post_id: number) {
} }
} }
async function getComment(post_id: any) {
async function getComment(post_id: number) {
try { try {
const comments_response = await fetch(`http://localhost:8000/api/post/${post_id}/comments`, { method: 'GET' }); const comments_response = await fetch(`http://localhost:8000/api/post/${post_id}/comments`, { method: 'GET' });
const fetchedComments: Comment[] = await comments_response.json(); const fetchedComments: Comment[] = await comments_response.json();
@@ -85,10 +100,18 @@ async function getComment(post_id: number) {
const user_response = await fetch(`http://localhost:8000/api/users`, { method: 'GET' }); const user_response = await fetch(`http://localhost:8000/api/users`, { method: 'GET' });
const usersDATA: User[] = await user_response.json(); const usersDATA: User[] = await user_response.json();
comments.value = fetchedComments.map(comment => ({ comments.value = fetchedComments.map(comment => {
...comment, const author = usersDATA.find(u => u.user_id === comment.author_user_id) || {
author: usersDATA.find(user => user.user_id === comment.user_id) || null username: 'Unknown',
})); displayname: 'Unknown',
};
return {
...comment,
username: author.username,
displayname: author.displayname,
};
});
console.log(comments.value); console.log(comments.value);
} catch (e) { } catch (e) {
@@ -96,6 +119,12 @@ async function getComment(post_id: number) {
} }
} }
function copyLink(post_id: string | number) {
const tocopy = `http://localhost:5173/post/${post_id}`;
navigator.clipboard.writeText(tocopy);
alert("Copied to clipboard");
}
</script> </script>
<template> <template>
@@ -126,11 +155,11 @@ async function getComment(post_id: number) {
<label class="text-sm m-1 text-weiss" v-if="post.comments != undefined">{{ post.comments }}</label> <label class="text-sm m-1 text-weiss" v-if="post.comments != undefined">{{ post.comments }}</label>
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label> <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
</div> </div>
<div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes --> <div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes -->
<img alt="" src="../assets/icons/herz.png" class="align-middle"> <img alt="" src="../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ post.likes }}</label> <label class="text-sm m-1 text-weiss">{{ post.likes }}</label>
</div> </div>
<button @click="copyLink(post_id)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
</div> </div>
</div> </div>
</div> </div>
@@ -147,17 +176,31 @@ async function getComment(post_id: number) {
<div> <!-- VIEW COMMENTS --> <div> <!-- VIEW COMMENTS -->
<div> <!-- VIEW COMMENTS --> <div> <!-- VIEW COMMENTS -->
<div v-if="comments && comments.length > 0"> <div v-if="comments && comments.length > 0" class="overflow-y-auto h-screen scrollbar" >
<div v-for="c in comments" :key="c.comment_uuid" class="p-4 border-b border-gray-700"> <div v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
<p class="text-sm text-weiss">{{ c.author?.displayname || 'Unknown' }}: {{ c.comment_text }}</p> <div class="flex">
<img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1 text-weiss">{{c.displayname}}</label>
<label class="text-base m-1 text-grau2">@{{ c.username }}</label>
</div>
<div class="m-2"> <!-- POST CONTENT -->
<p class="text-sm m-1 text-weiss">{{ c.text }}</p>
</div>
<div class="flex"> <!-- POST FOOTER -->
<div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes -->
<img alt="" src="../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ c.likes }}</label>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div v-else class="p-4 text-gray-400">No comments yet.</div> <div v-else class="p-4 text-gray-400">No comments yet.</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
src/components/register.vue
View File

@@ -14,7 +14,7 @@ function route_home() {
<img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home"> <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
</div> </div>
<register_main class="inset-0"></register_main> <register_main class="inset-0"></register_main>
<div class="inset-y-0 right-0 "> <div class="inset-y-0 right-0 max-w-36">
<legal></legal> <legal></legal>
</div> </div>
</div> </div>

1
src/router/index.ts
View File

@@ -56,7 +56,6 @@ const routes = [
path: "/post/:id", path: "/post/:id",
name: "PostDetail", name: "PostDetail",
component: post, component: post,
props: true,
meta: { requiresAuth: true } meta: { requiresAuth: true }
}, },
{ {