Merge branch 'main' of https://github.com/danielvici/esp-projekt

# Conflicts:
#	vite.config.mts

src/App.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import Sidebar from "../src/components/sidebar.vue";
-import NiceThings from "../src/components/interesting-hashtags.vue";
-import Feed from "../src/components/feed.vue";
-import Contacts from "../src/components/contacts.vue";
-import Legal from "../src/components/legal.vue";
+import Sidebar from "./components/home_components/sidebar.vue";
+import NiceThings from "./components/home_components/interesting-hashtags.vue";
+import Feed from "./components/home_components/feed.vue";
+import Contacts from "./components/home_components/contacts.vue";
+import Legal from "./components/home_components/legal.vue";
 </script>
 
 
 <template>
-  <div id="main" class="bg-weiss flex p-2">
-    <Sidebar></Sidebar>
-    <nice-things></nice-things>
-    <feed></feed>
-    <div class="w-1/4">
-      <contacts></contacts>
-      <legal></legal>
-    </div>
-  </div>
+  <router-view />
 </template>

src/components/Home.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Sidebar from "./home_components/sidebar.vue";
+import NiceThings from "./home_components/interesting-hashtags.vue";
+import Feed from "./home_components/feed.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+</script>
+
+
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>

src/components/Login.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Login Page
+</template>
+
+<style scoped>
+
+</style>

src/components/home_components/contacts.vue

@@ -15,12 +15,12 @@ const contacts =[
       <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">
+          <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">
+          <img src="../../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>

src/components/home_components/feed.vue

@@ -55,7 +55,7 @@
       <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">
+          <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>
@@ -66,13 +66,13 @@
             </div>
             <div class="flex "> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
-                <img src="../assets/icons/comment.png" alt="" class="align-middle">
+                <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">
+                <img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>

src/components/home_components/sidebar.vue

@@ -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>

src/components/sidebar.vue

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

src/main.ts

@@ -1,8 +1,8 @@
-import './assets/main.css'
-
-import { createApp } from 'vue'
+import './assets/main.css';
+import { createApp } from 'vue';
 import App from '../src/App.vue';
+import router from "./router/index.ts";
 
 const app = createApp(App);
-
+app.use(router);
 app.mount('#app');

src/router/index.ts

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../components/Home.vue";
+import Login from "../components/Login.vue";
+
+const routes = [
+    {
+        path: "/",
+        name: "home",
+        component: Home,
+    },
+    {
+        path: "/login",
+        name: "login",
+        component: Login,
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory("/"),
+    routes,
+});
+
+export default router;
+
+/*
+<script setup lang="ts">
+import Sidebar from "../src/components/sidebar.vue";
+import NiceThings from "../src/components/interesting-hashtags.vue";
+import Feed from "../src/components/feed.vue";
+import Contacts from "../src/components/contacts.vue";
+import Legal from "../src/components/legal.vue";
+</script>
+
+
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>
+ */