added get functions
This commit is contained in:
@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Asset name</h2>
|
||||
<h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
|
||||
<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']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
|
||||
</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']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
|
||||
</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']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
|
||||
</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']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
|
||||
</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']">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rectangle-container">
|
||||
@ -36,13 +36,13 @@
|
||||
<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">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">{{ item.description }}</pre>
|
||||
</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">...</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">{{ item.notes }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,9 +51,30 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import serversideConfig from '../serversideConfig.js';
|
||||
|
||||
const darkMode = ref(true)
|
||||
const item = ref({});
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
// later itemIndex from route params
|
||||
let itemIndex = 9;
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
|
||||
);
|
||||
item.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getItemById();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user