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

Added routing, Tidied up components directory and added part of an unfinished API

Browse Source
This commit is contained in:
Esad Mustafoski
2024-10-31 23:57:06 +01:00
parent 6e360e4235
commit cfc7071b7f
17 changed files with 275 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/home_components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,38 @@
<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>

32
src/components/home_components/contacts.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup lang="ts">
const contacts =[
{display_name: "Linux Enjoyer", username: "lunix"},
{display_name: "XBOX", username: "Xbox"},
{display_name: "JETBrains", username: "Jetbrains"},
]
</script>
<template>
<div class="p-2"> <!--MAIN-->
<div class="bg-grau-hell rounded-lg"> <!--HEADER-->
<h2 class="align-middle m-2 text-xl p-1">Contacts</h2>
</div>
<div> <!--CONTENT-->
<ul class="space-y-1">
<li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
<!--CONTACT-->
<img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
<div class="flex flex-col">
<label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
<p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
</div>
<img src="../../assets/icons/mail.png" alt="" class="ml-auto">
</li>
</ul>
</div>
</div>
</template>
<style scoped>
</style>

84
src/components/home_components/feed.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import { ref } from "vue";
// import {valueOf} from "tailwindcss";
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},
])
const addLike = (index) => {
post.value[index].likes += 1;
console.log("New Like Amount: ", post.value[index].likes);
}
</script>
<template>
<div class="p-2"> <!-- MAIN -->
<div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
<h2 class="align-middle m-2 text-xl p-1">Your Feed</h2>
</div>
<div> <!-- CONTENT -->
<ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
<!-- POST -->
<img src="../../assets/default_pp.png" alt="" class="w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
<label class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ postitem.author_username }}</label>
</div>
<div class="m-2"> <!-- POST CONTENT -->
<p class="text-sm m-1">{{ postitem.content }}</p>
</div>
<div class="flex "> <!-- POST FOOTER -->
<div class="flex"> <!-- Comments -->
<img src="../../assets/icons/comment.png" alt="" class="align-middle">
<label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
<label class="text-sm m-1" v-else>Comments disabled</label>
</div>
<div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
<img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1">{{ postitem.likes }}</label>
</div><!-- ENDE -->
</div>
</div>
</li>
</ul>
</div>
</div>
</template>

37
src/components/home_components/interesting-hashtags.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
const hashtags = [
{id: 1,name: "xbox", nr_posts: 553 } ,
{id: 2,name: "lol" , nr_posts: 16422},
{id: 7,name: "jetbrains", nr_posts: 1251},
{id: 4,name: "github", nr_posts: 464},
{id: 5,name: "craftattack12",nr_posts: 4463},
{id: 6,name: "25" , nr_posts: 123},
{id: 3,name: "minecraft", nr_posts: 466},
]
hashtags.sort((a, b) => {
return b.nr_posts - a.nr_posts;
})
</script>
<template>
<div class="p-2"> <!-- MAIN -->
<div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
<h2 class="align-middle m-2 text-xl p-1">Trending Hashtags:</h2>
</div>
<div class="bg-grau-hell2"> <!-- CONTENT -->
<ul>
<li v-for="(hashtags) in hashtags " :key="hashtags">
<!-- HASHTAGS-->
<h1 class="text-lg font-bold m-1">#{{ hashtags.name }}</h1>
<p class="text-sm m-1">{{ hashtags.nr_posts }} posts</p>
</li>
</ul>
</div>
</div>
</template>
<style scoped>
</style>

21
src/components/home_components/legal.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
</script>
<template>
<label>
<a href="">Terms of Service</a>
-
<a href="">Privacy Policy</a>
-
<a href="">Imprint</a>
-
<a href="">Contact</a>
-
<a href="">Support</a>
</label>
</template>
<style scoped>
</style>

42
src/components/home_components/sidebar.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
// Funktionen um die Seiten zu öffnen
// home -> app.vue
const sb_home = () => {
console.log("home");
}
const sb_search = () => {
console.log("Search");
}
const sb_notifications = () => {
console.log("Notifications");
}
const sb_messages = () => {
console.log("Messages");
}
const sb_accounts = () => {
console.log("Accounts");
}
const sb_settings = () => {
console.log("Settings");
}
</script>
<template>
<div class="pt-4 pl-1">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
<div class="align-middle space-y-3 pt-3 pl-3">
<img src="../../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
<img src="../../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
<img src="../../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
<img src="../../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
<img src="../../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_accounts">
<img src="../../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
</div>
</div>
</template>
<style scoped>
</style>