WIP: panel management uix

fe/src/components/panels/PanelDetail.vue

@@ -0,0 +1,59 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { appUrl } from '@/services/ApiService'
+import axios from 'axios'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+
+const panel = reactive({
+  style: '',
+  styleEl: null,
+  html: '',
+})
+
+const testPanel = ref()
+
+onMounted(() => {
+  axios.post(appUrl() + '/panel/get').then(async (data) => {
+    // console.log(data.data.html)
+    if (data.data) {
+      setPanelStyle(data.data.css)
+      panel.html = data.data.html
+
+      await nextTick()
+
+      addButtonEventListeners()
+    }
+  })
+})
+
+const setPanelStyle = (styleStr) => {
+  const styleEl = document.createElement('style')
+  styleEl.setAttribute('custom_panel_style', true)
+  styleEl.innerHTML = styleStr
+  document.head.appendChild(styleEl)
+
+  panel.styleEl = styleEl
+}
+
+const addButtonEventListeners = () => {
+  testPanel.value.querySelectorAll('[mcrm__button]').forEach((button) => {
+    button.addEventListener('click', () => {
+      console.log(button.id)
+      if (button.id == 'button_1') {
+        axios.post(appUrl() + '/macro/play', { macro: 'task_manager' })
+      }
+    })
+  })
+}
+</script>
+
+<style>
+@reference "@/assets/main.css";
+
+[mcrm__button] {
+  @apply cursor-pointer;
+}
+</style>

fe/src/components/panels/PanelsOverview.vue

@@ -0,0 +1,48 @@
+<template>
+  <div id="panels-overview">
+    <!-- <AlertComp v-if="Object.keys(panels.list).length == 0" type="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="" />
+          <h4>{{ panel.name }}</h4>
+          <p>{{ panel.description }}</p>
+        </div>
+        <!-- </router-link> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usePanelStore } from '@/stores/panel'
+import { onMounted, reactive } from 'vue'
+import AlertComp from '../base/AlertComp.vue'
+
+const panel = usePanelStore()
+
+const panels = reactive({
+  list: {},
+})
+
+onMounted(async () => {
+  const panelList = await panel.getPanels()
+  console.log(panelList)
+
+  panels.list = panelList
+})
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.panel-list {
+  @apply grid
+  grid-cols-2
+  md:grid-cols-4
+  lg:grid-cols-6
+  gap-4
+  size-full;
+}
+</style>

fe/src/stores/panel.js

@@ -0,0 +1,24 @@
+import { appUrl } from '@/services/ApiService'
+import axios from 'axios'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const usePanelStore = defineStore('panel', () => {
+  const list = ref([])
+
+  const getPanels = async () => {
+    console.log(list.value.length)
+
+    if (list.value.length > 0) return list.value
+
+    const resp = await axios.post(appUrl() + '/panel/list')
+    list.value = resp.data.data
+
+    return list.value
+  }
+
+  return {
+    list,
+    getPanels,
+  }
+})

fe/src/views/PanelsView.vue

@@ -1,7 +1,21 @@
 <template>
-  <div></div>
+  <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>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import PanelsOverview from '@/components/panels/PanelsOverview.vue'
+import { isLocal } from '@/services/ApiService'
+</script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+@reference "@/assets/main.css";
+</style>