posts ansehen, posts im detial, scrollbar entfernt
scrollbar: - nurnoch in bestimmten elementen
This commit is contained in:
danielvici123
75
deno.lock
generated
75
deno.lock
generated
@@ -22,6 +22,8 @@
|
||||
"npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
|
||||
"npm:path-to-regexp@6.2.1": "6.2.1",
|
||||
"npm:postcss@^8.4.47": "8.4.47",
|
||||
"npm:tailwind-scrollbar-hide@2": "2.0.0_tailwindcss@3.4.14__postcss@8.4.47",
|
||||
"npm:tailwind-scrollbar@^4.0.1": "4.0.1_tailwindcss@4.0.15",
|
||||
"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",
|
||||
@@ -30,6 +32,7 @@
|
||||
"npm:vite@*": "5.4.10",
|
||||
"npm:vite@^5.4.10": "5.4.10",
|
||||
"npm:vue-router@4": "4.4.5_vue@3.5.12",
|
||||
"npm:vue-router@^4.5.0": "4.5.0_vue@3.5.12_typescript@5.8.2",
|
||||
"npm:vue@*": "3.5.12",
|
||||
"npm:vue@^3.5.12": "3.5.12"
|
||||
},
|
||||
@@ -300,11 +303,14 @@
|
||||
"undici-types"
|
||||
]
|
||||
},
|
||||
"@types/prismjs@1.26.5": {
|
||||
"integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="
|
||||
},
|
||||
"@vitejs/plugin-vue@5.1.4_vite@5.4.10_vue@3.5.12": {
|
||||
"integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
|
||||
"dependencies": [
|
||||
"vite@5.4.10",
|
||||
"vue"
|
||||
"vue@3.5.12"
|
||||
]
|
||||
},
|
||||
"@vue/compiler-core@3.5.12": {
|
||||
@@ -375,7 +381,15 @@
|
||||
"dependencies": [
|
||||
"@vue/compiler-ssr",
|
||||
"@vue/shared",
|
||||
"vue"
|
||||
"vue@3.5.12"
|
||||
]
|
||||
},
|
||||
"@vue/server-renderer@3.5.12_vue@3.5.12_vue@3.5.12__typescript@5.8.2": {
|
||||
"integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
|
||||
"dependencies": [
|
||||
"@vue/compiler-ssr",
|
||||
"@vue/shared",
|
||||
"vue@3.5.12_typescript@5.8.2"
|
||||
]
|
||||
},
|
||||
"@vue/shared@3.5.12": {
|
||||
@@ -483,6 +497,9 @@
|
||||
"readdirp@4.1.1"
|
||||
]
|
||||
},
|
||||
"clsx@2.1.1": {
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
|
||||
},
|
||||
"color-convert@2.0.1": {
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dependencies": [
|
||||
@@ -884,6 +901,14 @@
|
||||
"source-map-js"
|
||||
]
|
||||
},
|
||||
"prism-react-renderer@2.4.1_react@19.0.0": {
|
||||
"integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
|
||||
"dependencies": [
|
||||
"@types/prismjs",
|
||||
"clsx",
|
||||
"react"
|
||||
]
|
||||
},
|
||||
"punycode@1.4.1": {
|
||||
"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
|
||||
},
|
||||
@@ -896,6 +921,9 @@
|
||||
"queue-microtask@1.2.3": {
|
||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
|
||||
},
|
||||
"react@19.0.0": {
|
||||
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="
|
||||
},
|
||||
"read-cache@1.0.0": {
|
||||
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
||||
"dependencies": [
|
||||
@@ -1031,6 +1059,19 @@
|
||||
"supports-preserve-symlinks-flag@1.0.0": {
|
||||
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
|
||||
},
|
||||
"tailwind-scrollbar-hide@2.0.0_tailwindcss@3.4.14__postcss@8.4.47": {
|
||||
"integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
|
||||
"dependencies": [
|
||||
"tailwindcss@3.4.14_postcss@8.4.47"
|
||||
]
|
||||
},
|
||||
"tailwind-scrollbar@4.0.1_tailwindcss@4.0.15": {
|
||||
"integrity": "sha512-j2ZfUI7p8xmSQdlqaCxEb4Mha8ErvWjDVyu2Ke4IstWprQ/6TmIz1GSLE62vsTlXwnMLYhuvbFbIFzaJGOGtMg==",
|
||||
"dependencies": [
|
||||
"prism-react-renderer",
|
||||
"tailwindcss@4.0.15"
|
||||
]
|
||||
},
|
||||
"tailwindcss@3.4.14_postcss@8.4.47": {
|
||||
"integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
|
||||
"dependencies": [
|
||||
@@ -1058,6 +1099,9 @@
|
||||
"sucrase"
|
||||
]
|
||||
},
|
||||
"tailwindcss@4.0.15": {
|
||||
"integrity": "sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg=="
|
||||
},
|
||||
"thenify-all@1.6.0": {
|
||||
"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
|
||||
"dependencies": [
|
||||
@@ -1157,7 +1201,14 @@
|
||||
"integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
|
||||
"dependencies": [
|
||||
"@vue/devtools-api",
|
||||
"vue"
|
||||
"vue@3.5.12"
|
||||
]
|
||||
},
|
||||
"vue-router@4.5.0_vue@3.5.12_typescript@5.8.2": {
|
||||
"integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
|
||||
"dependencies": [
|
||||
"@vue/devtools-api",
|
||||
"vue@3.5.12_typescript@5.8.2"
|
||||
]
|
||||
},
|
||||
"vue@3.5.12": {
|
||||
@@ -1166,10 +1217,21 @@
|
||||
"@vue/compiler-dom",
|
||||
"@vue/compiler-sfc",
|
||||
"@vue/runtime-dom",
|
||||
"@vue/server-renderer",
|
||||
"@vue/server-renderer@3.5.12_vue@3.5.12",
|
||||
"@vue/shared"
|
||||
]
|
||||
},
|
||||
"vue@3.5.12_typescript@5.8.2": {
|
||||
"integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
|
||||
"dependencies": [
|
||||
"@vue/compiler-dom",
|
||||
"@vue/compiler-sfc",
|
||||
"@vue/runtime-dom",
|
||||
"@vue/server-renderer@3.5.12_vue@3.5.12_vue@3.5.12__typescript@5.8.2",
|
||||
"@vue/shared",
|
||||
"typescript"
|
||||
]
|
||||
},
|
||||
"which@2.0.2": {
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"dependencies": [
|
||||
@@ -1352,8 +1414,11 @@
|
||||
"dependencies": [
|
||||
"npm:@deno/vite-plugin@1",
|
||||
"npm:@vitejs/plugin-vue@^5.1.4",
|
||||
"npm:tailwind-scrollbar-hide@2",
|
||||
"npm:tailwind-scrollbar@^4.0.1",
|
||||
"npm:typescript@^5.8.2",
|
||||
"npm:vite-plugin-checker@~0.9.1"
|
||||
"npm:vite-plugin-checker@~0.9.1",
|
||||
"npm:vue-router@^4.5.0"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<title>ESP - Express, Share, Post</title>
|
||||
<link rel="stylesheet" href="/src/assets/main.css" />
|
||||
</head>
|
||||
<body class="bg-hintergrund-farbe">
|
||||
<body class="bg-hintergrund-farbe overflow-hidden">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
95
package-lock.json
generated
95
package-lock.json
generated
@@ -6,7 +6,10 @@
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@deno/vite-plugin": "^1.0.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4"
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"tailwind-scrollbar": "^4.0.1",
|
||||
"tailwind-scrollbar-hide": "^2.0.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.8.2",
|
||||
@@ -791,6 +794,12 @@
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/prismjs": {
|
||||
"version": "1.26.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
|
||||
"integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "5.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
|
||||
@@ -858,6 +867,12 @@
|
||||
"@vue/shared": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
|
||||
@@ -942,6 +957,15 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
@@ -1154,6 +1178,29 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/prism-react-renderer": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
|
||||
"integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"clsx": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
|
||||
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
@@ -1233,6 +1280,37 @@
|
||||
"url": "https://github.com/chalk/strip-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-scrollbar": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.1.tgz",
|
||||
"integrity": "sha512-j2ZfUI7p8xmSQdlqaCxEb4Mha8ErvWjDVyu2Ke4IstWprQ/6TmIz1GSLE62vsTlXwnMLYhuvbFbIFzaJGOGtMg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prism-react-renderer": "^2.4.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": "4.x"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-scrollbar-hide": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-2.0.0.tgz",
|
||||
"integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.0.15",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz",
|
||||
"integrity": "sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
@@ -1446,6 +1524,21 @@
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||
"integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@deno/vite-plugin": "^1.0.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4"
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"tailwind-scrollbar": "^4.0.1",
|
||||
"tailwind-scrollbar-hide": "^2.0.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.8.2",
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<template >
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -1,3 +1,5 @@
|
||||
@plugin 'tailwind-scrollbar';
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@@ -9,7 +9,7 @@ import Trending from "./home_components/trending.vue";
|
||||
|
||||
<template>
|
||||
<div id="main" class="flex">
|
||||
<div id="left" class="border border-b-grau w-72">
|
||||
<div id="left" class="w-72">
|
||||
<navigationbar></navigationbar>
|
||||
</div>
|
||||
<div class="w-100p">
|
||||
|
||||
@@ -1,67 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from "vue";
|
||||
import router from "../../router";
|
||||
// import {valueOf} from "tailwindcss";
|
||||
/* PRÜFEN OB USER EINGELOGGT IST
|
||||
#########################################
|
||||
* function checkLoginStatus() {
|
||||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||||
if (isLoggedIn === 'true') {
|
||||
console.log("User is logged in");
|
||||
} else {
|
||||
console.log("User is not logged in");
|
||||
router.push('/login');
|
||||
}
|
||||
// PLACEHOLDER
|
||||
const upc = ref([]); // user post computed
|
||||
let post_nr = "";
|
||||
let current_user = "";
|
||||
let pust_create_text = "";
|
||||
|
||||
/*
|
||||
|
||||
*/
|
||||
async function createFeed() {
|
||||
try {
|
||||
// posts und user holen und schauen ob sie richtig sidn
|
||||
const post_response = await fetch('http://localhost:8000/api/posts', { method: 'GET' });
|
||||
const postsDATA = await post_response.json();
|
||||
|
||||
const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
|
||||
const usersDATA = await user_response.json();
|
||||
|
||||
// posts und user kombinieren
|
||||
const combinedPosts = postsDATA.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'
|
||||
};
|
||||
});
|
||||
|
||||
//upc.value = combinedPosts;
|
||||
|
||||
upc.value = combinedPosts.sort(() => Math.random() - 0.5);
|
||||
|
||||
} catch (e) {
|
||||
console.error("An error has occurred. Please try again later.");
|
||||
console.error(e);
|
||||
}
|
||||
console.log(upc.value);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkLoginStatus();
|
||||
});
|
||||
* */
|
||||
// PLACEHOLDER
|
||||
const post = ref([
|
||||
{id: 1,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "Linux Enjoyer",author_username: "lunix",
|
||||
content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
|
||||
comments_count: 1, likes: 5},
|
||||
{id: 2,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "XBOX",author_username: "Xbox",
|
||||
content: "Call of Duty: Black Ops 6 is OUT NOW.",
|
||||
comments_count: 500000, likes: 100000},
|
||||
{id: 3,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "JETBrains",author_username: "Jetbrains",
|
||||
content: "BLI BLA BLUB. Jetbrains is the best IDE." ,
|
||||
comments_count: 5000, likes: 1000},
|
||||
{id: 4,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "GITHUB", author_username: "GitHub",
|
||||
content: "GitHub Copilot got an massive update. Check out the new features.",
|
||||
comments_count: 1500000, likes: 500000},
|
||||
{id: 5,
|
||||
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: 6,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "Microsoft", author_username: "Microsoft",
|
||||
content: "Windows 11 24H2 is out now. Learn more here: https://www.microsoft.com",
|
||||
comments_count: 500000, likes: 100000},
|
||||
{id: 7,
|
||||
profile_picture: "../../assets/default_pp.png",
|
||||
author_display_name: "Apple", author_username: "Apple",
|
||||
content: "The new iPhone 16 is out now. Everything you need to know: https://www.apple.com",
|
||||
comments_count: 500000, likes: 100000},
|
||||
])
|
||||
|
||||
function addLike(index: number) {
|
||||
post.value[index].likes += 1;
|
||||
console.log("New Like Amount: ", post.value[index].likes);
|
||||
onMounted(async () => {
|
||||
await createFeed();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
async function addLike(index: number) {
|
||||
post_nr = index.toString()
|
||||
const response = await fetch(`http://localhost:8000/api/post/${post_nr}/like`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json',},
|
||||
});
|
||||
if (!response.ok) {
|
||||
alert('Failed to like post');
|
||||
} else{
|
||||
console.log("New Like Amount: ", upc.value[index].likes);
|
||||
}
|
||||
}
|
||||
function post_publish_func(text:string) {
|
||||
function post_create_func(text:string) {
|
||||
|
||||
|
||||
console.log("Post: ", text);
|
||||
if (text === undefined || text === "") {
|
||||
console.log("Post is empty");
|
||||
@@ -69,10 +74,13 @@ onMounted(() => {
|
||||
return;
|
||||
} else {
|
||||
console.log("Post is not empty");
|
||||
post.value.push({id: post.value.length + 1, profile_picture: "../../assets/danielvici_pp.png", author_display_name: "ADMIN", author_username: "esp_admin", content: text, comments_count: undefined, likes: 0});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function gotoPost(post_id: number) {
|
||||
localStorage.setItem("viewedpost", post_id.toString());
|
||||
router.push(`/post/${post_id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -84,32 +92,32 @@ onMounted(() => {
|
||||
<img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
|
||||
<form>
|
||||
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
|
||||
<textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
|
||||
<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-200p resize-none" rows="3" placeholder="Write something..."></textarea>
|
||||
<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_publish_func(post_publish)" 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_func(pust_create_text)" type="button">Post</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div> <!-- CONTENT -->
|
||||
<div class="overflow-y-auto h-[650px] scrollbar"> <!-- CONTENT -->
|
||||
<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="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">
|
||||
<div>
|
||||
<div> <!-- POST HEADER -->
|
||||
<label class="text-lg font-bold m-1 text-weiss">{{postitem.author_display_name}}</label>
|
||||
<label class="text-base m-1 text-grau2">@{{ postitem.author_username }}</label>
|
||||
<label class="text-lg font-bold m-1 text-weiss">{{postitem.displayname}}</label>
|
||||
<label class="text-base m-1 text-grau2">@{{ postitem.username }}</label>
|
||||
</div>
|
||||
<div class="m-2"> <!-- POST CONTENT -->
|
||||
<p class="text-sm m-1 text-weiss">{{ postitem.content }}</p>
|
||||
<p class="text-sm m-1 text-weiss">{{ postitem.post_text }}</p>
|
||||
</div>
|
||||
<div class="flex"> <!-- POST FOOTER -->
|
||||
<div class="flex"> <!-- Comments -->
|
||||
<img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
|
||||
<label class="text-sm m-1 text-weiss" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
|
||||
<label class="text-sm m-1 text-weiss" v-if="postitem.comments != undefined">{{ postitem.comments }}</label>
|
||||
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
|
||||
</div>
|
||||
|
||||
@@ -119,7 +127,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mx-2"> <!-- View Post -->
|
||||
<router-link :to="{ name: 'PostDetail', params: { id: postitem.id } }" class="text-weiss">View Post</router-link>
|
||||
<button @click="gotoPost(postitem.post_id)" class="text-weiss">View Post</button>
|
||||
</div><!-- ENDE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ onMounted(() => {
|
||||
if (localStorage.getItem('username')) {
|
||||
input_username_mail.value = localStorage.getItem('username') || "";
|
||||
input_user_password.value = localStorage.getItem('password') || "";
|
||||
rememberMe.value = true;
|
||||
rememberMe.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -30,10 +30,8 @@ async function login(event: Event) {
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem('username', username.value);
|
||||
}
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
localStorage.setItem('username', username.value);
|
||||
alert("You will be now redirected");
|
||||
router.push('/');
|
||||
} else {
|
||||
@@ -57,7 +55,7 @@ async function login(event: Event) {
|
||||
<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 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>
|
||||
<button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Login</button>
|
||||
<p class="text-weiss"><input type="checkbox"> Remeber me</p>
|
||||
<p class="text-weiss"><input type="checkbox" v-model="rememberMe"> Remeber me</p>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -1,44 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Navigationbar from "./home_components/navigationbar.vue";
|
||||
import Contacts from "./home_components/contacts.vue";
|
||||
import Legal from "./home_components/legal.vue";
|
||||
import Navigationbar from './home_components/navigationbar.vue';
|
||||
import Contacts from './home_components/contacts.vue';
|
||||
import Legal from './home_components/legal.vue';
|
||||
import router from '../router';
|
||||
import {consoleLog} from "vite-plugin-checker/dist/logger";
|
||||
|
||||
const route = useRoute();
|
||||
const post = ref(null);
|
||||
interface Post {
|
||||
post_uuid: number;
|
||||
user_id: number;
|
||||
author_username: string;
|
||||
post_text: string;
|
||||
likes: number;
|
||||
comments_count: number;
|
||||
comments: any[];
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface User {
|
||||
user_id: number;
|
||||
username: string;
|
||||
displayname: string;
|
||||
}
|
||||
|
||||
interface Comment {
|
||||
comment_uuid: number;
|
||||
user_id: number;
|
||||
post_id: number;
|
||||
comment_text: string;
|
||||
created_at: string;
|
||||
displayname: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
const post = ref<Post | null>(null);
|
||||
const user = ref<User | null>(null);
|
||||
const comments = ref<Comment[] | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const postId = route.params.id;
|
||||
try {
|
||||
const response = await fetch(`/api/posts/${postId}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
post.value = data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching post:', error);
|
||||
const post_id = localStorage.getItem('viewedpost');
|
||||
console.log(post_id);
|
||||
if (post_id === null) {
|
||||
alert('No post selected. You will be redirected to the feed.');
|
||||
await router.push('/');
|
||||
return;
|
||||
}
|
||||
|
||||
getPost(parseInt(post_id));
|
||||
getComment(parseInt(post_id));
|
||||
});
|
||||
|
||||
|
||||
|
||||
async function getPost(post_id: number) {
|
||||
try {
|
||||
const post_response = await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' });
|
||||
const fetchedPost: Post = await post_response.json();
|
||||
|
||||
const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
|
||||
const usersDATA = await user_response.json();
|
||||
|
||||
const postAuthor = usersDATA.find(user => user.user_id === fetchedPost.user_id);
|
||||
if (postAuthor) {
|
||||
console.log("The post was written by:", postAuthor);
|
||||
} else {
|
||||
console.error("Author not found.");
|
||||
}
|
||||
|
||||
user.value = postAuthor;
|
||||
post.value = fetchedPost;
|
||||
console.log(post.value);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function getComment(post_id: number) {
|
||||
try {
|
||||
const comments_response = await fetch(`http://localhost:8000/api/post/${post_id}/comments`, { method: 'GET' });
|
||||
const fetchedComments: Comment[] = await comments_response.json();
|
||||
|
||||
const user_response = await fetch(`http://localhost:8000/api/users`, { method: 'GET' });
|
||||
const usersDATA: User[] = await user_response.json();
|
||||
|
||||
comments.value = fetchedComments.map(comment => ({
|
||||
...comment,
|
||||
author: usersDATA.find(user => user.user_id === comment.user_id) || null
|
||||
}));
|
||||
|
||||
console.log(comments.value);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main" class="bg-hintergrund-farbe flex">
|
||||
<div id="left" class="border border-b-grau w-72">
|
||||
<div id="left" class="w-72">
|
||||
<navigationbar></navigationbar>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="post">
|
||||
<h2>{{ post.author_display_name }}</h2>
|
||||
<p>@{{ post.author_username }}</p>
|
||||
<p>{{ post.content }}</p>
|
||||
<p>Likes: {{ post.likes }}</p>
|
||||
<p v-if="post.comments_count !== undefined">Comments: {{ post.comments_count }}</p>
|
||||
<p v-else>Comments disabled</p>
|
||||
<div class="text-weiss w-100p border-x border-x-grau2" v-if="post">
|
||||
<div> <!-- HEADER -->
|
||||
<h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b">Post</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="text-5xl text-weiss">Loading post...</p>
|
||||
|
||||
|
||||
<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">
|
||||
<div>
|
||||
<div> <!-- POST HEADER -->
|
||||
<label class="text-lg font-bold m-1 text-weiss">{{user.displayname}}</label>
|
||||
<label class="text-base m-1 text-grau2">@{{ user.username }} | </label>
|
||||
<label class="text-base text-grau2"> Posted at {{ post.created_at }}</label>
|
||||
</div>
|
||||
<div class="m-2"> <!-- POST CONTENT -->
|
||||
<p class="text-sm m-1 text-weiss">{{ post.post_text }}</p>
|
||||
</div>
|
||||
<div class="flex"> <!-- POST FOOTER -->
|
||||
<div class="flex"> <!-- Comments -->
|
||||
<img src="../assets/icons/comment.png" alt="" class="rounded-full align-middle">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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">{{ post.likes }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div> <!-- COMMENTS VIEW and WRITE -->
|
||||
<div>
|
||||
<h2 class="align-middle p-6 text-xl text-weiss border-b-grau2 border-b">Comments</h2>
|
||||
</div>
|
||||
|
||||
<div> <!-- WRITE COMMENTS -->
|
||||
|
||||
</div>
|
||||
|
||||
<div> <!-- VIEW COMMENTS -->
|
||||
<div> <!-- VIEW COMMENTS -->
|
||||
<div v-if="comments && comments.length > 0">
|
||||
<div v-for="c in comments" :key="c.comment_uuid" class="p-4 border-b border-gray-700">
|
||||
<p class="text-sm text-weiss">{{ c.author?.displayname || 'Unknown' }}: {{ c.comment_text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-4 text-gray-400">No comments yet.</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
@@ -50,3 +170,4 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// File: `src/router/index.ts`
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import Home from "../components/Home.vue";
|
||||
import Home from "../../src/components/Home.vue";
|
||||
import Login from "../components/Login.vue";
|
||||
import wip from "../components/wip.vue";
|
||||
import settings from "../components/settings.vue";
|
||||
|
||||
@@ -21,7 +21,8 @@ export default {
|
||||
'35p': '30.825%',
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
plugins: ['tailwind-scrollbar', 'tailwind-scrollbar-hide'],
|
||||
colors: {
|
||||
'logo-farbe-lila': '#5500a2',
|
||||
'logo-farbe-rot': '#a2002b',
|
||||
'logo-farbe-blau': '#0b1074',
|
||||
|
||||
Reference in New Issue
Block a user