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

fe/src/components/panels/PanelsOverview.vue

@@ -1,15 +1,35 @@
 <template>
   <div id="panels-overview">
-    <!-- <AlertComp v-if="Object.keys(panels.list).length == 0" type="info">No panels found</AlertComp> -->
+    <AlertComp v-if="Object.keys(panels.list).length == 0" variant="info">
+      No panels found
+    </AlertComp>
     <div class="panel-list">
-      <div class="panel-item" v-for="(panel, i) in panels.list" :key="i">
-        <!-- <router-link :to="'/panel/' + panel.id"> -->
-        <div class="panel-item__content">
-          <img :src="panel.thumb" alt="" />
+      <div class="panel-item mcrm-block block__dark" v-for="(panel, i) in panels.list" :key="i">
+        <div class="panel-item__content" @click="panelItemClick(panel.dir)">
+          <div class="thumb">
+            <img v-if="panel.thumb" :src="`data:image/jpeg;base64,${panel.thumb}`" alt="" />
+            <IconLayoutGrid v-else />
+          </div>
           <h4>{{ panel.name }}</h4>
-          <p>{{ panel.description }}</p>
+          <div class="description" v-if="isLocal()">
+            <div class="content">
+              <strong class="block mb-1 text-slate-400">{{ panel.name }}</strong>
+              <hr class="mb-2 border-slate-600" />
+              <p v-if="panel.description != 'null'" class="text-slate-200">
+                {{ panel.description }}
+              </p>
+            </div>
+            <footer>
+              <ButtonComp variant="subtle" size="sm" :href="`/panel/view/${panel.dir}`">
+                <IconEye /> Preview
+              </ButtonComp>
+              <ButtonComp variant="primary" size="sm" :href="`/panel/edit/${panel.dir}`">
+                <IconPencil /> Edit
+              </ButtonComp>
+            </footer>
+          </div>
         </div>
-        <!-- </router-link> -->
+        <template v-if="!isLocal()"> </template>
       </div>
     </div>
   </div>
@@ -19,6 +39,10 @@
 import { usePanelStore } from '@/stores/panel'
 import { onMounted, reactive } from 'vue'
 import AlertComp from '../base/AlertComp.vue'
+import { IconEye, IconLayoutGrid, IconPencil } from '@tabler/icons-vue'
+import ButtonComp from '../base/ButtonComp.vue'
+import { isLocal } from '@/services/ApiService'
+import { useRouter } from 'vue-router'
 
 const panel = usePanelStore()
 
@@ -26,12 +50,20 @@ const panels = reactive({
   list: {},
 })
 
+const router = useRouter()
+
 onMounted(async () => {
-  const panelList = await panel.getPanels()
-  console.log(panelList)
+  const panelList = await panel.getList()
+  // console.log(panelList)
 
   panels.list = panelList
 })
+
+function panelItemClick(dir) {
+  if (isLocal()) return
+
+  router.push(`/panel/view/${dir}`)
+}
 </script>
 
 <style scoped>
@@ -43,6 +75,84 @@ onMounted(async () => {
   md:grid-cols-4
   lg:grid-cols-6
   gap-4
-  size-full;
+  w-full h-fit;
+}
+
+.panel-item {
+  @apply p-px 
+  overflow-hidden;
+
+  .thumb {
+    @apply flex 
+    justify-center
+    items-center
+    w-full
+    aspect-[4/3];
+
+    &:not(:has(img)) {
+      @apply bg-sky-950;
+    }
+
+    svg {
+      @apply size-12;
+    }
+  }
+
+  h4 {
+    @apply px-4 py-2
+    h-12
+    truncate;
+  }
+
+  &:hover .description {
+    @apply opacity-100;
+  }
+
+  .description {
+    @apply absolute
+    inset-0
+    size-full
+    pt-2
+    pr-1
+    pb-13
+    bg-slate-900/60
+    backdrop-blur-md
+    text-slate-100
+    opacity-0
+    transition-opacity
+    cursor-default
+    z-10;
+
+    .content {
+      @apply h-full
+      p-4
+      pt-2
+      overflow-y-auto;
+    }
+
+    footer {
+      @apply absolute
+      bottom-0 left-0
+      w-full
+      h-12
+      grid
+      grid-cols-2
+      bg-slate-900
+      border-t
+      border-slate-600;
+
+      .btn {
+        @apply size-full
+        rounded-none
+        justify-center
+        border-0;
+
+        &:last-child {
+          @apply border-l
+          border-slate-600;
+        }
+      }
+    }
+  }
 }
 </style>