From 4c1a94159a3c31195ba80b469af9cb4aa3a3792c Mon Sep 17 00:00:00 2001
From: Kekskurse <git@kekskurse.de>
Date: Sat, 17 Aug 2019 20:21:55 +0200
Subject: [PATCH] YoLo making this thing actually usable.

---
 src/components/AppCards.vue |  49 +++++++++++++++++
 src/components/Login.vue    |   3 +-
 src/views/AppDetails.vue    |   2 +-
 src/views/Dashboard.vue     | 105 +++++++++++++-----------------------
 src/views/ListApps.vue      |  44 ++++-----------
 src/views/Login.vue         |  28 ++++++++--
 6 files changed, 122 insertions(+), 109 deletions(-)
 create mode 100644 src/components/AppCards.vue

diff --git a/src/components/AppCards.vue b/src/components/AppCards.vue
new file mode 100644
index 00000000..3b6fe38c
--- /dev/null
+++ b/src/components/AppCards.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <template>
+            <v-simple-table>
+                <thead>
+                <tr>
+                    <th class="text-left" style="width:30px;">Icon</th>
+                    <th class="text-left">Name</th>
+                    <th class="text-left">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="app in apps" :key="app.name" @click="$emit('appClick', app)" style="cursor: pointer;">
+                        <td style="width:30px;">
+                            <img :src="getImageUrl(app.id)" style="max-width: 30px;">
+                        </td>
+                        <td>{{ app.name }}</td>
+                        <td>{{ app.description }}</td>
+                    </tr>
+                </tbody>
+            </v-simple-table>
+        </template>
+    </div>
+</template>
+
+<script>
+    import ServerService from '../services/Server'
+    import UserService from '../services/User'
+    import AppService from '../services/Apps'
+
+    export default {
+        data () {
+            return {
+                apps: []
+            }
+        },
+        props: [
+            'apps'
+        ],
+        methods: {
+            'getImageUrl' : function (id) {
+                return AppService.getAppImage(id);
+            },
+        },
+        mounted: function() {
+            console.log("APPCARDSW");
+        }
+    }
+</script>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 048cd731..f7072bc3 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-        <h1>Login</h1>
         <v-alert
                 :value="true"
                 type="error"
@@ -93,4 +92,4 @@
 
 <style>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/AppDetails.vue b/src/views/AppDetails.vue
index a5544cdd..3e703014 100644
--- a/src/views/AppDetails.vue
+++ b/src/views/AppDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="">
+    <div style="margin-top: 50px;">
 
         <v-container grid-list-md pa-10>
             <v-layout row wrap>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c3504c33..cc111534 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,59 +1,23 @@
 <template>
-  <div style="">
+  <div style="margin-top:50px;">
     <v-container grid-list-md pa-10 >
       <v-layout row wrap>
         <v-flex md12>
           <h1>Dashboard</h1>
           <br><br>
           <h3>Hello {{$store.getters.getMe["username"]}}, login to</h3>
-
-
-          <v-layout row wrap>
-            <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
-              <v-card>
-                <v-layout>
-                  <v-flex xs5>
-                    <v-img
-                            :src="getImageUrl(item.id)"
-                            height="125px"
-                            contain
-                    ></v-img>
-                  </v-flex>
-                  <v-flex xs7>
-                    <v-card-title primary-title>
-                      <div>
-                        <div class="headline">{{ item.name }}</div>
-                        <div>{{ item.description }}</div>
-                      </div>
-                    </v-card-title>
-                  </v-flex>
-                </v-layout>
-                <v-divider light></v-divider>
-                <v-card-actions class="pa-3">
-
-                  <v-spacer></v-spacer>
-                  <v-btn icon>
-                    <v-icon @click="navigateToApp(item)">input</v-icon>
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-flex>
-          </v-layout>
+          <AppCards :apps="apps" v-on:appClick="navigateToApp"></AppCards>
         </v-flex>
-
-
       </v-layout>
     </v-container>
-
-
   </div>
-
 </template>
 
 <script>
   import ServerService from '../services/Server'
   import UserService from '../services/User'
   import AppService from '../services/Apps'
+  import AppCardsComponente from '../components/AppCards'
 
   export default {
     data () {
@@ -63,6 +27,9 @@
         apps: []
       }
     },
