@gxp-dev/tools 2.0.5

package/runtime/PortalContainer.vue

@@ -0,0 +1,326 @@
+<template>
+    <div id="app">
+        <!-- Dev Tools Modal -->
+        <DevToolsModal
+            v-if="showDevTools"
+            :store="gxpStore"
+            :current-layout="currentLayoutName"
+            @close="showDevTools = false"
+            @change-layout="changeLayout"
+        />
+
+        <!-- Main Application -->
+        <component
+            :is="currentLayout"
+            :usr-lang="userLanguage"
+            :portal-settings="themeSettings"
+            :portal-language="portalStringsList"
+            :portal-navigation="portalNavigationList"
+            :portal-assets="portalAssetList"
+        >
+            <!-- Your Custom Plugin Content -->
+            <Plugin
+                :router="mockRouter"
+            />
+        </component>
+
+        <!-- Dev Tools Toggle Button (visible in corner) -->
+        <button
+            class="gx-devtools-trigger"
+            @click="showDevTools = true"
+            title="Open Dev Tools (Ctrl+Shift+D)"
+        >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="3"/>
+                <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+            </svg>
+        </button>
+    </div>
+</template>
+
+<style scoped>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.gx-devtools-trigger {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: #1e1e1e;
+    border: 2px solid #3d3d3d;
+    color: #61dafb;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99998;
+    transition: all 0.2s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.gx-devtools-trigger:hover {
+    background: #2d2d2d;
+    border-color: #61dafb;
+    transform: scale(1.1);
+}
+
+.gx-devtools-trigger svg {
+    animation: spin 10s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+</style>
+
+<script setup>
+import { ref, shallowRef, onMounted, onUnmounted } from "vue";
+
+// These imports use aliases configured in vite.config.js
+// @/ points to the client project's src/ directory
+// @layouts/ points to the client project's theme-layouts/ directory
+import Plugin from "@/Plugin.vue";
+import "@layouts/AdditionalStyling.css";
+import SystemLayout from "@layouts/SystemLayout.vue";
+import PrivateLayout from "@layouts/PrivateLayout.vue";
+import PublicLayout from "@layouts/PublicLayout.vue";
+
+// Dev Tools
+import DevToolsModal from "./dev-tools/DevToolsModal.vue";
+
+// Initialize the GxP store from client project's stores/index.js
+// which re-exports useGxpStore from either the toolkit or a local copy
+import { useGxpStore } from "@/stores/index.js";
+window.useGxpStore = { useGxpStore };
+// App state management
+const showDevTools = ref(false);
+const currentLayout = shallowRef(PublicLayout);
+const currentLayoutName = ref('public');
+const currentPage = ref('start');
+const isLoading = ref(false);
+const loadingMessage = ref('Loading...');
+
+// Layout management
+const changeLayout = (layout) => {
+    currentLayoutName.value = layout;
+    switch (layout) {
+        case 'system':
+            currentLayout.value = SystemLayout;
+            break;
+        case 'private':
+            currentLayout.value = PrivateLayout;
+            break;
+        default:
+            currentLayout.value = PublicLayout;
+            currentLayoutName.value = 'public';
+            break;
+    }
+    console.log(`[GxP] Layout changed to: ${currentLayoutName.value}`);
+};
+
+// Expose layout control to window
+window.changeLayout = changeLayout;
+
+// Initialize the GxP store
+const gxpStore = useGxpStore();
+gxpStore.sockets?.primary?.listenForStateChange?.((event) => {
+    console.log('🔗 GXP Store: State change event received', event);
+});
+
+// Navigation functions
+const goToPage = (page) => {
+    currentPage.value = page;
+};
+
+const resetToStart = () => {
+    currentPage.value = 'start';
+};
+
+const showLoading = (message = 'Loading...') => {
+    loadingMessage.value = message;
+    isLoading.value = true;
+};
+
+const hideLoading = () => {
+    isLoading.value = false;
+};
+
+const logout = () => {
+    alert("Logging Out");
+};
+
+// Mock router to simulate platform navigation during development
+const mockRouter = {
+    visit: (url, options = {}) => {
+        console.log(`🔗 Mock Router: Navigating to ${url}`, options);
+
+        // Simulate platform navigation behavior
+        if (options.onStart) options.onStart();
+
+        // Map platform routes to local pages
+        const routeMap = {
+            '/start': 'start',
+            '/plugin': 'plugin',
+            '/final': 'final',
+            '/camera': 'plugin',
+            '/results': 'plugin',
+            '/share': 'plugin',
+            '/instructions': 'plugin'
+        };
+
+        const targetPage = routeMap[url] || 'plugin';
+
+        // Simulate async navigation
+        setTimeout(() => {
+            goToPage(targetPage);
+            if (options.onFinish) options.onFinish();
+        }, 100);
+    }
+};
+
+const userLanguage = "";
+
+// Theme configuration
+const themeSettings = {
+    background_color: "#ffffff",
+    text_color: "#333333",
+    primary_color: "#FFD600",
+    start_background_color: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    start_text_color: "#ffffff",
+    final_background_color: "#4CAF50",
+    final_text_color: "#ffffff",
+};
+
+const themeColors = {
+    background_color: "#ffffff",
+};
+
+const permissionFlags = [];
+const sockets = {};
+const userAuth = {};
+
+// Update dependencyList with all the dependencies that will be set through the custom admin panel
+const dependencyList = {
+    "project_location": 4
+};
+
+// Update pluginVars with all the variables that will be set through the custom admin panel
+const pluginVars = {
+    "primary_color": "#FFD600",
+    "projectId": 39,
+    "apiPageAuthId": "46|j7vCLmx2KG70Ig8R5mtUcNMFcHExvFPZEOv31kKGe1033f2b",
+    "apiBaseUrl": "https://api.efcloud.app",
+    "idle_timeout": "30",
+};
+
+const userSession = "";
+
+const portalNavigationList = [
+    {title: "Start", route: "/start"},
+    {title: "Plugin", route: "/plugin"},
+    {title: "Final", route: "/final"},
+    {title: "Logout", route: "/logout", system_type: "logout"},
+];
+
+// Update assetList with all the assets that will be selected through the custom admin panel
+const appAssetList = {
+    "main_logo": "https://dashboard.eventfinity.test/storage/assets/69/2HyPwh1692319982.png",
+    "background_image": "https://dashboard.eventfinity.test/storage/assets/69/2HyPwh1692319982.png",
+};
+
+const portalAssetList = {
+    "main_logo": "https://dashboard.eventfinity.test/storage/assets/69/2HyPwh1692319982.png",
+    "background_image": "https://dashboard.eventfinity.test/storage/assets/69/2HyPwh1692319982.png",
+};
+
+const portalStringsList = {
+    "start_line_one": "Welcome to Your App!",
+    "start_line_two": "Touch to begin your experience",
+    "start_touch_start": "Get started by touching the button below",
+    "final_line_one": "Thank You!",
+    "final_line_two": "Your experience has been completed successfully",
+    "final_line_three": "Touch anywhere to start over",
+    "welcome_text": "Hello World",
+};
+
+const appStringsList = {
+    "start_line_one": "Welcome to Your App!",
+    "start_line_two": "Touch to begin your experience",
+    "start_touch_start": "Get started by touching the button below",
+    "final_line_one": "Thank You!",
+    "final_line_two": "Your experience has been completed successfully",
+    "final_line_three": "Touch anywhere to start over",
+    "welcome_text": "Hello World",
+};
+
+// Keyboard shortcut handler
+function handleKeydown(e) {
+    // Ctrl+Shift+D (or Cmd+Shift+D on Mac) to toggle dev tools
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
+        e.preventDefault();
+        showDevTools.value = !showDevTools.value;
+    }
+}
+
+// Setup window.gxDevTools API
+function setupDevToolsAPI() {
+    window.gxDevTools = {
+        open: () => {
+            showDevTools.value = true;
+            console.log('[GxP] Dev Tools opened');
+        },
+        close: () => {
+            showDevTools.value = false;
+            console.log('[GxP] Dev Tools closed');
+        },
+        toggle: () => {
+            showDevTools.value = !showDevTools.value;
+            console.log(`[GxP] Dev Tools ${showDevTools.value ? 'opened' : 'closed'}`);
+        },
+        isOpen: () => showDevTools.value,
+        // Convenience methods
+        store: () => gxpStore,
+        setLayout: (layout) => changeLayout(layout),
+        getLayout: () => currentLayoutName.value,
+    };
+
+    // Legacy support
+    window.toggleConfigPanel = () => window.gxDevTools.toggle();
+}
+
+// Expose functions for use in Plugin component
+defineExpose({
+    goToPage,
+    resetToStart,
+    showLoading,
+    hideLoading,
+    gxpStore
+});
+
+onMounted(() => {
+    // Setup keyboard shortcut
+    document.addEventListener('keydown', handleKeydown);
+
+    // Setup dev tools API
+    setupDevToolsAPI();
+
+    // Welcome message
+    console.log('%c GxP Developer Toolkit ', 'background: #61dafb; color: #1e1e1e; font-size: 14px; padding: 4px 8px; border-radius: 4px;');
+    console.log('%c Dev Tools: Press Ctrl+Shift+D or click the gear icon ', 'color: #888; font-size: 12px;');
+    console.log('%c Console API: window.gxDevTools.open() / .close() / .toggle() ', 'color: #888; font-size: 12px;');
+});
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeydown);
+    delete window.gxDevTools;
+    delete window.toggleConfigPanel;
+    delete window.changeLayout;
+});
+</script>

