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

implemented mode change

Browse Source
This commit is contained in:
selina.mail
2024-03-25 23:23:37 +01:00
parent 45a4b58f26
commit 3f88f6b821
71 changed files with 3020 additions and 1006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
components/server/CustomerEmployeeList.vue
View File

@ -3,35 +3,79 @@
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
<table class="data-table" id="customer-employee-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="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
<th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
<th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
<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>
<th
:class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
Department / Job Title</th>
<th
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
Pronouns</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
<td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
<td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
<td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
<td
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td
:class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
...</td>
<td
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
...</td>
</tr>
</table>
</section>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
<script setup>
import { ref, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const darkMode = ref('')
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
} else {
darkMode.value = false;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
});
</script>
<script>
export default {
name: "CustomerEmployeeList",
name: "CustomerEmployeeList",
};
</script>
</script>
<style scoped>
.data {
display: flex;
@ -43,8 +87,14 @@ export default {
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: #ffffff; }
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #ffffff;
}
@ -54,8 +104,14 @@ export default {
text-decoration-line: underline;
font: 400 1rem/1.875rem Overpass, sans-serif;
}
.label-darkmode { color: #ffffff; }
.label-lightmode { color: #000000; }
.label-darkmode {
color: #ffffff;
}
.label-lightmode {
color: #000000;
}
@ -80,14 +136,22 @@ export default {
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 {
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
width: 35%;
padding: 0;
@ -96,21 +160,36 @@ th, td {
letter-spacing: 0.02rem;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
.th-darkmode, .td-darkmode {
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
border-right: 0.0625rem solid #000000;
}
.th-lightmode, .td-lightmode {
.th-lightmode,
.td-lightmode {
color: #000000;
border-right: 0.0625rem solid #8e8e8e;
}
.ID { width: 20%; }
.Pronouns { width: 10%; }
.ID {
width: 20%;
}
.Pronouns-darkmode { border-right: none; }
.Pronouns-lightmode { border-right: none; }
.Pronouns {
width: 10%;
}
.Pronouns-darkmode {
border-right: none;
}
.Pronouns-lightmode {
border-right: none;
}
</style>