Compare commits
14 Commits
navbar_lig
...
assetsOthe
| Author | SHA1 | Date | |
|---|---|---|---|
| 5ca5bbbc13 | |||
| 14b111ac79 | |||
| 529292cea1 | |||
| ea68f44194 | |||
| 2700dab82a | |||
| a06ffd082b | |||
| 3ffd00f790 | |||
| ce9f7cd17b | |||
| 1761a03afb | |||
| fee9acfd6d | |||
| ffff6f4467 | |||
| f82cf089b6 | |||
| 49e5b6da73 | |||
| 5d08c9d557 |
27
app.vue
27
app.vue
@ -5,15 +5,26 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
//import Page from "./layouts/Page"
|
//const layout = "empty";
|
||||||
|
|
||||||
/*definePageMeta({
|
|
||||||
layout: 'Page'
|
|
||||||
})*/
|
|
||||||
|
|
||||||
//const layout = "Page";
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
html, template, body, #__nuxt, #__layout {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #212121;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
71
components/ClientSearch.vue
Normal file
71
components/ClientSearch.vue
Normal file
@ -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>
|
||||||
78
components/Dashboard.vue
Normal file
78
components/Dashboard.vue
Normal file
@ -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>
|
||||||
213
components/LoginForm.vue
Normal file
213
components/LoginForm.vue
Normal file
@ -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>
|
||||||
84
components/QuickAccess.vue
Normal file
84
components/QuickAccess.vue
Normal file
@ -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>
|
||||||
204
components/server/Asset.vue
Normal file
204
components/server/Asset.vue
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<section class="information">
|
||||||
|
<h2 class="asset-name">Asset name</h2>
|
||||||
|
<div class="asset-data">
|
||||||
|
<div class="client-location">
|
||||||
|
<div class="data-field" id="client">
|
||||||
|
<pre class="label">Client:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="location">
|
||||||
|
<pre class="label">Location:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="id-type">
|
||||||
|
<div class="data-field" id="id">
|
||||||
|
<pre class="label">ID:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="type">
|
||||||
|
<pre class="label">Type:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="remote-location">
|
||||||
|
<pre class="label">Remote location:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rectangle-container">
|
||||||
|
<div class="rectangle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="asset-data">
|
||||||
|
<div class="additional">
|
||||||
|
<div class="description">
|
||||||
|
<h3 class="area-title">Description:</h3>
|
||||||
|
<pre class="data" id="description">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="additional">
|
||||||
|
<div class="notes">
|
||||||
|
<h3 class="area-title">Notes:</h3>
|
||||||
|
<pre class="data" id="notes">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Asset",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.asset-name {
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 1rem 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#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,
|
||||||
|
.data#description {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-location,
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 0;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0rem 0.625rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.id-type {
|
||||||
|
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,
|
||||||
|
.description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-container {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle {
|
||||||
|
width: 6.25em;
|
||||||
|
height: 6.25em;
|
||||||
|
background: #212121;
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
components/server/AssetTable.vue
Normal file
123
components/server/AssetTable.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="data">
|
||||||
|
<div class="label">Last viewed:</div>
|
||||||
|
<table class="data-table" id="asset-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>
|
||||||
117
components/server/AssetTableNoClient.vue
Normal file
117
components/server/AssetTableNoClient.vue
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<div class="data">
|
||||||
|
<div class="label">Assets:</div>
|
||||||
|
<table class="data-table" id="asset-table-no-client">
|
||||||
|
<tr class="table-row" id="table-head">
|
||||||
|
<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="Name">...</td>
|
||||||
|
<td class="Type">...</td>
|
||||||
|
<td class="State">...</td>
|
||||||
|
<td class="User">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AssetTableNoClient",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Name {
|
||||||
|
width: 50%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type {
|
||||||
|
width: 20%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State {
|
||||||
|
width: 20%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
179
components/server/Client.vue
Normal file
179
components/server/Client.vue
Normal file
@ -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>
|
||||||
79
components/server/ClientQuickAccess.vue
Normal file
79
components/server/ClientQuickAccess.vue
Normal file
@ -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>
|
||||||
90
components/server/ClientTable.vue
Normal file
90
components/server/ClientTable.vue
Normal file
@ -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>
|
||||||
159
components/server/HardwareSpecifications.vue
Normal file
159
components/server/HardwareSpecifications.vue
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<section class="hardware-information">
|
||||||
|
<div class="label" id="hardware">Hardware specifications:</div>
|
||||||
|
<div class="asset-data">
|
||||||
|
<div class="model-CPU">
|
||||||
|
<div class="data-field" id="model">
|
||||||
|
<pre class="label">Model:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="CPU">
|
||||||
|
<pre class="label">CPU:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="serial-number-RAM">
|
||||||
|
<div class="data-field" id="serial-number">
|
||||||
|
<pre class="label">Serial number:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="RAM">
|
||||||
|
<pre class="label">RAM:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="asset-data">
|
||||||
|
<div class="additional">
|
||||||
|
<div class="storage-configuration">
|
||||||
|
<h3 class="area-title">Storage configuration:</h3>
|
||||||
|
<pre class="data" id="storage-configuration">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="additional">
|
||||||
|
<div class="miscellaneous">
|
||||||
|
<h3 class="area-title">Miscellaneous:</h3>
|
||||||
|
<pre class="data" id="miscellaneous">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "HardwareSpecifications",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hardware-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label#hardware {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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#miscellaneous,
|
||||||
|
.data#storage-configuration {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-CPU,
|
||||||
|
.serial-number-RAM {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 0;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0rem 0.625rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.storage-configuration,
|
||||||
|
.miscellaneous {
|
||||||
|
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>
|
||||||
110
components/server/NetworkSpecifications.vue
Normal file
110
components/server/NetworkSpecifications.vue
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<section class="network-information">
|
||||||
|
<div class="label" id="network">Network specifications:</div>
|
||||||
|
<div class="asset-data">
|
||||||
|
<div class="IPv4-MAC">
|
||||||
|
<div class="data-field" id="IPv4">
|
||||||
|
<pre class="label">IPv4:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="MAC">
|
||||||
|
<pre class="label">MAC:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="IPv6-subnetmask">
|
||||||
|
<div class="data-field" id="IPv6">
|
||||||
|
<pre class="label">IPv6:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="subnetmask">
|
||||||
|
<pre class="label">Subnetmask:</pre>
|
||||||
|
<pre class="data">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "NetworkSpecifications",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.network-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label#network {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IPv4-MAC,
|
||||||
|
.IPv6-subnetmask {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 0;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
121
components/server/SoftwareSpecifications.vue
Normal file
121
components/server/SoftwareSpecifications.vue
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<section class="software-information">
|
||||||
|
<div class="label" id="software">Software specifications:
|
||||||
|
<div class="asset-data">
|
||||||
|
<table class="data-table" id="asset-table-no-client">
|
||||||
|
<tr class="table-row" id="table-head">
|
||||||
|
<th class="Software">Software</th>
|
||||||
|
<th class="Version">Version</th>
|
||||||
|
<th class="License">License</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="table-row" id="row-1">
|
||||||
|
<td class="Software">...</td>
|
||||||
|
<td class="Version">...</td>
|
||||||
|
<td class="License">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "SoftwareSpecifications",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.software-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label#software {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
padding-left: 0.625rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Software {
|
||||||
|
width: 50%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Version {
|
||||||
|
width: 25%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.License {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
components/server/SolutionTable.vue
Normal file
123
components/server/SolutionTable.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="data">
|
||||||
|
<div class="label">Last viewed:</div>
|
||||||
|
<table class="data-table" id="solution-table">
|
||||||
|
<tr class="table-row" id="table-head">
|
||||||
|
<th class="Client">Client</th>
|
||||||
|
<th class="Name">Name</th>
|
||||||
|
<th class="Asset">Asset</th>
|
||||||
|
<th class="Type">Type</th>
|
||||||
|
<th class="User">User</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="table-row" id="row-1">
|
||||||
|
<td class="Client">...</td>
|
||||||
|
<td class="Name">...</td>
|
||||||
|
<td class="Asset">...</td>
|
||||||
|
<td class="Type">...</td>
|
||||||
|
<td class="User">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "SolutionTable",
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset {
|
||||||
|
width: 12.7%;
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type {
|
||||||
|
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>
|
||||||
@ -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">
|
<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" />
|
<mxGeometry y="480" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="<div class="clearfix"><div class="clearfix"> <label style="padding-right: 0px;" class="control-label">RAM</label> </div></div>" 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="<div class="clearfix"><div class="clearfix"> <label style="padding-right: 0rem;" class="control-label">RAM</label> </div></div>" 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" />
|
<mxGeometry y="510" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="<div class="clearfix"><label style="padding-right: 0px;" class="control-label">storageConfiguration</label> </div>" 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="<div class="clearfix"><label style="padding-right: 0rem;" class="control-label">storageConfiguration</label> </div>" 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" />
|
<mxGeometry y="540" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</mxCell>
|
||||||
<mxCell id="WukdXvazNq34soQIU5Al-5" value="<div class="clearfix"><label style="padding-right: 0px;" class="control-label">miscellaneous</label></div>" 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="<div class="clearfix"><label style="padding-right: 0rem;" class="control-label">miscellaneous</label></div>" 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" />
|
<mxGeometry y="570" width="140" height="30" as="geometry" />
|
||||||
</mxCell>
|
</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">
|
<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">
|
||||||
|
|||||||
@ -83,14 +83,16 @@ export default {
|
|||||||
.actionbar {
|
.actionbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: sticky;
|
||||||
|
top: 5rem;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
border-radius: 10px;
|
border-radius: 0.625rem;
|
||||||
padding: 30px 10px;
|
padding: 1.875rem 0.625rem;
|
||||||
gap: 20px;
|
gap: 1.25rem;
|
||||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,8 +103,8 @@ export default {
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 20px 0;
|
padding: 1.25rem 0;
|
||||||
gap: 20px;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -111,8 +113,8 @@ export default {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
height: 30px;
|
height: 1.875rem;
|
||||||
border-radius: 10px;
|
border-radius: 0.625rem;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
@ -127,13 +129,13 @@ export default {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 30px;
|
width: 1.875rem;
|
||||||
height: 30px;
|
height: 1.875rem;
|
||||||
}
|
}
|
||||||
#indicator-icon {
|
#indicator-icon {
|
||||||
width: 30px;
|
width: 1.875rem;
|
||||||
height: 30px;
|
height: 1.875rem;
|
||||||
border-radius: 5px;
|
border-radius: 0.3125rem;
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
}
|
}
|
||||||
@ -142,24 +144,24 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon > img {
|
.icon > img {
|
||||||
width: 14px;
|
width: 0.875rem;
|
||||||
height: 14px;
|
height: 0.875rem;
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#indicator-icon > img {
|
#indicator-icon > img {
|
||||||
height: 20px;
|
height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 0.7px;
|
letter-spacing: 5%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font: 400 14px/20px Overpass, sans-serif;
|
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,61 +1,64 @@
|
|||||||
<template>
|
<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 class="toggle">
|
||||||
<div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
|
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
||||||
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
|
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||||
<img :style="[darkMode ? darkStylesImg : lightStylesImg ]"
|
@click="toggleSidebar">
|
||||||
loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="menus">
|
<div class="menus">
|
||||||
<nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
|
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
|
||||||
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
|
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||||
|
id="home-button">
|
||||||
<div class="icon" id="home-icon">
|
<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" />
|
src="../icons/navbar-icons/Home-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
|
||||||
</button>
|
</router-link>
|
||||||
</nav>
|
</nav>
|
||||||
<nav id="site-menu">
|
<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">
|
<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" />
|
src="../icons/navbar-icons/Checklists-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
|
||||||
</button>
|
</router-link>
|
||||||
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
|
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
|
||||||
<div class="icon" id="assets-icon">
|
<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" />
|
src="../icons/navbar-icons/Assets-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
|
||||||
</button>
|
</router-link>
|
||||||
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
|
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
||||||
<div class="icon" id="solutions-icon">
|
<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" />
|
src="../icons/navbar-icons/Solutions-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
||||||
</button>
|
</router-link>
|
||||||
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
|
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||||
<div class="icon" id="accounting-icon">
|
<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" />
|
src="../icons/navbar-icons/Accounting-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
|
||||||
</button>
|
</router-link>
|
||||||
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
|
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||||
|
id="clients-button">
|
||||||
<div class="icon" id="clients-icon">
|
<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" />
|
src="../icons/navbar-icons/Clients-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
|
||||||
</button>
|
</router-link>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
@ -64,25 +67,12 @@
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Navigationbar",
|
name: "Navigationbar",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
darkMode: false,
|
darkMode: true,
|
||||||
isExpanded: true,
|
isExpanded: true,
|
||||||
darkStylesImg: {
|
|
||||||
filter: 'invert(100%)',
|
|
||||||
},
|
|
||||||
lightStylesImg: {
|
|
||||||
filter: 'none',
|
|
||||||
},
|
|
||||||
darkStylesLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
lightStylesLabel: {
|
|
||||||
color: '#000',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -102,55 +92,48 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
transition: 0.2s ease-out;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: calc(2.5rem + 2.5rem);
|
position: sticky;
|
||||||
overflow: hidden;
|
top: 5rem;
|
||||||
|
width: 3.125rem;
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside.is-expanded {
|
aside.is-expanded {
|
||||||
width: 238px;
|
width: 12.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-expanded .label {
|
.is-expanded .label {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: 0.3s ease-out;
|
transition: 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-not-expanded .darkStylesIcon {
|
.is-not-expanded #indicator-icon {
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-not-expanded .lightStylesIcon {
|
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar-dark {
|
.navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: fit-content;
|
||||||
|
border-radius: 0.625rem;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: fit-content;
|
gap: 0.625rem;
|
||||||
border-radius: 10px;
|
padding: 0.9375rem;
|
||||||
gap: 10px;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
||||||
background-color: #2c2c2c;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-light {
|
.navbar-darkmode {
|
||||||
display: flex;
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
flex-direction: column;
|
background-color: #2C2C2C;
|
||||||
justify-content: center;
|
}
|
||||||
height: fit-content;
|
|
||||||
border-radius: 10px;
|
.navbar-lightmode {
|
||||||
gap: 10px;
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
padding: 15px;
|
|
||||||
margin: 0;
|
|
||||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,142 +141,127 @@ aside.is-expanded {
|
|||||||
.toggle {
|
.toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
height: 2.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.menus {
|
.menus {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: 0.2s ease-out;
|
|
||||||
justify-content: flex;
|
justify-content: flex;
|
||||||
padding: 20px 0;
|
padding: 1.25rem 0;
|
||||||
gap: 30px;
|
gap: 1.875rem;
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 0.8rem;
|
padding: 0.9375rem 0;
|
||||||
padding-bottom: 0.8rem;
|
gap: 1.875rem;
|
||||||
gap: 30px;
|
width: 92%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.menu-darkmode {
|
||||||
|
border-bottom: 0.0625rem solid #8E8E8E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-lightmode {
|
||||||
|
border-bottom: 0.0625rem solid #BABABA;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
button,
|
||||||
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
align-self: stretch;
|
||||||
|
height: 2.1875rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-self: stretch;
|
gap: 0.3125rem;
|
||||||
height: 35px;
|
|
||||||
border-radius: 5px;
|
|
||||||
gap: 5px;
|
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #2c2c2c;
|
transition: 0.5s ease-in-out;
|
||||||
transition-duration: 0.5s;
|
text-decoration: none;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-menu {
|
.button-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2C2C2C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-menu {
|
.button-lightmode {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-menu:hover {
|
.button-darkmode:hover,
|
||||||
|
.indicator-darkmode:hover,
|
||||||
|
.back-darkmode:hover {
|
||||||
background-color: #444444;
|
background-color: #444444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-menu:hover {
|
.button-lightmode:hover,
|
||||||
|
.indicator-lightmode:hover,
|
||||||
|
.back-lightmode:hover {
|
||||||
background-color: #ACACAC;
|
background-color: #ACACAC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
width: 2.1875rem;
|
||||||
|
height: 2.1875rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 35px;
|
transition: 0.2s ease-in-out;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#back-icon,
|
||||||
#indicator-icon {
|
#indicator-icon {
|
||||||
width: 40px;
|
width: 2.5rem;
|
||||||
height: 40px;
|
height: 2.5rem;
|
||||||
border-radius: 5px;
|
border-radius: 0.3125rem;
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
transition: transform 0.3s;
|
transition: 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lightStylesIcon:hover {
|
|
||||||
background-color: #ACACAC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.darkStylesIcon:hover {
|
img {
|
||||||
background-color: #444444;
|
width: 1.25rem;
|
||||||
}
|
height: 1.25rem;
|
||||||
|
|
||||||
.icon>img,
|
|
||||||
.lightStylesIcon>img,
|
|
||||||
.darkStylesIcon>img {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 0.2s ease-out;
|
transition: 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-home-menu {
|
.img-darkmode {
|
||||||
border-bottom: 1px solid #8e8e8e;
|
filter: invert(100%);
|
||||||
}
|
|
||||||
|
|
||||||
.light-home-menu {
|
|
||||||
border-bottom: 1px solid #BABABA;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
letter-spacing: 0.7px;
|
letter-spacing: 5%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
font: 600 14px/20px Overpass, sans-serif;
|
font: 600 0.875rem/1.25rem Overpass, sans-serif;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s ease-out;
|
transition: opacity 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000000;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -30,43 +30,48 @@ export default {
|
|||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4.375rem;
|
||||||
|
align-self: stretch;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: stretch;
|
padding: 0.625rem 1.25rem;
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
height: 60px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-logo {
|
#header-logo {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
width: 80px;
|
width: 5rem;
|
||||||
height: 40px;
|
height: 2.5rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
align-items: flex-end;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
flex-direction: row;
|
||||||
padding: 0 30px;
|
align-items: flex-end;
|
||||||
|
gap: 0.625rem;
|
||||||
|
padding: 0 0.625rem;
|
||||||
}
|
}
|
||||||
.username {
|
.username {
|
||||||
color: #fff;
|
|
||||||
text-align: right;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: auto 0;
|
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 {
|
.picture {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,14 +2,7 @@
|
|||||||
<PageHeader />
|
<PageHeader />
|
||||||
<main>
|
<main>
|
||||||
<Navigationbar />
|
<Navigationbar />
|
||||||
<section id="content">
|
<slot />
|
||||||
<section id="content-header">
|
|
||||||
<pre id="page-name">Pagename</pre>
|
|
||||||
</section>
|
|
||||||
<section id="content-body">
|
|
||||||
<!--<slot />-->
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
<Actionbar />
|
<Actionbar />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
@ -33,70 +26,21 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: flex-start;
|
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 10px;
|
padding: 0.625rem;
|
||||||
padding: 10px 25px 10px 10px;
|
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>
|
</style>
|
||||||
40
layouts/empty.vue
Normal file
40
layouts/empty.vue
Normal file
@ -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>
|
||||||
94
pages/assets.vue
Normal file
94
pages/assets.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="content-header">
|
||||||
|
<h1 id="page-name">Assets</h1>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<ClientSearch />
|
||||||
|
<AssetTable />
|
||||||
|
<AssetTableNoClient />
|
||||||
|
<Asset />
|
||||||
|
<HardwareSpecifications />
|
||||||
|
<SoftwareSpecifications />
|
||||||
|
<NetworkSpecifications />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
|
import AssetTable from "../components/server/AssetTable.vue";
|
||||||
|
import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
|
||||||
|
import Asset from "../components/server/Asset.vue";
|
||||||
|
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
|
||||||
|
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
|
||||||
|
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AssetPage",
|
||||||
|
components: {
|
||||||
|
ClientSearch,
|
||||||
|
AssetTable,
|
||||||
|
AssetTableNoClient,
|
||||||
|
Asset,
|
||||||
|
HardwareSpecifications,
|
||||||
|
SoftwareSpecifications,
|
||||||
|
NetworkSpecifications,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</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;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
gap: 1.25rem;
|
||||||
|
margin-bottom: 0.625rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
pages/clients.vue
Normal file
85
pages/clients.vue
Normal file
@ -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>
|
||||||
81
pages/home.vue
Normal file
81
pages/home.vue
Normal file
@ -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>
|
||||||
@ -1,23 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<NuxtLayout>
|
<section id="content">
|
||||||
<NuxtPage />
|
<div id="content-header">
|
||||||
</NuxtLayout>
|
<h1 id="page-name">Pagename</h1>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<section id="stuff"></section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
<script setup>
|
||||||
head: {
|
definePageMeta({
|
||||||
title: 'tueit App',
|
layout: 'default'
|
||||||
},
|
})
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<script>
|
||||||
html, template, body {
|
export default {
|
||||||
height: 100%;
|
name: "Testpage",
|
||||||
width: 100%;
|
components: {
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</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>
|
</style>
|
||||||
@ -1,5 +1,80 @@
|
|||||||
<template>
|
<template>
|
||||||
<NuxtLayout>
|
<section id="content">
|
||||||
<NuxtPage />
|
<div id="content-header">
|
||||||
</NuxtLayout>
|
<pre id="page-name"> </pre>
|
||||||
</template>
|
</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>
|
||||||
79
pages/solutions.vue
Normal file
79
pages/solutions.vue
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="content-header">
|
||||||
|
<h1 id="page-name">Solutions</h1>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<ClientSearch />
|
||||||
|
<SolutionTable />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
|
import SolutionTable from "../components/server/SolutionTable.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AssetPage",
|
||||||
|
components: {
|
||||||
|
ClientSearch,
|
||||||
|
SolutionTable,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</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;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
gap: 1.25rem;
|
||||||
|
margin-bottom: 0.625rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
public/icons/Lock-Icon.svg
Normal file
3
public/icons/Lock-Icon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 374 B |
4
public/icons/Mail-Icon.svg
Normal file
4
public/icons/Mail-Icon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 375 B |
|
Before Width: | Height: | Size: 362 B After Width: | Height: | Size: 362 B |
|
Before Width: | Height: | Size: 471 B After Width: | Height: | Size: 471 B |
34
routerFrontend/index.js
Normal file
34
routerFrontend/index.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
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';
|
||||||
|
import SolutionPage from '../pages/solutions.vue';
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: LoginPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
component: HomePage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/assets',
|
||||||
|
component: AssetPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/solutions',
|
||||||
|
component: SolutionPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/clients',
|
||||||
|
component: ClientsPage
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
Reference in New Issue
Block a user