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

etwas responsible gemacht, posten und commentieren geht profile machen

Browse Source
This commit is contained in:
danielvici123
2025-03-26 22:43:39 +01:00
parent 5a5cf84197
commit 9a8237de42
11 changed files with 281 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Home.vue
View File

@@ -8,14 +8,14 @@ import Trending from "./home_components/trending.vue";
<template> <template>
<div id="main" class="flex md:flex-col"> <div id="main" class="sm:flex overflow-y-auto h-screen scrollbar">
<div id="left" class="w-72 min-w-72 md:full"> <div id="left" class="sm:w-72 min-w-72">
<navigationbar></navigationbar> <navigationbar></navigationbar>
</div> </div>
<div class="w-100p sm:w-screen"> <div class="sm:w-100p w-screen">
<feed></feed> <feed></feed>
</div> </div>
<div class="w-1/4 sm:w-screen"> <div class="sm:w-1/4 w-screen">
<contacts></contacts> <contacts></contacts>
<legal></legal> <legal></legal>
</div> </div>

6
src/components/Login.vue
View File

@@ -11,12 +11,12 @@ function route_home() {
</script> </script>
<template> <template>
<div id="main" class="bg-hintergrund-farbe flex p-2 justify-between"> <div id="main" class="bg-hintergrund-farbe sm:flex sm:p-2 sm:justify-between ">
<div class="pt-5 "> <div class="pt-5 pl-2">
<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>
<login_comp class="inset-0"></login_comp> <login_comp class="inset-0"></login_comp>
<div class="inset-y-0 right-0 max-w-36"> <div class="md:inset-y-0 sm:right-0 sm:max-w-36 text-center">
<legal></legal> <legal></legal>
</div> </div>
</div> </div>

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

@@ -3,14 +3,14 @@ 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_create_text = "";
let current_user = "";
let pust_create_text = "";
let self_id ; let self_id ;
/* onMounted(async () => {
self_id = localStorage.getItem("self_id");
await createFeed();
});
*/
async function createFeed() { async function createFeed() {
try { try {
// posts und user holen und schauen ob sie richtig sidn // posts und user holen und schauen ob sie richtig sidn
@@ -37,7 +37,7 @@ async function createFeed() {
//upc.value = combinedPosts; //upc.value = combinedPosts;
upc.value = combinedPosts.sort(() => Math.random() - 0.5); upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
} catch (e) { } catch (e) {
console.error("An error has occurred. Please try again later."); console.error("An error has occurred. Please try again later.");
@@ -46,17 +46,10 @@ async function createFeed() {
console.log(upc.value); console.log(upc.value);
} }
async function addLike(post_id: string | number, user_id: number, index: number) {
onMounted(async () => {
await createFeed();
self_id = localStorage.getItem("self_id");
console.log("ICH: "+self_id);
});
async function addLike(post_id: string | number, user_id: number, index: number) {
try { try {
console.log("UPC: ", upc.value);
console.log("post_id: ", post_id);
upc.value[index].likes++; upc.value[index].likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, { const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
method: 'POST', method: 'POST',
@@ -67,57 +60,68 @@ onMounted(async () => {
console.log('Antwort-Status:', response.status); console.log('Antwort-Status:', response.status);
if (!response.ok) { if (!response.ok) {
const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen const errorText = await response.text();
console.error('Server-Fehlertext:', errorText); console.error('Server-Fehlertext:', errorText);
upc.value[index].likes--; //upc.value[index].likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`); throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
} }
const data = await response.json(); const data = await response.json();
console.log('Antwort vom Server:', data);
return data; return data;
} catch (error) { } catch (error) {
console.error('Fehler beim Liken des Posts:', error); console.error('Fehler beim Liken des Posts:', error);
throw error; throw error;
} }
} }
function gotoPost(post_id: string | 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) { function copyLink(post_id: string | number) {
const tocopy = `http://localhost:5173/post/${post_id}`; const tocopy = `http://localhost:5173/post/${post_id}`;
navigator.clipboard.writeText(tocopy); navigator.clipboard.writeText(tocopy);
alert("Copied to clipboard"); alert("Copied to clipboard");
} }
function post_create(post_text: string, user_id: number) { async function post_create(post_text: string) {
console.log(self_id);
console.log(post_text); console.log(post_text);
const response = await fetch(`http://localhost:8000/api/post/create`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id},"postText":"${post_create_text}","postType":"text"}`});
const data = await response.json();
if (response.ok) {
console.log(response.text);
await createFeed();
} }
console.log(data);
console.log(post_text);
}
</script> </script>
<template> <template>
<div class="border-x border-x-grau2"> <!-- MAIN --> <div class="sm:border-x sm:border-x-grau2"> <!-- MAIN -->
<div> <!-- FEED HEADER --> <div> <!-- FEED HEADER -->
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Feed</h2> <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b-2 ">Feed</h2>
<!-- POSTING--> <!-- POSTING-->
<div class="flex border-2 border-b-grau2"> <div class="flex border-2 border-b-grau2">
<img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16"> <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<form class="w-full pr-5"> <form class="w-full pr-5">
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht--> <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
<textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea> <textarea v-model="post_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
<div class=""> <div class="">
<input class="text-weiss" type="file" accept=".png, .jpg, .jpeg"> <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(post_create_text)" type="button">Post</button>
<button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(pust_create_text, )" type="button">Post</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="overflow-y-auto h-screen scrollbar"> <!-- CONTENT --> <div class="sm:overflow-y-auto sm:h-screen sm: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 -->

16
src/components/home_components/navigationbar.vue
View File

@@ -12,25 +12,39 @@ const show = ref(false);
const getShowMobileElements = () => { const getShowMobileElements = () => {
const value = localStorage.getItem("mobile"); const value = localStorage.getItem("mobile");
console.log("localStorage mobile:", value); // Debugging-Ausgabe
return value === 'true'; return value === 'true';
}; };
const setShowMobileElements = (value) => { const setShowMobileElements = (value) => {
console.log("localStorage set mobile:", value.toString()); // Debugging-Ausgabe
localStorage.setItem("mobile", value.toString()); localStorage.setItem("mobile", value.toString());
}; };
const toggleElements = () => { const toggleElements = () => {
if (isMobile.value){
show.value = !show.value; show.value = !show.value;
setShowMobileElements(show.value); // Zustand im localStorage speichern setShowMobileElements(show.value);
}
}; };
const checkScreenWidth = () => { const checkScreenWidth = () => {
isMobile.value = window.innerWidth < 640; isMobile.value = window.innerWidth < 640;
if(isMobile.value === false){
show.value = true;
} else {
show.value = false;
}
}; };
onMounted(() => { onMounted(() => {
checkScreenWidth(); checkScreenWidth();
window.addEventListener('resize', checkScreenWidth); window.addEventListener('resize', checkScreenWidth);
const show = ref(getShowMobileElements());
if(localStorage.getItem("mobile") === null){
show.value = false;
}
}); });
onUnmounted(() => { onUnmounted(() => {

13
src/components/login_components/login_comp.vue
View File

@@ -47,22 +47,21 @@ async function login(event: Event) {
</script> </script>
<template> <template>
<div class="px-20 border-x border-x-grau2 pb-32"> <div class="px-20 sm:border-x sm:border-x-grau2 pb-32">
<div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT--> <div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
<p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p> <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
<p class="text-weiss text-center">Login to continue</p> <p class="text-weiss text-center">Login to continue</p>
</div> </div>
<div class="px-20 pt-7"><!-- FORM ---> <div class="px-20 pt-7"><!-- FORM --->
<form class="flex flex-col items-center" @submit.prevent="login"> <form class="flex flex-col items-center" @submit.prevent="login">
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br> <input class="m-4 md:w-full md:max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br> <input class="m-4 md:w-full md:max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
<button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Login</button> <button class="m-4 bg-button-farbe w-full md:max-w-xs p-4 text-schwarz rounded-lg">Login</button>
<p class="text-weiss"><input type="checkbox" v-model="rememberMe"> Remeber me</p>
</form> </form>
</div> </div>
<div> <div>
<p class="text-weiss text-center">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p> <p class="text-weiss text-center pb-2 ">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
<p class="text-weiss text-center"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p> <p class="text-weiss text-center pt-2"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
</div> </div>
</div> </div>

113
src/components/posts.vue
View File

@@ -39,7 +39,10 @@ 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(); let comment_text = ref();
let self_id;
let post_uuid = ref();
onMounted(async () => { onMounted(async () => {
console.log("PARAMS: "+ route.path); console.log("PARAMS: "+ route.path);
@@ -47,22 +50,21 @@ onMounted(async () => {
console.log(pathArray); console.log(pathArray);
if (pathArray.length > 2) { if (pathArray.length > 2) {
post_id.value = pathArray[2]; post_uuid.value = pathArray[2];
console.log("post_id 0: ", post_uuid.value);
} }
if (!post_id) { if (!post_uuid) {
alert('No post selected. Redirecting to feed.'); alert('No post selected. Redirecting to feed.');
await router.push('/'); await router.push('/');
return; return;
} }
self_id = localStorage.getItem('self_id');
getPost(parseInt(post_id.value)); getPost(parseInt(post_uuid.value));
getComment(parseInt(post_id.value)); getComment(parseInt(post_uuid.value));
}); });
async function getPost(post_id: any) { 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' });
@@ -125,27 +127,25 @@ function copyLink(post_id: string | number) {
alert("Copied to clipboard"); alert("Copied to clipboard");
} }
async function addLike(post_id: string | number, user_id: number) { async function addLike() { // Post liken
try { try {
post.value.likes++; post.value.likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, { const response_like = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/like`, {
method: 'POST', method: 'POST',
headers: {'content-type': 'application/json'}, headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`, body: `{"userId":${self_id}}`,
}); });
console.log('Antwort-Status:', response.status); if (!response_like.ok) {
const errorText = await response_like.text();
if (!response.ok) {
const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen
console.error('Server-Fehlertext:', errorText); console.error('Server-Fehlertext:', errorText);
post.value.likes--; //post.value.likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`); throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
} }
const data = await response.json(); const data = await response_like.json();
console.log('Antwort vom Server:', data);
console.log("post_id 2: ", post_uuid);
return data; return data;
} catch (error) { } catch (error) {
console.error('Fehler beim Liken des Posts:', error); console.error('Fehler beim Liken des Posts:', error);
@@ -153,6 +153,54 @@ async function addLike(post_id: string | number, user_id: number) {
} }
} }
async function comment_create_text(comment_text: string) {
try {
const response = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/comment`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id},"text":"${comment_text}"}`,});
const data = await response.json();
if(response.ok) {
await getComment(parseInt(post_uuid.value));
} else {
alert("Error while posting comment.");
}
return data;
} catch (error) {
console.error(error);
}
console.log(comment_text);
}
async function addLike_comment(comment_id: number | string) {
try {
post.value.likes++;
const response_like = await fetch(`http://localhost:8000/api/comment/${comment_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${self_id}}`,
});
if (!response_like.ok) {
const errorText = await response_like.text();
console.error('Server-Fehlertext:', errorText);
post.value.likes--;
throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
}
const data = await response_like.json();
console.log("post_id: ", comment_id);
console.log(data);
getComment(parseInt(post_uuid.value));
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
}
}
</script> </script>
<template> <template>
@@ -183,11 +231,11 @@ async function addLike(post_id: string | number, user_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, post.user_id)"> <!-- Likes --> <div class="flex items-center" @click="addLike()"> <!-- 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> <button @click="copyLink(post_uuid)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
</div> </div>
</div> </div>
</div> </div>
@@ -199,13 +247,22 @@ async function addLike(post_id: string | number, user_id: number) {
</div> </div>
<div> <!-- WRITE COMMENTS --> <div> <!-- WRITE COMMENTS -->
<div class="flex border-b-2 border-b-grau2">
<img src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<form class="w-full pr-5">
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
<textarea v-model="comment_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
<div class="">
<button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="comment_create_text(comment_text)" type="button">Post</button>
</div>
</form>
</div>
</div> </div>
<div> <!-- VIEW COMMENTS --> <div> <!-- VIEW COMMENTS -->
<div> <!-- VIEW COMMENTS --> <div class="sm:overflow-y-scroll h-[450px]"> <!-- VIEW COMMENTS -->
<div v-if="comments && comments.length > 0" class="overflow-y-auto h-screen scrollbar" > <ul v-if="comments && comments.length > 0">
<div v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700"> <li v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
<div class="flex"> <div class="flex">
<img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16"> <img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<div> <div>
@@ -218,15 +275,15 @@ async function addLike(post_id: string | number, user_id: number) {
</div> </div>
<div class="flex"> <!-- POST FOOTER --> <div class="flex"> <!-- POST FOOTER -->
<div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes --> <div class="flex items-center" @click="addLike_comment(c.comment_id)"> <!-- 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">{{ c.likes }}</label> <label class="text-sm m-1 text-weiss">{{ c.likes }}</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </li>
</div> </ul>
<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>

8
src/components/profile.vue
View File

@@ -7,14 +7,14 @@ import Profile_main from "./profile_components/profile_main.vue";
</script> </script>
<template> <template>
<div id="main" class="bg-hintergrund-farbe flex"> <div id="main" class="bg-hintergrund-farbe sm:flex overflow-y-auto h-screen scrollbar">
<div id="left" class="w-72"> <div id="left" class="sm:w-72 min-w-72">
<navigationbar></navigationbar> <navigationbar></navigationbar>
</div> </div>
<div class="w-100p border-x border-x-grau2"> <div class="sm:w-100p w-screen sm:border-x sm:border-x-grau2">
<profile_main></profile_main> <profile_main></profile_main>
</div> </div>
<div id="right" class="w-1/4"> <div id="right" class="sm:w-1/4 w-screen">
<contacts></contacts> <contacts></contacts>
<legal></legal> <legal></legal>
</div> </div>

147
src/components/profile_components/profile_main.vue
View File

@@ -4,73 +4,102 @@ import { useRoute, useRouter } from 'vue-router';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const profile = ref(null);
const upc = ref([]);
const post = ref([ let self_id ;
{id: 541242, let profile_id = ref();
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
comments_count: undefined, likes: 532844},
{id: 145,
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "I like Animes. I use Anilist to track them.",
comments_count: undefined, likes: 5325466844},
{id: 246,
profile_picture: "../../assets/danielvici_pp.png",
author_display_name: "danielvici123", author_username: "danielvici",
content: "sfsafhffgf",
comments_count: undefined, likes: 5},
])
onMounted(async () => { onMounted(async () => {
const countPosts = post.value.length; console.log("PARAMS: "+ route.path);
}); const pathArray = route.path.split('/');
//Wird bearbeitet wenn API dazu da ist. console.log(pathArray);
/*
function fetchProfile(userId) { if (pathArray.length > 2) {
return fetch(`/api/profile/${userId}`) profile_id.value = pathArray[2];
.then(response => { console.log("profile_id 0: ", profile_id.value);
if (!response.ok) {
throw new Error('Network response was not ok');
} }
return response.json();
if (!profile_id) {
alert('No profile selected. Redirecting to feed.');
await router.push('/');
return;
}
await create_own_posts();
});
async function create_own_posts() {
try {
// posts und user holen und schauen ob sie richtig sidn
const post_response = await fetch('http://localhost:8000/api/posts', { method: 'GET' });
if (!post_response.ok) {
throw new Error(`HTTP error! status: ${post_response.status}`);
}
const postsDATA = await post_response.json();
const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
if (!user_response.ok) {
throw new Error(`HTTP error! status: ${user_response.status}`);
}
const usersDATA = await user_response.json();
// posts und user kombinieren
const combinedPosts = postsDATA.filter(post => post.user_id === profile_id).map(post => {
const user = usersDATA.find(user => user.user_id === post.user_id);
return {
post_id: post.posts_uuid,
post_text: post.post_text,
likes: post.likes,
comments: post.comments,
displayname: user ? user.displayname : 'Unknown',
username: user ? user.username : 'unknown_user',
user_id: post.user_id,
};
}); });
console.log("upc: " + upc.value);
console.log("combinedPosts: " + combinedPosts);
//upc.value = combinedPosts;
upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
console.log("upc 2: " + upc.value);
console.log("combinedPosts 2: " + combinedPosts);
} catch (e) {
console.error("An error has occurred. Please try again later.");
console.error(e);
}
console.log(upc.value);
} }
onMounted(async () => { async function addLike(post_id: string | number, user_id: number, index: number) {
const userId = route.params.id;
try { try {
const data = await fetchProfile(userId); console.log("UPC: ", upc.value);
profile.value = data; console.log("post_id: ", post_id);
} catch (error) { upc.value[index].likes++;
console.error('Error fetching profile:', error); const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
} method: 'POST',
}); headers: {'content-type': 'application/json'},
router.beforeEach((to, from, next) => { body: `{"userId":${user_id}}`,
if ((from.name === 'Feed' || from.name === 'Settings') && to.name === 'Profile') {
// Set profile to 'danielvici123'
fetchProfile('danielvici123')
.then(data => {
profile.value = data;
next();
})
.catch(error => {
console.error('Error fetching profile:', error);
next();
}); });
} else {
next();
}
});
*/
function addLike(index: number) { console.log('Antwort-Status:', response.status);
post.value[index].likes += 1;
console.log("New Like Amount: ", post.value[index].likes); if (!response.ok) {
const errorText = await response.text();
console.error('Server-Fehlertext:', errorText);
//upc.value[index].likes--;
throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fehler beim Liken des Posts:', error);
throw error;
}
} }
</script> </script>
@@ -101,7 +130,7 @@ function addLike(index: number) {
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts (x)</h2> <h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts (x)</h2>
</div> </div>
<ul> <ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex"> <li v-for="(postitem, indexus) in upc" :key="postitem.user_id" class="border-2 border-b-grau2 p-3 flex">
<!-- POST --> <!-- POST -->
<img src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16"> <img src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div> <div>
@@ -119,7 +148,7 @@ function addLike(index: number) {
<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(indexus)"> <!-- Likes --> <div class="flex items-center" @click="addLike(postitem.post_id, postitem.user_id, indexus)"> <!-- 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">{{ postitem.likes }}</label> <label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
</div> </div>

6
src/components/register.vue
View File

@@ -9,12 +9,12 @@ function route_home() {
</script> </script>
<template> <template>
<div id="main" class="bg-hintergrund-farbe flex p-2 justify-between"> <div id="main" class="bg-hintergrund-farbe sm:flex p-2 sm:justify-between overflow-auto h-screen scrollbar">
<div class="pt-5"> <div class="pt-5">
<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="sm:inset-0"></register_main>
<div class="inset-y-0 right-0 max-w-36"> <div class="sm:inset-y-0 sm:right-0 sw:max-w-36 text-center">
<legal></legal> <legal></legal>
</div> </div>
</div> </div>

19
src/components/register_components/register_main.vue
View File

@@ -8,9 +8,8 @@ let register_input_displayname = ref("");
let register_input_password = ref(""); let register_input_password = ref("");
let register_input_email = ref(""); let register_input_email = ref("");
async function register() { async function register() {
const username = register_input_username; const username = register_input_username;
const displayname = register_input_displayname; const displayname = register_input_displayname;
const email = register_input_email; const email = register_input_email;
@@ -51,20 +50,20 @@ async function register() {
</script> </script>
<template> <template>
<div id="main" class="bg-hintergrund-farbe p-2 border-x border-x-grau2 px-20"> <div id="main" class="bg-hintergrund-farbe p-2 sm:border-x sm:border-x-grau2 sm:px-20">
<div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT--> <div class="text-3xl pt-20px sm:pt-32"> <!-- ÜBERSCHRIFT-->
<p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p> <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
<p class="text-weiss text-center pt-2">Join today!</p> <p class="text-weiss text-center pt-2">Join today!</p>
</div> </div>
<div class="px-20 pt-7"> <!-- FORM ---> <div class="px-20 pt-7"> <!-- FORM --->
<form class="flex flex-col items-center" @submit.prevent="register"> <form class="flex flex-col items-center" @submit.prevent="register">
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br> <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br>
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br> <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br>
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br> <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br>
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br> <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br>
<button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Create Account</button> <button class="m-4 bg-button-farbe sm:w-full max-w-xs p-4 text-schwarz rounded-lg">Create Account</button>
</form> </form>
<p class="text-weiss text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p> <p class="text-weiss w-100p text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p>
</div> </div>
</div> </div>
</template> </template>

4
src/components/search.vue
View File

@@ -9,10 +9,10 @@ import Contacts from "./home_components/contacts.vue";
<template> <template>
<div class="text-weiss flex"> <div class="text-weiss flex">
<div id="left" class="border-1 border-b-grau w-72"> <div id="left" class="sm:w-72 min-w-72 border-1 border-b-grau">
<navigationbar></navigationbar> <navigationbar></navigationbar>
</div> </div>
<div class="w-100p border-x-2 border-x-grau2"> <div class="sm:w-100p w-screen border-x-2 border-x-grau2">
<div class="border-b-grau2 border-b-2"> <div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Search</h1> <h1 class="text-weiss text-3xl p-4">Search</h1>
</div> </div>