Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
bwnyasse
2025-11-14 12:59:00 -05:00
parent 0921ae9fc3
commit 20c29dc695
13 changed files with 463 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
firebase/internal-launchpad/index.html
View File

@@ -11,7 +11,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<!-- Mermaid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
<!-- Custom Tailwind Config -->
<script>
@@ -121,43 +121,7 @@
<span>Home</span>
</a>
<div class="mt-6">
<h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Static Diagrams</h3>
<a href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview', 'svg')"
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<span class="text-sm">High-Level Overview</span>
</a>
<a href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle', 'svg')"
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
<span class="text-sm">Shift Lifecycle</span>
</a>
<a href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete', 'svg')"
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<span class="text-sm">Invoice Workflow</span>
</a>
<a href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow', 'svg')"
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<span class="text-sm">Complete Workflow</span>
</a>
</div>
<!-- Dynamic diagrams section -->
<!-- Dynamic diagrams section - ALL diagrams loaded here -->
<div id="dynamic-diagrams-section"></div>
</nav>
@@ -393,7 +357,7 @@
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<script>
let mermaidDiagrams = [];
let allDiagrams = [];
const homeView = document.getElementById('home-view');
const diagramViewer = document.getElementById('diagram-viewer');
const diagramContainer = document.getElementById('diagram-container');
@@ -422,8 +386,7 @@
diagrams.forEach(diagram => {
const parts = diagram.path.split('/');
const relevantParts = parts.slice(2, -1);
const filename = parts[parts.length - 1].replace('.mermaid', '');
const relevantParts = parts.slice(2, -1); // Remove 'assets/diagrams/' and filename
let current = hierarchy;
relevantParts.forEach(part => {
@@ -433,21 +396,15 @@
current = current[part]._children;
});
const lastLevel = relevantParts.length > 0 ?
relevantParts.reduce((acc, part) => acc[part]._children, hierarchy) :
hierarchy;
// Add the item to appropriate level
if (relevantParts.length > 0) {
const parentKey = relevantParts[relevantParts.length - 1];
if (!hierarchy[relevantParts[0]]) {
hierarchy[relevantParts[0]] = { _items: [], _children: {} };
}
let parent = hierarchy[relevantParts[0]];
for (let i = 1; i < relevantParts.length; i++) {
parent = parent._children[relevantParts[i]];
}
parent._items.push(diagram);
} else {
// Root level diagrams
if (!hierarchy._root) {
hierarchy._root = { _items: [], _children: {} };
}
@@ -460,6 +417,19 @@
// Create navigation from hierarchy
function createNavigation(hierarchy, parentElement, level = 0) {
// First, show root level items if any
if (hierarchy._root && hierarchy._root._items.length > 0) {
const mainHeading = document.createElement('div');
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
mainHeading.textContent = 'Diagrams';
parentElement.appendChild(mainHeading);
hierarchy._root._items.forEach(diagram => {
createDiagramLink(diagram, parentElement, 0);
});
}
// Then process nested categories
Object.keys(hierarchy).forEach(key => {
if (key === '_items' || key === '_children' || key === '_root') return;
@@ -470,34 +440,49 @@
heading.textContent = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
parentElement.appendChild(heading);
// Add items in this section
if (section._items && section._items.length > 0) {
section._items.forEach(diagram => {
const link = document.createElement('a');
link.href = '#';
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
(level > 0 ? ' pl-8' : '');
link.onclick = (e) => {
e.preventDefault();
showView('diagram', link, diagram.path, diagram.title, 'mermaid');
};
link.innerHTML = `
<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<span class="text-sm">${diagram.title}</span>
`;
parentElement.appendChild(link);
createDiagramLink(diagram, parentElement, level);
});
}
// Recursively add children
if (section._children && Object.keys(section._children).length > 0) {
createNavigation(section._children, parentElement, level + 1);
}
});
}
// Load and render dynamic diagrams navigation
async function loadDynamicDiagrams() {
// Helper function to create a diagram link
function createDiagramLink(diagram, parentElement, level) {
const link = document.createElement('a');
link.href = '#';
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
(level > 0 ? ' pl-8' : '');
link.onclick = (e) => {
e.preventDefault();
showView('diagram', link, diagram.path, diagram.title, diagram.type);
};
// Get icon based on type or custom icon
let iconSvg = '';
if (diagram.type === 'svg') {
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>`;
} else {
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>`;
}
link.innerHTML = `${iconSvg}<span class="text-sm">${diagram.title}</span>`;
parentElement.appendChild(link);
}
// Load all diagrams from config
async function loadAllDiagrams() {
const dynamicSection = document.getElementById('dynamic-diagrams-section');
try {
@@ -506,19 +491,25 @@
throw new Error(`Failed to load diagrams config: ${response.status}`);
}
mermaidDiagrams = await response.json();
const text = await response.text();
console.log('Loaded config:', text);
allDiagrams = JSON.parse(text);
if (mermaidDiagrams.length > 0) {
const mainHeading = document.createElement('div');
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
mainHeading.textContent = 'Mermaid Diagrams';
dynamicSection.appendChild(mainHeading);
const hierarchy = buildDiagramHierarchy(mermaidDiagrams);
if (allDiagrams && allDiagrams.length > 0) {
const hierarchy = buildDiagramHierarchy(allDiagrams);
createNavigation(hierarchy, dynamicSection);
}
} catch (error) {
console.error('Error loading diagrams configuration:', error);
// Show a helpful message in the UI
const errorDiv = document.createElement('div');
errorDiv.className = 'px-4 py-3 mx-2 mt-4 text-xs text-amber-600 bg-amber-50 rounded-lg border border-amber-200';
errorDiv.innerHTML = `
<div class="font-semibold mb-1">⚠️ Diagrams</div>
<div>Unable to load diagrams-config.json</div>
<div class="mt-1 text-amber-500">${error.message}</div>
`;
dynamicSection.appendChild(errorDiv);
}
}
@@ -642,7 +633,7 @@
});
document.addEventListener('DOMContentLoaded', () => {
loadDynamicDiagrams();
loadAllDiagrams();
showView('home', document.getElementById('nav-home'));
});
</script>