From 7a72715117110a6abc00b04e055e6037daac8bec Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Sat, 23 Mar 2019 17:24:02 +0100
Subject: [PATCH] Designed pages CacheView and Login

---
 frontend/quasar.conf.js           |  10 +-
 frontend/src/layouts/MyLayout.vue |   4 +-
 frontend/src/pages/CacheView.vue  | 199 ++++++++++++++++++++++++++++++
 frontend/src/pages/Login.vue      |  52 ++++++++
 frontend/src/router/routes.js     |  10 ++
 5 files changed, 272 insertions(+), 3 deletions(-)

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 3f82b10..00b6c98 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -46,7 +46,15 @@ module.exports = function (ctx) {
         'QCardSection',
         'QCardActions',
         'QCheckbox',
-        'QSeparator'
+        'QSeparator',
+        'QTabs',
+        'QTab',
+        'QRouteTab',
+        'QTabPanels',
+        'QTabPanel',
+        'QInput',
+        'QFab',
+        'QFabAction'
       ],
 
       directives: [
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index da749d4..80c2afb 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <q-layout view="hhh Lpr lFf">
-    <q-header elevated class="">
+    <q-header elevated class="bg-white text-green-8 shadow-2">
       <q-toolbar class="">
         <q-btn
           flat
@@ -27,7 +27,7 @@
       :mini="miniState"
       @mouseover="miniState = false"
       @mouseout="miniState = true"
-      content-class="bg-grey-2">
+      content-class="bg-green-1">
       <q-list>
         <q-item-label header>Essential Links</q-item-label>
         <q-item
diff --git a/frontend/src/pages/CacheView.vue b/frontend/src/pages/CacheView.vue
index e69de29..6257998 100644
--- a/frontend/src/pages/CacheView.vue
+++ b/frontend/src/pages/CacheView.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md" style="max-width: 1200px">
+        <q-tabs
+        v-model="tab"
+        dense
+        align="justify"
+        class="bg-white text-green-8 shadow-2"
+        :breakpoint="0"
+      >
+        <q-tab name="table" icon="mail" />
+        <q-tab name="map" icon="map" />
+      </q-tabs>
+
+      <template>
+        <div class="q-pa-md">
+          <q-table
+            title="Caches"
+            :data="data"
+            :columns="columns"
+            row-key="name"
+            selection="single"
+            :selected.sync="selected"
+            :filter="filter"
+            grid
+            hide-header
+          >
+            <template v-slot:top-right>
+              <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </template>
+
+            <template v-slot:item="props">
+              <div
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+                :style="props.selected ? 'transform: scale(0.95);' : ''"
+              >
+                <q-card :class="props.selected ? 'bg-grey-2' : ''">
+                  <q-card-section>
+                    <q-checkbox :dense="denseOn" v-model="props.selected" :label="props.row.name" />
+                  </q-card-section>
+                  <q-separator />
+                  <q-list dense>
+                    <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
+                      <q-item-section>
+                        <q-item-label>{{ col.label }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-item-label caption>{{ col.value }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+
+          </q-table>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tab: 'mails',
+      panel: 'mails',
+      denseOn: true,
+      filter: '',
+      selected: [],
+      columns: [
+        {
+          name: 'desc',
+          required: true,
+          label: 'Dessert (100g serving)',
+          align: 'left',
+          field: row => row.name,
+          format: val => `${val}`,
+          sortable: true
+        },
+        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
+        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
+        { name: 'protein', label: 'Protein (g)', field: 'protein' },
+        { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
+        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+        { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
+      ],
+      data: [
+        {
+          name: 'Frozen Yogurt',
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          sodium: 87,
+          calcium: '14%',
+          iron: '1%'
+        },
+        {
+          name: 'Ice cream sandwich',
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          sodium: 129,
+          calcium: '8%',
+          iron: '1%'
+        },
+        {
+          name: 'Eclair',
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          sodium: 337,
+          calcium: '6%',
+          iron: '7%'
+        },
+        {
+          name: 'Cupcake',
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          sodium: 413,
+          calcium: '3%',
+          iron: '8%'
+        },
+        {
+          name: 'Gingerbread',
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          sodium: 327,
+          calcium: '7%',
+          iron: '16%'
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          sodium: 50,
+          calcium: '0%',
+          iron: '0%'
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%'
+        },
+        {
+          name: 'Honeycomb',
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          sodium: 562,
+          calcium: '0%',
+          iron: '45%'
+        },
+        {
+          name: 'Donut',
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          sodium: 326,
+          calcium: '2%',
+          iron: '22%'
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index e69de29..8b5ee79 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="q-pa-md">
+    <q-layout view="lhh LpR lff" container style="height: 350px" class="shadow-2 rounded-borders">
+      <q-header reveal class="bg-white" text="green-8">
+        <q-toolbar>
+          <q-toolbar-title class="bg-white text-green-8">Login</q-toolbar-title>
+        </q-toolbar>
+      </q-header>
+      <q-page-container>
+        <q-page padding>
+            <template>
+              <div class="q-pa-md">
+                <div class="column" style="height: 150px">
+                  <div class="col">
+                    <template>
+                      <div class="q-pa-md">
+                        <div class="q-gutter-md" style="max-width: 300px">
+                          <q-input v-model="text" label="Benutzername" />
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                  <div class="col">
+                    <template>
+                      <div class="q-pa-md">
+                        <div class="q-gutter-md" style="max-width: 300px">
+                          <q-input v-model="text" label="Passwort" />
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <q-page-sticky position="bottom-right" :offset="[18, 18]">
+              <q-btn fab color="bg-white" text-color="green-8" @click="onClick" icon="keyboard_arrow_right"/>
+            </q-page-sticky>
+        </q-page>
+      </q-page-container>
+    </q-layout>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: ''
+    }
+  }
+}
+</script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 8571b3d..2a9eed2 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -8,6 +8,16 @@ const routes = [
     path: "/dashboard/",
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/Dashboard.vue") }]
+  },
+  {
+    path: "/cacheview/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/CacheView.vue") }]
+  },
+  {
+    path: "/login/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Login.vue") }]
   }
 ];