60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<div class="px-4 py-5">
|
|
<h1 class="text-lg">
|
|
{{ $t('preview.title')}}
|
|
</h1>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div
|
|
class="flex bg-cover w-72 h-72 mb-7"
|
|
style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
|
|
<div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
|
|
<div class="self-center w-8 mb-1 opacity-50">
|
|
<img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
|
|
</div>
|
|
<h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
|
|
{{ feedbackConfig.pos }}</h2>
|
|
|
|
<div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
|
|
<DeviceBar class="self-center"/>
|
|
<div id="scales" class="flex self-center text-xs py-0" />
|
|
|
|
<div
|
|
v-for="profileConfig in profiles"
|
|
:key="profileConfig"
|
|
class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
|
|
{{ profileConfig.profileDesc }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
|
<h2>{{ $t('config_options.title') }}</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
|
import DeviceBar from '@/components/device/DeviceBar.vue'
|
|
|
|
export default {
|
|
name: 'DevicePreview',
|
|
components: { DeviceBar },
|
|
data() {
|
|
return {
|
|
profiles: [],
|
|
}
|
|
},
|
|
async created() {
|
|
try {
|
|
const res = await axios.get('http://localhost:3001/profiles/5867')
|
|
this.profiles = res.data
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
}
|
|
</script> |