Panels V1: basic panel overview, basic binding of macros to buttons, basic panel-view.

fe/src/views/PanelsView.vue

@@ -1,19 +1,62 @@
 <template>
-  <div id="macros" class="panel">
-    <h1 class="panel__title">
-      Panels <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
-    </h1>
-    <div class="panel__content !p-0">
-      <div class="macro-panel__content">
-        <PanelsOverview />
+  <div id="panels" class="panel">
+    <h1 class="flex items-end justify-between !w-full panel__title">
+      <div>
+        Panels
+        <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
       </div>
+      <ButtonComp
+        v-if="panel.function != 'overview'"
+        variant="subtle"
+        size="sm"
+        @click="router.push('/panels')"
+      >
+        <IconArrowLeft /> Overview
+      </ButtonComp>
+    </h1>
+    <div :class="`panel__content !p-0 !pt-4 ${panel.function == 'overview' ?? '!pr-4'}`">
+      <PanelsOverview v-if="panel.function == 'overview'" />
+      <PanelEdit v-if="panel.function == 'edit'" :dirname="panel.dirname" />
+      <PanelView v-if="panel.function == 'preview'" :dirname="panel.dirname" />
     </div>
   </div>
 </template>
 
 <script setup>
+import ButtonComp from '@/components/base/ButtonComp.vue'
+import PanelEdit from '@/components/panels/PanelEdit.vue'
+import PanelView from '@/components/panels/PanelView.vue'
 import PanelsOverview from '@/components/panels/PanelsOverview.vue'
 import { isLocal } from '@/services/ApiService'
+import { IconArrowLeft } from '@tabler/icons-vue'
+import { onMounted, onUpdated, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const panel = reactive({
+  function: '',
+  dirname: '',
+})
+
+onMounted(() => {
+  setVarsByRoute()
+})
+
+onUpdated(() => {
+  setVarsByRoute()
+})
+
+const setVarsByRoute = () => {
+  if (route.name.includes('panel-')) {
+    panel.function = route.name == 'panel-edit' ? 'edit' : 'preview'
+  } else {
+    panel.function = 'overview'
+  }
+
+  panel.dirname = route.params.dirname
+}
 </script>
 
 <style scoped>