Compare commits
12 Commits
otherSolut
...
settingsPa
| Author | SHA1 | Date | |
|---|---|---|---|
| 6a4a799c85 | |||
| 45c651e853 | |||
| de6b7e6eaa | |||
| 90a86fb3af | |||
| 81c3a78611 | |||
| cf4e073164 | |||
| e4d6047e57 | |||
| af1db8afba | |||
| f6dbf3332c | |||
| 5ac0cc84d1 | |||
| 3fd31bcc43 | |||
| 8a4ced29ac |
82
components/AssetSearch.vue
Normal file
82
components/AssetSearch.vue
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Asset:</div>
|
||||||
|
<pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset name</pre>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetSearch",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.asset-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.625em 1.875em;
|
||||||
|
gap: 1.25em;
|
||||||
|
width: 30.125em;
|
||||||
|
height: 3.125em;
|
||||||
|
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: 4.188em;
|
||||||
|
height: 1.875em;
|
||||||
|
font-family: "Overpass";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.875;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="client-search">
|
<section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<div class="label">Client</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "ClientSearch",
|
name: "ClientSearch",
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -20,11 +25,18 @@ export default {
|
|||||||
gap: 1.25em;
|
gap: 1.25em;
|
||||||
width: 30.125em;
|
width: 30.125em;
|
||||||
height: 3.125em;
|
height: 3.125em;
|
||||||
background: #2C2C2C;
|
|
||||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||||
border-radius: 0.625em;
|
border-radius: 0.625em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
|
background-color: #2c2c2c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 2.5625em;
|
width: 2.5625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
@ -34,38 +46,34 @@ export default {
|
|||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
line-height: 1.875;
|
line-height: 1.875;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
/* flex: 0;
|
color: #000;
|
||||||
height: 1.875em; */
|
}
|
||||||
/* min-width: 1.875em;
|
|
||||||
width: fit-content;
|
|
||||||
overflow: hidden; */
|
|
||||||
|
|
||||||
.data {
|
.data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
letter-spacing: 5%;
|
||||||
color: #fff;
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
|
||||||
|
|
||||||
/* gap: 0.625em;
|
.pre-darkmode {
|
||||||
flex: 0; */
|
background-color: #212121;
|
||||||
}
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.input input {
|
.pre-lightmode {
|
||||||
flex: 1;
|
background-color: #EBEBEB;
|
||||||
width: 100%;
|
color: #000;
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,78 +1,99 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="dashboard">
|
<section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="heading">My tasks</h2>
|
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
|
||||||
<div class="shortcuts">
|
<div class="shortcuts">
|
||||||
<input type="button" id="maintenance-visits" value="My Maintenance Visits">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
|
||||||
<input type="button" id="production-orders" value="My Production Orders">
|
value="My Maintenance Visits">
|
||||||
<input type="button" id="solutions" value="My Solutions">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
|
||||||
<input type="button" id="issue-slips" value="My Issue Slips">
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Dashboard",
|
name: "Dashboard",
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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);
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard {
|
.section-darkmode {
|
||||||
display: flex;
|
background-color: #2c2c2c;
|
||||||
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 {
|
.section-lightmode {
|
||||||
color: #fff;
|
background-color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
text-decoration-line: underline;
|
|
||||||
font: 400 1rem/2rem Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcuts {
|
.heading {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: row;
|
text-decoration-line: underline;
|
||||||
justify-content: space-between;
|
font: 400 1rem/2rem Overpass, sans-serif;
|
||||||
align-content: center;
|
}
|
||||||
padding: 0.625rem 2.5rem;
|
|
||||||
gap: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
.heading-darkmode {
|
||||||
display: flex;
|
color: #fff;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
@ -1,213 +1,259 @@
|
|||||||
<template>
|
<template>
|
||||||
<form class="login-form">
|
<form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
|
||||||
<div class="title-field">
|
<div class="title-field">
|
||||||
<span class="title-icon" id="logo-icon">
|
<span class="title-icon" id="logo-icon">
|
||||||
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
||||||
</span>
|
</span>
|
||||||
<pre class="title">Login</pre>
|
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-field">
|
<div class="login-field">
|
||||||
<div class="form-field" id="username-field">
|
<div class="form-field" id="username-field">
|
||||||
<label for="username-input" id="username-label">
|
<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" />
|
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||||
</span>
|
</span>
|
||||||
<div class="label">Username:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||||
</label>
|
</label>
|
||||||
<div class="input-field">
|
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||||
<input type="text" id="username-input" placeholder="user@example.com">
|
<input type="text" id="username-input" placeholder="user@example.com">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-field" id="password-field">
|
<div class="form-field" id="password-field">
|
||||||
<label for="password-input" id="password-label">
|
<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" />
|
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||||
</span>
|
</span>
|
||||||
<div class="label">Password:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||||
</label>
|
</label>
|
||||||
<div class="input-field">
|
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||||
<input type="text" id="password-input" placeholder="*******">
|
<input type="text" id="password-input" placeholder="*******">
|
||||||
<input type="button" id="show-password-toggle" value="Show">
|
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
|
||||||
</div>
|
value="Show">
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "LoginForm",
|
name: "LoginForm",
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 31.25rem;
|
width: 31.25rem;
|
||||||
height: 31.25rem;
|
height: 31.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
padding: 2.5rem 1.875rem;
|
padding: 2.5rem 1.875rem;
|
||||||
gap: 1.875rem;
|
gap: 1.875rem;
|
||||||
border: 0.0625rem solid #000;
|
}
|
||||||
background-color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.form-darkmode {
|
||||||
|
border: 0.0625rem solid #000;
|
||||||
|
background-color: #2c2c2c;
|
||||||
|
}
|
||||||
|
|
||||||
.title-field {
|
.form-lightmode {
|
||||||
display: flex;
|
border: 0.0625rem solid #8e8e8e;
|
||||||
flex-direction: column;
|
background-color: #fff;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-icon {
|
.title-field {
|
||||||
justify-content: center;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
width: 3.125rem;
|
align-items: center;
|
||||||
height: 3.125rem;
|
justify-content: center;
|
||||||
}
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.title-icon > img {
|
.title-icon {
|
||||||
width: 3.125rem;
|
justify-content: center;
|
||||||
height: 3.125rem;
|
align-items: center;
|
||||||
object-fit: contain;
|
width: 3.125rem;
|
||||||
object-position: center;
|
height: 3.125rem;
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.title-icon>img {
|
||||||
margin: 0;
|
width: 3.125rem;
|
||||||
color: #fff;
|
height: 3.125rem;
|
||||||
letter-spacing: 5%;
|
object-fit: contain;
|
||||||
white-space: nowrap;
|
object-position: center;
|
||||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
white-space: nowrap;
|
||||||
|
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.login-field {
|
.pre-darkmode,
|
||||||
display: flex;
|
.title-darkmode {
|
||||||
flex-direction: column;
|
color: #fff;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
padding: 0.625rem 1.25rem;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-field {
|
.pre-lightmode,
|
||||||
display: flex;
|
.title-lightmode {
|
||||||
flex-direction: column;
|
color: #000;
|
||||||
align-items: flex-start;
|
}
|
||||||
justify-content: space-between;
|
|
||||||
width: 25rem;
|
|
||||||
height: 5rem;
|
|
||||||
padding: 0.625rem;
|
|
||||||
gap: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
.login-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
width: fit-content;
|
justify-content: center;
|
||||||
height: 1.875rem;
|
padding: 0.625rem 1.25rem;
|
||||||
gap: 0.625rem;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.form-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
width: 1.875rem;
|
width: 25rem;
|
||||||
height: 1.875rem;
|
height: 5rem;
|
||||||
}
|
padding: 0.625rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
.icon > img {
|
label {
|
||||||
filter: invert(100%);
|
display: flex;
|
||||||
object-fit: contain;
|
flex-direction: row;
|
||||||
object-position: center;
|
align-items: flex-start;
|
||||||
overflow: hidden;
|
width: fit-content;
|
||||||
}
|
height: 1.875rem;
|
||||||
#username-icon > img {
|
gap: 0.625rem;
|
||||||
width: auto;
|
}
|
||||||
height: 0.9375rem;
|
|
||||||
}
|
|
||||||
#password-icon > img {
|
|
||||||
width: 0.9375rem;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.icon {
|
||||||
color: #fff;
|
display: flex;
|
||||||
letter-spacing: 2%;
|
flex-direction: row;
|
||||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
|
width: 1.875rem;
|
||||||
|
height: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.input-field {
|
.icon>img {
|
||||||
display: flex;
|
object-fit: contain;
|
||||||
flex-direction: row;
|
object-position: center;
|
||||||
align-items: center;
|
overflow: hidden;
|
||||||
justify-content: stretch;
|
}
|
||||||
align-self: stretch;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.875rem;
|
|
||||||
border-radius: 0.3125rem;
|
|
||||||
padding: 0.1875rem 0.625rem;
|
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=text] {
|
.icon-darkmode>img {
|
||||||
width: 100%;
|
filter: invert(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 {
|
.icon-lightmode>img {
|
||||||
width: 13.75rem;
|
filter: invert(0%);
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
#username-icon>img {
|
||||||
|
width: auto;
|
||||||
|
height: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
#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>
|
<template>
|
||||||
<section class="quick-access">
|
<section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="heading">Quick Access</h2>
|
<h2 :class="['heading', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Quick Access</h2>
|
||||||
<div class="shortcuts">
|
<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="maintenance-visits" value="My Maintenance Visits">
|
||||||
<input type="button" id="production-orders" value="My Production Orders">
|
<input type="button" id="production-orders" value="My Production Orders">
|
||||||
<input type="button" id="solutions" value="My Solutions">
|
<input type="button" id="solutions" value="My Solutions">
|
||||||
@ -12,73 +12,94 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "QuickAccess",
|
name: "QuickAccess",
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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);
|
||||||
|
}
|
||||||
|
|
||||||
.quick-access {
|
.section-darkmode {
|
||||||
display: flex;
|
background-color: #2c2c2c;
|
||||||
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 {
|
.section-lightmode {
|
||||||
color: #fff;
|
background-color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
text-decoration-line: underline;
|
|
||||||
font: 400 1rem/2rem Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcuts {
|
.heading {
|
||||||
display: flex;
|
color: #fff;
|
||||||
flex-direction: row;
|
letter-spacing: 5%;
|
||||||
justify-content: space-between;
|
text-decoration-line: underline;
|
||||||
align-content: center;
|
font: 400 1rem/2rem Overpass, sans-serif;
|
||||||
padding: 0.625rem 2.5rem;
|
}
|
||||||
gap: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
.h2-darkmode {
|
||||||
display: flex;
|
color: #fff;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
82
components/TemplateSearch.vue
Normal file
82
components/TemplateSearch.vue
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
|
||||||
|
<pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "TemplateSearch",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.template-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.625em 1.875em;
|
||||||
|
gap: 1.25em;
|
||||||
|
width: 30.125em;
|
||||||
|
height: 3.125em;
|
||||||
|
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: 4.188em;
|
||||||
|
height: 1.875em;
|
||||||
|
font-family: "Overpass";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.875;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
260
components/server/Accounting.vue
Normal file
260
components/server/Accounting.vue
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Accounting",
|
||||||
|
};
|
||||||
|
</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>
|
<template>
|
||||||
<section class="information">
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="asset-name">Asset name</h2>
|
<h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Asset name</h2>
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<div class="client-location">
|
<div class="client-location">
|
||||||
<div class="data-field" id="client">
|
<div class="data-field" id="client">
|
||||||
<pre class="label">Client:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="location">
|
<div class="data-field" id="location">
|
||||||
<pre class="label">Location:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="id-type">
|
<div class="id-type">
|
||||||
<div class="data-field" id="id">
|
<div class="data-field" id="id">
|
||||||
<pre class="label">ID:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="type">
|
<div class="data-field" id="type">
|
||||||
<pre class="label">Type:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="remote-location">
|
<div class="data-field" id="remote-location">
|
||||||
<pre class="label">Remote location:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rectangle-container">
|
<div class="rectangle-container">
|
||||||
<div class="rectangle"></div>
|
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<h3 class="area-title">Description:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||||
<pre class="data" id="description">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="notes">
|
<div class="notes">
|
||||||
<h3 class="area-title">Notes:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||||
<pre class="data" id="notes">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -50,18 +50,17 @@
|
|||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Asset",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Asset",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -74,20 +73,34 @@ export default {
|
|||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.asset-name {
|
.asset-name {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||||
sans-serif;
|
sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h2-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.data-field {
|
.data-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -108,11 +121,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.data {
|
.data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -120,12 +140,20 @@ export default {
|
|||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
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#notes,
|
||||||
.data#description {
|
.data#description {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
@ -163,11 +191,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.area-title {
|
.area-title {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h3-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.id-type {
|
.id-type {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -196,9 +231,16 @@ export default {
|
|||||||
.rectangle {
|
.rectangle {
|
||||||
width: 6.25em;
|
width: 6.25em;
|
||||||
height: 6.25em;
|
height: 6.25em;
|
||||||
background: #212121;
|
|
||||||
flex: none;
|
flex: none;
|
||||||
order: 0;
|
order: 0;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rectangle-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
171
components/server/AssetSolutionList.vue
Normal file
171
components/server/AssetSolutionList.vue
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
|
||||||
|
<table class="data-table" id="solution-checkklist">
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
|
<th
|
||||||
|
:class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
|
||||||
|
Solution</th>
|
||||||
|
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
|
||||||
|
</tr>
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td
|
||||||
|
:class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetSolutionList",
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Solution {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Solution-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Solution-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type {
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,37 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<div class="label">Last viewed:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||||
<table class="data-table" id="asset-table">
|
<table class="data-table" id="asset-table">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Client">Client</th>
|
<th
|
||||||
<th class="Name">Name</th>
|
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||||
<th class="Type">Type</th>
|
Client</th>
|
||||||
<th class="State">State</th>
|
<th
|
||||||
<th class="User">User</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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Client">...</td>
|
<td
|
||||||
<td class="Name">...</td>
|
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||||
<td class="Type">...</td>
|
...</td>
|
||||||
<td class="State">...</td>
|
<td
|
||||||
<td class="User">...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "AssetTable",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetTable",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -46,9 +61,16 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
@ -63,12 +85,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -76,48 +110,91 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Client {
|
.Client {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Client-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Client-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Name {
|
.Name {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Type {
|
.Type {
|
||||||
width: 12.7%;
|
width: 12.7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Type-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.State {
|
.State {
|
||||||
width: 12.7%;
|
width: 12.7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.State-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.User {
|
.User {
|
||||||
width: 8%;
|
width: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 6.0625em;
|
width: 6.0625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.875em;
|
line-height: 1.875em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}</style>
|
||||||
@ -1,36 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<div class="label">Assets:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
|
||||||
<table class="data-table" id="asset-table-no-client">
|
<table class="data-table" id="asset-table-no-client">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Name">Name</th>
|
<th
|
||||||
<th class="Type">Type</th>
|
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
<th class="State">State</th>
|
Name</th>
|
||||||
<th class="User">User</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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Name">...</td>
|
<td
|
||||||
<td class="Type">...</td>
|
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
<td class="State">...</td>
|
...</td>
|
||||||
<td class="User">...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "AssetTableNoClient",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetTableNoClient",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.data {
|
.data {
|
||||||
@ -44,9 +54,17 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
@ -61,12 +79,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -74,11 +104,20 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
@ -86,32 +125,60 @@ th {
|
|||||||
|
|
||||||
.Name {
|
.Name {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Type {
|
.Type {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Type-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.State {
|
.State {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.State-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.User {
|
.User {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 6.0625em;
|
width: 6.0625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.875em;
|
line-height: 1.875em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: #FFFFFF;
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,179 +1,219 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="information">
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="client-name">Client name</h2>
|
<h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
|
||||||
<div class="data-field" id="client-id">
|
<div class="data-field" id="client-id">
|
||||||
<pre class="label">ID:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="client-data">
|
<div class="client-data">
|
||||||
<div class="contact">
|
<div class="contact">
|
||||||
<h3 class="area-title">Contact:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
|
||||||
<div class="data-field" id="contact-person">
|
<div class="data-field" id="contact-person">
|
||||||
<pre class="label">Contact person:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="e-mail">
|
<div class="data-field" id="e-mail">
|
||||||
<pre class="label">E-Mail:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="phone">
|
<div class="data-field" id="phone">
|
||||||
<pre class="label">Phone number:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="address">
|
<div class="address">
|
||||||
<h3 class="area-title">Address:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
|
||||||
<div class="street-address">
|
<div class="street-address">
|
||||||
<div class="data-field" id="street-name">
|
<div class="data-field" id="street-name">
|
||||||
<pre class="label">Street:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="street-no">
|
<div class="data-field" id="street-no">
|
||||||
<pre class="label">No.:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="postal-code">
|
<div class="data-field" id="postal-code">
|
||||||
<pre class="label">Postcode:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="city">
|
<div class="data-field" id="city">
|
||||||
<pre class="label">City:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="notes">
|
<div class="notes">
|
||||||
<h3 class="area-title">Notes:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||||
<pre class="data" id="notes">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
export default {
|
name: "Client",
|
||||||
name: "Client",
|
};
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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);
|
||||||
|
}
|
||||||
|
|
||||||
.information {
|
.section-darkmode {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.25rem 1.875rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.client-name {
|
.client-name {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 1.25rem 0;
|
padding: 1.25rem 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;
|
color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
text-decoration-line: underline;
|
|
||||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-field {
|
.h2-lightmode {
|
||||||
display: flex;
|
color: #000;
|
||||||
flex-direction: row;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 1.875rem;
|
|
||||||
gap: 1.25rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
|
||||||
.data-field#client-id {
|
|
||||||
padding: 0.625rem 1.875rem;
|
|
||||||
}
|
|
||||||
.data-field#street-name {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
.data-field#street-no {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field#client-id {
|
||||||
|
padding: 0.625rem 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field#street-name {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field#street-no {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
|
||||||
}
|
.pre-lightmode {
|
||||||
.data {
|
color: #000;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
.data {
|
||||||
padding: 0 0.625rem;
|
display: flex;
|
||||||
border-radius: 0.3125rem;
|
flex-direction: row;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
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;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
.data#notes {
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-data {
|
.data-lightmode {
|
||||||
display: flex;
|
background-color: #EBEBEB;
|
||||||
flex-direction: row;
|
color: #000;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: flex-start;
|
|
||||||
align-self: stretch;
|
|
||||||
padding: 0 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact, .address {
|
.data#notes {
|
||||||
display: flex;
|
align-self: stretch;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: normal;
|
|
||||||
width: 50%;
|
|
||||||
padding: 1.25rem 0.625rem;
|
|
||||||
border-radius: 0.3125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.area-title {
|
.client-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact,
|
||||||
|
.address {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 1.25rem 0.625rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-darkmode {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.street-address {
|
.h3-lightmode {
|
||||||
display: flex;
|
color: #000;
|
||||||
flex-direction: row;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-self: stretch;
|
|
||||||
padding: 0 1.875rem 0 0;
|
|
||||||
gap: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: stretch;
|
|
||||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
.street-address {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 0 1.875rem 0 0;
|
||||||
|
gap: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||||
|
}</style>
|
||||||
@ -1,79 +1,98 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="quick-access">
|
<section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="heading">Quick Access</h2>
|
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
|
||||||
<div class="shortcuts">
|
<div class="shortcuts">
|
||||||
<input type="button" id="maintenance-visits" value="Maintenance Visits">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits" value="Maintenance Visits">
|
||||||
<input type="button" id="production-orders" value="Production Orders">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders" value="Production Orders">
|
||||||
<input type="button" id="issue-slips" value="Assets">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Assets">
|
||||||
<input type="button" id="solutions" value="Solutions">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="Solutions">
|
||||||
<input type="button" id="issue-slips" value="Issue Slips">
|
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Issue Slips">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
export default {
|
name: "Asset",
|
||||||
name: "ClientQuickAccess",
|
};
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.quick-access {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1.875rem 1.875rem 3.125rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
.quick-access {
|
.section-darkmode {
|
||||||
display: flex;
|
background-color: #2c2c2c;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: stretch;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.875rem 1.875rem 3.125rem;
|
|
||||||
gap: 1.25rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
|
||||||
background-color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
.section-lightmode {
|
||||||
color: #fff;
|
background-color: #fff;
|
||||||
letter-spacing: 5%;
|
}
|
||||||
text-decoration-line: underline;
|
|
||||||
font: 400 1rem/2rem Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcuts {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: center;
|
|
||||||
padding: 0.625rem 1.875rem;
|
|
||||||
gap: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 15rem;
|
|
||||||
height: 4rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
padding: 0.9375rem 1.25rem;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 0.875rem/2rem Overpass, sans-serif;
|
|
||||||
background-color: #343434;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
letter-spacing: 5%;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
font: 400 1rem/2rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
.heading-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcuts {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: center;
|
||||||
|
padding: 0.625rem 1.875rem;
|
||||||
|
gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 15rem;
|
||||||
|
height: 4rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
padding: 0.9375rem 1.25rem;
|
||||||
|
border: none;
|
||||||
|
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,90 +1,130 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<table class="data-table" id="client-table">
|
<table class="data-table" id="client-table">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="ID">ID</th>
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
|
||||||
<th class="Name">Name</th>
|
</th>
|
||||||
|
<th
|
||||||
|
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
Name</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="ID">...</td>
|
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||||
<td class="Name">...</td>
|
...</td>
|
||||||
</tr>
|
<td
|
||||||
<tr class="table-row" id="row-2">
|
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
<td class="ID">...</td>
|
...</td>
|
||||||
<td class="Name">...</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
export default {
|
|
||||||
name: "ClientTable",
|
name: "ClientTable",
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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);
|
||||||
|
}
|
||||||
|
|
||||||
.data {
|
.div-darkmode {
|
||||||
display: flex;
|
background-color: #2c2c2c;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: stretch;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.25rem 1.875rem;
|
|
||||||
gap: 1.25rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
|
||||||
background-color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-table {
|
.div-lightmode {
|
||||||
width: 100%;
|
background-color: #fff;
|
||||||
padding: 0 0.625rem;
|
}
|
||||||
table-layout: fixed;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-row {
|
.data-table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
padding: 0 0.625rem;
|
||||||
height: 3.125rem;
|
table-layout: fixed;
|
||||||
padding: 0.625rem;
|
border-collapse: collapse;
|
||||||
gap: 0.625rem;
|
}
|
||||||
border-top: 0.0625rem solid #000000;
|
|
||||||
}
|
|
||||||
#table-head {
|
|
||||||
border-top: none;
|
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
.table-row {
|
||||||
height: 1.875rem;
|
display: flex;
|
||||||
padding: 0;
|
flex-direction: row;
|
||||||
color: #ffffff;
|
align-items: center;
|
||||||
letter-spacing: 5%;
|
height: 3.125rem;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
padding: 0.625rem;
|
||||||
}
|
gap: 0.625rem;
|
||||||
th {
|
}
|
||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
|
||||||
}
|
|
||||||
.ID {
|
|
||||||
width: 40%;
|
|
||||||
border-right: 0.0625rem solid #000000;
|
|
||||||
}
|
|
||||||
.Name {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,39 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="hardware-information">
|
<section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<div class="label" id="hardware">Hardware specifications:</div>
|
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<div class="model-CPU">
|
<div class="model-CPU">
|
||||||
<div class="data-field" id="model">
|
<div class="data-field" id="model">
|
||||||
<pre class="label">Model:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="CPU">
|
<div class="data-field" id="CPU">
|
||||||
<pre class="label">CPU:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="serial-number-RAM">
|
<div class="serial-number-RAM">
|
||||||
<div class="data-field" id="serial-number">
|
<div class="data-field" id="serial-number">
|
||||||
<pre class="label">Serial number:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="RAM">
|
<div class="data-field" id="RAM">
|
||||||
<pre class="label">RAM:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="storage-configuration">
|
<div class="storage-configuration">
|
||||||
<h3 class="area-title">Storage configuration:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
|
||||||
<pre class="data" id="storage-configuration">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
|
||||||
|
id="storage-configuration">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="miscellaneous">
|
<div class="miscellaneous">
|
||||||
<h3 class="area-title">Miscellaneous:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
|
||||||
<pre class="data" id="miscellaneous">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -41,17 +42,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "HardwareSpecifications",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "HardwareSpecifications",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -64,9 +65,17 @@ export default {
|
|||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.data-field {
|
.data-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -79,11 +88,20 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-darkmode,
|
||||||
|
.h3-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-lightmode,
|
||||||
|
.h3-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.label#hardware {
|
.label#hardware {
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
@ -96,12 +114,20 @@ export default {
|
|||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
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#miscellaneous,
|
||||||
.data#storage-configuration {
|
.data#storage-configuration {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
@ -139,7 +165,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.area-title {
|
.area-title {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
@ -154,5 +179,4 @@ export default {
|
|||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
212
components/server/InstanceChecklist.vue
Normal file
212
components/server/InstanceChecklist.vue
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||||
|
<table class="data-table" id="instance-checklist">
|
||||||
|
<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', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
|
||||||
|
Comments</th>
|
||||||
|
<th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
|
||||||
|
</tr>
|
||||||
|
<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', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
|
||||||
|
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "InstanceChecklist",
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-darkmode {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.checkbox-lightmode {
|
||||||
|
filter: invert(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Step {
|
||||||
|
width: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Step-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Step-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset {
|
||||||
|
width: 28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Task {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Task-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Task-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Comments {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Comments-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Comments-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Done {
|
||||||
|
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>
|
||||||
209
components/server/Issue.vue
Normal file
209
components/server/Issue.vue
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Issue",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
209
components/server/IssueSlip.vue
Normal file
209
components/server/IssueSlip.vue
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueSlip",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
200
components/server/IssueSlipTable.vue
Normal file
200
components/server/IssueSlipTable.vue
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueSlipTable",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
182
components/server/IssueSlipTableNoClient.vue
Normal file
182
components/server/IssueSlipTableNoClient.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueSlipTableNoClient",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
184
components/server/IssueTable.vue
Normal file
184
components/server/IssueTable.vue
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueTable",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
213
components/server/IssueVariant.vue
Normal file
213
components/server/IssueVariant.vue
Normal file
@ -0,0 +1,213 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueVariant",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
201
components/server/IssueVariants.vue
Normal file
201
components/server/IssueVariants.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueVariants",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
243
components/server/MaintenanceVisitsInstance.vue
Normal file
243
components/server/MaintenanceVisitsInstance.vue
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
|
||||||
|
<div class="maintenance-visits-instance-data">
|
||||||
|
<div class="instanceInfo">
|
||||||
|
<div class="data-field" id="info">
|
||||||
|
<div class="templateId-client-type" id="templateID">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="templateId-client-type" id="client">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="templateId-client-type" id="type">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="maintenance-visits-instance-data">
|
||||||
|
<div class="additional">
|
||||||
|
<div class="templateNotes">
|
||||||
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="maintenance-visits-instance-data">
|
||||||
|
<div class="instanceInfo">
|
||||||
|
<div class="data-field" id="info">
|
||||||
|
<div class="maintenanceType-state-user" id="maintenanceType">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="maintenanceType-state-user" id="state">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="maintenanceType-state-user" id="user">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="info">
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="creationDate">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="completionDate">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="timeSpent">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="maintenance-visits-instance-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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsInstance",
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.maintenance-visits-instance-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: 95%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maintenanceType-state-user,
|
||||||
|
.creationDate-completionDate-timeSpent,
|
||||||
|
.templateId-client-type {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maintenance-visits-instance-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instanceInfo,
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data#templateNotes,
|
||||||
|
.data#notes {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes,
|
||||||
|
.templateNotes {
|
||||||
|
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>
|
||||||
220
components/server/MaintenanceVisitsInstanceTable.vue
Normal file
220
components/server/MaintenanceVisitsInstanceTable.vue
Normal file
@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
|
||||||
|
<table class="data-table" name="maintenance-visits-instance-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="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
|
||||||
|
Maintenance type</th>
|
||||||
|
<th
|
||||||
|
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||||
|
State</th>
|
||||||
|
<th
|
||||||
|
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
|
||||||
|
Creation date</th>
|
||||||
|
<th
|
||||||
|
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
|
||||||
|
Completion 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="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsInstanceTable",
|
||||||
|
};
|
||||||
|
</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: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MaintenanceType {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MaintenanceType-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MaintenanceType-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate {
|
||||||
|
width: 22.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate {
|
||||||
|
width: 22.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate-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>
|
||||||
214
components/server/MaintenanceVisitsTemplate.vue
Normal file
214
components/server/MaintenanceVisitsTemplate.vue
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
|
||||||
|
<div class="maintenance-visits-template-data">
|
||||||
|
<div class="client-ID-type-user">
|
||||||
|
<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 class="data-field" id="info">
|
||||||
|
<div class="id-type-user" id="ID">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="id-type-user" id="type">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="id-type-user" 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="maintenance-visits-template-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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsTemplate",
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.maintenance-visits-template-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: 95%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.id-type-user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maintenance-visits-template-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-ID-type-user,
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-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>
|
||||||
201
components/server/MaintenanceVisitsTemplateTable.vue
Normal file
201
components/server/MaintenanceVisitsTemplateTable.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||||
|
<table class="data-table" name="maintenance-visits-template-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="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
Name</th>
|
||||||
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
|
||||||
|
</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', 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="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsTemplateTable",
|
||||||
|
};
|
||||||
|
</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: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID {
|
||||||
|
width: 11.1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type {
|
||||||
|
width: 11.1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User {
|
||||||
|
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>
|
||||||
183
components/server/MaintenanceVisitsTemplateTableNoClient.vue
Normal file
183
components/server/MaintenanceVisitsTemplateTableNoClient.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
|
||||||
|
<table class="data-table" id="maintenance-visits-templat-table-no-client">
|
||||||
|
<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="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
|
||||||
|
</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', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td
|
||||||
|
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsTemplateTableNoClient",
|
||||||
|
};
|
||||||
|
</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: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID {
|
||||||
|
width: 22.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-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: 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>
|
||||||
@ -1,25 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="network-information">
|
<section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<div class="label" id="network">Network specifications:</div>
|
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<div class="IPv4-MAC">
|
<div class="IPv4-MAC">
|
||||||
<div class="data-field" id="IPv4">
|
<div class="data-field" id="IPv4">
|
||||||
<pre class="label">IPv4:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="MAC">
|
<div class="data-field" id="MAC">
|
||||||
<pre class="label">MAC:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="IPv6-subnetmask">
|
<div class="IPv6-subnetmask">
|
||||||
<div class="data-field" id="IPv6">
|
<div class="data-field" id="IPv6">
|
||||||
<pre class="label">IPv6:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="subnetmask">
|
<div class="data-field" id="subnetmask">
|
||||||
<pre class="label">Subnetmask:</pre>
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,17 +27,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "NetworkSpecifications",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "NetworkSpecifications",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -50,9 +50,16 @@ export default {
|
|||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.data-field {
|
.data-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -65,11 +72,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.label#network {
|
.label#network {
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
@ -82,12 +96,20 @@ export default {
|
|||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.asset-data {
|
.asset-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
196
components/server/OrderingInformation.vue
Normal file
196
components/server/OrderingInformation.vue
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "OrderingInformation",
|
||||||
|
};
|
||||||
|
</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>
|
||||||
288
components/server/ProductionOrdersInstance.vue
Normal file
288
components/server/ProductionOrdersInstance.vue
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
|
||||||
|
<div class="production-orders-instance-data">
|
||||||
|
<div class="instanceInfo">
|
||||||
|
<div class="data-field" id="info">
|
||||||
|
<div class="templateId-client" id="templateID">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="templateId-client" id="client">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="production-orders-instance-data">
|
||||||
|
<div class="additional">
|
||||||
|
<div class="templateDescription">
|
||||||
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateDescription">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="additional">
|
||||||
|
<div class="templateNotes">
|
||||||
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="production-orders-instance-data">
|
||||||
|
<div class="instanceInfo">
|
||||||
|
<div class="data-field-four" id="infoFour">
|
||||||
|
<div class="ticketNo-asset-state-user" 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="ticketNo-asset-state-user" id="asset">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="ticketNo-asset-state-user" id="state">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="ticketNo-asset-state-user" id="user">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="info">
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="creationDate">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="completionDate">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="creationDate-completionDate-timeSpent" id="timeSpent">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="production-orders-instance-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 setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersInstance",
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.production-orders-instance-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: 95%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field-four {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 98.5%;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticketNo-asset-state-user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1.875rem;
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creationDate-completionDate-timeSpent,
|
||||||
|
.templateId-client {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-orders-instance-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instanceInfo,
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoFour {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 98.5%;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#client {
|
||||||
|
padding-left: 2.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-title {
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data#templateDescription,
|
||||||
|
|
||||||
|
.data#templateNotes,
|
||||||
|
.data#notes {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.templateDescription,
|
||||||
|
.templateNotes,
|
||||||
|
.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>
|
||||||
237
components/server/ProductionOrdersInstanceTable.vue
Normal file
237
components/server/ProductionOrdersInstanceTable.vue
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
|
||||||
|
<table class="data-table" name="production-orders-instance-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="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||||
|
Asset</th>
|
||||||
|
<th
|
||||||
|
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||||
|
State</th>
|
||||||
|
<th
|
||||||
|
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
|
||||||
|
Creation date</th>
|
||||||
|
<th
|
||||||
|
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
|
||||||
|
Completion 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="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersInstanceTable",
|
||||||
|
};
|
||||||
|
</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: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TicketNo {
|
||||||
|
width: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TicketNo-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TicketNo-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Asset {
|
||||||
|
width: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State {
|
||||||
|
width: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.State-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate {
|
||||||
|
width: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CreationDate-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate {
|
||||||
|
width: 15.83%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CompletionDate-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>
|
||||||
205
components/server/ProductionOrdersTemplate.vue
Normal file
205
components/server/ProductionOrdersTemplate.vue
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
|
||||||
|
<div class="production-orders-template-data">
|
||||||
|
<div class="client-ID">
|
||||||
|
<div class="data-field" id="client">
|
||||||
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="ID">
|
||||||
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user">
|
||||||
|
<div class="data-field" id="empty">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="user">
|
||||||
|
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="production-orders-template-data">
|
||||||
|
<div class="additional">
|
||||||
|
<div class="description">
|
||||||
|
<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', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersTemplate",
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.production-orders-template-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: 95%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-orders-template-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-ID,
|
||||||
|
.user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: normal;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 0;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#empty {
|
||||||
|
height: 3.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode,
|
||||||
|
.h3-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.data#description,
|
||||||
|
.data#notes {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description,
|
||||||
|
.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>
|
||||||
182
components/server/ProductionOrdersTemplateTable.vue
Normal file
182
components/server/ProductionOrdersTemplateTable.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||||
|
<table class="data-table" name="production-orders-template-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="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
Name</th>
|
||||||
|
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
|
||||||
|
</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="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersTemplateTable",
|
||||||
|
};
|
||||||
|
</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: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID {
|
||||||
|
width: 22.2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User {
|
||||||
|
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>
|
||||||
164
components/server/ProductionOrdersTemplateTableNoClient.vue
Normal file
164
components/server/ProductionOrdersTemplateTableNoClient.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
|
||||||
|
<table class="data-table" id="production-orders-template-table-no-client">
|
||||||
|
<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="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
|
||||||
|
</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="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersTemplateTableNoClient",
|
||||||
|
};
|
||||||
|
</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: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 6.0625em;
|
||||||
|
height: 1.875em;
|
||||||
|
font-family: 'Overpass';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.875em;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,17 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="software-information">
|
<section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<div class="label" id="software">Software specifications:
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||||
<div class="asset-data">
|
<div class="asset-data">
|
||||||
<table class="data-table" id="asset-table-no-client">
|
<table class="data-table" id="asset-table-no-client">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Software">Software</th>
|
<th
|
||||||
<th class="Version">Version</th>
|
:class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
|
||||||
<th class="License">License</th>
|
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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Software">...</td>
|
<td
|
||||||
<td class="Version">...</td>
|
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
|
||||||
<td class="License">...</td>
|
...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@ -19,18 +27,17 @@
|
|||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "SoftwareSpecifications",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SoftwareSpecifications",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -43,16 +50,29 @@ export default {
|
|||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.label#software {
|
.label#software {
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
@ -82,12 +102,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -95,11 +127,20 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
@ -107,15 +148,28 @@ th {
|
|||||||
|
|
||||||
.Software {
|
.Software {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Software-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Software-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Version {
|
.Version {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Version-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Version-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.License {
|
.License {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
@ -1,30 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="information">
|
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
<h2 class="solution-name">Solution name</h2>
|
<h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
|
||||||
<div class="solution-data">
|
<div class="solution-data">
|
||||||
<div class="client-asset">
|
<div class="client-asset">
|
||||||
<div class="data-field" id="client">
|
<div class="data-field" id="client">
|
||||||
<pre class="label">Client:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="asset">
|
<div class="data-field" id="asset">
|
||||||
<pre class="label">Asset:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="data-field" id="user">
|
<div class="data-field" id="user">
|
||||||
<pre class="label">User:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="type-state">
|
<div class="type-state">
|
||||||
<div class="data-field" id="type">
|
<div class="data-field" id="type">
|
||||||
<pre class="label">Type:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-field" id="state">
|
<div class="data-field" id="state">
|
||||||
<pre class="label">State:</pre>
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||||
<pre class="data">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -32,16 +32,17 @@
|
|||||||
<div class="solution-data">
|
<div class="solution-data">
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<h3 class="area-title">Description of the problem/intended use:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
|
||||||
<pre class="data" id="description">...</pre>
|
problem/intended use:</h3>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="solution-data">
|
<div class="solution-data">
|
||||||
<div class="additional">
|
<div class="additional">
|
||||||
<div class="notes">
|
<div class="notes">
|
||||||
<h3 class="area-title">Notes:</h3>
|
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||||
<pre class="data" id="notes">...</pre>
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -49,17 +50,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Solution",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Solution",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -72,20 +73,35 @@ export default {
|
|||||||
padding: 1.25rem 1.875rem;
|
padding: 1.25rem 1.875rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.solution-name {
|
.solution-name {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||||
sans-serif;
|
sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h2-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.data-field {
|
.data-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -106,11 +122,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.data {
|
.data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -118,12 +141,20 @@ export default {
|
|||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
border-radius: 0.3125rem;
|
border-radius: 0.3125rem;
|
||||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||||
background-color: #212121;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.solution-data {
|
.solution-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -156,11 +187,18 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.area-title {
|
.area-title {
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h3-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.type-state {
|
.type-state {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -194,5 +232,4 @@ export default {
|
|||||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||||
padding-top: 0rem;
|
padding-top: 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,35 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<div class="label">Checklist:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||||
<table class="data-table" id="solution-checkklist">
|
<table class="data-table" id="solution-checkklist">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Step">Step</th>
|
<th
|
||||||
<th class="Asset">Asset</th>
|
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||||
<th class="Task">Task</th>
|
Step</th>
|
||||||
<th class="Comments">Comments</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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Step">...</td>
|
<td
|
||||||
<td class="Asset">...</td>
|
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||||
<td class="Task">...</td>
|
...</td>
|
||||||
<td class="Comments">...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "SolutionChecklist",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SolutionChecklist",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -44,9 +56,16 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
@ -61,12 +80,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -74,7 +105,6 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
@ -83,35 +113,71 @@ th {
|
|||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.Step {
|
.Step {
|
||||||
width: 8%;
|
width: 8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Step-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Step-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Asset {
|
.Asset {
|
||||||
width: 22%;
|
width: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Asset-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Task {
|
.Task {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Task-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Task-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Comments {
|
.Comments {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 6.0625em;
|
width: 6.0625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.875em;
|
line-height: 1.875em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}</style>
|
||||||
@ -1,37 +1,53 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<div class="label">Last viewed:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||||
<table class="data-table" id="solution-table">
|
<table class="data-table" id="solution-table">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Client">Client</th>
|
<th
|
||||||
<th class="Name">Name</th>
|
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||||
<th class="Asset">Asset</th>
|
Client</th>
|
||||||
<th class="Type">Type</th>
|
<th
|
||||||
<th class="User">User</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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Client">...</td>
|
<td
|
||||||
<td class="Name">...</td>
|
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||||
<td class="Asset">...</td>
|
...</td>
|
||||||
<td class="Type">...</td>
|
<td
|
||||||
<td class="User">...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "SolutionTable",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SolutionTable",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -46,9 +62,16 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
@ -63,12 +86,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -76,48 +111,92 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Client {
|
.Client {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Client-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Client-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Name {
|
.Name {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Asset {
|
.Asset {
|
||||||
width: 12.7%;
|
width: 12.7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Asset-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Type {
|
.Type {
|
||||||
width: 12.7%;
|
width: 12.7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Type-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.User {
|
.User {
|
||||||
width: 8%;
|
width: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 6.0625em;
|
width: 6.0625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.875em;
|
line-height: 1.875em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: #FFFFFF;
|
}
|
||||||
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,35 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
<div class="label">Solutions:</div>
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
|
||||||
<table class="data-table" id="solution-table">
|
<table class="data-table" id="solution-table">
|
||||||
<tr class="table-row" id="table-head">
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
<th class="Name">Name</th>
|
<th
|
||||||
<th class="Asset">Asset</th>
|
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
<th class="Type">Type</th>
|
Name</th>
|
||||||
<th class="User">User</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>
|
||||||
<tr class="table-row" id="row-1">
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
<td class="Name">...</td>
|
<td
|
||||||
<td class="Asset">...</td>
|
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||||
<td class="Type">...</td>
|
...</td>
|
||||||
<td class="User">...</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>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
<script>
|
const darkMode = ref(true)
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "SolutionTableNoClient",
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SolutionTableNoClient",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -44,9 +56,16 @@ export default {
|
|||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-darkmode {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.div-lightmode {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 0.625rem;
|
padding: 0 0.625rem;
|
||||||
@ -61,12 +80,24 @@ export default {
|
|||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
padding: 0.625rem;
|
padding: 0.625rem;
|
||||||
gap: 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;
|
border-top: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head {
|
.tr-lightmode {
|
||||||
border-top: none;
|
border-top: 0.0625rem solid #8e8e8e;
|
||||||
border-bottom: 0.0625rem solid #000000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@ -74,7 +105,6 @@ td {
|
|||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 5%;
|
letter-spacing: 5%;
|
||||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
@ -83,34 +113,71 @@ th {
|
|||||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.Name {
|
.Name {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Name-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Name-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Asset {
|
.Asset {
|
||||||
width: 22.5%;
|
width: 22.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Asset-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Asset-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.Type {
|
.Type {
|
||||||
width: 22.5%;
|
width: 22.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Type-darkmode {
|
||||||
border-right: 0.0625rem solid #000000;
|
border-right: 0.0625rem solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Type-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
.User {
|
.User {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 6.0625em;
|
width: 6.0625em;
|
||||||
height: 1.875em;
|
height: 1.875em;
|
||||||
font-family: 'Overpass';
|
font-family: 'Overpass';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.875em;
|
line-height: 1.875em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.label-darkmode {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}</style>
|
||||||
183
components/server/TemplateChecklist.vue
Normal file
183
components/server/TemplateChecklist.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||||
|
<table class="data-table" id="template-checkklist">
|
||||||
|
<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', 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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "TemplateChecklist",
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
140
components/server/UserAccount.vue
Normal file
140
components/server/UserAccount.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['userAccount', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
|
||||||
|
<div class="userData">
|
||||||
|
<div class="data-field" id="email">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="password">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Password:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">*******</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UserAccount",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.userAccount {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1.875rem;
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
padding-top: 1.875rem;
|
||||||
|
padding-bottom: 1.875rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
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%;
|
||||||
|
font: 400 1rem/2rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userData {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
gap: 0.625rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle {
|
||||||
|
width: 6.25em;
|
||||||
|
height: 6.25em;
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
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;
|
||||||
|
width: 12.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 6.25rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
115
components/server/UserAppearance.vue
Normal file
115
components/server/UserAppearance.vue
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<div class="userData">
|
||||||
|
<div class="data-field" id="mode">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
|
||||||
|
<pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
|
||||||
|
<Toggle v-model="darkMode" id="toggleAppearance" />
|
||||||
|
<pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="language">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Toggle from '@vueform/toggle'
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UserAppearance",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="@vueform/toggle/themes/default.css"></style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.userAppearance {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1.875rem;
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
padding-top: 1.875rem;
|
||||||
|
padding-bottom: 1.875rem;
|
||||||
|
gap: 0.625rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.userData {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
gap: 0.625rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
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;
|
||||||
|
width: 15.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 6.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallLabel {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
136
components/server/UserProfile.vue
Normal file
136
components/server/UserProfile.vue
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||||
|
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
|
||||||
|
<div class="userData">
|
||||||
|
<div class="rectangle-container">
|
||||||
|
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
|
||||||
|
</div>
|
||||||
|
<div class="data-field" id="username">
|
||||||
|
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
|
||||||
|
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UserProfile",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.userProfile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: stretch;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1.875rem;
|
||||||
|
padding-right: 1.875rem;
|
||||||
|
padding-top: 1.875rem;
|
||||||
|
padding-bottom: 1.875rem;
|
||||||
|
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%;
|
||||||
|
font: 400 1rem/2rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userData {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
padding-right: 1.25rem;
|
||||||
|
gap: 3.125rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle {
|
||||||
|
width: 6.25em;
|
||||||
|
height: 6.25em;
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rectangle-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1.875rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
213
components/server/UserRightsList.vue
Normal file
213
components/server/UserRightsList.vue
Normal file
@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||||
|
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
|
||||||
|
<table class="data-table" id="user-rights-list">
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||||
|
<th
|
||||||
|
:class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
|
||||||
|
User</th>
|
||||||
|
<th
|
||||||
|
:class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
|
||||||
|
Admin</th>
|
||||||
|
<th
|
||||||
|
:class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
|
||||||
|
Edit/Delete</th>
|
||||||
|
<th
|
||||||
|
:class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
|
||||||
|
Create</th>
|
||||||
|
<th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
|
||||||
|
</tr>
|
||||||
|
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||||
|
<td
|
||||||
|
:class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
|
||||||
|
...</td>
|
||||||
|
<td
|
||||||
|
:class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
|
||||||
|
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
:class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
|
||||||
|
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
:class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
|
||||||
|
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
|
||||||
|
</td>
|
||||||
|
<td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
|
||||||
|
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UserRightsList",
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-darkmode,
|
||||||
|
.td-darkmode {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.th-lightmode,
|
||||||
|
.td-lightmode {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-darkmode {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.checkbox-lightmode {
|
||||||
|
filter: invert(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.User {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.User-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Admin {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Admin-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Admin-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Edit-Delete {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Edit-Delete-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Edit-Delete-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Create {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Create-darkmode {
|
||||||
|
border-right: 0.0625rem solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Create-lightmode {
|
||||||
|
border-right: 0.0625rem solid #8e8e8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.View {
|
||||||
|
width: 12.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>
|
||||||
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<aside
|
<aside
|
||||||
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||||
<div class="toggle">
|
<div class="toggleNavbar">
|
||||||
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||||
@click="toggleSidebar">
|
@click="ToggleSidebar">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||||
</div>
|
</div>
|
||||||
@ -23,28 +23,32 @@
|
|||||||
</router-link>
|
</router-link>
|
||||||
</nav>
|
</nav>
|
||||||
<nav id="site-menu">
|
<nav id="site-menu">
|
||||||
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
|
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||||
|
id="checklists-button">
|
||||||
<div class="icon" id="checklists-icon">
|
<div class="icon" id="checklists-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Checklists-Icon.svg" />
|
src="../icons/navbar-icons/Checklists-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
|
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||||
|
id="assets-button">
|
||||||
<div class="icon" id="assets-icon">
|
<div class="icon" id="assets-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Assets-Icon.svg" />
|
src="../icons/navbar-icons/Assets-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||||
|
id="solutions-button">
|
||||||
<div class="icon" id="solutions-icon">
|
<div class="icon" id="solutions-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Solutions-Icon.svg" />
|
src="../icons/navbar-icons/Solutions-Icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
|
||||||
</router-link>
|
</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">
|
<div class="icon" id="accounting-icon">
|
||||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||||
src="../icons/navbar-icons/Accounting-Icon.svg" />
|
src="../icons/navbar-icons/Accounting-Icon.svg" />
|
||||||
@ -66,22 +70,22 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
const isExpanded = ref(true)
|
||||||
|
|
||||||
|
const ToggleSidebar = () => {
|
||||||
|
isExpanded.value = !isExpanded.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Navigationbar",
|
name: "Navigationbar",
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
darkMode: true,
|
|
||||||
isExpanded: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleSidebar() {
|
|
||||||
this.isExpanded = !this.isExpanded;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -138,7 +142,7 @@ aside.is-expanded {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.toggle {
|
.toggleNavbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
@ -233,6 +237,13 @@ a {
|
|||||||
transition: 0.2s ease-out;
|
transition: 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-darkmode:hover,
|
||||||
|
.back-lightmode:hover,
|
||||||
|
.indicator-darkmode:hover,
|
||||||
|
.indicator-lightmode:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
|
|||||||
@ -1,78 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<header>
|
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
||||||
<img id="header-logo"
|
<img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
|
||||||
loading="lazy" src="../tüit-logo.svg.png" />
|
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div class="username">username</div>
|
<div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
|
||||||
<div class="picture">
|
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
||||||
<img id="picture"
|
<img id="picture" loading="lazy" src="" />
|
||||||
loading="lazy" src="" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PageHeader",
|
name: "PageHeader",
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
header {
|
||||||
box-sizing: border-box;
|
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 {
|
.header-darkmode {
|
||||||
display: flex;
|
background-color: #212121;
|
||||||
flex-direction: row;
|
border-bottom: 0.125em solid #000;
|
||||||
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 {
|
.header-lightmode {
|
||||||
object-fit: contain;
|
background-color: #EBEBEB;
|
||||||
object-position: center;
|
border-bottom: 0.125em solid #8e8e8e61;
|
||||||
width: 5rem;
|
}
|
||||||
height: 2.5rem;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile {
|
#header-logo {
|
||||||
display: flex;
|
object-fit: contain;
|
||||||
flex-direction: row;
|
object-position: center;
|
||||||
align-items: flex-end;
|
width: 5rem;
|
||||||
gap: 0.625rem;
|
height: 2.5rem;
|
||||||
padding: 0 0.625rem;
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
.username {
|
overflow: hidden;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageHeader />
|
<PageHeader />
|
||||||
<main>
|
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
||||||
<Navigationbar />
|
<Navigationbar />
|
||||||
<slot />
|
<slot />
|
||||||
<Actionbar />
|
<Actionbar />
|
||||||
@ -8,39 +8,45 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import PageHeader from "./PageHeader.vue";
|
import PageHeader from "./PageHeader.vue";
|
||||||
import Navigationbar from "./Navigationbar.vue";
|
import Navigationbar from "./Navigationbar.vue";
|
||||||
import Actionbar from "./Actionbar.vue";
|
import Actionbar from "./Actionbar.vue";
|
||||||
|
|
||||||
export default {
|
const darkMode = ref(true)
|
||||||
name: "Page",
|
|
||||||
components: {
|
|
||||||
PageHeader,
|
|
||||||
Navigationbar,
|
|
||||||
Actionbar,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "default",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
main {
|
||||||
box-sizing: border-box;
|
display: flex;
|
||||||
}
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
main {
|
padding: 0.625rem;
|
||||||
display: flex;
|
gap: 0.625rem;
|
||||||
flex-direction: row;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
padding: 0.625rem;
|
height: 100%;
|
||||||
gap: 0.625rem;
|
width: 100%;
|
||||||
background-color: #212121;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
.main-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-lightmode {
|
||||||
|
background-color: #EBEBEB;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,40 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageHeader />
|
<PageHeader />
|
||||||
<main>
|
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import PageHeader from "../layouts/PageHeader.vue";
|
import PageHeader from "../layouts/PageHeader.vue";
|
||||||
|
|
||||||
export default {
|
const darkMode = ref(true)
|
||||||
name: "Page",
|
|
||||||
components: {
|
|
||||||
PageHeader,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "empty",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
<style scoped>
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
* {
|
}
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
|
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
|
||||||
background-color: #212121;
|
height: 100vh;
|
||||||
}
|
width: 100vw;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-darkmode {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-lightmode {
|
||||||
</style>
|
background-color: #EBEBEB;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -7,6 +7,7 @@
|
|||||||
"name": "nuxt-app",
|
"name": "nuxt-app",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@vueform/toggle": "^2.1.4",
|
||||||
"leading-trim": "^1.0.2"
|
"leading-trim": "^1.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -2806,6 +2807,11 @@
|
|||||||
"integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
|
"integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@vueform/toggle": {
|
||||||
|
"version": "2.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vueform/toggle/-/toggle-2.1.4.tgz",
|
||||||
|
"integrity": "sha512-tEITFf5wlqIWoCYZXJdoXvCnrc97weOu2csR/BEoROVvFu1zRsoK0wY1pJG7BR+g5zpGJneGSdLhMUsbx8y1yw=="
|
||||||
|
},
|
||||||
"node_modules/abbrev": {
|
"node_modules/abbrev": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@vueform/toggle": "^2.1.4",
|
||||||
"leading-trim": "^1.0.2"
|
"leading-trim": "^1.0.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
150
pages/assets.vue
150
pages/assets.vue
@ -1,28 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<h1 id="page-name">Assets</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<ClientSearch />
|
<ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
|
||||||
<AssetTable />
|
<AssetTable v-if="onAssetlist"/>
|
||||||
<AssetTableNoClient />
|
<AssetTableNoClient v-if="onCustomerAssetlist"/>
|
||||||
<Asset />
|
<Asset v-if="onAsset"/>
|
||||||
<HardwareSpecifications />
|
<HardwareSpecifications v-if="onAsset"/>
|
||||||
<SoftwareSpecifications />
|
<SoftwareSpecifications v-if="onAsset"/>
|
||||||
<NetworkSpecifications />
|
<NetworkSpecifications v-if="onAsset"/>
|
||||||
</div>
|
<AssetSearch v-if="onSolutionlistAsset"/>
|
||||||
</section>
|
<AssetSolutionList v-if="onSolutionlistAsset"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { ref } from 'vue';
|
||||||
layout: 'default'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ClientSearch from "../components/ClientSearch.vue";
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
import AssetTable from "../components/server/AssetTable.vue";
|
import AssetTable from "../components/server/AssetTable.vue";
|
||||||
import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
|
import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
|
||||||
@ -30,65 +28,77 @@ import Asset from "../components/server/Asset.vue";
|
|||||||
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
|
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
|
||||||
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
|
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
|
||||||
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
|
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
|
||||||
|
import AssetSearch from "../components/AssetSearch.vue";
|
||||||
|
import AssetSolutionList from "../components/server/AssetSolutionList.vue";
|
||||||
|
|
||||||
export default {
|
definePageMeta({
|
||||||
name: "AssetPage",
|
layout: 'default'
|
||||||
components: {
|
})
|
||||||
ClientSearch,
|
|
||||||
AssetTable,
|
|
||||||
AssetTableNoClient,
|
|
||||||
Asset,
|
|
||||||
HardwareSpecifications,
|
|
||||||
SoftwareSpecifications,
|
|
||||||
NetworkSpecifications,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onAssetlist = ref(true)
|
||||||
|
const onCustomerAssetlist = ref(false)
|
||||||
|
const onAsset = ref(false)
|
||||||
|
const onSolutionlistAsset = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetPage",
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
float: left;
|
float: left;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-header {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
}
|
}
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
|
||||||
sans-serif;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
#page-name {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: column;
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||||
width: 100%;
|
sans-serif;
|
||||||
gap: 1.25rem;
|
text-decoration: underline;
|
||||||
margin-bottom: 0.625rem;
|
}
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
.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>
|
</style>
|
||||||
@ -1,85 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<h1 id="page-name">Clients</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<Client />
|
<ClientTable v-if="onCustomerlist"/>
|
||||||
<ClientQuickAccess />
|
<Client v-if="onCustomer"/>
|
||||||
</div>
|
<ClientQuickAccess v-if="onCustomer"/>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { ref } from 'vue';
|
||||||
layout: 'default'
|
|
||||||
})
|
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";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onCustomerlist = ref(true)
|
||||||
|
const onCustomer = ref(true)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ClientTable from "../components/server/ClientTable.vue";
|
export default {
|
||||||
import Client from "../components/server/Client.vue";
|
name: "ClientsPage",
|
||||||
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
|
}
|
||||||
import ClientEmployees from "../components/server/ClientEmployees.vue";
|
|
||||||
import ClientEmployee from "../components/server/ClientEmployee.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ClientsPage",
|
|
||||||
components: {
|
|
||||||
ClientTable,
|
|
||||||
Client,
|
|
||||||
ClientQuickAccess,
|
|
||||||
ClientEmployees,
|
|
||||||
ClientEmployee,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
float: left;
|
float: left;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-header {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
}
|
}
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
#page-name {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: column;
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||||
width: 100%;
|
}
|
||||||
gap: 1.25rem;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
108
pages/home.vue
108
pages/home.vue
@ -2,7 +2,7 @@
|
|||||||
<Navigationbar />
|
<Navigationbar />
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<pre id="page-name">Home</pre>
|
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<Dashboard />
|
<Dashboard />
|
||||||
@ -13,69 +13,71 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { ref } from 'vue';
|
||||||
layout: 'empty'
|
|
||||||
})
|
import Navigationbar from "../layouts/Navigationbar.vue";
|
||||||
|
import Dashboard from "../components/Dashboard.vue";
|
||||||
|
import QuickAccess from "../components/QuickAccess.vue";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'empty'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Navigationbar from "../layouts/Navigationbar.vue";
|
export default {
|
||||||
import Dashboard from "../components/Dashboard.vue";
|
name: "HomePage",
|
||||||
import QuickAccess from "../components/QuickAccess.vue";
|
}
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "HomePage",
|
|
||||||
components: {
|
|
||||||
Navigationbar,
|
|
||||||
Dashboard,
|
|
||||||
QuickAccess,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
#content {
|
||||||
box-sizing: border-box;
|
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 {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
float: left;
|
justify-content: center;
|
||||||
justify-content: stretch;
|
align-items: center;
|
||||||
align-items: stretch;
|
width: 100%;
|
||||||
width: 100%;
|
height: 3.125rem;
|
||||||
flex-grow: 1;
|
}
|
||||||
gap: 0.625rem;
|
|
||||||
padding: 0 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-header {
|
#page-name {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: row;
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 3.125rem;
|
|
||||||
}
|
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
.pre-darkmode {
|
||||||
display: flex;
|
color: #fff;
|
||||||
flex-direction: column;
|
}
|
||||||
width: 100%;
|
|
||||||
gap: 1.25rem;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
141
pages/index.vue
141
pages/index.vue
@ -1,83 +1,98 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<h1 id="page-name">Pagename</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<section id="stuff"></section>
|
<section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { ref } from 'vue';
|
||||||
layout: 'default'
|
|
||||||
})
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Testpage",
|
name: "Testpage",
|
||||||
components: {
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
float: left;
|
float: left;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-header {
|
.h1-darkmode {
|
||||||
display: flex;
|
color: #fff;
|
||||||
flex-direction: row;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 3.125rem;
|
|
||||||
}
|
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
.h1-lightmode {
|
||||||
display: flex;
|
color: #000;
|
||||||
flex-direction: column;
|
}
|
||||||
width: 100%;
|
|
||||||
gap: 1.25rem;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#stuff {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
width: 100%;
|
justify-content: center;
|
||||||
gap: 1.25rem;
|
align-items: center;
|
||||||
padding: 1.25rem 1.875rem;
|
width: 100%;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
height: 3.125rem;
|
||||||
background-color: #2C2C2C;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
#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>
|
</style>
|
||||||
130
pages/issueSlips.vue
Normal file
130
pages/issueSlips.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<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 v-if="onIssueSliplist || onCustomerIssueSliplist"/>
|
||||||
|
<IssueSlipTable v-if="onIssueSliplist"/>
|
||||||
|
<IssueSlipTableNoClient v-if="onCustomerIssueSliplist"/>
|
||||||
|
<IssueSlip v-if="onIssueSlip"/>
|
||||||
|
<OrderingInformation v-if="onIssueSlip"/>
|
||||||
|
<Accounting v-if="onIssueSlip"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onIssueSliplist = ref(true)
|
||||||
|
const onCustomerIssueSliplist = ref(false)
|
||||||
|
const onIssueSlip = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssueSlipPage",
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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>
|
||||||
126
pages/issues.vue
Normal file
126
pages/issues.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<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 v-if="onIssueItemList"/>
|
||||||
|
<Issue v-if="onIssueItem"/>
|
||||||
|
<IssueVariants v-if="onIssueItem"/>
|
||||||
|
<IssueVariant v-if="onIssueItemVariant"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onIssueItem = ref(false)
|
||||||
|
const onIssueItemList = ref(true)
|
||||||
|
const onIssueItemVariant = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "IssuePage",
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<pre id="page-name"> </pre>
|
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<LoginForm />
|
<LoginForm />
|
||||||
@ -11,70 +11,74 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import LoginForm from "../components/LoginForm.vue";
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'empty'
|
layout: 'empty'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LoginForm from "../components/LoginForm.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "LoginPage",
|
name: "LoginPage",
|
||||||
components: {
|
|
||||||
LoginForm,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
float: left;
|
float: left;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-header {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
}
|
}
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
#page-name {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: column;
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: flex-start;
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
gap: 1.25rem;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
137
pages/maintenanceVisits.vue
Normal file
137
pages/maintenanceVisits.vue
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="content-header">
|
||||||
|
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
|
||||||
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<router-link to="/productionOrders" class="button" id="productionOrders-button">
|
||||||
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
|
||||||
|
<MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
|
||||||
|
<MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
|
||||||
|
<MaintenanceVisitsTemplate v-if="onTemplate"/>
|
||||||
|
<TemplateChecklist v-if="onTemplate"/>
|
||||||
|
<TemplateSearch v-if="onInstancelist"/>
|
||||||
|
<MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
|
||||||
|
<MaintenanceVisitsInstance v-if="onInstance"/>
|
||||||
|
<InstanceChecklist v-if="onInstance"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
|
import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
|
||||||
|
import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
|
||||||
|
import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
|
||||||
|
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
|
||||||
|
import TemplateSearch from "../components/TemplateSearch.vue";
|
||||||
|
import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
|
||||||
|
import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
|
||||||
|
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onTemplatelist = ref(true)
|
||||||
|
const onCustomerTemplatelist = ref(false)
|
||||||
|
const onTemplate = ref(false)
|
||||||
|
const onInstancelist = ref(false)
|
||||||
|
const onInstance = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MaintenanceVisitsPage",
|
||||||
|
}
|
||||||
|
</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>
|
||||||
136
pages/productionOrders.vue
Normal file
136
pages/productionOrders.vue
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="content-header">
|
||||||
|
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
|
||||||
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<router-link to="/productionOrders" class="button" id="productionOrders-button">
|
||||||
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
|
||||||
|
<ProductionOrdersTemplateTable v-if="onTemplatelist"/>
|
||||||
|
<ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist"/>
|
||||||
|
<ProductionOrdersTemplate v-if="onTemplate"/>
|
||||||
|
<TemplateChecklist v-if="onTemplate"/>
|
||||||
|
<TemplateSearch v-if="onInstancelist"/>
|
||||||
|
<ProductionOrdersInstanceTable v-if="onInstancelist"/>
|
||||||
|
<ProductionOrdersInstance v-if="onInstance"/>
|
||||||
|
<InstanceChecklist v-if="onInstance"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
|
import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
|
||||||
|
import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
|
||||||
|
import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
|
||||||
|
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
|
||||||
|
import TemplateSearch from "../components/TemplateSearch.vue";
|
||||||
|
import ProductionOrdersInstanceTable from "../components/server/ProductionOrdersInstanceTable.vue";
|
||||||
|
import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
|
||||||
|
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onTemplatelist = ref(true)
|
||||||
|
const onCustomerTemplatelist = ref(false)
|
||||||
|
const onTemplate = ref(false)
|
||||||
|
const onInstancelist = ref(false)
|
||||||
|
const onInstance = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ProductionOrdersPage",
|
||||||
|
}
|
||||||
|
</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>
|
||||||
175
pages/settings.vue
Normal file
175
pages/settings.vue
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="content-header">
|
||||||
|
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
|
||||||
|
</div>
|
||||||
|
<div id="content-body">
|
||||||
|
<div class="buttonOptions">
|
||||||
|
<input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
|
||||||
|
(darkMode && !accountSelected) ? 'input-darkmode' : '',
|
||||||
|
(!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
|
||||||
|
(!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
|
||||||
|
@click="ActivateAccount">
|
||||||
|
<input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
|
||||||
|
(darkMode && !appearanceSelected) ? 'input-darkmode' : '',
|
||||||
|
(!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
|
||||||
|
(!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
|
||||||
|
value="Appearance" @click="ActivateAppearance">
|
||||||
|
<input :class="[(darkMode && usersSelected) ? 'selected-input-darkmode' : '',
|
||||||
|
(darkMode && !usersSelected) ? 'input-darkmode' : '',
|
||||||
|
(!darkMode && usersSelected) ? 'selected-input-lightmode' : '',
|
||||||
|
(!darkMode && !usersSelected) ? 'input-lightmode' : '',]" type="button" id="users" value="Users"
|
||||||
|
@click="ActivateUsers">
|
||||||
|
</div>
|
||||||
|
<UserProfile v-if="accountSelected"/>
|
||||||
|
<UserAccount v-if="accountSelected"/>
|
||||||
|
<UserAppearance v-if="appearanceSelected"/>
|
||||||
|
<UserRightsList v-if="usersSelected"/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import UserProfile from "../components/server/UserProfile.vue";
|
||||||
|
import UserAccount from "../components/server/UserAccount.vue";
|
||||||
|
import UserAppearance from "../components/server/UserAppearance.vue";
|
||||||
|
import UserRightsList from "../components/server/UserRightsList.vue";
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
const accountSelected = ref(true)
|
||||||
|
const appearanceSelected = ref(false)
|
||||||
|
const usersSelected = ref(false)
|
||||||
|
|
||||||
|
// fuctions to change the option button
|
||||||
|
const ActivateAccount = () => {
|
||||||
|
accountSelected.value = true;
|
||||||
|
appearanceSelected.value = false;
|
||||||
|
usersSelected.value = false;
|
||||||
|
};
|
||||||
|
const ActivateAppearance = () => {
|
||||||
|
accountSelected.value = false;
|
||||||
|
appearanceSelected.value = true;
|
||||||
|
usersSelected.value = false;
|
||||||
|
};
|
||||||
|
const ActivateUsers = () => {
|
||||||
|
accountSelected.value = false;
|
||||||
|
appearanceSelected.value = false;
|
||||||
|
usersSelected.value = true;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SettingsPage",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
float: left;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
gap: 0.625rem;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 3.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-name {
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonOptions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#account,
|
||||||
|
input#appearance,
|
||||||
|
input#users {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 12.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 5%;
|
||||||
|
font: 400 0.875rem/2rem Overpass, sans-serif;
|
||||||
|
margin-right: 1.25rem;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #2c2c2c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-input-darkmode {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #454545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-lightmode {
|
||||||
|
color: #000;
|
||||||
|
background-color: #E4E4E4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-input-lightmode {
|
||||||
|
color: #000;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-darkmode:hover,
|
||||||
|
.input-lightmode:hover,
|
||||||
|
.selected-input-darkmode:hover,
|
||||||
|
.selected-input-lightmode:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,88 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="content-header">
|
<div id="content-header">
|
||||||
<h1 id="page-name">Solutions</h1>
|
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-body">
|
<div id="content-body">
|
||||||
<ClientSearch />
|
<ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
|
||||||
<SolutionTable />
|
<SolutionTable v-if="onSolutionlist"/>
|
||||||
<SolutionTableNoClient />
|
<SolutionTableNoClient v-if="onCustomerSolutionlist"/>
|
||||||
<Solution />
|
<Solution v-if="onSolution"/>
|
||||||
<SolutionChecklist />
|
<SolutionChecklist v-if="onSolution"/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { ref } from 'vue';
|
||||||
layout: 'default'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ClientSearch from "../components/ClientSearch.vue";
|
import ClientSearch from "../components/ClientSearch.vue";
|
||||||
import SolutionTable from "../components/server/SolutionTable.vue";
|
import SolutionTable from "../components/server/SolutionTable.vue";
|
||||||
import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
|
import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
|
||||||
import Solution from "../components/server/Solution.vue";
|
import Solution from "../components/server/Solution.vue";
|
||||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||||
|
|
||||||
export default {
|
definePageMeta({
|
||||||
name: "AssetPage",
|
layout: 'default'
|
||||||
components: {
|
})
|
||||||
ClientSearch,
|
|
||||||
SolutionTable,
|
|
||||||
SolutionTableNoClient,
|
|
||||||
Solution,
|
|
||||||
SolutionChecklist,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const darkMode = ref(true)
|
||||||
|
|
||||||
|
// to render the right components
|
||||||
|
const onSolutionlist = ref(true)
|
||||||
|
const onCustomerSolutionlist = ref(false)
|
||||||
|
const onSolution = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AssetPage",
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
* {
|
||||||
* {
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
float: left;
|
float: left;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 0.625rem;
|
gap: 0.625rem;
|
||||||
padding: 0 1.25rem;
|
padding: 0 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-header {
|
#content-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.125rem;
|
height: 3.125rem;
|
||||||
}
|
}
|
||||||
#page-name {
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 5%;
|
|
||||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
|
||||||
sans-serif;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content-body {
|
#page-name {
|
||||||
display: flex;
|
letter-spacing: 5%;
|
||||||
flex-direction: column;
|
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||||
width: 100%;
|
sans-serif;
|
||||||
gap: 1.25rem;
|
text-decoration: underline;
|
||||||
margin-bottom: 0.625rem;
|
}
|
||||||
border-radius: 0.625rem;
|
|
||||||
}
|
.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>
|
</style>
|
||||||
@ -4,18 +4,31 @@ import ClientsPage from '../pages/clients.vue';
|
|||||||
import LoginPage from '../pages/login.vue';
|
import LoginPage from '../pages/login.vue';
|
||||||
import AssetPage from '../pages/assets.vue';
|
import AssetPage from '../pages/assets.vue';
|
||||||
import SolutionPage from '../pages/solutions.vue';
|
import SolutionPage from '../pages/solutions.vue';
|
||||||
|
import IssueSlipPage from '../pages/issueSlips.vue';
|
||||||
|
import IssuesPages from '../pages/issues.vue';
|
||||||
|
import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
|
||||||
|
import ProductionOrdersPage from '../pages/productionOrders.vue';
|
||||||
|
import SettingsPage from '../pages/settings.vue';
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/login',
|
||||||
component: LoginPage
|
component: LoginPage
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/home',
|
path: '/home',
|
||||||
component: HomePage
|
component: HomePage
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/productionOrders',
|
||||||
|
component: ProductionOrdersPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/maintenanceVisits',
|
||||||
|
component: MaintenanceVisitsPage
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/assets',
|
path: '/assets',
|
||||||
component: AssetPage
|
component: AssetPage
|
||||||
@ -24,10 +37,22 @@ const router = createRouter({
|
|||||||
path: '/solutions',
|
path: '/solutions',
|
||||||
component: SolutionPage
|
component: SolutionPage
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/issueSlips',
|
||||||
|
component: IssueSlipPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/issues',
|
||||||
|
component: IssuesPages
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/clients',
|
path: '/clients',
|
||||||
component: ClientsPage
|
component: ClientsPage
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/settings',
|
||||||
|
component: SettingsPage
|
||||||
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user