added settings Page and components
This commit is contained in:
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>
|
||||
|
||||
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,51 +1,51 @@
|
||||
<template>
|
||||
<section class="information">
|
||||
<h2 class="client-name">Client name</h2>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre class="label">ID:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="client-data">
|
||||
<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">
|
||||
<pre class="label">Contact person:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="e-mail">
|
||||
<pre class="label">E-Mail:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<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="phone">
|
||||
<pre class="label">Phone number:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<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="data-field" id="street-name">
|
||||
<pre class="label">Street:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="street-no">
|
||||
<pre class="label">No.:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-field" id="postal-code">
|
||||
<pre class="label">Postcode:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="city">
|
||||
<pre class="label">City:</pre>
|
||||
<pre class="data">...</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<h3 class="area-title">Notes:</h3>
|
||||
<pre class="data" id="notes">...</pre>
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -53,6 +53,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -72,20 +74,34 @@ export default {
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.client-name {
|
||||
align-self: stretch;
|
||||
padding: 1.25rem 0;
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h2-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -110,11 +126,18 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pre-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -123,11 +146,20 @@ export default {
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data#notes {
|
||||
align-self: stretch;
|
||||
}
|
||||
@ -154,11 +186,19 @@ export default {
|
||||
}
|
||||
|
||||
.area-title {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.h3-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.h3-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.street-address {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<section class="quick-access">
|
||||
<h2 class="heading">Quick Access</h2>
|
||||
<section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
|
||||
<div class="shortcuts">
|
||||
<input type="button" id="maintenance-visits" value="Maintenance Visits">
|
||||
<input type="button" id="production-orders" value="Production Orders">
|
||||
<input type="button" id="issue-slips" value="Assets">
|
||||
<input type="button" id="solutions" value="Solutions">
|
||||
<input type="button" id="issue-slips" value="Issue Slips">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits" value="Maintenance Visits">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders" value="Production Orders">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Assets">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="Solutions">
|
||||
<input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Issue Slips">
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -14,6 +14,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -35,16 +37,31 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.heading {
|
||||
color: #fff;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: 400 1rem/2rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.heading-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.heading-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -64,10 +81,18 @@ input {
|
||||
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;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
color: #fff;
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
color: #000;
|
||||
background-color: #E4E4E4;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div class="data">
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<table class="data-table" id="client-table">
|
||||
<tr class="table-row" id="table-head">
|
||||
<th class="ID">ID</th>
|
||||
<th class="Name">Name</th>
|
||||
<tr :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="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-1">
|
||||
<td class="ID">...</td>
|
||||
<td class="Name">...</td>
|
||||
</tr>
|
||||
<tr class="table-row" id="row-2">
|
||||
<td class="ID">...</td>
|
||||
<td class="Name">...</td>
|
||||
<tr :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="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -20,6 +22,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -29,8 +33,6 @@ export default {
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
@ -43,9 +45,16 @@ export default {
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -56,35 +65,65 @@ export default {
|
||||
.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;
|
||||
}
|
||||
|
||||
#table-head {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-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%;
|
||||
}
|
||||
|
||||
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,7 +1,7 @@
|
||||
<template>
|
||||
<aside
|
||||
: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">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
||||
</div>
|
||||
@ -142,7 +142,7 @@ aside.is-expanded {
|
||||
}
|
||||
|
||||
|
||||
.toggle {
|
||||
.toggleNavbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 2.5rem;
|
||||
@ -237,6 +237,13 @@ a {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
|
||||
.back-darkmode:hover,
|
||||
.back-lightmode:hover,
|
||||
.indicator-darkmode:hover,
|
||||
.indicator-lightmode:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 1.25rem;
|
||||
@ -267,4 +274,5 @@ img {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -7,6 +7,7 @@
|
||||
"name": "nuxt-app",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@vueform/toggle": "^2.1.4",
|
||||
"leading-trim": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -2806,6 +2807,11 @@
|
||||
"integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
|
||||
"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": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueform/toggle": "^2.1.4",
|
||||
"leading-trim": "^1.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,15 @@
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<AssetTable />
|
||||
<AssetTableNoClient />
|
||||
<Asset />
|
||||
<HardwareSpecifications />
|
||||
<SoftwareSpecifications />
|
||||
<NetworkSpecifications />
|
||||
<ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
|
||||
<AssetTable v-if="onAssetlist"/>
|
||||
<AssetTableNoClient v-if="onCustomerAssetlist"/>
|
||||
<Asset v-if="onAsset"/>
|
||||
<HardwareSpecifications v-if="onAsset"/>
|
||||
<SoftwareSpecifications v-if="onAsset"/>
|
||||
<NetworkSpecifications v-if="onAsset"/>
|
||||
<AssetSearch v-if="onSolutionlistAsset"/>
|
||||
<AssetSolutionList v-if="onSolutionlistAsset"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -26,12 +28,20 @@ import Asset from "../components/server/Asset.vue";
|
||||
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
|
||||
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
|
||||
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
|
||||
import AssetSearch from "../components/AssetSearch.vue";
|
||||
import AssetSolutionList from "../components/server/AssetSolutionList.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
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>
|
||||
|
||||
@ -4,8 +4,9 @@
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<Client />
|
||||
<ClientQuickAccess />
|
||||
<ClientTable v-if="onCustomerlist"/>
|
||||
<Client v-if="onCustomer"/>
|
||||
<ClientQuickAccess v-if="onCustomer"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -25,6 +26,10 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onCustomerlist = ref(true)
|
||||
const onCustomer = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -25,12 +25,12 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<IssueSlipTable />
|
||||
<IssueSlipTableNoClient />
|
||||
<IssueSlip />
|
||||
<OrderingInformation />
|
||||
<Accounting />
|
||||
<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>
|
||||
@ -51,6 +51,11 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onIssueSliplist = ref(true)
|
||||
const onCustomerIssueSliplist = ref(false)
|
||||
const onIssueSlip = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -92,6 +97,7 @@ export default {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#active-page-name {
|
||||
|
||||
@ -25,10 +25,10 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<IssueTable />
|
||||
<Issue />
|
||||
<IssueVariants />
|
||||
<IssueVariant />
|
||||
<IssueTable v-if="onIssueItemList"/>
|
||||
<Issue v-if="onIssueItem"/>
|
||||
<IssueVariants v-if="onIssueItem"/>
|
||||
<IssueVariant v-if="onIssueItemVariant"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -47,6 +47,11 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onIssueItem = ref(false)
|
||||
const onIssueItemList = ref(true)
|
||||
const onIssueItemVariant = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -88,6 +93,7 @@ export default {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#active-page-name {
|
||||
@ -98,7 +104,7 @@ export default {
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.h1-darkmode {
|
||||
|
||||
@ -25,15 +25,15 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<MaintenanceVisitsTemplateTable />
|
||||
<MaintenanceVisitsTemplateTableNoClient />
|
||||
<MaintenanceVisitsTemplate />
|
||||
<TemplateChecklist />
|
||||
<TemplateSearch />
|
||||
<MaintenanceVisitsInstanceTable />
|
||||
<MaintenanceVisitsInstance />
|
||||
<InstanceChecklist />
|
||||
<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>
|
||||
@ -57,6 +57,13 @@ definePageMeta({
|
||||
})
|
||||
|
||||
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>
|
||||
|
||||
@ -25,15 +25,15 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<ProductionOrdersTemplateTable />
|
||||
<ProductionOrdersTemplateTableNoClient />
|
||||
<ProductionOrdersTemplate />
|
||||
<TemplateChecklist />
|
||||
<TemplateSearch />
|
||||
<ProductionOrdersInstanceTable />
|
||||
<ProductionOrdersInstance />
|
||||
<InstanceChecklist />
|
||||
<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>
|
||||
@ -57,6 +57,13 @@ definePageMeta({
|
||||
})
|
||||
|
||||
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>
|
||||
|
||||
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>
|
||||
@ -4,11 +4,11 @@
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch />
|
||||
<SolutionTable />
|
||||
<SolutionTableNoClient />
|
||||
<Solution />
|
||||
<SolutionChecklist />
|
||||
<ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
|
||||
<SolutionTable v-if="onSolutionlist"/>
|
||||
<SolutionTableNoClient v-if="onCustomerSolutionlist"/>
|
||||
<Solution v-if="onSolution"/>
|
||||
<SolutionChecklist v-if="onSolution"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -28,6 +28,11 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onSolutionlist = ref(true)
|
||||
const onCustomerSolutionlist = ref(false)
|
||||
const onSolution = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -8,6 +8,7 @@ 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({
|
||||
history: createWebHistory(),
|
||||
@ -47,6 +48,10 @@ const router = createRouter({
|
||||
{
|
||||
path: '/clients',
|
||||
component: ClientsPage
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
component: SettingsPage
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user