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

kleine änderung/anpassungen, login zwang, messages hinzugefügt,

Browse Source
This commit is contained in:
danielvici123
2025-03-22 12:51:56 +01:00
parent 7331b1b9b0
commit 932edc5a2b
25 changed files with 938 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
deno.lock generated
View File

@@ -24,7 +24,9 @@
"npm:postcss@^8.4.47": "8.4.47",
"npm:tailwindcss@*": "3.4.14_postcss@8.4.47",
"npm:tailwindcss@^3.4.14": "3.4.14_postcss@8.4.47",
"npm:typescript@^5.8.2": "5.8.2",
"npm:url@~0.11.4": "0.11.4",
"npm:vite-plugin-checker@~0.9.1": "0.9.1_vite@5.4.10_@types+node@22.5.4",
"npm:vite@*": "5.4.10",
"npm:vite@^5.4.10": "5.4.10",
"npm:vue-router@4": "4.4.5_vue@3.5.12",
@@ -78,6 +80,14 @@
"@alloc/quick-lru@5.2.0": {
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
},
"@babel/code-frame@7.26.2": {
"integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
"dependencies": [
"@babel/helper-validator-identifier",
"js-tokens",
"picocolors"
]
},
"@babel/helper-string-parser@7.25.9": {
"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="
},
@@ -100,7 +110,7 @@
"@deno/vite-plugin@1.0.0_vite@5.4.10": {
"integrity": "sha512-Q9UeWqs3s7B5lqzu1Z5QrzYAzqTj3+F9YW17tWobGRbT2G40ihwis6zK/+QgMgcG4fm3IqdIfXmpQYhkZpdMfw==",
"dependencies": [
"vite"
"vite@5.4.10"
]
},
"@esbuild/aix-ppc64@0.21.5": {
@@ -293,7 +303,7 @@
"@vitejs/plugin-vue@5.1.4_vite@5.4.10_vue@3.5.12": {
"integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
"dependencies": [
"vite",
"vite@5.4.10",
"vue"
]
},
@@ -393,7 +403,7 @@
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dependencies": [
"normalize-path",
"picomatch"
"picomatch@2.3.1"
]
},
"arg@5.0.2": {
@@ -464,7 +474,13 @@
"is-binary-path",
"is-glob",
"normalize-path",
"readdirp"
"readdirp@3.6.0"
]
},
"chokidar@4.0.3": {
"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
"dependencies": [
"readdirp@4.1.1"
]
},
"color-convert@2.0.1": {
@@ -482,7 +498,7 @@
"cross-spawn@7.0.3": {
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
"dependencies": [
"path-key",
"path-key@3.1.1",
"shebang-command",
"which"
]
@@ -581,6 +597,12 @@
"reusify"
]
},
"fdir@6.4.3_picomatch@4.0.2": {
"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
"dependencies": [
"picomatch@4.0.2"
]
},
"fill-range@7.1.1": {
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dependencies": [
@@ -700,6 +722,9 @@
"jiti@1.21.6": {
"integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w=="
},
"js-tokens@4.0.0": {
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"lilconfig@2.1.0": {
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
},
@@ -725,7 +750,7 @@
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dependencies": [
"braces",
"picomatch"
"picomatch@2.3.1"
]
},
"minimatch@9.0.5": {
@@ -757,6 +782,13 @@
"normalize-range@0.1.2": {
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
},
"npm-run-path@6.0.0": {
"integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
"dependencies": [
"path-key@4.0.0",
"unicorn-magic"
]
},
"object-assign@4.1.1": {
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
},
@@ -772,6 +804,9 @@
"path-key@3.1.1": {
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
},
"path-key@4.0.0": {
"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="
},
"path-parse@1.0.7": {
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
},
@@ -791,6 +826,9 @@
"picomatch@2.3.1": {
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
},
"picomatch@4.0.2": {
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="
},
"pify@2.3.0": {
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
},
@@ -867,9 +905,12 @@
"readdirp@3.6.0": {
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": [
"picomatch"
"picomatch@2.3.1"
]
},
"readdirp@4.1.1": {
"integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw=="
},
"resolve@1.22.8": {
"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
"dependencies": [
@@ -995,7 +1036,7 @@
"dependencies": [
"@alloc/quick-lru",
"arg",
"chokidar",
"chokidar@3.6.0",
"didyoumean",
"dlv",
"fast-glob",
@@ -1029,6 +1070,16 @@
"any-promise"
]
},
"tiny-invariant@1.3.3": {
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
},
"tinyglobby@0.2.12_picomatch@4.0.2": {
"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
"dependencies": [
"fdir",
"picomatch@4.0.2"
]
},
"to-regex-range@5.0.1": {
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dependencies": [
@@ -1038,9 +1089,15 @@
"ts-interface-checker@0.1.13": {
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
},
"typescript@5.8.2": {
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="
},
"undici-types@6.19.8": {
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
},
"unicorn-magic@0.3.0": {
"integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA=="
},
"update-browserslist-db@1.1.1_browserslist@4.24.2": {
"integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
"dependencies": [
@@ -1059,6 +1116,21 @@
"util-deprecate@1.0.2": {
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"vite-plugin-checker@0.9.1_vite@5.4.10_@types+node@22.5.4": {
"integrity": "sha512-neH3CSNWdkZ+zi+WPt/0y5+IO2I0UAI0NX6MaXqU/KxN1Lz6np/7IooRB6VVAMBa4nigqm1GRF6qNa4+EL5jDQ==",
"dependencies": [
"@babel/code-frame",
"chokidar@4.0.3",
"npm-run-path",
"picocolors",
"picomatch@4.0.2",
"strip-ansi@7.1.0",
"tiny-invariant",
"tinyglobby",
"vite@5.4.10_@types+node@22.5.4",
"vscode-uri"
]
},
"vite@5.4.10": {
"integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
"dependencies": [
@@ -1068,6 +1140,19 @@
"rollup"
]
},
"vite@5.4.10_@types+node@22.5.4": {
"integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
"dependencies": [
"@types/node",
"esbuild",
"fsevents",
"postcss",
"rollup"
]
},
"vscode-uri@3.1.0": {
"integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="
},
"vue-router@4.4.5_vue@3.5.12": {
"integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
"dependencies": [
@@ -1266,7 +1351,9 @@
"packageJson": {
"dependencies": [
"npm:@deno/vite-plugin@1",
"npm:@vitejs/plugin-vue@^5.1.4"
"npm:@vitejs/plugin-vue@^5.1.4",
"npm:typescript@^5.8.2",
"npm:vite-plugin-checker@~0.9.1"
]
}
}

2
index.html
View File

@@ -1,4 +1,4 @@
<!doctype html>
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

896
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -2,5 +2,9 @@
"dependencies": {
"@deno/vite-plugin": "^1.0.0",
"@vitejs/plugin-vue": "^5.1.4"
},
"devDependencies": {
"typescript": "^5.8.2",
"vite-plugin-checker": "^0.9.1"
}
}

BIN
src/assets/icons/logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 B

3
src/components/Home.vue
View File

@@ -8,10 +8,9 @@ import Trending from "./home_components/trending.vue";
<template>
<div id="main" class="bg-hintergrund-farbe flex">
<div id="main" class="flex">
<div id="left" class="border border-b-grau w-72">
<navigationbar></navigationbar>
<trending></trending>
</div>
<div class="w-100p">
<feed></feed>

2
src/components/Login.vue
View File

@@ -16,7 +16,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">
</div>
<login_comp class="inset-0"></login_comp>
<div class="inset-y-0 right-0 ">
<div class="inset-y-0 right-0 max-w-36">
<legal></legal>
</div>
</div>

1
src/components/home_components/contacts.vue
View File

@@ -6,6 +6,7 @@ const contacts = [
{ display_name: "Linux Enjoyer", username: "lunix" },
{ display_name: "XBOX", username: "xbox" },
{ display_name: "JETBrains", username: "jetbrains" },
{ display_name: "klopupser13", username: "theopampa",}
];
const selectedContact = ref(null);

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

@@ -2,24 +2,22 @@
import {onMounted, ref} from "vue";
import router from "../../router";
// import {valueOf} from "tailwindcss";
function checkLoginStatus() {
/* PRÜFEN OB USER EINGELOGGT IST
#########################################
* function checkLoginStatus() {
const isLoggedIn = localStorage.getItem('isLoggedIn');
if (isLoggedIn === 'true') {
console.log("User is logged in");
// Perform actions for logged-in users
} else {
console.log("User is not logged in");
// Redirect to login page or show a message
// router.push('/login');
router.push('/login');
}
}
// Call this function on component mount or when needed
onMounted(() => {
checkLoginStatus();
});
* */
// PLACEHOLDER
const post = ref([
{id: 1,

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

@@ -10,7 +10,7 @@ let self = ref("danielvici123");
</script>
<template>
<div class="pt-4 border-b-2 border-b-grau2 border-r-1 border-r-grau2">
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center"><!-- BILD-->
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel" @click="router.push('/')">
</div>
@@ -18,7 +18,7 @@ let self = ref("danielvici123");
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/')"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/search')"> <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/notifications')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/wip')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot rounded-lg" @click="router.push('/messages')"> <img class="mr-2 p-1 bg-logo-farbe-rot rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push(`/profile/${self}`)"> <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/settings')"> <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>

50
src/components/home_components/popup_chat.vue
View File

@@ -1,16 +1,19 @@
<script setup lang="ts">
import {defineProps, defineEmits, onMounted, watch, ref} from 'vue';
import { nextTick } from 'vue';
let current_contact = null;
let self = "danielvici123";
const nachrichten = [
{ username: "lunix", message: "Moin", msg_id: 1, chat_id: 16423 },
{ username: "xbox", message: "Hey, was geht?", msg_id: 2, chat_id: 29874 },
{ username: "danielvici123", message: "Alles gut, und bei dir?", msg_id: 3, chat_id: 29874 },
{ username: "jetbrains", message: "Hat jemand Erfahrung mit IntelliJ?", msg_id: 4, chat_id: 41235 },
{ username: "danielvici123", message: "Ja, was brauchst du?", msg_id: 5, chat_id: 41235 },
{ username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 }
{ display_name: "Linux Enjoyer", username: "lunix", message: "Moin", msg_id: 1, chat_id: 16423 },
{ display_name: "XBOX",username: "xbox", message: "Hey, was geht?", msg_id: 2, chat_id: 29874 },
{ display_name: "danielvici223", username: "danielvici123", message: "Alles gut, und bei dir?", msg_id: 3, chat_id: 29874 },
{ display_name: "JETBrains",username: "jetbrains", message: "Hat jemand Erfahrung mit IntelliJ?", msg_id: 4, chat_id: 41235 },
{ display_name: "danielvici223",username: "danielvici123", message: "Ja, was brauchst du?", msg_id: 5, chat_id: 41235 },
{ display_name: "JETBrains",username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 },
{ display_name: "klopupser13", username: "theopampa", message: "ja ok können wir machen", msg_id: 7, chat_id: 41245 },
{ display_name: "danielvici223",username: "danielvici123", message: "willst du fornite", msg_id: 7, chat_id: 41245 },
];
let geladeneNachrichten = ref([]);
@@ -28,18 +31,35 @@ function closeChat() {
function openCHAT() {
geladeneNachrichten.value = [];
console.log("Chat geöffnet");
current_contact = props.contact;
// conact ist null dann abruch
if(!props.contact) return;
// contact ist der aktuelle kontakt
current_contact = props.contact ? { ...props.contact } : null;
console.log(current_contact);
nachrichten.forEach((nachricht) => {
if (nachricht.username == current_contact.username) {
/*nachrichten.forEach((nachricht) => {
if ((nachricht.username == current_contact.username || nachricht.username == self) && nachricht.chat_id == current_contact.chat_id) {
geladeneNachrichten.value.push(nachricht);
}
});
*/
geladeneNachrichten.value = nachrichten.filter((nachricht) => {
console.log(`Nachricht von ${nachricht.username} mit Chat-ID ${nachricht.chat_id}`);
return (
(nachricht.username === current_contact.username || nachricht.username === self) &&
nachricht.chat_id == current_contact.chat_id
);
});
console.log("Nach dem Filtern:", geladeneNachrichten.value);
console.log(geladeneNachrichten);
}
function sendMessage(){
function sendMessage(event){
event.preventDefault();
// API nachricht senden
console.log("Nachricht gesendet")
@@ -47,10 +67,14 @@ function sendMessage(){
onMounted(() => {
openCHAT();
console.log("Current Contact:", current_contact);
});
watch(() => props.contact, () => {
openCHAT();
console.log("Current Contact:", current_contact);
});
</script>
@@ -61,13 +85,13 @@ watch(() => props.contact, () => {
<h3 class="text-lg font-bold">{{ contact.display_name }}</h3>
<a class="px-2">@{{ contact.username }}</a>
</div>
<button @click="closeChat" class="text-logo-farbe-rot"><img src="../../assets/icons/x-klein.png" alt=""></button>
<button @click="closeChat"><img src="../../assets/icons/x-klein.png" alt=""></button>
</div>
<div class="mt-2">
<ul class="space-y-2">
<li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id">
<li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id || msg.id">
<div class="space-x-2">
<a class="font-bold">{{contact.display_name}}</a>
<a class="font-bold">{{ msg.display_name }}</a>
</div>
<div>
<p>{{ msg.message }}</p>

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

@@ -33,7 +33,7 @@ async function login(event: Event) {
if (rememberMe.value) {
localStorage.setItem('username', username.value);
}
localStorage.setItem('isLoggedIn', 'true'); // Set the login flag
localStorage.setItem('isLoggedIn', 'true');
alert("You will be now redirected");
router.push('/');
} else {
@@ -47,10 +47,10 @@ async function login(event: Event) {
</script>
<template>
<div class="px-20 border-x border-x-grau2 pb-35p">
<div class="px-20 border-x border-x-grau2 pb-32">
<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">Login or create a new Account to continue</p>
<p class="text-weiss text-center">Login to continue</p>
</div>
<div class="px-20 pt-7"><!-- FORM --->
<form class="flex flex-col items-center" @submit.prevent="login">
@@ -62,8 +62,10 @@ async function login(event: Event) {
</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"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
</div>
</div>
</template>
<style scoped>

27
src/components/messages.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
import Contacts from "./home_components/contacts.vue";
import Feed from "./home_components/feed.vue";
import Legal from "./home_components/legal.vue";
import Navigationbar from "./home_components/navigationbar.vue";
import Msg_main from "./messages_components/msg_main.vue";
</script>
<template>
<div id="main" class=" flex">
<div id="left" class="w-72">
<navigationbar></navigationbar>
</div>
<div class="w-100p">
<msg_main></msg_main>
</div>
<div class="w-1/4">
<contacts></contacts>
<legal></legal>
</div>
</div>
</template>
<style scoped>
</style>

60
src/components/messages_components/msg_main.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import {ref} from "vue";
import Popup_chat from "../home_components/popup_chat.vue";
const nachrichten = ref([
{id: 1,
profile_picture: "../../assets/default_pp.png", display_name: "Linux Enjoyer",username: "lunix",
content:"Moin!",
type:"message",date: new Date(2024,11,13).toDateString() },
{id: 2,
profile_picture: "../../assets/default_pp.png",
display_name: "XBOX",username: "xbox",
content: "Hey, was geht?",
type:"message",date: new Date(2024,9,13).toDateString()},
{id: 4,// Sollte im feed sein
profile_picture: "../../assets/default_pp.png",
display_name: "klopupser13", username: "theopampa",
content: "ja ok können wir machen",
type:"following",date: new Date(2025,1,15).toDateString()}
]);
const selectedContact = ref(null);
const showChatPopup = ref(false);
function openChat(contact) {
selectedContact.value = contact;
showChatPopup.value = true;
}
</script>
<template>
<div class="border-x-grau2 border-x-2">
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Messages</h1>
</div>
<div>
<ul>
<li v-for="nachricht in nachrichten" :key="nachricht.id" class="border-b-grau2 border-b-2" @click="openChat(nachricht)">
<div class="flex p-4">
<img src="../../assets/default_pp.png" alt="user profile picture" class="rounded-full w-16 h-16">
<div>
<div class="flex">
<label class="text-lg font-bold m-1 text-weiss">{{nachricht.display_name}}</label>
<label class="text-lg m-1 text-grau2">@{{nachricht.username}}</label>
<label class="m-2 text-grau2">{{nachricht.date}}</label>
</div>
<a class="ml-1 text-weiss">{{nachricht.content}}</a>
</div>
</div>
</li>
</ul>
</div>
<popup_chat v-if="showChatPopup" :contact="selectedContact" @close="showChatPopup = false" />
</div>
</template>
<style scoped>
</style>

3
src/components/notifications.vue
View File

@@ -12,9 +12,6 @@ import Contacts from "./home_components/contacts.vue";
<navigationbar></navigationbar>
</div>
<div class="w-100p border-x-2 border-x-grau2">
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Notifications</h1>
</div>
<notifi_comp></notifi_comp>
</div>
<div class="w-1/4">

41
src/components/notifications_components/notif_sidebar.vue
View File

@@ -1,41 +0,0 @@
<!---WIRD NICHT MEHR BENTUTZ ABER VIELLEICHT SPÄTER IRGENDWAN WICHTIG -->
<script setup lang="ts">
import { ref } from 'vue';
import router from "../../router";
const componentsStatus = ref({});
const selected_destination = ref('');
const props = defineProps({
selectedNotification: String
});
const selectedNotification = ref('');
function handleUpdateNotification(setting: string) {
selectedNotification.value = setting;
}
function fun_route(destination: string) {
selected_destination.value = destination;
if (componentsStatus.value[destination] === 'wip') {
router.push("wip");
} else {
}
}
</script>
<template>
<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 pr-2 font-bold text-xl text-grau2">
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1 " @click="fun_route('all')" :class="{'text-weiss': selected_destination === 'all' || selected_destination === ''}">All</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('following')" :class="{'text-weiss': selected_destination === 'following'}">You Following</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('messages')" :class="{'text-weiss': selected_destination === 'messages'}">Messages</p>
<p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('other')" :class="{'text-weiss': selected_destination === 'other'}">Other</p>
</div>
</template>
<style scoped>
</style>

4
src/components/notifications_components/notifi_main.vue
View File

@@ -79,7 +79,11 @@ function go_filter(){
<template>
<div>
<div class="border-b-grau2 border-b-2">
<h1 class="text-weiss text-3xl p-4">Notifications</h1>
</div>
<div class="text-grau2 p-5 border-b-2 "><!-- FILTER -->
<!-- Wenn das Form submited wurde wird die Seite nicht-->
<!-- neugeladen und die Funktion -->
<form @submit.prevent="go_filter">

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

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {countPosts} from "../../../database/utils";
const route = useRoute();
const router = useRouter();
@@ -26,10 +27,12 @@ const post = ref([
])
onMounted(async () => {
const countPosts = post.value.length;
});
//Wird bearbeitet wenn API dazu da ist.
/*
function fetchProfile(userId) {
// Replace with your actual API call
return fetch(`/api/profile/${userId}`)
.then(response => {
if (!response.ok) {
@@ -48,7 +51,6 @@ onMounted(async () => {
console.error('Error fetching profile:', error);
}
});
router.beforeEach((to, from, next) => {
if ((from.name === 'Feed' || from.name === 'Settings') && to.name === 'Profile') {
// Set profile to 'danielvici123'
@@ -65,7 +67,7 @@ router.beforeEach((to, from, next) => {
next();
}
});
*/
function addLike(index: number) {
post.value[index].likes += 1;
@@ -97,7 +99,7 @@ function addLike(index: number) {
<div> <!-- POSTS -->
<div>
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts</h2>
<h2 class="align-middle mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts ({{countPosts()}})</h2>
</div>
<ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">

1
src/components/settings.vue
View File

@@ -2,7 +2,6 @@
import { ref } from 'vue';
import Legal from "./home_components/legal.vue";
import Settings_sidebar from "./settings_components/settings_sidebar.vue";
import Settings_navbar from "./settings_components/settings_navbar.vue";
import Settings_main from "./settings_components/settings_main.vue";
import Navigationbar from "./home_components/navigationbar.vue";
import Contacts from "./home_components/contacts.vue";

10
src/components/settings_components/settings_main.vue
View File

@@ -3,6 +3,7 @@ import { ref } from 'vue';
import Settings_account from "./settings_account.vue";
import Settings_account_main from "./settings_account_main.vue";
import Sps_main from "./sps_main.vue";
import So_main from "./so_main.vue";
const props = defineProps({
selectedSetting: String
@@ -21,7 +22,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
<div class="text-weiss">
<div v-if="props.selectedSetting === 'setting_account'"> <!-- ACCOUNT SETTINGS-->
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
<h1 class="text-weiss text-3xl p-4">Account</h1>
</div>
<div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
@@ -49,7 +50,10 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
</div>
<div v-else-if="props.selectedSetting === 'setting_other'"> <!-- OTHER -->
<label>MOIN4</label>
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Other</h1>
</div>
<so_main></so_main>
</div>
@@ -59,7 +63,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
<div v-else-if="props.selectedSetting === ''"> <!-- IF NOTHING SELECTED-->
<div class="border-r-grau2 border-r-1 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
<h1 class="text-weiss text-3xl p-4">Account</h1>
</div>
<div class="flex flex-row content-center justify-center"> <!-- BODY - ACCOUNT SETTINGS-->
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>

69
src/components/settings_components/settings_navbar.vue
View File

@@ -1,69 +0,0 @@
<script setup lang="ts">
// Funktionen um die Seiten zu öffnen
// home -> app.vue
import router from "../../router";
import { ref, onMounted } from 'vue';
const componentsStatus = ref({});
async function loadComponentsStatus() {
const response = await fetch('src/components/status.json');
componentsStatus.value = await response.json();
}
onMounted(() => {
loadComponentsStatus();
});
function fun_route(destination: string) {
if (componentsStatus.value[destination] === 'wip') {
router.push("wip");
} else {
switch (destination) {
case "home":
router.push("/");
break;
case "search":
router.push("search");
break;
case "notifications_components":
router.push("notifications_components");
break;
case "messages":
router.push("messages");
break;
case "accounts":
router.push("accounts");
break;
case "settings":
router.push("settings");
break;
default:
router.push("/");
break;
}
}
}
</script>
<template>
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="fun_route('home')">
</div>
<div class="align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl">
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('home')"><img class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('search')"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('notifications_components')"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('accounts')"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('settings')"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>
</div>
</template>
<style scoped>
</style>

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

@@ -2,6 +2,7 @@
import { defineEmits } from 'vue';
import { ref } from 'vue';
const emit = defineEmits(['updateSetting']);
const selectedSetting = ref('');

23
src/components/settings_components/so_main.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import router from "../../router";
function logout() {
console.log("Logout");
localStorage.setItem('isLoggedIn', 'false');
router.push("/login");
}
</script>
<template>
<div class="text-grau2 font-bold space-y-4 pl-2 pt-5">
<label class="flex text-center shadow-2xl rounded-lg active:text-weiss" @click="logout"><img class="pr-2" src="../../assets/icons/logout.png" alt="">Logout</label>
</div>
</template>
<style scoped>
</style>

2
src/main.ts
View File

@@ -1,5 +1,5 @@
import './assets/main.css';
import { createApp } from 'vue';
import {createApp, onMounted} from 'vue';
// @ts-ignore:
import App from '../src/App.vue';
// @ts-ignore:

52
src/router/index.ts
View File

@@ -1,8 +1,5 @@
// File: `src/router/index.ts`
import { createRouter, createWebHistory } from "vue-router";
// Vue components imported here.
// the vue components are the Pages that will be rendered
// at these URL's.
import Home from "../components/Home.vue";
import Login from "../components/Login.vue";
import wip from "../components/wip.vue";
@@ -10,63 +7,86 @@ import settings from "../components/settings.vue";
import notifications from "../components/notifications.vue";
import register from "../components/register.vue";
import search from "../components/search.vue";
import post from '../components/posts.vue';
import post from "../components/posts.vue";
import profile from "../components/profile.vue";
// The routing does not happen automatically
// Each route has to be defined here, or it won't work.
import messages from "../components/messages.vue";
const routes = [
{
path: "/",
name: "home",
component: Home,
meta: { requiresAuth: true }
},
{
path: "/login",
name: "login",
component: Login,
component: Login
},
{
path: "/wip",
name: "Work in Progress",
component: wip,
meta: { requiresAuth: true }
},
{
path: "/settings",
name: "Settings",
component: settings,
meta: { requiresAuth: true }
},
{
path: "/notifications",
name: "Notifications",
component: notifications,
meta: { requiresAuth: true }
},
{
path: "/register",
name: "Register",
component: register,
component: register
},
{
path: "/search",
name: "Search",
component: search,
meta: { requiresAuth: true }
},
{
path: '/post/:id',
name: 'PostDetail',
path: "/post/:id",
name: "PostDetail",
component: post,
props: true
props: true,
meta: { requiresAuth: true }
},
{
path: '/profile/:username',
name: 'Profile ',
path: "/profile/:username",
name: "Profile",
component: profile,
props: true
props: true,
meta: { requiresAuth: true }
},
{
path: "/messages",
name: "Messages",
component: messages,
meta: { requiresAuth: true }
}
]
];
const router = createRouter({
history: createWebHistory("/"),
routes,
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && localStorage.getItem("isLoggedIn") !== "true") {
console.log("User not logged in: redirecting to login.");
next({ name: "login" });
} else {
console.log("User logged in or no auth required.");
next();
}
});
export default router;