Navigationsbar angepasst und post view hinzugefügt (geht nicht wegen keine datenbank aanschluss)
This commit is contained in:
danielvici123
@@ -1,38 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -95,7 +95,6 @@ import {onMounted, ref} from "vue";
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div> <!-- CONTENT -->
|
||||
<ul>
|
||||
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
|
||||
@@ -119,6 +118,10 @@ import {onMounted, ref} from "vue";
|
||||
<div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
|
||||
<img alt="" src="../../assets/icons/herz.png" class="align-middle">
|
||||
<label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
|
||||
</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>
|
||||
</div><!-- ENDE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,63 +5,21 @@
|
||||
import router from "../../router";
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const componentsStatus = ref({});
|
||||
const selected_destination = ref('');
|
||||
|
||||
async function loadComponentsStatus() {
|
||||
const response = await fetch('src/components/status.json');
|
||||
componentsStatus.value = await response.json();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadComponentsStatus();
|
||||
});
|
||||
|
||||
function fun_route(destination: string) {
|
||||
selected_destination.value = destination;
|
||||
if (componentsStatus.value[destination] === 'wip') {
|
||||
router.push("wip");
|
||||
} else {
|
||||
switch (destination) {
|
||||
case "home":
|
||||
router.push("/");
|
||||
break;
|
||||
case "search":
|
||||
router.push("search");
|
||||
break;
|
||||
case "notifications":
|
||||
router.push("notifications");
|
||||
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 border-r-1 border-r-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="fun_route('home')">
|
||||
<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>
|
||||
<div class="align-middle space-y-3 pt-4 pl-3 pb-4 pr-4 font-bold text-xl"> <!-- Icons (Bild) und Text Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
|
||||
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="fun_route('home')" :class="{'text-weiss': selected_destination === 'home' || selected_destination === ''}"><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="fun_route('search')" :class="{'text-weiss': selected_destination === '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="fun_route('notifications')" :class="{'text-weiss': selected_destination === '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="fun_route('messages')" :class="{'text-weiss': selected_destination === '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="fun_route('accounts')" :class="{'text-weiss': selected_destination === 'accounts'}"> <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="fun_route('settings')" :class="{'text-weiss': selected_destination === 'settings'}"> <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
|
||||
<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-blau rounded-lg" @click="router.push('/wip')"> <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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
55
src/components/posts.vue
Normal file
55
src/components/posts.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Trending from "./home_components/trending.vue";
|
||||
import Navigationbar from "./home_components/navigationbar.vue";
|
||||
import QuickSearch from "./home_components/quick_search.vue";
|
||||
import Contacts from "./home_components/contacts.vue";
|
||||
import Legal from "./home_components/legal.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const post = ref(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);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main" class="bg-hintergrund-farbe flex">
|
||||
<div id="left" class="border border-b-grau 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>
|
||||
<div v-else>
|
||||
<p class="text-5xl text-weiss">Loading post...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
<quick-search></quick-search>
|
||||
<contacts></contacts>
|
||||
<legal></legal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"home": "completed",
|
||||
"search": "testing",
|
||||
"notifications": "testing",
|
||||
"messages": "wip",
|
||||
"accounts": "wip",
|
||||
"settings": "testing"
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import settings from "../components/settings.vue";
|
||||
import nottifications from "../components/notifications.vue";
|
||||
import register from "../components/register.vue";
|
||||
import search from "../components/search.vue";
|
||||
import post from '../components/posts.vue';
|
||||
// The routing does not happen automatically
|
||||
// Each route has to be defined here, or it won't work.
|
||||
const routes = [
|
||||
@@ -47,6 +48,12 @@ const routes = [
|
||||
path: "/search",
|
||||
name: "Search",
|
||||
component: search,
|
||||
},
|
||||
{
|
||||
path: '/post/:id',
|
||||
name: 'PostDetail',
|
||||
component: post,
|
||||
props: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user