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

suche geht jetzt, special sachen für user 99 (danielvici gemacht) und in einstellungen werden daten angezeigt

Browse Source
This commit is contained in:
danielvici123
2025-04-06 21:07:57 +02:00
parent 8f27246234
commit 4be4a26036
8 changed files with 304 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
database/sqlite3.exe Normal file
View File

Binary file not shown.

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

@@ -81,17 +81,6 @@ async function addLike(post_id: string | number, user_id: number, index: number)
}
}
function gotoPost(post_id: string | number) {
localStorage.setItem("viewedpost", post_id.toString());
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");
}
async function post_create(post_text: string) {
if (post_text === "") {
alert("Please write something before posting.");
@@ -114,6 +103,17 @@ async function post_create(post_text: string) {
console.log(post_text);
}
function gotoPost(post_id: string | number) {
localStorage.setItem("viewedpost", post_id.toString());
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");
}
function gotoProfile(user_id: string | number) {
router.push(`/profile/${user_id}`);
}
@@ -126,7 +126,8 @@ function gotoProfile(user_id: string | number) {
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b-2 ">Feed</h2>
<!-- POSTING-->
<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 v-if="self_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="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="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>
@@ -141,7 +142,9 @@ function gotoProfile(user_id: string | number) {
<ul>
<li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
<!-- POST -->
<img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-if="postitem.username != 'danielvici' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1 text-weiss">{{postitem.displayname}}</label>

54
src/components/posts.vue
View File

@@ -42,28 +42,10 @@ const comments = ref<Comment[] | null>(null);
let comment_text = ref();
let self_id;
const loading = ref(true);
let post_uuid = ref();
onMounted(async () => {
console.log("PARAMS: "+ route.path);
const pathArray = route.path.split('/');
console.log(pathArray);
if (pathArray.length > 2) {
post_uuid.value = pathArray[2];
console.log("post_id 0: ", post_uuid.value);
}
if (!post_uuid) {
alert('No post selected. Redirecting to feed.');
await router.push('/');
return;
}
self_id = localStorage.getItem('self_id');
getPost(parseInt(post_uuid.value));
getComment(parseInt(post_uuid.value));
});
async function getPost(post_id: any) {
try {
@@ -92,6 +74,8 @@ async function getPost(post_id: any) {
console.log(post.value);
} catch (e) {
console.error(e);
} finally {
loading.value = false;
}
}
@@ -219,6 +203,26 @@ async function addLike_comment(comment_id: number | string) {
function gotoProfile(user_id: string | number) {
router.push(`/profile/${user_id}`);
}
onMounted(async () => {
console.log("PARAMS: "+ route.path);
const pathArray = route.path.split('/');
console.log(pathArray);
if (pathArray.length > 2) {
post_uuid.value = pathArray[2];
console.log("post_id 0: ", post_uuid.value);
}
if (!post_uuid) {
alert('No post selected. Redirecting to feed.');
await router.push('/');
return;
}
self_id = localStorage.getItem('self_id');
getPost(parseInt(post_uuid.value));
getComment(parseInt(post_uuid.value));
});
</script>
<template>
@@ -233,7 +237,8 @@ function gotoProfile(user_id: string | number) {
<div class="flex px-2 py-4 border-b-grau2 border-b">
<img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-if="user.username != 'danielvici' " src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1 text-weiss">{{user.displayname}}</label>
@@ -266,7 +271,9 @@ function gotoProfile(user_id: string | number) {
<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">
<img v-if="self_id != '99' " src="../assets/default_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<img v-else 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">
<!-- 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>
@@ -282,7 +289,8 @@ function gotoProfile(user_id: string | number) {
<ul v-if="comments && comments.length > 0">
<li v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
<div class="flex">
<img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-if="c.author_user_id != '99' " src="../assets/default_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<img v-else src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1 text-weiss">{{c.displayname}}</label>

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

@@ -132,11 +132,12 @@ function copyUser(){
<template>
<div>
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Profile</h2>
<div class="mb-12" v-if="userData">
<div class="text-weiss p-4 flex justify-center">
<img src="../../assets/default_pp.png" alt="" class="size-36 rounded-full" />
<div class="mb-6" v-if="userData">
<div class="text-weiss p-2 flex justify-center">
<img v-if="userData.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full size-36">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full size-36">
</div>
<div class="text-center p-5 flex flex-col">
<div class="text-center p-2 flex flex-col">
<label class="text-xl font-bold m-1 text-weiss" @click="consoleLog()">{{ userData.displayname }}</label>
<label class="text-base m-1 text-grau2">@{{ userData.username }}</label>
</div>
@@ -155,10 +156,11 @@ function copyUser(){
<div>
<h2 class="align-middle p-6 text-xl text-weiss border-y-grau2 border-y ">Posts</h2>
</div>
<div class="sm:overflow-y-auto sm:h-[350px] sm:scrollbar">
<div class="sm:overflow-y-auto sm:h-[400px] sm:scrollbar">
<ul v-if="upc.length > 0">
<li v-for="(postitem, indexus) in upc" :key="postitem.user_id" class="border border-grau2 p-3 flex">
<img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-if="postitem.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div>
<label class="text-lg font-bold m-1 text-weiss">{{ userData.displayname }}</label>

280
src/components/search_components/search_main.vue
View File

@@ -1,198 +1,216 @@
<script setup lang="ts">
import {ref} from "vue";
import {ref, onMounted} from "vue";
import router from "../../router";
const hashtags = [ // DIESE HASTAGS SIND NUR FÜR DIE TRANDING DA
{id: 8,name: "gym", nr_posts: 2144, category: "Lifestyle"},
{id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
{id: 2,name: "lol" , nr_posts: 16422, category: "Gaming"},
{id: 7,name: "jetbrains", nr_posts: 1251, category: "Programming"},
{id: 4,name: "github", nr_posts: 464, category: "Programming"},
{id: 5,name: "r6",nr_posts: 4463, category: "Gaming"},
{id: 6,name: "25" , nr_posts: 123, category: "Numbers"},
{id: 3,name: "minecraft", nr_posts: 466, category: "Gaming"},
{id: 9,name: "tiktok", nr_posts: 215474, category: "social media"},
];
const dinge = ref([ // SUCH DINGER
{id: 1, username: "danielvici123", displayname: "danielvici223", type: "user", like:0},
{id: 2, text_content: "My First Post on ESP", comments: 24,like: 2151, author: "danielvici123", author_id: 1, type: "post"},
{id: 3, hashtag:"civ6", posts: 123, category: "Gaming", type: "hashtag" ,like:0},
{id: 5, username: "xbox_official", displayname: "xbox", type: "user" ,like:0},
{id: 4, username: "jetbrains", displayname: "jetbrains", type: "user" ,like:0},
{id: 6, text_content: "xbox is the best platform", comments: 24,like: 2151, author: "xbox", author_id: 5, type: "post"},
{id: 7, text_content: "webstorm x.x is out now! Check it out!", comments: 24,like: 2151, author: "jetbrains", author_id: 4, type: "post"},
{id: 8, hashtag:"civ7", posts: 514, category: "Gaming", type: "hashtag" ,like:0},
]);
// HASTAGS
let most_posts_hashtags = [];
hashtags.sort((a, b) => {
return b.nr_posts - a.nr_posts;
})
most_posts_hashtags = hashtags.slice(0, 3);
function addLike(index: number) {
dinge.value[index].like += 1; // damit das geht haben hastags und user likes.
console.log("New Like Amount: ", dinge.value[index].like);
}
console.log(most_posts_hashtags);
// FEED mit filter und suche
let feed = ref([]);
let feed2 = ref([]);
const allItems = ref<any[]>([]);
const feed = ref<any[]>([]);
const feed2 = ref<any[]>([]);
interface search_filter {
u: boolean; // user
h: boolean; // hastag
p: boolean; // posts
u: boolean;
p: boolean;
}
// Standard filter
const search_filter_status = ref<search_filter>({
u: true, // user default: true
h: true, // hastag default: true
p: true, // posts default: true
u: true,
p: true,
});
let searched = false;
const usr_search = ref<string | undefined>(undefined);
async function get_posts_user() {
try {
const post_response = await fetch('http://localhost:8000/api/posts');
const postsDATA = await post_response.json();
const user_response = await fetch('http://localhost:8000/api/users');
const usersDATA = await user_response.json();
usersDATA.forEach(user => {
allItems.value.push({...user, id: user.user_id, type: 'user'});
});
let usr_search;
postsDATA.forEach(post => {
const author = usersDATA.find(user => user.user_id === post.user_id);
const postWithAuthorInfo = {
...post,
type: 'post',
username: author ? author.username : 'unknown',
displayname: author ? author.displayname : 'unknown',
};
allItems.value.push(postWithAuthorInfo);
});
for(let i =0; i < dinge.value.length; i++) {
console.log("Getting Notifications...");
feed.value.push(dinge.value[i]);
feed.value = [...allItems.value];
feed2.value = [...allItems.value];
//console.log("Data Loaded:", allItems.value);
} catch (error) {
console.error("Error:", error);
}
}
onMounted(async () => {
get_posts_user();
});
function go_fs(){
console.log("These Filter applied: ", JSON.stringify(search_filter_status.value));
searched = true;
feed.value = [];
feed2.value = [];
dinge.value.forEach((dinge) => {
if ((search_filter_status.value.u == true && dinge.type === "user") || (search_filter_status.value.h == true && dinge.type === "hashtag")|| (search_filter_status.value.p == true && dinge.type === "post")){
feed2.value.push(dinge);
const combinedFilteredItems = allItems.value
.filter(item => (search_filter_status.value.u == true && item.type === "user") ||
(search_filter_status.value.p == true && item.type === "post"))
.map(item => {
if (item.type === 'post') {
const user = allItems.value.find(u => u.id === item.user_id && u.type === 'user');
return {
...item,
username: user ? user.username : 'unknown',
displayname: user ? user.displayname : 'unknown',
};
}
})
let i = 0;
if (usr_search == undefined) {
feed = feed2;
return item;
});
feed2.value = combinedFilteredItems;
const searchTerm = usr_search.value ? usr_search.value.toLowerCase() : '';
if (!searchTerm) {
feed.value = [...feed2.value];
return;
} else {
feed2.value.forEach(() => {
switch (feed2.value[i].type) {
}
feed.value = feed2.value.filter(item => {
switch (item.type) {
case "user":
if (feed2.value[i].displayname.includes(usr_search) || feed2.value[i].username.includes(usr_search)) {
feed.value.push(feed2.value[i]);
}
console.log("User: ", feed2.value[i].displayname);
break;
return (item.displayname && item.displayname.toLowerCase().includes(searchTerm)) || (item.username && item.username.toLowerCase().includes(searchTerm));
case "post":
if (feed2.value[i].text_content.includes(usr_search) || feed2.value[i].author.includes(usr_search)) {
feed.value.push(feed2.value[i]);
}
console.log("Post: ", feed2.value[i]);
break;
case "hashtag":
if (feed2.value[i].hashtag.includes(usr_search)) {
feed.value.push(feed2.value[i]);
}
console.log("Hashtag: ", feed2.value[i].hashtag);
break;
return (item.post_text && item.post_text.toLowerCase().includes(searchTerm)) || (item.username && item.username.toLowerCase().includes(searchTerm) || item.displayname && item.displayname.toLowerCase().includes(searchTerm));
default:
console.log("No Results Found");
break;
return false;
}
i++;
})
});
}
async function addLike(post_id: string | number, user_id: number, index: number) {
try {
feed.value[index].likes++;
const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: `{"userId":${user_id}}`,
});
console.log("Feed:", feed.value);
if (!response.ok) {
const errorText = await response.text();
console.error('Server-Fehlertext:', errorText);
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;
}
}
function gotoPost(post_id: string ) {
localStorage.setItem("viewedpost", post_id);
router.push(`/post/${post_id}`);
console.log("goto 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");
}
function gotoProfile(user_id: string | number) {
router.push(`/profile/${user_id}`);
}
</script>
<template>
<div>
<div class="flex justify-center"> <!-- Search-->
<div class="flex justify-center">
<div class="w-1/2">
<form @submit.prevent="go_fs" class="flex flex-col">
<input type="text" placeholder="Search..." class="w-full m-2 mt-6 p-4 bg-grau-dunkel focus:outline-none rounded-xl placeholder:text-center text-center" v-model="usr_search">
<div class="flex justify-center text-grau2">
<label class="m-2 accent-logo-farbe-blau"><input type="checkbox" class="mr-1" v-model="search_filter_status.u">User</label>
<label class="m-2 accent-logo-farbe-rot" ><input type="checkbox" class="mr-1" v-model="search_filter_status.h">Hashtag</label>
<label class="m-2 accent-logo-farbe-lila"><input type="checkbox" class="mr-1" v-model="search_filter_status.p">Post</label>
<label class="m-2 accent-button-farbe"><input type="checkbox" class="mr-1" v-model="search_filter_status.u">User</label>
<label class="m-2 accent-button-farbe"><input type="checkbox" class="mr-1" v-model="search_filter_status.p">Post</label>
</div>
<button class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe w-1/2 place-self-center">Filter</button>
<button class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe w-1/2 place-self-center">Filter /Search </button>
</form>
</div>
</div>
<!-- ### ### ### ### ### ### ### -->
<div>
<div>
<a class="text-2xl flex justify-center mt-4">Result(s):</a> <!-- ---------RESULTS---------------- -->
<a class="text-2xl flex justify-center mt-4 pt-2 p-3 border-b-grau2 border-b">Result(s):</a>
</div>
<div v-if="feed.length > 0">
<div v-for="(bing, i) in feed" :key="bing" class=""> <!-- SEARCH RESULTS -->
<div v-if="bing.type === 'user'" class="pt-2 p-3 border-b-grau2 border-b"> <!-- --- USER RESULT --- -->
<div v-if="feed.length > 0 && searched == true" class="sm:overflow-y-auto sm:h-[650px] sm:scrollbar">
<div v-for="(bing, i) in feed" :key="bing.id">
<div v-if="bing.type === 'user'" class="pt-2 p-3 border-b-grau2 border-b">
<div class="flex">
<img src="/src/assets/default_pp.png" alt="profile picture" class="rounded-full w-16 h-16">
<img v-if="bing.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div class="">
<a class="text-lg m-1">{{ bing.displayname }}</a>
<a class="text-base m-1 text-grau2">@{{ bing.username }}</a>
<div><a class=" text-sm m-3 text-weiss">my cool bio</a></div>
</div>
</div>
</div>
<!-- ### ### -->
<div v-else-if="bing.type === 'post'" class="flex p-3 border-b-grau2 border-b " > <!-- POST RESULT-->
<img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg m-1 text-weiss">{{bing.author}}</label>
<label class="text-base m-1 text-grau2">@username</label>
<a class=" text-sm m-3 text-weiss" v-if="bing.bio">{{ bing.bio }}</a>
<a class=" text-sm m-3 text-grau2 italic" v-else>User has no bio.</a>
</div>
<div class="m-2"> <!-- POST CONTENT -->
<p class="text-sm m-1 text-weiss">{{ bing.text_content }}</p>
<button @click="gotoProfile(bing.user_id)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe"> Go to Profile</button>
</div>
<div class="pt-2">
<div class="flex"> <!-- POST FOOTER -->
<div class="flex"> <!-- Comments -->
</div>
</div>
<div v-else-if="bing.type === 'post'" class="flex p-3 border-b-grau2 border-b "> <!-- POSTS -->
<img v-if="bing.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div>
<label class="text-lg m-1 text-weiss">{{ bing.displayname }}</label>
<label class="text-base m-1 text-grau2">@{{ bing.username }}</label>
</div>
<div class="m-2">
<p class="text-sm m-1 text-weiss">{{ bing.post_text }}</p>
</div>
<div class="sm:flex pt-2">
<div class="flex">
<div class="flex">
<img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
<label class="text-sm m-1 text-weiss" v-if="bing.comments != undefined">{{ bing.comments }}</label>
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
</div>
<div class="flex items-center" @click="addLike(i)"> <!-- Likes -->
<div class="flex items-center" @click="addLike(bing.posts_uuid, bing.user_id, i)">
<img alt="" src="../../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1 text-weiss">{{ bing.like }}</label>
</div>
</div>
<label class="text-sm m-1 text-weiss">{{ bing.likes }}</label>
</div>
</div>
<br class="sm:hidden">
<div class="flex sm:tems-center mx-2"> <!-- View Post -->
<button @click="gotoPost(bing.posts_uuid)" class="text-schwarz mx-1 px-1 rounded-lg bg-button-farbe">View Post</button>
<button @click="copyLink(bing.posts_uuid)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
<button @click="gotoProfile(bing.user_id)" class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe"> Go to Profile</button>
</div><!-- ENDE -->
<!-- ### ### -->
<div v-else-if="bing.type === 'hashtag'"> <!-- HASHTAG RESULT-->
<div class="p-3 border-b-grau2 border-b">
<h1 class="text-xl font-bold m-1 text-weiss">#{{ bing.hashtag }}</h1>
<p class="text-sm m-1 text-grau2">{{ bing.posts }} posts - {{ bing.category}}</p>
</div>
</div>
<!-- ### ### -->
<div v-else> <!-- NO RESULT-->
<div class="p-3 border-b-grau2 border-b">
<h1 class="text-xl font-bold m-1 text-weiss">No Results Found</h1>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="searched == false" class="flex justify-center">
<a class="text-2xl text-logo-farbe-rot p-10 text-center">To see results you have to search</a>
</div>
<div v-else class="flex justify-center">
<a class="text-xl text-logo-farbe-rot p-10 text-center">No Results Found!</a>
<a class="text-xl text-logo-farbe-rot p-10 text-center">No Results Found</a>
</div>
</div>
</div>

2
src/components/settings.vue
View File

@@ -21,7 +21,7 @@ function handleUpdateSetting(setting: string) {
<navigationbar></navigationbar>
<settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
</div>
<div class="w-100p sm:border-x-grau2 sm:border-x-2 border-y border-y-grau2 my-2">
<div class="w-100p sm:border-x-grau2 sm:border-x-2 my-2">
<settings_main :selectedSetting="selectedSetting"></settings_main>
</div>
<div class="sm:w-1/4">

71
src/components/settings_components/sa_account-information_comp.vue
View File

@@ -1,30 +1,79 @@
<script setup>
import { ref, onMounted } from "vue";
let self = ref(null); // Initialisiere self mit null
let self_id = ref();
async function getSelf() {
try {
const response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
if (!response.ok) {
console.error(`HTTP-Fehler! Status: ${response.status}`);
self.value = null;
return;
}
const users = await response.json();
const foundUser = users.find(user => {
return String(user.user_id) === self_id.value;
});
if (foundUser) {
self.value = foundUser;
} else {
self.value = null;
}
} catch (error) {
console.error('ERROR:', error);
self.value = null;
}
}
onMounted(() => {
self_id.value = localStorage.getItem('self_id');
getSelf();
console.log("SELF ID (onMounted):", self_id.value);
});
</script>
<template>
<div class="space-y-2 pl-2">
<p class="text-2xl text-weiss pt-2 items-center flex justify-center">danielvici (USERNAME)</p>
<div class="space-y-2 pl-2" v-if="self">
<p class="text-2xl text-weiss pt-2 items-center flex justify-center">{{ self.displayname }}</p>
<div>
<a class="text-lg text-weiss">Displayname</a><br>
<a class="text-grau2">danielvici123</a>
<a class="text-lg text-weiss">Username</a><br>
<a class="text-grau2">{{ self.username }}</a>
</div>
<div>
<a class="text-lg text-weiss">User created at</a><br>
<a class="text-grau2">{{ self.account_created }}</a>
</div>
<div>
<a class="text-lg text-weiss">Email</a><br>
<a class="text-grau2">email@e.mail</a>
<a class="text-grau2">{{ self.user_email }}</a>
</div>
<div>
<a class="text-lg text-weiss">firstname</a><br>
<a class="text-grau2">daniel</a>
<a class="text-lg text-weiss">User ID</a><br>
<a class="text-grau2">{{ self.user_id }}</a>
</div>
<div>
<a class="text-lg text-weiss">lastname</a><br>
<a class="text-grau2">vici</a>
<a class="text-lg text-weiss">Firstname</a><br>
<a class="text-grau2">{{ self.firstname }}</a>
</div>
<div>
<a class="text-lg text-weiss">phone</a><br>
<a class="text-grau2">123</a>
<a class="text-lg text-weiss">Surname</a><br>
<a class="text-grau2">{{ self.surname }}</a>
</div>
<div>
<a class="text-lg text-weiss">Bio</a><br>
<a class="text-grau2">{{ self.bio }}</a>
</div>
</div>
<div v-else class="flex justify-center items-center">
<p class="text-2xl text-weiss pt-2 items-center flex justify-center">User data is being loaded or does not exist</p>
</div>
</template>

8
src/components/settings_components/settings_sidebar.vue
View File

@@ -15,10 +15,10 @@ function updateSetting(setting: string) {
<template>
<div class="text-grau2 font-bold space-y-4 pl-2 pt-5">
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_account' || selectedSetting === ''}" @click="updateSetting('setting_account')"><img class="pr-2" src="../../assets/icons/user.png" alt="">Account</label>
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_privacy'}" @click="updateSetting('setting_privacy')"><img class="pr-2" src="../../assets/icons/shield.png" alt="">Privacy and Saftey</label>
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_message'}" @click="updateSetting('setting_messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_other'}" @click="updateSetting('setting_other')"><img class="pr-2" src="../../assets/icons/other.png" alt="">Other</label>
<label class="flex text-center rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_account' || selectedSetting === ''}" @click="updateSetting('setting_account')"><img class="pr-2" src="../../assets/icons/user.png" alt="">Account</label>
<label class="flex text-center rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_privacy'}" @click="updateSetting('setting_privacy')"><img class="pr-2" src="../../assets/icons/shield.png" alt="">Privacy and Saftey</label>
<label class="flex text-center rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_message'}" @click="updateSetting('setting_messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_other'}" @click="updateSetting('setting_other')"><img class="pr-2" src="../../assets/icons/other.png" alt="">Other</label>
</div>
</template>