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> <template>
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']"> <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="asset-data">
<div class="client-location"> <div class="client-location">
<div class="data-field" id="client"> <div class="data-field" id="client">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre> <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>
<div class="data-field" id="location"> <div class="data-field" id="location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre> <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> </div>
<div class="info"> <div class="info">
<div class="id-type"> <div class="id-type">
<div class="data-field" id="id"> <div class="data-field" id="id">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre> <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>
<div class="data-field" id="type"> <div class="data-field" id="type">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre> <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> </div>
<div class="data-field" id="remote-location"> <div class="data-field" id="remote-location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre> <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> </div>
<div class="rectangle-container"> <div class="rectangle-container">
@ -36,13 +53,19 @@
<div class="additional"> <div class="additional">
<div class="description"> <div class="description">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3> <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> </div>
<div class="additional"> <div class="additional">
<div class="notes"> <div class="notes">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3> <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> </div>
</div> </div>
@ -56,6 +79,7 @@ import Axios from '../axios.config.js';
import serversideConfig from '../serversideConfig.js'; import serversideConfig from '../serversideConfig.js';
const darkMode = ref(true) const darkMode = ref(true)
// const editable = ref(false)
const item = ref({}); const item = ref({});
// get config item from id // get config item from id
@ -74,13 +98,20 @@ const getItemById = async () => {
onMounted(() => { onMounted(() => {
getItemById(); getItemById();
// console.log(editable.value)
}); });
</script> </script>
<script> <script>
export default { export default {
name: "Asset", name: "Asset",
}; computed: {
editable() {
return this.$store.state.assetEditable
}
},
}
</script> </script>
@ -114,6 +145,16 @@ export default {
sans-serif; 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 { .h2-darkmode {
color: #fff; color: #fff;
} }
@ -133,6 +174,14 @@ export default {
border-radius: 0.625rem; border-radius: 0.625rem;
} }
.h2-input-darkmode {
background-color: #212121;
}
.h2-input-lightmode {
background-color: #EBEBEB;
}
.data-field#street-name { .data-field#street-name {
width: 70%; width: 70%;
} }
@ -154,6 +203,10 @@ export default {
color: #000; color: #000;
} }
.input {
border: none;
}
.data { .data {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

39
components/server/HardwareSpecifications.vue
View File

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

1
components/server/NetworkSpecifications.vue
View File

@ -47,7 +47,6 @@ const getItemById = async () => {
`https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}` `https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
); );
item.value = response.data; 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 | ""))) { 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; item.value.networkBool = 0;
networkBoolean.value = false; networkBoolean.value = false;

510
layouts/Actionbar.vue
View File

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

2
pages/assets.vue
View File

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

24
routerFrontend/index.js
View File

@ -13,6 +13,10 @@ import SettingsPage from '../pages/settings.vue';
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{
path: '/asset',
component: AssetPage
},
{ {
path: '/login', path: '/login',
component: LoginPage component: LoginPage
@ -20,11 +24,11 @@ const router = createRouter({
{ {
path: '/home', path: '/home',
component: HomePage component: HomePage
}, },
{ {
path: '/productionOrders', path: '/productionOrders',
component: ProductionOrdersPage component: ProductionOrdersPage
}, },
{ {
path: '/maintenanceVisits', path: '/maintenanceVisits',
component: MaintenanceVisitsPage component: MaintenanceVisitsPage
@ -32,31 +36,27 @@ const router = createRouter({
{ {
path: '/assets', path: '/assets',
component: AssetPage component: AssetPage
}, },
{
path: '/chosenAsset',
component: AssetPage
},
{ {
path: '/solutions', path: '/solutions',
component: SolutionPage component: SolutionPage
}, },
{ {
path: '/issueSlips', path: '/issueSlips',
component: IssueSlipPage component: IssueSlipPage
}, },
{ {
path: '/issues', path: '/issues',
component: IssuesPages component: IssuesPages
}, },
{ {
path: '/clients', path: '/clients',
component: ClientsPage component: ClientsPage
}, },
{ {
path: '/settings', path: '/settings',
component: SettingsPage 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]> = { const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de', '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-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'Access-Control-Max-Age': '86400',
}; };
setResponseHeaders(event, headers) setResponseHeaders(event, headers)
console.log(event)
if (!loginSuccessful) { if (!loginSuccessful) {
throw createError({ throw createError({
statusCode: 400, statusCode: 400,