From a06ffd082b55cae9141360eb4c7fa3b045d07971 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Tue, 14 Nov 2023 16:49:26 +0100
Subject: [PATCH 1/2] add asset page and its components

---
 components/ClientSearch.vue      |  69 +++++++++++++++++
 components/server/AssetTable.vue | 123 +++++++++++++++++++++++++++++++
 layouts/Navigationbar.vue        |   2 +-
 pages/assets.vue                 |  78 ++++++++++++++++++++
 routerFrontend/index.js          |   5 ++
 5 files changed, 276 insertions(+), 1 deletion(-)
 create mode 100644 components/ClientSearch.vue
 create mode 100644 components/server/AssetTable.vue
 create mode 100644 pages/assets.vue

diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue
new file mode 100644
index 0000000..9d05612
--- /dev/null
+++ b/components/ClientSearch.vue
@@ -0,0 +1,69 @@
+<template>
+  <section class="client-search">
+    <div class="label">Client</div>
+    <div class="input">
+      <input type="text" placeholder="..." v-model="inputValue" />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ClientSearch",
+  data() {
+    return {
+      inputValue: ""
+    };
+  }
+};
+</script>
+
+<style scoped>
+.client-search {
+  display: flex;
+  align-items: center;
+  padding: 0.625em 1.875em;
+  gap: 1.25em;
+  width: 30.125em;
+  height: 3.125em;
+  background: #2C2C2C;
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.label {
+  width: 2.5625em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+  color: #FFFFFF;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+  flex: 0;
+  height: 1.875em;
+  background: #212121;
+  box-shadow: inset 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.25);
+  border-radius: 0.3125em;
+  min-width: 8rem; 
+  overflow: hidden;
+  padding-right: 0.8rem;
+  padding-left: 0.8rem
+}
+
+.input input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #FFFFFF;
+}
+</style>
diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue
new file mode 100644
index 0000000..3688436
--- /dev/null
+++ b/components/server/AssetTable.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="data">
+        <div class="label">Last viewed:</div>
+        <table class="data-table" id="client-table">
+            <tr class="table-row" id="table-head">
+                <th class="Client">Client</th>
+                <th class="Name">Name</th>
+                <th class="Type">Type</th>
+                <th class="State">State</th>
+                <th class="User">User</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="Client">...</td>
+                <td class="Name">...</td>
+                <td class="Type">...</td>
+                <td class="State">...</td>
+                <td class="User">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+
+export default {
+    name: "AssetTable",
+
+}
+
+</script>
+  
+    
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Client {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name {
+    width: 33.3%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Type {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.State {
+    width: 12.7%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.User {
+    width: 8%;
+}
+
+.label {
+  width: 6.0625em;
+  height: 1.875em;
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.875em;
+  letter-spacing: 0.05em;
+  color: #FFFFFF;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index b57c46e..c4115a4 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -30,7 +30,7 @@
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
         </router-link>
-        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
+        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
           <div class="icon" id="assets-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="../icons/navbar-icons/Assets-Icon.svg" />
diff --git a/pages/assets.vue b/pages/assets.vue
new file mode 100644
index 0000000..aef05b3
--- /dev/null
+++ b/pages/assets.vue
@@ -0,0 +1,78 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <h1 id="page-name">Assets</h1>
+        </div>
+        <div id="content-body">
+          <ClientSearch />
+          <AssetTable />
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'default'
+  })
+</script>
+
+<script>
+import ClientSearch from "../components/ClientSearch.vue";
+import AssetTable from "../components/server/AssetTable.vue";
+
+  export default {
+    name: "AssetPage",
+    components: {
+      ClientSearch,
+      AssetTable,
+    }
+  }
+
+</script>
+    
+    
+    
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  
+  #content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
+  }
+  
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+</style>
\ No newline at end of file
diff --git a/routerFrontend/index.js b/routerFrontend/index.js
index 14bdbc3..27dd318 100644
--- a/routerFrontend/index.js
+++ b/routerFrontend/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import HomePage from '../pages/home.vue';
 import ClientsPage from '../pages/clients.vue';
 import LoginPage from '../pages/login.vue';
+import AssetPage from '../pages/assets.vue'
 
 
 const router = createRouter({
@@ -15,6 +16,10 @@ const router = createRouter({
             path: '/home',
             component: HomePage
         }, 
+        {
+            path: '/assets',
+            component: AssetPage
+        },  
         {
             path: '/clients',
             component: ClientsPage
-- 
2.43.0


From 2700dab82a73cb45e6c2b38f12e3fd02077f6159 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Wed, 15 Nov 2023 09:21:26 +0100
Subject: [PATCH 2/2] add default ... for ClientSearch

---
 components/ClientSearch.vue | 46 +++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue
index 9d05612..3d6de46 100644
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@@ -1,20 +1,14 @@
 <template>
   <section class="client-search">
     <div class="label">Client</div>
-    <div class="input">
-      <input type="text" placeholder="..." v-model="inputValue" />
-    </div>
+    <pre class="data">...</pre>
   </section>
 </template>
 
 <script>
 export default {
   name: "ClientSearch",
-  data() {
-    return {
-      inputValue: ""
-    };
-  }
+
 };
 </script>
 
@@ -43,20 +37,28 @@ export default {
   color: #FFFFFF;
 }
 
-.input {
-  display: flex;
-  align-items: center;
-  gap: 0.625em;
-  flex: 0;
-  height: 1.875em;
-  background: #212121;
-  box-shadow: inset 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.25);
-  border-radius: 0.3125em;
-  min-width: 8rem; 
-  overflow: hidden;
-  padding-right: 0.8rem;
-  padding-left: 0.8rem
-}
+
+  /* flex: 0;
+  height: 1.875em; */
+  /* min-width: 1.875em;
+  width: fit-content; 
+  overflow: hidden; */
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    background-color: #212121;
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+
+    /* gap: 0.625em;
+    flex: 0; */
+  }
 
 .input input {
   flex: 1;
-- 
2.43.0