Added GUI to add polls

frontend/src/App.vue

@@ -1,16 +1,102 @@
-<script setup>
-</script>
+<script>
 
-<template>
-  <header>
+import HomePage from './components/HomePage.vue'
+import MyPolls from './components/MyPolls.vue'
+import CreatePolls from './components/CreatePolls.vue'
+
+const routes = {
+  '/': HomePage,
+  '/MyPolls': MyPolls,
+  '/CreatePolls': CreatePolls,
+}
+
+export default {
+  data() {
+    return {
+      currentPath: window.location.hash
+    }
+  },
+  computed: {
+    currentView() {
+      return routes[this.currentPath.slice(1) || '/'] 
+    }
+  },
+  mounted() {
+    window.addEventListener('hashchange', () => {
+      this.currentPath = window.location.hash
+		})
+  }
+}
+
+import axios from 'axios'
 
-  </header>
+axios.get('/api/mydata')
+  .then(response => {
+    console.log(response.data)
+  })
+  .catch(error => {
+    console.log(error)
+  })
 
-  <main>
 
-  </main>
+</script>
+
+<template>
+  <div class="navbar">
+    <div class="navbar-container">
+      <div class="navbar-links">
+        <a href="#/">
+          <font-awesome-icon :icon="['fas', 'house']" />
+        </a>
+        <a href="#/MyPolls">My Polls</a>
+        <a href="#/CreatePolls">Create Polls</a>
+      </div>
+    </div>
+  </div>
+  <component :is="currentView" />
 </template>
 
-<style scoped>
+<style>
+body {
+  background: linear-gradient(to left, #4B0082, #000000);
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-top: 50px; /* Hier den gewünschten Abstand in Pixeln eintragen */
+  text-align: center;
+  color: #fefefe;
+}
+/* Bei Hover nach unten verschieben */
+.navbar a:hover {
+  transform: translateY(2px);
+  color: #060606;
+}
+
+/* Menüleiste position:fixed beim Scrollen */
+.navbar {
+  background: linear-gradient(to right, #000000, #151515);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.navbar-links a {
+  color: rgb(107, 107, 107); /* Ändere die Farbe des Links */
+  text-decoration: none; /* Entferne die Unterstreichung */
+}
 
+/* Trennung durch Kästchen */
+.navbar a {
+  display: inline-block;
+  margin: 0 10px;
+  padding: 10px;
+  border: 3px solid #0f0f0f;
+}
 </style>

frontend/src/components/CreatePolls.vue

@@ -0,0 +1,78 @@
+<template>
+    <h1>Create Polls</h1>
+    <div class="create-poll">
+      <form>
+        <label for="question">Frage:</label>
+        <input type="text" id="question" v-model="question">
+        <label for="options">Antwortmöglichkeiten:</label>
+        <div v-for="(option, index) in options" :key="index">
+          <div class="option-container">
+            <input type="text" :id="'option-' + index" v-model="options[index]">
+            <button class="delete-option" @click="deleteOption(index)">
+                <font-awesome-icon :icon="['fas', 'trash']" />
+            </button>
+          </div>
+        </div>
+        <button @click.prevent="addOption">Weitere Antwortmöglichkeit hinzufügen</button>
+        <button @click.prevent="submit">Umfrage erstellen</button>
+      </form>
+    </div>
+  </template>
+  <script>
+
+  export default {
+    data() {
+      return {
+        question: '',
+        options: ['', '']
+      }
+    },
+    methods: {
+      addOption() {
+        this.options.push('');
+      },
+      deleteOption(index) {
+        this.options.splice(index, 1);
+      },
+      submit() {
+        // Hier muss der Code zum Speichern der Umfrage implementiert werden
+      }
+    }
+  }
+  </script>
+  <style scoped>
+  .create-poll {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  input[type="text"] {
+    display: block;
+    margin-bottom: 10px;
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+  }
+  button {
+    display: block;
+    margin-top: 10px;
+    padding: 10px;
+    font-size: 16px;
+    background-color: #008CBA;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #00557e;
+  }
+  .option-container {
+    display: flex;
+    align-items: center;
+  }
+  .delete-option {
+    margin-left: 10px;
+    margin-bottom: 1.34em;
+    cursor: pointer;
+    background: linear-gradient(to right, #000000, #747474);
+  }
+  </style>

frontend/src/components/HomePage.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>Pollock</h1>
+</template>

frontend/src/components/MyPolls.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <h1>My Polls</h1>
+        <ul>
+            <li v-for="poll in polls" :key="poll.id">{{ poll.title }}</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      polls: [],
+    };
+  },
+  mounted() {
+    axios
+      .get('/polls') // Hier wird die GET-Anfrage an den Server gesendet
+      .then(response => {
+        this.polls = response.data; // Hier wird die Antwort in der Datenliste gespeichert
+      })
+      .catch(error => console.log(error));
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

frontend/src/main.js

@@ -1,6 +1,10 @@
-import './assets/main.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#generated-frontend')
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faHome, faTrash} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faHome, faTrash)
+
+createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')