adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

added settings Page and components

Browse Source
This commit is contained in:
selina.mail
2023-12-06 11:51:42 +01:00
parent 45c651e853
commit 6a4a799c85
21 changed files with 1301 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
components/server/AssetSolutionList.vue Normal file
View 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>

94
components/server/Client.vue
View File

@ -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;

43
components/server/ClientQuickAccess.vue
View File

@ -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>

73
components/server/ClientTable.vue
View File

@ -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
View 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
View 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
View 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
View 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>