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

fixed cors headers

Browse Source
This commit is contained in:
selina.mail
2024-02-14 09:36:49 +01:00
parent 8d05df01e9
commit 2ced6f82d1
7 changed files with 387 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/server/Asset.vue
View File

@ -1,31 +1,48 @@
<template>
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
<h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
<h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
<input v-if="editable" v-model="item.assetName"
:class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
<div class="asset-data">
<div class="client-location">
<div class="data-field" id="client">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
<input v-if="editable" v-model="item.customer"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
<input v-if="editable" v-model="item.location"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="info">
<div class="id-type">
<div class="data-field" id="id">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
<input v-if="editable" v-model="item.primaryID"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="type">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
<input v-if="editable" v-model="item.type"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="data-field" id="remote-location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
<input v-if="editable" v-model="item.remoteLocation"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="rectangle-container">
@ -36,13 +53,19 @@
<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">{{ item.description }}</pre>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="description">{{ item.description }}</pre>
<input v-if="editable" v-model="item.description"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
</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">{{ item.notes }}</pre>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="notes">{{ item.notes }}</pre>
<input v-if="editable" v-model="item.notes"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
</div>
</div>
</div>
@ -56,6 +79,7 @@ import Axios from '../axios.config.js';
import serversideConfig from '../serversideConfig.js';
const darkMode = ref(true)
// const editable = ref(false)
const item = ref({});
// get config item from id
@ -74,13 +98,20 @@ const getItemById = async () => {
onMounted(() => {
getItemById();
// console.log(editable.value)
});
</script>
<script>
export default {
name: "Asset",
};
computed: {
editable() {
return this.$store.state.assetEditable
}
},
}
</script>
@ -114,6 +145,16 @@ export default {
sans-serif;
}
.asset-name-input {
padding: 1rem 0;
margin: 1rem;
font-size: initial;
letter-spacing: 5%;
text-decoration-line: underline;
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
.h2-darkmode {
color: #fff;
}
@ -133,6 +174,14 @@ export default {
border-radius: 0.625rem;
}
.h2-input-darkmode {
background-color: #212121;
}
.h2-input-lightmode {
background-color: #EBEBEB;
}
.data-field#street-name {
width: 70%;
}
@ -154,6 +203,10 @@ export default {
color: #000;
}
.input {
border: none;
}
.data {
display: flex;
flex-direction: row;

39
components/server/HardwareSpecifications.vue
View File

@ -5,21 +5,33 @@
<div class="model-CPU">
<div class="data-field" id="model">
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
<input v-if="editable" v-model="item.model"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="CPU">
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
<input v-if="editable" v-model="item.CPU"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="serial-number-RAM">
<div class="data-field" id="serial-number">
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
<input v-if="editable" v-model="item.serialnumber"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="RAM">
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
<input v-if="editable" v-model="item.RAM"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
</div>
@ -27,14 +39,20 @@
<div class="additional">
<div class="storage-configuration">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="storage-configuration">{{ item.storageConfiguration }}</pre>
<input v-if="editable" v-model="item.storageConfiguration"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="storage-configuration">
</div>
</div>
<div class="additional">
<div class="miscellaneous">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">{{ item.miscellaneous }}</pre>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="miscellaneous">{{ item.miscellaneous }}</pre>
<input v-if="editable" v-model="item.miscellaneous"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
</div>
</div>
</div>
@ -80,6 +98,11 @@ onMounted(() => {
<script>
export default {
name: "HardwareSpecifications",
computed: {
editable() {
return this.$store.state.assetEditable
}
},
};
</script>
@ -147,6 +170,10 @@ export default {
font: 400 0.75rem/250% Overpass, sans-serif;
}
.input {
border: none;
}
.data-darkmode {
background-color: #212121;
color: #fff;

1
components/server/NetworkSpecifications.vue
View File

@ -47,7 +47,6 @@ const getItemById = async () => {
`https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
);
item.value = response.data;
console.log(item.value)
if ((item.value.networkBool == 1) && (item.value.IPv4 === (null | "")) && (item.value.IPv6 === (null | "")) && (item.value.subnetmask === (null | "")) && (item.value.MAC === (null | ""))) {
item.value.networkBool = 0;
networkBoolean.value = false;

510
layouts/Actionbar.vue
View File

@ -1,79 +1,91 @@
<template>
<aside :class="[ 'actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleActionbar">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
<aside
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
</div>
<nav class="actions" >
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="search" >
<nav class="actions">
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
<div class="icon" id="search-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Search-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Search</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="filter" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter">
<div class="icon" id="filter-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Filter-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Filter</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="instances" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
<div class="icon" id="instances-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Instances</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="attachments" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<div class="icon" id="attachments-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Attachments-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Attachments</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="sell" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
<div class="icon" id="sell-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Sell-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Sell</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="archive" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
<div class="icon" id="archive-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Archive-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Archive</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="new" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new">
<div class="icon" id="new-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">New</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="edit" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
<div class="icon" id="edit-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Edit-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Edit</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
</Transition>
</button>
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="delete" >
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete">
<div class="icon" id="delete-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Delete-Icon.svg" />
</div>
<Transition name="fade" >
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Delete</pre>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
</Transition>
</button>
</nav>
@ -84,228 +96,256 @@
<script>
export default {
name: "Actionbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleActionbar() {
console.log('Actionbar toggled');
this.isExpanded = !this.isExpanded;
},
export default {
name: "Actionbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleActionbar() {
console.log('Actionbar toggled');
this.isExpanded = !this.isExpanded;
},
}
toggleEditable() {
this.$store.commit('toggleEditableAsset')
}
},
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
aside.actionbar {
display: flex;
flex-direction: column;
position: sticky;
top: 5rem;
height: fit-content;
width: fit-content;
inline-size: fit-content;
border-radius: 0.625rem;
flex: 0 0 0;
align-items: stretch;
justify-content: center;
padding: 1.875rem 0.625rem;
gap: 1.25rem;
transition: all 10s ease-in-out 0s;
overflow: clip;
}
.actionbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
.actionbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF;
}
aside.is-expanded {
animation: expand 0.5s linear both;
}
aside.is-not-expanded {
animation: contract 0.5s linear both;
width: stretch;
inline-size: stretch;
}
aside.actionbar {
display: flex;
flex-direction: column;
position: sticky;
top: 5rem;
height: fit-content;
width: fit-content;
inline-size: fit-content;
border-radius: 0.625rem;
flex: 0 0 0;
align-items: stretch;
justify-content: center;
padding: 1.875rem 0.625rem;
gap: 1.25rem;
transition: all 10s ease-in-out 0s;
overflow: clip;
}
.actionbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
.actionbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF;
}
aside.is-expanded {
animation: expand 0.5s linear both;
}
aside.is-not-expanded {
animation: contract 0.5s linear both;
width: stretch;
inline-size: stretch;
}
.actions {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 1.25rem 0;
gap: 1.25rem;
overflow: clip;
}
.actions {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 1.25rem 0;
gap: 1.25rem;
overflow: clip;
}
button {
display: flex;
flex-direction: row;
align-self: stretch;
height: 1.875rem;
border-radius: 0.625rem;
align-items: center;
justify-content: flex-start;
border: none;
transition: 0.2s ease-in-out;
overflow: clip;
gap: 0.125rem
}
.button-darkmode {
background-color: #2C2C2C;
}
.button-lightmode {
background-color: #FFFFFF;
}
.button-darkmode:hover, .indicator-darkmode:hover {
background-color: #444444;
}
.button-lightmode:hover, .indicator-lightmode:hover {
background-color: #ACACAC;
}
.is-not-expanded > button {
align-self: center;
gap: 0.5rem;
}
button {
display: flex;
flex-direction: row;
align-self: stretch;
height: 1.875rem;
border-radius: 0.625rem;
align-items: center;
justify-content: flex-start;
border: none;
transition: 0.2s ease-in-out;
overflow: clip;
gap: 0.125rem
}
.button-darkmode {
background-color: #2C2C2C;
}
.button-lightmode {
background-color: #FFFFFF;
}
.button-darkmode:hover,
.indicator-darkmode:hover {
background-color: #444444;
}
.button-lightmode:hover,
.indicator-lightmode:hover {
background-color: #ACACAC;
}
.is-not-expanded>button {
align-self: center;
gap: 0.5rem;
}
.icon {
display: flex;
flex-direction: row;
/*width: 0.875rem;*/
height: 1.875rem;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
transition: padding 0.5s linear
}
#indicator-icon {
width: 1.875rem;
height: 1.875rem;
border-radius: 0.3125rem;
transition: 0.2s ease-in-out;
}
.is-not-expanded .icon {
align-self: center;
padding: 0 0.375rem;
}
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
}
.icon {
display: flex;
flex-direction: row;
/*width: 0.875rem;*/
height: 1.875rem;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
transition: padding 0.5s linear
}
img {
width: 0.875rem;
height: 0.875rem;
object-fit: contain;
object-position: center;
overflow: hidden;
}
#indicator-icon > img {
height: 1.25rem;
}
.img-darkmode {
filter: invert(100%);
}
#indicator-icon {
width: 1.875rem;
height: 1.875rem;
border-radius: 0.3125rem;
transition: 0.2s ease-in-out;
}
.is-not-expanded .icon {
align-self: center;
padding: 0 0.375rem;
}
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
}
img {
width: 0.875rem;
height: 0.875rem;
object-fit: contain;
object-position: center;
overflow: hidden;
}
#indicator-icon>img {
height: 1.25rem;
}
.img-darkmode {
filter: invert(100%);
}
.label {
display: inline-flex;
min-width: 0;
padding: 0rem 0.3125rem 0rem 0rem;
letter-spacing: 5%;
align-self: center;
white-space: nowrap;
font: 400 0.875rem/1.25rem Overpass, sans-serif;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
.label {
display: inline-flex;
min-width: 0;
padding: 0rem 0.3125rem 0rem 0rem;
letter-spacing: 5%;
align-self: center;
white-space: nowrap;
font: 400 0.875rem/1.25rem Overpass, sans-serif;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
max-width: 0;
}
.fade-enter-active {
transition: all 0.75s;
overflow: clip;
animation: fade-in 0.5s linear forwards;
}
.fade-leave-active {
transition: all 0.75s;
animation: fade-out 0.5s linear forwards;
}
.fade-move {
transition: transform 5s
}
@keyframes expand {
from {
max-inline-size: 3.25rem;
max-width: 3.25rem;
}
.fade-enter-to, .fade-leave-from {
opacity: 1;
to {
max-inline-size: 9.0625rem;
max-width: 9.0625rem;
}
}
@keyframes contract {
from {
max-inline-size: 9.0625rem;
max-width: 9.0625rem;
}
to {
max-inline-size: 3.25rem;
max-width: 3.25rem;
}
}
@keyframes fade-in {
from {
max-width: 0;
}
.fade-enter-active {
transition: all 0.75s;
overflow: clip;
animation: fade-in 0.5s linear forwards;
}
.fade-leave-active {
transition: all 0.75s;
animation: fade-out 0.5s linear forwards;
}
.fade-move {
transition: transform 5s
max-inline-size: 0;
}
@keyframes expand {
from {
max-inline-size: 3.25rem;
max-width: 3.25rem;
}
to {
max-inline-size: 9.0625rem;
max-width: 9.0625rem;
}
to {
max-width: 7.5rem;
width: fit-content;
}
@keyframes contract {
from {
max-inline-size: 9.0625rem;
max-width: 9.0625rem;
}
to {
max-inline-size: 3.25rem;
max-width: 3.25rem;
}
}
@keyframes fade-out {
from {
max-width: 7.5rem;
width: fit-content;
}
@keyframes fade-in {
from {
max-width: 0;
max-inline-size: 0;
}
to {
max-width: 7.5rem;
width: fit-content;
}
to {
max-width: 0;
max-inline-size: 0;
}
@keyframes fade-out {
from {
max-width: 7.5rem;
width: fit-content;
}
to {
max-width: 0;
max-inline-size: 0;
}
}
</style>
}</style>

2
pages/assets.vue
View File

@ -40,7 +40,7 @@ const darkMode = ref(true)
// to render the right components
const onAssetlist = ref(true)
const onCustomerAssetlist = ref(false)
const onAsset = ref(false)
const onAsset = ref(true)
const onSolutionlistAsset = ref(false)
</script>

24
routerFrontend/index.js
View File

@ -13,6 +13,10 @@ import SettingsPage from '../pages/settings.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/asset',
component: AssetPage
},
{
path: '/login',
component: LoginPage
@ -20,11 +24,11 @@ const router = createRouter({
{
path: '/home',
component: HomePage
},
},
{
path: '/productionOrders',
component: ProductionOrdersPage
},
},
{
path: '/maintenanceVisits',
component: MaintenanceVisitsPage
@ -32,31 +36,27 @@ const router = createRouter({
{
path: '/assets',
component: AssetPage
},
{
path: '/chosenAsset',
component: AssetPage
},
},
{
path: '/solutions',
component: SolutionPage
},
},
{
path: '/issueSlips',
component: IssueSlipPage
},
},
{
path: '/issues',
component: IssuesPages
},
},
{
path: '/clients',
component: ClientsPage
},
},
{
path: '/settings',
component: SettingsPage
},
},
]
})

5
server/api/login.ts
View File

@ -5,11 +5,14 @@ export default defineEventHandler(async (event) => {
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
'Access-Control-Allow-Headers': 'authorization, content-type',
'Access-Control-Allow-Headers': 'origin, authorization, content-type',
'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'Access-Control-Max-Age': '86400',
};
setResponseHeaders(event, headers)
console.log(event)
if (!loginSuccessful) {
throw createError({
statusCode: 400,