package/runtime/dev-tools/DevToolsModal.vue

@@ -0,0 +1,217 @@
+<template>
+    <Teleport to="body">
+        <div class="gx-devtools-overlay" @click.self="$emit('close')">
+            <div class="gx-devtools-modal">
+                <header class="gx-devtools-header">
+                    <h2>GxP Dev Tools</h2>
+                    <div class="gx-devtools-tabs">
+                        <button
+                            v-for="tab in tabs"
+                            :key="tab.id"
+                            :class="['gx-devtools-tab', { active: activeTab === tab.id }]"
+                            @click="activeTab = tab.id"
+                        >
+                            {{ tab.label }}
+                        </button>
+                    </div>
+                    <button class="gx-devtools-close" @click="$emit('close')" title="Close (Esc)">
+                        &times;
+                    </button>
+                </header>
+
+                <main class="gx-devtools-content">
+                    <StoreInspector
+                        v-if="activeTab === 'store'"
+                        :store="store"
+                    />
+                    <LayoutSwitcher
+                        v-else-if="activeTab === 'layout'"
+                        :current-layout="currentLayout"
+                        @change-layout="$emit('change-layout', $event)"
+                    />
+                    <SocketSimulator
+                        v-else-if="activeTab === 'socket'"
+                        :store="store"
+                    />
+                    <MockDataEditor
+                        v-else-if="activeTab === 'data'"
+                        :store="store"
+                    />
+                </main>
+
+                <footer class="gx-devtools-footer">
+                    <span class="gx-devtools-hint">
+                        Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> or <kbd>Esc</kbd> to close
+                    </span>
+                    <span class="gx-devtools-version">GxP Toolkit Dev Tools</span>
+                </footer>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import StoreInspector from './StoreInspector.vue';
+import LayoutSwitcher from './LayoutSwitcher.vue';
+import SocketSimulator from './SocketSimulator.vue';
+import MockDataEditor from './MockDataEditor.vue';
+
+const props = defineProps({
+    store: {
+        type: Object,
+        required: true
+    },
+    currentLayout: {
+        type: String,
+        default: 'public'
+    }
+});
+
+const emit = defineEmits(['close', 'change-layout']);
+
+const tabs = [
+    { id: 'store', label: 'Store' },
+    { id: 'layout', label: 'Layout' },
+    { id: 'socket', label: 'Socket' },
+    { id: 'data', label: 'Mock Data' }
+];
+
+const activeTab = ref('store');
+
+// Handle escape key to close
+function handleKeydown(e) {
+    if (e.key === 'Escape') {
+        emit('close');
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('keydown', handleKeydown);
+    // Prevent body scroll when modal is open
+    document.body.style.overflow = 'hidden';
+});
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeydown);
+    document.body.style.overflow = '';
+});
+</script>
+
+<style scoped>
+.gx-devtools-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+}
+
+.gx-devtools-modal {
+    background: #1e1e1e;
+    color: #e0e0e0;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 900px;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+}
+
+.gx-devtools-header {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    background: #2d2d2d;
+    border-bottom: 1px solid #3d3d3d;
+    gap: 16px;
+}
+
+.gx-devtools-header h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #61dafb;
+    white-space: nowrap;
+}
+
+.gx-devtools-tabs {
+    display: flex;
+    gap: 4px;
+    flex: 1;
+}
+
+.gx-devtools-tab {
+    background: transparent;
+    border: none;
+    color: #888;
+    padding: 6px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.gx-devtools-tab:hover {
+    color: #e0e0e0;
+    background: #3d3d3d;
+}
+
+.gx-devtools-tab.active {
+    color: #61dafb;
+    background: #3d3d3d;
+}
+
+.gx-devtools-close {
+    background: transparent;
+    border: none;
+    color: #888;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+.gx-devtools-close:hover {
+    color: #ff6b6b;
+}
+
+.gx-devtools-content {
+    flex: 1;
+    overflow: auto;
+    padding: 16px;
+    min-height: 400px;
+}
+
+.gx-devtools-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background: #2d2d2d;
+    border-top: 1px solid #3d3d3d;
+    font-size: 11px;
+    color: #666;
+}
+
+.gx-devtools-hint kbd {
+    background: #3d3d3d;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: inherit;
+    font-size: 10px;
+}
+
+.gx-devtools-version {
+    color: #555;
+}
+</style>