implemented mode change

This commit is contained in:
2024-03-25 23:23:37 +01:00
parent 45a4b58f26
commit 3f88f6b821
71 changed files with 3020 additions and 1006 deletions

View File

@ -14,7 +14,8 @@
Version</th>
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
</tr>
<tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
id="row-1">
<td
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
<input type="text" v-model="item.software" @change="updateConfigItem()"
@ -30,7 +31,8 @@
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</td>
</tr>
<tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
id="row-1">
<td
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
{{ item.software }}</td>
@ -80,15 +82,17 @@
</div>
</section>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, watch } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const editable = computed(() => store.state.editable);
const chosenAssetId = computed(() => store.state.chosenAssetId);
const addBool = computed(() => store.state.new);
@ -98,7 +102,7 @@ const newSoftware = ref('');
const newVersion = ref('');
const newLicense = ref('');
const darkMode = ref(true)
const darkMode = ref('');
const item = ref({});
const softwareBoolean = ref(false)
@ -176,8 +180,28 @@ const updateConfigItem = async () => {
}
}
onMounted(() => {
getItemById();
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 () => {
getSession();
await getItemById();
});
</script>
@ -185,9 +209,9 @@ onMounted(() => {
export default {
name: "SoftwareSpecifications",
};
</script>
</script>
<style scoped>
.software-information {
display: flex;