+    components: {
+      "AppCards": AppCardsComponente
+    },
     methods: {
       'getImageUrl' : function (id) {
         return AppService.getAppImage(id);
@@ -85,38 +52,38 @@
 </script>
 
 <style>
-.header {
-  background-image: url('~@/assets/manhattan-407703_1920.jpg');
-  background-repeat: no-repeat;
-  margin-top: -100px;
-  height: 30vh;
-  text-align: center;
-}
-  .header h1{
-    padding-top: 200px;
-    font-size: 56px !important;
-    font-weight: 400;
+  .header {
+    background-image: url('~@/assets/manhattan-407703_1920.jpg');
+    background-repeat: no-repeat;
+    margin-top: -100px;
+    height: 30vh;
+    text-align: center;
+  }
+    .header h1{
+      padding-top: 200px;
+      font-size: 56px !important;
+      font-weight: 400;
+      line-height: 32px !important;
+      letter-spacing: normal !important;
+    }
+    .header h1 .small{
+      font-weight: 300 !important;
+    }
+  .header h2{
+    padding-top: 30px;
+    font-size: 34px !important;
+    font-weight: 300;
     line-height: 32px !important;
     letter-spacing: normal !important;
   }
-  .header h1 .small{
-    font-weight: 300 !important;
+  h1{
+    font-weight: 300;
+    line-height: 32px !important;
+    letter-spacing: normal !important;
+  }
+  h2{
+    font-weight: 300;
+    line-height: 32px !important;
+    letter-spacing: normal !important;
   }
-.header h2{
-  padding-top: 30px;
-  font-size: 34px !important;
-  font-weight: 300;
-  line-height: 32px !important;
-  letter-spacing: normal !important;
-}
-h1{
-  font-weight: 300;
-  line-height: 32px !important;
-  letter-spacing: normal !important;
-}
-h2{
-  font-weight: 300;
-  line-height: 32px !important;
-  letter-spacing: normal !important;
-}
 </style>
diff --git a/src/views/ListApps.vue b/src/views/ListApps.vue
index ae89d492..d93476ea 100644
--- a/src/views/ListApps.vue
+++ b/src/views/ListApps.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="">
+    <div style="margin-top: 50px;">
         <v-container grid-list-md pa-10>
             <v-layout row wrap>
                 <v-flex md12>
@@ -9,37 +9,7 @@
                     <p>Here you can Administrate your apps</p>
                 </v-flex>
             </v-layout>
-            <v-layout row wrap>
-                <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
-                <v-card>
-                    <v-layout>
-                        <v-flex xs5>
-                            <v-img
-                                    :src="getImageUrl(item.id)"
-                                    height="125px"
-                                    contain
-                            ></v-img>
-                        </v-flex>
-                        <v-flex xs7>
-                            <v-card-title primary-title>
-                                <div>
-                                    <div class="headline">{{ item.name }}</div>
-                                    <div>{{ item.description }}</div>
-                                </div>
-                            </v-card-title>
-                        </v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-card-actions class="pa-3">
-
-                        <v-spacer></v-spacer>
-                        <v-btn icon>
-                            <v-icon @click="$router.push({name: 'appDetails', params: {id: item.id}})">settings</v-icon>
-                        </v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-flex>
-            </v-layout>
+            <AppCards :apps="apps" v-on:appClick="navigateToAppSettingPage"></AppCards>
         </v-container>
 
 
@@ -49,15 +19,23 @@
 
 <script>
     import AppService from '../services/Apps'
+    import AppCardsComponente from '../components/AppCards'
+
     export default {
         data () {
             return {
-                apps: []
+                apps: [],
             }
         },
+        components: {
+            "AppCards": AppCardsComponente
+        },
         methods: {
             getImageUrl: function(id) {
                 return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
+            },
+            navigateToAppSettingPage: function(app) {
+                this.$router.push({name: 'appDetails', params: {id: app.id}});
             }
         },
         mounted: function() {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 3f04a365..479721a3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,18 +1,35 @@
 <template>
-  <div style="">
+  <div style="min-height: 100pc;" class="bg">
   <div class="header2">
   </div>
     <v-container grid-list-md>
       <v-layout row wrap>
         <v-flex md4></v-flex>
-        <v-flex md4 v-if="!$store.state.loggedIn">
-          <Login></Login>
+        <v-flex md4 v-if="!$store.state.loggedIn" style="">
+          <template>
+            <v-card
+                    class="mx-auto"
+            >
+              <v-card-title>Login</v-card-title>
+              <v-card-text><Login></Login></v-card-text>
+            </v-card>
+          </template>
+
         </v-flex>
         <v-flex md4 v-if="$store.state.loggedIn">
-          <p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p>
+          <template>
+            <v-card
+                    class="mx-auto"
+            >
+              <v-card-title>Login</v-card-title>
+              <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
+            </v-card>
+          </template>
+
         </v-flex>
 
 
+
       </v-layout>
     </v-container>
 
@@ -69,6 +86,9 @@
 </script>
 
 <style>
+  .bg {
+    background-image: url('~@/assets/texture-1485529_1920.jpg');
+  }
 .header2 {
   background-image: url('~@/assets/texture-1485529_1920.jpg');
   background-repeat: no-repeat;