Compare commits
5 Commits
otherSolut
...
accounting
| Author | SHA1 | Date | |
|---|---|---|---|
| af1db8afba | |||
| f6dbf3332c | |||
| 5ac0cc84d1 | |||
| 3fd31bcc43 | |||
| 8a4ced29ac |
@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<section class="client-search">
|
||||
<div class="label">Client</div>
|
||||
<pre class="data">...</pre>
|
||||
<section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
|
||||
<pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ClientSearch",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -20,11 +24,18 @@ export default {
|
||||
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;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 2.5625em;
|
||||
height: 1.875em;
|
||||
@ -34,38 +45,34 @@ export default {
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
/* flex: 0;
|
||||
height: 1.875em; */
|
||||
/* min-width: 1.875em;
|
||||
width: fit-content;
|
||||
overflow: hidden; */
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
/* gap: 0.625em;
|
||||
flex: 0; */
|
||||
}
|
||||
.pre-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #FFFFFF;
|
||||
.pre-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<section class="dashboard">
|
||||
<h2 class="heading">My tasks</h2>
|
||||
<section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">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">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
|
||||
value="My Maintenance Visits">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
|
||||
value="My Production Orders">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
|
||||
value="My Issue Slips">
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -16,7 +19,11 @@
|
||||
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -25,54 +32,71 @@ export default {
|
||||
|
||||
|
||||
<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>
|
||||
.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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.heading {
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/2rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.heading-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.heading-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/2rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
color: #fff;
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
color: #000;
|
||||
background-color: #E4E4E4;
|
||||
}</style>
|
||||
@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<form class="login-form">
|
||||
<form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
|
||||
<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>
|
||||
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">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">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||
</span>
|
||||
<div class="label">Username:</div>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||
</label>
|
||||
<div class="input-field">
|
||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||
<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">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||
</span>
|
||||
<div class="label">Password:</div>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||
</label>
|
||||
<div class="input-field">
|
||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||
<input type="text" id="password-input" placeholder="*******">
|
||||
<input type="button" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="button" id="login-button" value="Login">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -40,7 +40,12 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "LoginForm",
|
||||
name: "LoginForm",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -48,166 +53,209 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.form-darkmode {
|
||||
border: 0.0625rem solid #000;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.form-lightmode {
|
||||
border: 0.0625rem solid #8e8e8e;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.title-icon > img {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title-icon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
white-space: nowrap;
|
||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-icon>img {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
letter-spacing: 5%;
|
||||
white-space: nowrap;
|
||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.pre-darkmode,
|
||||
.title-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: fit-content;
|
||||
height: 1.875rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.pre-lightmode,
|
||||
.title-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
.login-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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 {
|
||||
color: #fff;
|
||||
letter-spacing: 2%;
|
||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: fit-content;
|
||||
height: 1.875rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
|
||||
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>
|
||||
.icon>img {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-darkmode>img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.icon-lightmode>img {
|
||||
filter: invert(0%);
|
||||
}
|
||||
|
||||
#username-icon>img {
|
||||
width: auto;
|
||||
height: 0.9375rem;
|
||||
}
|
||||
|
||||
#password-icon>img {
|
||||
width: 0.9375rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
letter-spacing: 2%;
|
||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
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;
|
||||
letter-spacing: 5%;
|
||||
white-space: nowrap;
|
||||
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 13.75rem;
|
||||
height: 4.375rem;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
align-self: center;
|
||||
border: none;
|
||||
color: #000;
|
||||
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
||||
letter-spacing: 2%;
|
||||
white-space: nowrap;
|
||||
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="quick-access">
|
||||
<h2 class="heading">Quick Access</h2>
|
||||
<section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['heading', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Quick Access</h2>
|
||||
<div class="shortcuts">
|
||||
<input type="button" id="pins" value="Pins">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" 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">
|
||||
@ -16,7 +16,11 @@
|
||||
|
||||
export default {
|
||||
name: "QuickAccess",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -25,60 +29,80 @@ export default {
|
||||
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/2rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/2rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
color: #fff;
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
color: #000;
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
|
||||
input#pins {
|
||||
border: 0.0625rem dashed #454545;
|
||||
color: #8e8e8e;
|
||||
font: 400 0.875rem/2rem Overpass, sans-serif;
|
||||
background-color: #34343400;
|
||||
}
|
||||
</style>
|
||||
226
components/server/Accounting.vue
Normal file
226
components/server/Accounting.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<section :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Action</th>
|
||||
<th :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">Date</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier request</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier offer</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client offer</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client order</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier order</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress bill</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
|
||||
<td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress bill</td>
|
||||
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Accounting",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.accounting-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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label#accounting {
|
||||
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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.first-tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.first-tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.final-tr-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.final-tr-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
tr#row-2 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.Action {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.Action-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Action-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Date {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.Date-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Date-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Comments {
|
||||
width: 40%;
|
||||
}
|
||||
</style>
|
||||
@ -1,48 +1,48 @@
|
||||
<template>
|
||||
<section class="information">
|
||||
<h2 class="asset-name">Asset name</h2>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">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>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="location">
|
||||
<pre class="label">Location:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="type">
|
||||
<pre class="label">Type:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-field" id="remote-location">
|
||||
<pre class="label">Remote location:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rectangle-container">
|
||||
<div class="rectangle"></div>
|
||||
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></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>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 class="area-title">Notes:</h3>
|
||||
<pre class="data" id="notes">...</pre>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,7 +56,11 @@
|
||||
|
||||
export default {
|
||||
name: "Asset",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -74,20 +78,34 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -108,11 +126,18 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -120,12 +145,20 @@ export default {
|
||||
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-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data#notes,
|
||||
.data#description {
|
||||
align-self: stretch;
|
||||
@ -163,11 +196,17 @@ export default {
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
.id-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -196,9 +235,16 @@ export default {
|
||||
.rectangle {
|
||||
width: 6.25em;
|
||||
height: 6.25em;
|
||||
background: #212121;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.rectangle-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.rectangle-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Last viewed:</div>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">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 :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
|
||||
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">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 :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
|
||||
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -26,7 +26,11 @@
|
||||
|
||||
export default {
|
||||
name: "AssetTable",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -46,9 +50,16 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -63,12 +74,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -76,48 +99,92 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.Client {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Client-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Client-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 12.7%;
|
||||
}
|
||||
|
||||
.Type-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.State {
|
||||
width: 12.7%;
|
||||
}
|
||||
|
||||
.State-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.State-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Assets:</div>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">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 :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
|
||||
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">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 :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
|
||||
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -24,7 +24,11 @@
|
||||
|
||||
export default {
|
||||
name: "AssetTableNoClient",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -44,9 +48,17 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -61,12 +73,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -74,11 +98,20 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
@ -86,19 +119,40 @@ th {
|
||||
|
||||
.Name {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.Type-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.State {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.State-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.State-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 10%;
|
||||
}
|
||||
@ -112,6 +166,13 @@ th {
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<section class="hardware-information">
|
||||
<div class="label" id="hardware">Hardware specifications:</div>
|
||||
<section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" 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>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="CPU">
|
||||
<pre class="label">CPU:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="RAM">
|
||||
<pre class="label">RAM:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="storage-configuration">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="miscellaneous">
|
||||
<h3 class="area-title">Miscellaneous:</h3>
|
||||
<pre class="data" id="miscellaneous">...</pre>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,7 +46,11 @@
|
||||
|
||||
export default {
|
||||
name: "HardwareSpecifications",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -64,9 +68,17 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -79,11 +91,20 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.div-darkmode,
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.div-lightmode,
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label#hardware {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
@ -96,12 +117,20 @@ export default {
|
||||
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-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data#miscellaneous,
|
||||
.data#storage-configuration {
|
||||
align-self: stretch;
|
||||
@ -139,7 +168,6 @@ export default {
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
213
components/server/Issue.vue
Normal file
213
components/server/Issue.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
|
||||
<div class="issue-data">
|
||||
<div class="type">
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="state-amount">
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="amount">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issue-data">
|
||||
<div class="additional">
|
||||
<div class="properties">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Issue",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.issue-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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 {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.issue-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.type,
|
||||
.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: 100%;
|
||||
padding: 0rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.state-amount {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 1.875rem 0 0;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.data#properties {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.properties {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
213
components/server/IssueSlip.vue
Normal file
213
components/server/IssueSlip.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">ID issue slips</h2>
|
||||
<div class="issueSlip-data">
|
||||
<div class="client">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="ticketNo-user">
|
||||
<div class="data-field" id="ticketNo">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issueSlip-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueSlip",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.issueSlip-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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 {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.issueSlip-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.client,
|
||||
.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: 100%;
|
||||
padding: 0rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.ticketNo-user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 1.875rem 0 0;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.data#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
190
components/server/IssueSlipTable.vue
Normal file
190
components/server/IssueSlipTable.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
|
||||
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
|
||||
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
|
||||
<td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueSlipTable",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.Client {
|
||||
width: 31.6%;
|
||||
}
|
||||
|
||||
.Client-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Client-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.ID {
|
||||
width: 31.6%;
|
||||
}
|
||||
|
||||
.ID-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.ID-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.TicketNo {
|
||||
width: 15.8%;
|
||||
}
|
||||
|
||||
.TicketNo-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.TicketNo-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.CreationDate {
|
||||
width: 15.8%;
|
||||
}
|
||||
|
||||
.CreationDate-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.CreationDate-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
175
components/server/IssueSlipTableNoClient.vue
Normal file
175
components/server/IssueSlipTableNoClient.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
|
||||
<th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th>
|
||||
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
|
||||
<td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td>
|
||||
<td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueSlipTableNoClient",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.ID {
|
||||
width: 47.5%;
|
||||
}
|
||||
|
||||
.ID-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.ID-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.TicketNo {
|
||||
width: 23.75%;
|
||||
}
|
||||
|
||||
.TicketNo-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.TicketNo-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.CreationDate {
|
||||
width: 23.75%;
|
||||
}
|
||||
|
||||
.CreationDate-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.CreationDate-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
175
components/server/IssueTable.vue
Normal file
175
components/server/IssueTable.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
|
||||
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
|
||||
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
|
||||
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
|
||||
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueTable",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.Name {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Type-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.State {
|
||||
width: 22.2%;
|
||||
}
|
||||
|
||||
.State-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.State-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Amount {
|
||||
width: 11.1%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
217
components/server/IssueVariant.vue
Normal file
217
components/server/IssueVariant.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
|
||||
<div class="issue-variant-data">
|
||||
<div class="variantOf">
|
||||
<div class="data-field" id="variantOf">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="state-amount-price">
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="amount">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="price">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Price:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issue-variant-data">
|
||||
<div class="additional">
|
||||
<div class="properties">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueVariant",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.issue-variant-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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 {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.issue-variant-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.variantOf,
|
||||
.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: 100%;
|
||||
padding: 0rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.state-amount-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
padding: 0 1.875rem 0 0;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.data#properties {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.properties {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
190
components/server/IssueVariants.vue
Normal file
190
components/server/IssueVariants.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
|
||||
<table class="data-table" id="issue-variants-table">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th>
|
||||
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
|
||||
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
|
||||
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td>
|
||||
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
|
||||
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "IssueVariants",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.Properties {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.Properties-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Properties-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.State {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.State-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.State-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Amount {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.Amount-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Amount-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Price {
|
||||
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;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<section class="network-information">
|
||||
<div class="label" id="network">Network specifications:</div>
|
||||
<section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" 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>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="MAC">
|
||||
<pre class="label">MAC:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="IPv6-subnetmask">
|
||||
<div class="data-field" id="IPv6">
|
||||
<pre class="label">IPv6:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="subnetmask">
|
||||
<pre class="label">Subnetmask:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,7 +32,11 @@
|
||||
|
||||
export default {
|
||||
name: "NetworkSpecifications",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -50,9 +54,16 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -65,11 +76,18 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label#network {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
@ -82,12 +100,20 @@ export default {
|
||||
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-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.asset-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
187
components/server/OrderingInformation.vue
Normal file
187
components/server/OrderingInformation.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<section :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">Article</th>
|
||||
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
|
||||
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">Price</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">...</td>
|
||||
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "OrderingInformation",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.ordering-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);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label#ordering {
|
||||
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;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.Article {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.Article-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Article-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Amount {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.Amount-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Amount-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Price {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.Price-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Price-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Comments {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<section class="software-information">
|
||||
<div class="label" id="software">Software specifications:
|
||||
<section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" 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 :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
|
||||
<th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
|
||||
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="Software">...</td>
|
||||
<td class="Version">...</td>
|
||||
<td class="License">...</td>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
|
||||
<td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">...</td>
|
||||
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -25,7 +25,11 @@
|
||||
|
||||
export default {
|
||||
name: "SoftwareSpecifications",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -43,16 +47,29 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label#software {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
@ -82,12 +99,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -95,11 +124,20 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
@ -107,14 +145,28 @@ th {
|
||||
|
||||
.Software {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.Software-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Software-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Version {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.Version-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Version-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.License {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<section class="information">
|
||||
<h2 class="solution-name">Solution name</h2>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
|
||||
<div class="solution-data">
|
||||
<div class="client-asset">
|
||||
<div class="data-field" id="client">
|
||||
<pre class="label">Client:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="asset">
|
||||
<pre class="label">Asset:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="data-field" id="user">
|
||||
<pre class="label">User:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="type-state">
|
||||
<div class="data-field" id="type">
|
||||
<pre class="label">Type:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="state">
|
||||
<pre class="label">State:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,16 +32,16 @@
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 class="area-title">Description of the problem/intended use:</h3>
|
||||
<pre class="data" id="description">...</pre>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 class="area-title">Notes:</h3>
|
||||
<pre class="data" id="notes">...</pre>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,7 +54,11 @@
|
||||
|
||||
export default {
|
||||
name: "Solution",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -72,20 +76,35 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.solution-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;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -106,11 +125,18 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -118,12 +144,20 @@ export default {
|
||||
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-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.solution-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -156,11 +190,18 @@ export default {
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.type-state {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Checklist:</div>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="solution-checkklist">
|
||||
<tr class="table-row" id="table-head">
|
||||
<th class="Step">Step</th>
|
||||
<th class="Asset">Asset</th>
|
||||
<th class="Task">Task</th>
|
||||
<th class="Comments">Comments</th>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
|
||||
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
|
||||
<th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="Step">...</td>
|
||||
<td class="Asset">...</td>
|
||||
<td class="Task">...</td>
|
||||
<td class="Comments">...</td>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
|
||||
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
|
||||
<td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -24,7 +24,12 @@
|
||||
|
||||
export default {
|
||||
name: "SolutionChecklist",
|
||||
|
||||
name: "AssetTable",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -44,9 +49,16 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -61,12 +73,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -74,7 +98,6 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
@ -83,22 +106,52 @@ th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.Step {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.Step-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Step-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.Asset-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Task {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.Task-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Task-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Comments {
|
||||
width: 35%;
|
||||
}
|
||||
@ -112,6 +165,13 @@ th {
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Last viewed:</div>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">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 :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
|
||||
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">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 :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
|
||||
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -26,7 +26,11 @@
|
||||
|
||||
export default {
|
||||
name: "SolutionTable",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -46,9 +50,16 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -63,12 +74,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -76,35 +99,72 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.Client {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Client-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Client-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 12.7%;
|
||||
}
|
||||
|
||||
.Asset-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 12.7%;
|
||||
}
|
||||
|
||||
.Type-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 8%;
|
||||
}
|
||||
@ -118,6 +178,13 @@ th {
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div class="label">Solutions:</div>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
|
||||
<table class="data-table" id="solution-table">
|
||||
<tr class="table-row" id="table-head">
|
||||
<th class="Name">Name</th>
|
||||
<th class="Asset">Asset</th>
|
||||
<th class="Type">Type</th>
|
||||
<th class="User">User</th>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
|
||||
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
|
||||
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
|
||||
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="Name">...</td>
|
||||
<td class="Asset">...</td>
|
||||
<td class="Type">...</td>
|
||||
<td class="User">...</td>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
|
||||
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
|
||||
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
|
||||
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -24,7 +24,11 @@
|
||||
|
||||
export default {
|
||||
name: "SolutionTableNoClient",
|
||||
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -44,9 +48,16 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -61,12 +72,24 @@ export default {
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
@ -74,7 +97,6 @@ td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
@ -83,21 +105,52 @@ th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Name-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
.Asset-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Type {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
.Type-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Type-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.User {
|
||||
width: 10%;
|
||||
}
|
||||
@ -111,6 +164,13 @@ th {
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
||||
</router-link>
|
||||
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||
<div class="icon" id="accounting-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/navbar-icons/Accounting-Icon.svg" />
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<header>
|
||||
<img id="header-logo"
|
||||
loading="lazy" src="../tüit-logo.svg.png" />
|
||||
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
||||
<img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
|
||||
<div class="profile">
|
||||
<div class="username">username</div>
|
||||
<div class="picture">
|
||||
<img id="picture"
|
||||
loading="lazy" src="" />
|
||||
<div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
|
||||
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
||||
<img id="picture" loading="lazy" src="" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -17,62 +15,90 @@
|
||||
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
align-self: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
align-self: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header-darkmode {
|
||||
background-color: #212121;
|
||||
border-bottom: 0.125em solid #000;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 0.625rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
.username {
|
||||
align-self: center;
|
||||
margin: auto 0;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
font: 200 0.875rem Overpass, sans-serif;
|
||||
letter-spacing: 5%;
|
||||
}
|
||||
.picture {
|
||||
display: flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.header-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
border-bottom: 0.125em solid #8e8e8e61;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 0.625rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
align-self: center;
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
font: 200 0.875rem Overpass, sans-serif;
|
||||
letter-spacing: 5%;
|
||||
}
|
||||
|
||||
.username-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.username-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.picture {
|
||||
display: flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.picture-darkmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.picture-lightmode {
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<PageHeader />
|
||||
<main>
|
||||
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
||||
<Navigationbar />
|
||||
<slot />
|
||||
<Actionbar />
|
||||
@ -14,12 +14,17 @@ import Navigationbar from "./Navigationbar.vue";
|
||||
import Actionbar from "./Actionbar.vue";
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
components: {
|
||||
PageHeader,
|
||||
Navigationbar,
|
||||
Actionbar,
|
||||
}
|
||||
name: "Page",
|
||||
components: {
|
||||
PageHeader,
|
||||
Navigationbar,
|
||||
Actionbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -27,20 +32,27 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.main-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
</style>
|
||||
@ -1,40 +1,52 @@
|
||||
<template>
|
||||
<PageHeader />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<PageHeader />
|
||||
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
||||
<slot />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import PageHeader from "../layouts/PageHeader.vue";
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
components: {
|
||||
PageHeader,
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
import PageHeader from "../layouts/PageHeader.vue";
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
components: {
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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>
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.625rem;
|
||||
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.main-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
</style>
|
||||
148
pages/assets.vue
148
pages/assets.vue
@ -1,25 +1,25 @@
|
||||
<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>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" 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'
|
||||
})
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -31,64 +31,76 @@ import HardwareSpecifications from "../components/server/HardwareSpecifications.
|
||||
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,
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "AssetPage",
|
||||
components: {
|
||||
ClientSearch,
|
||||
AssetTable,
|
||||
AssetTableNoClient,
|
||||
Asset,
|
||||
HardwareSpecifications,
|
||||
SoftwareSpecifications,
|
||||
NetworkSpecifications,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
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-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
#page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,85 +1,95 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 id="page-name">Clients</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<Client />
|
||||
<ClientQuickAccess />
|
||||
</div>
|
||||
</section>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<Client />
|
||||
<ClientQuickAccess />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
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";
|
||||
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,
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "ClientsPage",
|
||||
components: {
|
||||
ClientTable,
|
||||
Client,
|
||||
ClientQuickAccess,
|
||||
ClientEmployees,
|
||||
ClientEmployee,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
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-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
|
||||
#page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
116
pages/home.vue
116
pages/home.vue
@ -2,7 +2,7 @@
|
||||
<Navigationbar />
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<pre id="page-name">Home</pre>
|
||||
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<Dashboard />
|
||||
@ -13,69 +13,79 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
})
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Navigationbar from "../layouts/Navigationbar.vue";
|
||||
import Dashboard from "../components/Dashboard.vue";
|
||||
import QuickAccess from "../components/QuickAccess.vue";
|
||||
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,
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {
|
||||
Navigationbar,
|
||||
Dashboard,
|
||||
QuickAccess,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
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-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
|
||||
#page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
147
pages/index.vue
147
pages/index.vue
@ -1,83 +1,102 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 id="page-name">Pagename</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<section id="stuff"></section>
|
||||
</div>
|
||||
</section>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Testpage",
|
||||
components: {
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "Testpage",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
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-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
#page-name {
|
||||
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);
|
||||
border-radius: 0.625em;
|
||||
}
|
||||
|
||||
.stuff-darkmode {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.stuff-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
134
pages/issueSlips.vue
Normal file
134
pages/issueSlips.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/issueSlips" class="button" id="issueSlips-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
|
||||
</router-link>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<IssueSlipTable />
|
||||
<IssueSlipTableNoClient />
|
||||
<IssueSlip />
|
||||
<OrderingInformation />
|
||||
<Accounting />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import ClientSearch from "../components/ClientSearch.vue";
|
||||
import IssueSlipTable from "../components/server/IssueSlipTable.vue";
|
||||
import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue";
|
||||
import IssueSlip from "../components/server/IssueSlip.vue";
|
||||
import OrderingInformation from "../components/server/OrderingInformation.vue";
|
||||
import Accounting from "../components/server/Accounting.vue";
|
||||
|
||||
export default {
|
||||
name: "IssueSlipPage",
|
||||
components: {
|
||||
ClientSearch,
|
||||
IssueSlipTable,
|
||||
IssueSlipTableNoClient,
|
||||
IssueSlip,
|
||||
OrderingInformation,
|
||||
Accounting,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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 {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
#active-page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
128
pages/issues.vue
Normal file
128
pages/issues.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/issueSlips" class="button" id="issueSlips-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
|
||||
</router-link>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<IssueTable />
|
||||
<Issue />
|
||||
<IssueVariants />
|
||||
<IssueVariant />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import IssueTable from "../components/server/IssueTable.vue";
|
||||
import Issue from "../components/server/Issue.vue";
|
||||
import IssueVariants from "../components/server/IssueVariants.vue";
|
||||
import IssueVariant from "../components/server/IssueVariant.vue";
|
||||
|
||||
export default {
|
||||
name: "IssuePage",
|
||||
components: {
|
||||
IssueTable,
|
||||
Issue,
|
||||
IssueVariants,
|
||||
IssueVariant,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</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 {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
#active-page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
103
pages/login.vue
103
pages/login.vue
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<pre id="page-name"> </pre>
|
||||
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<LoginForm />
|
||||
@ -20,10 +20,15 @@ definePageMeta({
|
||||
import LoginForm from "../components/LoginForm.vue";
|
||||
|
||||
export default {
|
||||
name: "LoginPage",
|
||||
components: {
|
||||
LoginForm,
|
||||
}
|
||||
name: "LoginPage",
|
||||
components: {
|
||||
LoginForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -31,50 +36,54 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
gap: 0.625rem;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#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>
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 id="page-name">Solutions</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<SolutionTable />
|
||||
<SolutionTableNoClient />
|
||||
<Solution />
|
||||
<SolutionChecklist />
|
||||
</div>
|
||||
</section>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<SolutionTable />
|
||||
<SolutionTableNoClient />
|
||||
<Solution />
|
||||
<SolutionChecklist />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -27,62 +27,74 @@ import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vu
|
||||
import Solution from "../components/server/Solution.vue";
|
||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||
|
||||
export default {
|
||||
name: "AssetPage",
|
||||
components: {
|
||||
ClientSearch,
|
||||
SolutionTable,
|
||||
SolutionTableNoClient,
|
||||
Solution,
|
||||
SolutionChecklist,
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "AssetPage",
|
||||
components: {
|
||||
ClientSearch,
|
||||
SolutionTable,
|
||||
SolutionTableNoClient,
|
||||
Solution,
|
||||
SolutionChecklist,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
darkMode: true,
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
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 {
|
||||
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-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
#content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
#page-name {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h1-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +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>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 375 B After Width: | Height: | Size: 374 B |
@ -4,12 +4,14 @@ import ClientsPage from '../pages/clients.vue';
|
||||
import LoginPage from '../pages/login.vue';
|
||||
import AssetPage from '../pages/assets.vue';
|
||||
import SolutionPage from '../pages/solutions.vue';
|
||||
import IssueSlipPage from '../pages/issueSlips.vue';
|
||||
import IssuesPages from '../pages/issues.vue';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
path: '/login',
|
||||
component: LoginPage
|
||||
},
|
||||
{
|
||||
@ -24,6 +26,14 @@ const router = createRouter({
|
||||
path: '/solutions',
|
||||
component: SolutionPage
|
||||
},
|
||||
{
|
||||
path: '/issueSlips',
|
||||
component: IssueSlipPage
|
||||
},
|
||||
{
|
||||
path: '/issues',
|
||||
component: IssuesPages
|
||||
},
|
||||
{
|
||||
path: '/clients',
|
||||
component: ClientsPage
|
||||
|
||||
Reference in New Issue
Block a user