add default ... for ClientSearch

add asset page and its components
Merge branch 'main' of https://git.tueit.de/jo.kuehner/TueIT_App
2023-11-15 09:21:26 +01:00 · 2023-11-14 16:49:26 +01:00 · 2023-11-14 13:02:43 +01:00 · 2023-11-14 12:59:57 +01:00 · 2023-11-14 11:10:14 +01:00 · 2023-11-13 19:30:52 +01:00
25 changed files with 1576 additions and 273 deletions
--- a/app.vue
+++ b/app.vue
@ -5,15 +5,26 @@
 </template>


-<script>

+<script setup>

-  //import Page from "./layouts/Page"
-
-  /*definePageMeta({
-  layout: 'Page'
-  })*/
-
-//const layout = "Page";
+  //const layout = "empty";

 </script>
+
+
+
+<style>
+
+  html, template, body, #__nuxt, #__layout {
+    height: 100vh;
+    width: 100vw;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background-color: #212121;
+    font-size: 1rem;
+  }
+
+
+</style>
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@ -0,0 +1,71 @@
+<template>
+  <section class="client-search">
+    <div class="label">Client</div>
+    <pre class="data">...</pre>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ClientSearch",
+
+};
+</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;
+}
+
+
+  /* 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;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #FFFFFF;
+}
+</style>
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@ -0,0 +1,78 @@
+<template>
+  <section class="dashboard">
+    <h2 class="heading">My tasks</h2>
+    <div class="shortcuts">
+      <input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input type="button" id="production-orders" value="My Production Orders">
+      <input type="button" id="solutions" value="My Solutions">
+      <input type="button" id="issue-slips" value="My Issue Slips">
+    </div>
+  </section>
+</template>
+
+
+
+<script>
+
+export default {
+  name: "Dashboard",
+  
+}
+
+</script>
+
+  
+  
+  
+<style scoped>
+  
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.875rem 3.125rem 3.125rem;
+    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;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: 400 1rem/2rem Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 15rem;
+    height: 4rem;
+    border-radius: 0.625rem;
+    padding: 0.9375rem 1.25rem;
+    border: none;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    background-color: #343434;
+  }
+  
+  
+  
+</style>
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@ -0,0 +1,213 @@
+<template>
+  <form class="login-form">
+    <div class="title-field">
+      <span class="title-icon" id="logo-icon">
+        <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
+      </span>
+      <pre class="title">Login</pre>
+    </div>
+    <div class="login-field">
+      <div class="form-field" id="username-field">
+        <label for="username-input" id="username-label">
+          <span class="icon" id="username-icon">
+            <img loading="lazy" src="../icons/Mail-Icon.svg" />
+          </span>
+          <div class="label">Username:</div>
+        </label>
+        <div class="input-field">
+          <input type="text" id="username-input" placeholder="user@example.com">
+        </div>
+      </div>
+      <div class="form-field" id="password-field">
+        <label for="password-input" id="password-label">
+          <span class="icon" id="password-icon">
+            <img loading="lazy" src="../icons/Lock-Icon.svg" />
+          </span>
+          <div class="label">Password:</div>
+        </label>
+        <div class="input-field">
+          <input type="text" id="password-input" placeholder="*******">
+          <input type="button" id="show-password-toggle" value="Show">
+      </div>
+      </div>
+    </div>
+    <input type="button" id="login-button" value="Login">
+  </form>
+</template>
+
+
+
+<script>
+
+export default {
+    name: "LoginForm",
+}
+
+</script>
+  
+  
+
+<style scoped>
+
+  * {
+    box-sizing: border-box;
+  }
+
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 31.25rem;
+    height: 31.25rem;
+    border-radius: 0.625rem;
+    padding: 2.5rem 1.875rem;
+    gap: 1.875rem;
+    border: 0.0625rem solid #000;
+    background-color: #2c2c2c;
+  }
+
+
+  .title-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+  }
+
+  .title-icon {
+    justify-content: center;
+    align-items: center;
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+
+  .title-icon > img {
+    width: 3.125rem;
+    height: 3.125rem;
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+
+  .title {
+    margin: 0;
+    color: #fff;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 400 1.875rem/1.875rem Overpass, sans-serif;
+  }
+
+  
+  .login-field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    gap: 1.25rem;
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 25rem;
+    height: 5rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+  }
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: fit-content;
+    height: 1.875rem;
+    gap: 0.625rem;
+  }
+
+  .icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+
+  .icon > img {
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+  #username-icon > img {
+    width: auto;
+    height: 0.9375rem;
+  }
+  #password-icon > img {
+    width: 0.9375rem;
+    height: auto;
+  }
+
+  .label {
+    color: #fff;
+    letter-spacing: 2%;
+    font: 400 0.9375rem/1.875rem Overpass, sans-serif;
+  }
+
+  .input-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: stretch;
+    align-self: stretch;
+    width: 100%;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
+    padding: 0.1875rem 0.625rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    background-color: #212121;
+  }
+
+  input[type=text] {
+    width: 100%;
+    height: 100%;
+    background-color: #00000000;
+    border: none;
+    color: #8e8e8e;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 100 0.75rem/1.25rem Overpass, sans-serif;
+  }
+  input[type=button] {
+    width: fit-content;
+    align-self: flex-end;
+    background-color: #00000000;
+    border: none;
+    color: #fff;
+    letter-spacing: 5%;
+    white-space: nowrap;
+    font: 300 0.75rem/1.25rem Overpass, sans-serif;
+  }
+  
+  #login-button {
+    width: 13.75rem;
+    height: 4.375rem;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
+    align-self: center;
+    border: none;
+    background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
+    color: #fff;
+    letter-spacing: 2%;
+    white-space: nowrap;
+    font: 600 1.25rem/1.875rem Overpass, sans-serif;
+  }
+  
+  
+  </style>
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@ -0,0 +1,84 @@
+<template>
+  <section class="quick-access">
+    <h2 class="heading">Quick Access</h2>
+    <div class="shortcuts">
+      <input type="button" id="pins" value="Pins">
+      <!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input type="button" id="production-orders" value="My Production Orders">
+      <input type="button" id="solutions" value="My Solutions">
+      <input type="button" id="issue-slips" value="My Issue Slips">-->
+    </div>
+  </section>
+</template>
+
+
+<script>
+
+export default {
+  name: "QuickAccess",
+  
+}
+
+</script>
+
+
+
+
+<style scoped>
+  
+  .quick-access {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.875rem 3.125rem 3.125rem;
+    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;
+  }
+  
+  .heading {
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: 400 1rem/2rem Overpass, sans-serif;
+  }
+  
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    padding: 0.625rem 2.5rem;
+    gap: 2.5rem;
+  }
+  
+  input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 15rem;
+    height: 4rem;
+    border-radius: 0.625rem;
+    padding: 0.9375rem 1.25rem;
+    border: none;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    background-color: #343434;
+  }
+  input#pins {
+    border: 0.0625rem dashed #454545;
+    color: #8e8e8e;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    background-color: #34343400;
+  }
+  
+  
+  
+</style>
--- a/components/server/AssetTable.vue
+++ 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>
--- a/components/server/Client.vue
+++ b/components/server/Client.vue
@ -0,0 +1,179 @@
+<template>
+  <section class="information">
+    <h2 class="client-name">Client name</h2>
+    <div class="data-field" id="client-id">
+      <pre class="label">ID:</pre>
+      <pre class="data">...</pre>
+    </div>
+    <div class="client-data">
+      <div class="contact">
+        <h3 class="area-title">Contact:</h3>
+        <div class="data-field" id="contact-person">
+          <pre class="label">Contact person:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="e-mail">
+          <pre class="label">E-Mail:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="phone">
+          <pre class="label">Phone number:</pre>
+          <pre class="data">...</pre>
+        </div>
+      </div>
+      <div class="address">
+        <h3 class="area-title">Address:</h3>
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre class="label">Street:</pre>
+            <pre class="data">...</pre>
+          </div>
+          <div class="data-field" id="street-no">
+            <pre class="label">No.:</pre>
+            <pre class="data">...</pre>
+          </div>
+        </div>
+        <div class="data-field" id="postal-code">
+          <pre class="label">Postcode:</pre>
+          <pre class="data">...</pre>
+        </div>
+        <div class="data-field" id="city">
+          <pre class="label">City:</pre>
+          <pre class="data">...</pre>
+        </div> 
+      </div>
+    </div>
+    <div class="notes">
+      <h3 class="area-title">Notes:</h3>
+      <pre class="data" id="notes">...</pre>
+    </div>
+  </section>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "Client",
+    
+  }
+  
+</script>
+  
+    
+    
+    
+<style scoped>
+  
+  .information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+  
+  
+  .client-name {
+    align-self: stretch;
+    padding: 1.25rem 0;
+    color: #fff;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+  }
+  
+  .data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+  }
+  .data-field#client-id {
+    padding: 0.625rem 1.875rem;
+  }
+  .data-field#street-name {
+    width: 70%;
+  }
+  .data-field#street-no {
+    width: 30%;
+  }
+  
+  .label {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  }
+  .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;
+  }
+  .data#notes {
+    align-self: stretch;
+  }
+
+  .client-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    padding: 0 0.625rem;
+  }
+
+  .contact, .address {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 1.25rem 0.625rem;
+    border-radius: 0.3125rem;
+  }
+  
+  .area-title {
+    color: #fff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  }
+  
+  .street-address {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+  }
+  
+  .notes {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+  }
+  
+  
+</style>
--- a/components/server/ClientQuickAccess.vue
+++ b/components/server/ClientQuickAccess.vue
@ -0,0 +1,79 @@
+<template>
+  <section class="quick-access">
+    <h2 class="heading">Quick Access</h2>
+    <div class="shortcuts">
+      <input type="button" id="maintenance-visits" value="Maintenance Visits">
+      <input type="button" id="production-orders" value="Production Orders">
+      <input type="button" id="issue-slips" value="Assets">
+      <input type="button" id="solutions" value="Solutions">
+      <input type="button" id="issue-slips" value="Issue Slips">
+    </div>
+  </section>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "ClientQuickAccess",
+    
+  }
+  
+</script>
+  
+    
+    
+    
+<style scoped>
+    
+    .quick-access {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      align-self: stretch;
+      width: 100%;
+      padding: 1.875rem 1.875rem 3.125rem;
+      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;
+    }
+    
+    .heading {
+      color: #fff;
+      letter-spacing: 5%;
+      text-decoration-line: underline;
+      font: 400 1rem/2rem Overpass, sans-serif;
+    }
+    
+    .shortcuts {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-content: center;
+      padding: 0.625rem 1.875rem;
+      gap: 2.5rem;
+    }
+    
+    input {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: 15rem;
+      height: 4rem;
+      border-radius: 0.625rem;
+      padding: 0.9375rem 1.25rem;
+      border: none;
+      color: #fff;
+      text-align: center;
+      letter-spacing: 5%;
+      font: 400 0.875rem/2rem Overpass, sans-serif;
+      background-color: #343434;
+    }
+    
+    
+    
+ </style>
--- a/components/server/ClientTable.vue
+++ b/components/server/ClientTable.vue
@ -0,0 +1,90 @@
+<template>
+    <div class="data">
+        <table class="data-table" id="client-table">
+            <tr class="table-row" id="table-head">
+                <th class="ID">ID</th>
+                <th  class="Name">Name</th>
+            </tr>
+            <tr class="table-row" id="row-1">
+                <td class="ID">...</td>
+                <td class="Name">...</td>
+            </tr>
+            <tr class="table-row" id="row-2">
+                <td class="ID">...</td>
+                <td class="Name">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+  
+<script>
+  
+  export default {
+    name: "ClientTable",
+    
+  }
+  
+</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;
+        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;
+        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;
+    }
+    .ID {
+        width: 40%;
+        border-right: 0.0625rem solid #000000;
+    }
+    .Name {
+        width: 60%;
+    }
+    
+    
+    
+</style>
--- a/documentation/Datenbankmodell_tueitApp.drawio
+++ b/documentation/Datenbankmodell_tueitApp.drawio
@ -112,13 +112,13 @@
        <mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
          <mxGeometry y="480" width="140" height="30" as="geometry" />
        </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt;      &lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt;     &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
          <mxGeometry y="510" width="140" height="30" as="geometry" />
        </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt;     &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
          <mxGeometry y="540" width="140" height="30" as="geometry" />
        </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
          <mxGeometry y="570" width="140" height="30" as="geometry" />
        </mxCell>
        <mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@ -83,14 +83,16 @@ export default {
  .actionbar {
    display: flex;
    flex-direction: column;
+    position: sticky;
+    top: 5rem;
    align-items: flex-start;
    justify-content: center;
    width: fit-content;
    height: fit-content;
-    border-radius: 10px;
-    padding: 30px 10px;
-    gap: 20px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 0.625rem;
+    padding: 1.875rem 0.625rem;
+    gap: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
  }

@ -101,8 +103,8 @@ export default {
    align-items: stretch;
    justify-content: center;
    align-self: stretch;
-    padding: 20px 0;
-    gap: 20px;
+    padding: 1.25rem 0;
+    gap: 1.25rem;
  }


@ -111,8 +113,8 @@ export default {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
-    height: 30px;
-    border-radius: 10px;
+    height: 1.875rem;
+    border-radius: 0.625rem;
    border: none;
    background-color: #2c2c2c;
    transition-duration: 0.5s;
@ -127,13 +129,13 @@ export default {
    flex-direction: row;
    align-items: center;
    justify-content: center;
-    width: 30px;
-    height: 30px;
+    width: 1.875rem;
+    height: 1.875rem;
  }
  #indicator-icon {
-    width: 30px;
-    height: 30px;
-    border-radius: 5px;
+    width: 1.875rem;
+    height: 1.875rem;
+    border-radius: 0.3125rem;
    background-color: #2c2c2c;
    transition-duration: 0.5s;
  }
@ -142,24 +144,24 @@ export default {
  }

  .icon > img {
-    width: 14px;
-    height: 14px;
+    width: 0.875rem;
+    height: 0.875rem;
    filter: invert(100%);
    object-fit: contain;
    object-position: center;
    overflow: hidden;
  }
  #indicator-icon > img {
-    height: 20px;
+    height: 1.25rem;
  }


  .label {
    color: #fff;
-    letter-spacing: 0.7px;
+    letter-spacing: 5%;
    align-self: center;
    white-space: nowrap;
-    font: 400 14px/20px Overpass, sans-serif;
+    font: 400 0.875rem/1.25rem Overpass, sans-serif;
  }
  

--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@ -1,61 +1,64 @@
 <template>
-  <aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
+  <aside
+    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
    <div class="toggle">
-      <div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
-        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
+      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
      </div>
-      <div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
-        <img :style="[darkMode ? darkStylesImg : lightStylesImg ]" 
-          loading="lazy" 
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+        @click="toggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
      </div>
    </div>
    <div class="menus">
-      <nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
+      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="home-button">
          <div class="icon" id="home-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Home-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+        </router-link>
      </nav>
      <nav id="site-menu">
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
          <div class="icon" id="checklists-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Checklists-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+        </router-link>
+        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
          <div class="icon" id="assets-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Assets-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
+        </router-link>
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
          <div class="icon" id="solutions-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Solutions-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+        </router-link>
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
          <div class="icon" id="accounting-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Accounting-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
-        </button>
-        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+        </router-link>
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="clients-button">
          <div class="icon" id="clients-icon">
-            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
              src="../icons/navbar-icons/Clients-Icon.svg" />
          </div>
-          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+        </router-link>
      </nav>
    </div>
  </aside>
@ -64,25 +67,12 @@


 <script>
-
 export default {
  name: "Navigationbar",
  data() {
    return {
-      darkMode: false,
+      darkMode: true,
      isExpanded: true,
-      darkStylesImg: {
-        filter: 'invert(100%)',
-      },
-      lightStylesImg: {
-        filter: 'none',
-      },
-      darkStylesLabel: {
-        color: '#fff',
-      },
-      lightStylesLabel: {
-        color: '#000',
-      },
    };
  },
  methods: {
@ -102,55 +92,48 @@ export default {
 }

 aside {
-  transition: 0.2s ease-out;
  display: flex;
  flex-direction: column;
-  width: calc(2.5rem + 2.5rem);
-  overflow: hidden;
+  position: sticky;
+  top: 5rem;
+  width: 3.125rem;
+  transition: 0.5s ease-in-out;
 }

 aside.is-expanded {
-  width: 238px;
+  width: 12.5rem;
 }

 .is-expanded .label {
  opacity: 1;
-  transition: 0.3s ease-out;
+  transition: 0.5s ease-in-out;
 }

-.is-not-expanded .darkStylesIcon {
-  transform: rotate(180deg);
-}
-
-.is-not-expanded .lightStylesIcon {
+.is-not-expanded #indicator-icon {
  transform: rotate(180deg);
+  transition: 0.5s ease-in-out;
 }


-.navbar-dark {
+.navbar {
  display: flex;
  flex-direction: column;
+  height: fit-content;
+  border-radius: 0.625rem;
  align-items: stretch;
  justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
+  gap: 0.625rem;
+  padding: 0.9375rem;
  margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  background-color: #2c2c2c;
 }

-.navbar-light {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: fit-content;
-  border-radius: 10px;
-  gap: 10px;
-  padding: 15px;
-  margin: 0;
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+.navbar-darkmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2C2C2C;
+}
+
+.navbar-lightmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  background-color: #FFFFFF;
 }

@ -158,142 +141,127 @@ aside.is-expanded {
 .toggle {
  display: flex;
  flex-direction: row;
+  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
-  height: 40px;
 }


-
 .menus {
  display: flex;
  flex-direction: column;
  position: relative;
-  transition: 0.2s ease-out;
  justify-content: flex;
-  padding: 20px 0;
-  gap: 30px;
+  padding: 1.25rem 0;
+  gap: 1.875rem;
+  transition: 0.5s ease-in-out;
+  align-items: center;
 }

+
 nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
-  padding-top: 0.8rem;
-  padding-bottom: 0.8rem;
-  gap: 30px;
+  padding: 0.9375rem 0;
+  gap: 1.875rem;
+  width: 92%;
 }

-button {
+.menu-darkmode {
+  border-bottom: 0.0625rem solid #8E8E8E;
+}
+
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
+
+
+
+button,
+a {
  display: flex;
  flex-direction: row;
+  align-self: stretch;
+  height: 2.1875rem;
+  border-radius: 0.3125rem;
  align-items: center;
  justify-content: flex-start;
-  align-self: stretch;
-  height: 35px;
-  border-radius: 5px;
-  gap: 5px;
+  gap: 0.3125rem;
  border: none;
-  background-color: #2c2c2c;
-  transition-duration: 0.5s;
+  transition: 0.5s ease-in-out;
+  text-decoration: none;
+  width: 100%;
 }

-.dark-menu {
-  background-color: #2c2c2c;
+.button-darkmode {
+  background-color: #2C2C2C;
 }

-.light-menu {
+.button-lightmode {
  background-color: #FFFFFF;
 }

-.dark-menu:hover {
+.button-darkmode:hover,
+.indicator-darkmode:hover,
+.back-darkmode:hover {
  background-color: #444444;
 }

-.light-menu:hover {
+.button-lightmode:hover,
+.indicator-lightmode:hover,
+.back-lightmode:hover {
  background-color: #ACACAC;
 }

 .icon {
  display: flex;
  flex-direction: row;
+  width: 2.1875rem;
+  height: 2.1875rem;
  align-items: center;
  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-.lightStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-.darkStylesIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  transition: 0.2s ease-out;
-}
-
-#back-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
-  transition-duration: 0.5s;
-  transition: 0.2s ease-out;
+  transition: 0.2s ease-in-out;
 }

+#back-icon,
 #indicator-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.3125rem;
  transition-duration: 0.5s;
-  transition: transform 0.3s;
+  transition: 0.2s ease-out;
 }

-.lightStylesIcon:hover {
-  background-color: #ACACAC;
-}

-.darkStylesIcon:hover {
-  background-color: #444444;
-}
-
-.icon>img,
-.lightStylesIcon>img,
-.darkStylesIcon>img {
-  width: 20px;
-  height: 20px;
+img {
+  width: 1.25rem;
+  height: 1.25rem;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  transition: 0.2s ease-out;
 }

-.dark-home-menu {
-  border-bottom: 1px solid #8e8e8e;
-}
-
-.light-home-menu {
-  border-bottom: 1px solid #BABABA;
+.img-darkmode {
+  filter: invert(100%);
 }

 .label {
-  letter-spacing: 0.7px;
+  letter-spacing: 5%;
  align-self: center;
  white-space: nowrap;
  margin: auto 0;
-  font: 600 14px/20px Overpass, sans-serif;
+  font: 600 0.875rem/1.25rem Overpass, sans-serif;
  opacity: 0;
-  transition: opacity 0.5s ease-out; 
+  transition: opacity 0.5s ease-out;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
 }
 </style>
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@ -30,43 +30,48 @@ export default {

    header {
        display: flex;
+        flex-direction: row;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        height: 4.375rem;
+        align-self: stretch;
        justify-content: space-between;
        align-items: center;
-        align-self: stretch;
+        padding: 0.625rem 1.25rem;
        background-color: #2c2c2c;
-        height: 60px;
-        padding: 10px 20px;
    }
    
    #header-logo {
        object-fit: contain;
        object-position: center;
-        width: 80px;
-        height: 40px;
+        width: 5rem;
+        height: 2.5rem;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .profile {
-        align-items: flex-end;
        display: flex;
-        gap: 10px;
-        padding: 0 30px;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.625rem;
+        padding: 0 0.625rem;
    }
    .username {
-        color: #fff;
-        text-align: right;
-        letter-spacing: 0.8px;
        align-self: center;
        margin: auto 0;
-        font: 200 14px Overpass, sans-serif;
+        color: #fff;
+        text-align: right;
+        font: 200 0.875rem Overpass, sans-serif;
+        letter-spacing: 5%;
    }
    .picture {
        display: flex;
+        width: 2.5rem;
+        height: 2.5rem;
        border-radius: 50%;
-        width: 40px;
-        height: 40px;
        background-color: #fff;
    }

--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -2,14 +2,7 @@
  <PageHeader />
  <main>
    <Navigationbar />
-    <section id="content">
-      <section id="content-header">
-        <pre id="page-name">Pagename</pre>
-      </section>
-      <section id="content-body">
-        <!--<slot />-->
-      </section>
-    </section>
+    <slot />
    <Actionbar />
  </main>
 </template>
@ -33,70 +26,21 @@ export default {
  
  
  
-<style>
+<style scoped>

  * {
    box-sizing: border-box;
  }

-  body {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    background-color: #212121;
-  }
-  
  main {
    display: flex;
    flex-direction: row;
    width: 100%;
-    gap: 10px;
-    padding: 10px 25px 10px 10px;
+    padding: 0.625rem;
+    gap: 0.625rem;
+    background-color: #212121;
  }
  
-  #content {
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    gap: 10px;
-    padding: 0 20px;
-  }
  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 50px;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 1.2px;
-    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
-  }
-
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 20px;
-    margin-bottom: 10px;
-    border-radius: 10px;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-
-  slot {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 20px;
-    padding: 20px 30px;
-  }
  
 </style>
--- a/layouts/empty.vue
+++ b/layouts/empty.vue
@ -0,0 +1,40 @@
+<template>
+    <PageHeader />
+    <main>
+        <slot />
+    </main>
+</template>
+  
+  
+  <script>
+  import PageHeader from "../layouts/PageHeader.vue";
+  
+  export default {
+      name: "Page",
+      components: {
+        PageHeader,
+      }
+  }
+  
+  </script>
+    
+    
+    
+  <style scoped>
+  
+    * {
+      box-sizing: border-box;
+    }
+  
+    
+    main {
+      display: flex;
+      flex-direction: row;
+      gap: 0.625rem;
+      padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
+      background-color: #212121;
+    }
+    
+    
+    
+  </style>
--- a/pages/assets.vue
+++ 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>
--- a/pages/clients.vue
+++ b/pages/clients.vue
@ -0,0 +1,85 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <h1 id="page-name">Clients</h1>
+        </div>
+        <div id="content-body">
+            <Client />
+            <ClientQuickAccess />
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'default'
+  })
+</script>
+
+<script>
+  import ClientTable from "../components/server/ClientTable.vue";
+  import Client from "../components/server/Client.vue";
+  import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
+  import ClientEmployees from "../components/server/ClientEmployees.vue";
+  import ClientEmployee from "../components/server/ClientEmployee.vue";
+
+  export default {
+    name: "ClientsPage",
+    components: {
+      ClientTable,
+      Client,
+      ClientQuickAccess,
+      ClientEmployees,
+      ClientEmployee,
+    }
+  }
+
+</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>
--- a/pages/home.vue
+++ b/pages/home.vue
@ -0,0 +1,81 @@
+<template>
+  <Navigationbar />
+  <section id="content">
+    <div id="content-header">
+      <pre id="page-name">Home</pre>
+    </div>
+    <div id="content-body">
+      <Dashboard />
+      <QuickAccess />
+    </div>
+  </section>
+</template>
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'empty'
+  })
+</script>
+
+<script>
+  import Navigationbar from "../layouts/Navigationbar.vue";
+  import Dashboard from "../components/Dashboard.vue";
+  import QuickAccess from "../components/QuickAccess.vue";
+
+  export default {
+    name: "HomePage",
+    components: {
+      Navigationbar,
+      Dashboard,
+      QuickAccess,
+    }
+  }
+
+</script>
+    
+    
+    
+<style>
+
+  * {
+    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>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,23 +1,83 @@
 <template>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
+    <section id="content">
+        <div id="content-header">
+            <h1 id="page-name">Pagename</h1>
+        </div>
+        <div id="content-body">
+            <section id="stuff"></section>
+        </div>
+    </section>
 </template>
-
-<script lang="ts">
-export default {
-	head: {
-		title: 'tueit App',
-	},
-};
+  
+  
+<script setup>
+  definePageMeta({
+    layout: 'default'
+  })
 </script>

-<style>
-    html, template, body {
-        height: 100%;
-        width: 100%;
-        height: 100vh;
-        width: 100vw;
-        margin: 0;
+<script>
+  export default {
+    name: "Testpage",
+    components: {
    }
+  }
+
+</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;
+  }
+
+  #stuff {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    padding: 1.25rem 1.875rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #2C2C2C;
+  }
+  
 </style>
--- a/pages/login.vue
+++ b/pages/login.vue
@ -1,5 +1,80 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
-</template>
+  <section id="content">
+    <div id="content-header">
+      <pre id="page-name"> </pre>
+    </div>
+    <div id="content-body">
+      <LoginForm />
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+definePageMeta({
+  layout: 'empty'
+})
+</script>
+
+<script>
+import LoginForm from "../components/LoginForm.vue";
+
+export default {
+    name: "LoginPage",
+    components: {
+      LoginForm,
+    }
+}
+
+</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;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    height: fit-content;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+  }
+
+  
+  
+</style>
--- a/public/icons/Lock-Icon.svg
+++ b/public/icons/Lock-Icon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" fill="none" viewBox="0 0 12 15">
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9.333 7.833H10.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 14V8.333a.5.5 0 0 1 .5-.5h1.167m6.666 0V4.5c0-1.111-.666-3.333-3.333-3.333-2.667 0-3.333 2.222-3.333 3.333v3.333m6.666 0H2.667"/>
+</svg>
--- a/public/icons/Mail-Icon.svg
+++ b/public/icons/Mail-Icon.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" viewBox="0 0 16 12">
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.572 3.857 3.572 2.5 3.571-2.5"/>
+  <path stroke="#000" d="M1 9.571V2.43C1 1.639 1.64 1 2.429 1h11.428c.79 0 1.429.64 1.429 1.429V9.57c0 .79-.64 1.429-1.429 1.429H2.43A1.427 1.427 0 0 1 1 9.571Z"/>
+</svg>
--- a/public/icons/settings-icons/Dropdown-Icon.svg
+++ b/public/icons/settings-icons/Dropdown-Icon.svg
--- a/public/icons/settings-icons/Settings-Icon.svg
+++ b/public/icons/settings-icons/Settings-Icon.svg
--- a/routerFrontend/index.js
+++ b/routerFrontend/index.js
@ -0,0 +1,30 @@
+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({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: LoginPage
+        },
+        {
+            path: '/home',
+            component: HomePage
+        }, 
+        {
+            path: '/assets',
+            component: AssetPage
+        },  
+        {
+            path: '/clients',
+            component: ClientsPage
+        },         
+    ]
+})
+
+export default router
Author	SHA1	Message	Date
selina.mail	2700dab82a	add default ... for ClientSearch	2023-11-15 09:21:26 +01:00
selina.mail	a06ffd082b	add asset page and its components	2023-11-14 16:49:26 +01:00
jo.kuehner	3ffd00f790	Merge branch 'main' of https://git.tueit.de/jo.kuehner/TueIT_App	2023-11-14 13:02:43 +01:00
jo.kuehner	ce9f7cd17b	update	2023-11-14 12:59:57 +01:00
selina.mail	1761a03afb	add router for navbar and default routes for the non existing pages	2023-11-14 11:10:14 +01:00
jo.kuehner	fee9acfd6d	optimized layout	2023-11-13 19:30:52 +01:00
jo.kuehner	ffff6f4467	added Clients Page	2023-11-10 17:51:07 +01:00
jo.kuehner	f82cf089b6	finished home page	2023-11-09 22:05:32 +01:00
jo.kuehner	49e5b6da73	added login page, setup templates	2023-11-09 20:17:38 +01:00
jo.kuehner	5d08c9d557	Merge pull request 'navbar_lightmode' (#2 ) from navbar_lightmode into main Reviewed-on: jo.kuehner/TueIT_App#2	2023-11-09 19:16:05 +00:00