Implement info view

dashboard/src/views/AppConfigureView.vue

@@ -6,14 +6,15 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ButtonGroup, TabView } from 'pankow';
-import Section from '../components/Section.vue';
 import Info from '../components/app/Info.vue';
 import AppsModel from '../models/AppsModel.js';
 import { APP_TYPES } from '../constants.js';
 
 const appsModel = AppsModel.create();
+
+const tabView = useTemplateRef('tabView');
 const tabs = ref({
   info: t('app.infoTabTitle'),
   display: t('app.displayTabTitle'),
@@ -33,7 +34,6 @@ const tabs = ref({
   eventlog: t('app.eventlogTabTitle'),
   uninstall: t('app.uninstallTabTitle'),
 });
-const view = ref('info');
 const id = ref('');
 const app = ref({});
 const link = ref('');
@@ -103,22 +103,23 @@ onMounted(async () => {
   if (parts.length !== 2) return;
 
   id.value = parts[0];
-  view.value = parts[1];
 
   await refresh();
+
+  tabView.value.open(parts[1] || 'info');
 });
 
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <div style="display: flex; margin-bottom: 20px; justify-content: space-between;">
       <div style="display: flex;">
         <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="width: 64px"/>
         <h2>{{ app.label || app.fqdn }}</h2>
       </div>
 
-      <div style="display: flex; gap: 10px; align-items: center; margin-right: 20px;">
+      <div style="display: flex; gap: 10px; align-items: center;">
         <Button outline tool
           @click="onToggleRunState()"
           :disabled="app.taskId || app.error || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
@@ -136,7 +137,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <TabView :tabs="tabs" default-active="info">
+    <TabView ref="tabView" :tabs="tabs">
       <template #info><Info :app="app"/></template>
       <template #display>Display</template>
       <template #location></template>