Fixed two minor bugs and edited the README.md

README.md

@@ -1,41 +1,60 @@
-# Praxistransferprojekt II (praxistransfer-frontend)
+# Praxistransferprojekt II (ptpChat) - Frontend
 
-Praxistransferprojekt | Zweites Semester
+Dieses Repository beinhaltet das Frontend für das im zweiten Semester realisierte Projekt "ptpChat"
 
-## Install the dependencies
+> **_Notiz:_** Die folgende Anleitung erlaubt ein Setup des Frontends komplett ohne IDE. Durch die Verwendung einer solchen entfallen manche Schritte gegebenenfalls.
+
+## Voraussetzungen
+Vor der Durchführung der anderen Schritte sollte sichergestellt werden, dass die folgenden Softwarekomponenten installiert sind. Grundsätzlich kann, je nach persönlicher Präferenz, zwischen `npm` und `yarn` ausgewählt werden:
+
+- [Node.js](https://nodejs.org/)
+- [Yarn](https://yarnpkg.com/) oder [npm](https://www.npmjs.com/)
+
+(In der Entwicklung wurde ausschließlich npm verwendet, was aus diesem Grund hier empfohlen wird)
+
+Außerdem wird `git` benötigt:
+
+- [git Donwloads](https://git-scm.com/downloads)
+
+## Clonen des Repositories
+Zum Clonen des Repositories muss folgender Befehl in einer beliebigen Shell ausgeführt werden:
+
+```bash
+git clone https://github.com/joschuatonn/praxistransferFrontend
+```
+
+Für die folgenden Schritte muss zuerst in das Projektverzeichnis navigiert werden:
+
+```bash
+cd praxistransferFrontend
+```
+
+## Installieren der Dependencies
 ```bash
 yarn
-# or
+# oder
 npm install
 ```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+## Starten der Applikation im Development-Modus
+```bash
+yarn dev
+# oder
+npm run dev
+```
+
+Sofern die Quasar-CLI installiert ist, kann auch folgender Befehl verwendet werden:
+
 ```bash
 quasar dev
 ```
 
+### Nutzung der Applikation
 
-### Lint the files
+Das Setup des Frontends ist nun abgeschlossen. Standardmäßig ist dieses über `http://localhost:8080` erreichbar. Um die reibungslose Funktionalität der gesamten Applikation zu gewährleisten, wird von einer Änderung der Standardeinstellung abgeraten.
-```bash
-yarn lint
-# or
-npm run lint
-```
 
+Um die Installation der Applikation vollständig abzuschließen, müssen außerdem die Anleitungen in folgenden Repos befolgt werden:
 
-### Format the files
+[ptpChat-Services](https://github.com/joschuatonn/praxistransferServices) --> Enthält die Installation von Keycloak und Postgres
-```bash
-yarn format
-# or
-npm run format
-```
 
-
+[ptpChat-Backend](https://github.com/joschuatonn/praxistransferBackend) --> Enthält das Java-SpringBoot Backend
-
-### Build the app for production
-```bash
-quasar build
-```
-
-### Customize the configuration
-See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

src/components/ChatSettingsComponent.vue

@@ -57,7 +57,7 @@
           </div>
         </q-card-section>
 
-        <q-card-section>
+        <q-card-section v-if="currentUserIsAdmin">
           <div class="text-h5">Mitglieder hinzufügen</div>
           <q-input 
             filled 

src/pages/IndexPage.vue

@@ -8,7 +8,7 @@
 
     <div class="menu">
       <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
-        <div title="Nach Nutzern suchen" @click="selectTab('search')" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}">
+        <div title="Nach Nutzern suchen" @click="selectTab('search')" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}" style="border-top-left-radius: 1rem;">
           <q-icon name="search"></q-icon>
         </div>
 
@@ -430,6 +430,10 @@
     transition: .3s;
   }
 
+  .navigation:nth-child(1) {
+    border-radius: 1rem;
+  }
+
   .menuItemActive {
     border-bottom: 2px solid black;
   }