f7c2027065
This commit introduces a new internal API test harness built with React and Vite. This harness provides a user interface for testing various API endpoints, including authentication, core integrations, and entity-related APIs. The harness includes the following features: - Firebase authentication integration for secure API testing. - A modular design with separate components for different API categories. - Form-based input for API parameters, allowing users to easily configure requests. - JSON-based response display for clear and readable API results. - Error handling and display for debugging purposes. - A navigation system for easy access to different API endpoints. - Environment-specific configuration for testing in different environments. This harness will enable developers to quickly and efficiently test API endpoints, ensuring the quality and reliability of the KROW backend services. The following files were added: - Makefile: Added targets for installing, developing, building, and deploying the API test harness. - firebase.json: Added hosting configurations for the API test harness in development and staging environments. - firebase/internal-launchpad/index.html: Updated with accordion styles and navigation for diagrams and documents. - internal-api-harness/.env.example: Example environment variables for the API test harness. - internal-api-harness/.gitignore: Git ignore file for the API test harness. - internal-api-harness/README.md: README file for the API test harness. - internal-api-harness/components.json: Configuration file for shadcn-ui components. - internal-api-harness/eslint.config.js: ESLint configuration file. - internal-api-harness/index.html: Main HTML file for the API test harness. - internal-api-harness/jsconfig.json: JSConfig file for the API test harness. - internal-api-harness/package.json: Package file for the API test harness. - internal-api-harness/postcss.config.js: PostCSS configuration file. - internal-api-harness/public/logo.svg: Krow logo. - internal-api-harness/public/vite.svg: Vite logo. - internal-api-harness/src/App.css: CSS file for the App component. - internal-api-harness/src/App.jsx: Main App component. - internal-api-harness/src/api/client.js: API client for making requests to the backend. - internal-api-harness/src/api/krowSDK.js: SDK for interacting with Krow APIs. - internal-api-harness/src/assets/react.svg: React logo. - internal-api-harness/src/components/ApiResponse.jsx: Component for displaying API responses. - internal-api-harness/src/components/Layout.jsx: Layout component for the API test harness. - internal-api-harness/src/components/ServiceTester.jsx: Component for testing individual services. - internal-api-harness/src/components/ui/button.jsx: Button component. - internal-api-harness/src/components/ui/card.jsx: Card component. - internal-api-harness/src/components/ui/collapsible.jsx: Collapsible component. - internal-api-harness/src/components/ui/input.jsx: Input component. - internal-api-harness/src/components/ui/label.jsx: Label component. - internal-api-harness/src/components/ui/select.jsx: Select component. - internal-api-harness/src/components/ui/textarea.jsx: Textarea component. - internal-api-harness/src/firebase.js: Firebase configuration file. - internal-api-harness/src/index.css: Main CSS file. - internal-api-harness/src/lib/utils.js: Utility functions. - internal-api-harness/src/main.jsx: Main entry point for the React application. - internal-api-harness/src/pages/ApiPlaceholder.jsx: Placeholder component for unimplemented APIs. - internal-api-harness/src/pages/EntityTester.jsx: Component for testing entity APIs. - internal-api-harness/src/pages/GenerateImage.jsx: Component for testing the Generate Image API. - internal-api-harness/src/pages/Home.jsx: Home page component. - internal-api-harness/src/pages/Login.jsx: Login page component. - internal-api-harness/src/pages/auth/GetMe.jsx: Component for testing the Get Me API. - internal-api-harness/src/pages/core/CreateSignedUrl.jsx: Component for testing the Create Signed URL API. - internal-api-harness/src/pages/core/InvokeLLM.jsx: Component for testing the Invoke LLM API. - internal-api-harness/src/pages/core/SendEmail.jsx: Component for testing the Send Email API. - internal-api-harness/src/pages/core/UploadFile.jsx: Component for testing the Upload File API. - internal-api-harness/src/pages/core/UploadPrivateFile.jsx: Component for testing the Upload Private File API. - internal-api-harness/tailwind.config.js: Tailwind CSS configuration file. - internal-api-harness/vite.config.js: Vite configuration file.
954 lines
48 KiB
HTML
954 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KROW Launchpad</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.svg">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Mermaid -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
|
|
|
|
<!-- Marked.js for Markdown parsing -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
<!-- Custom Tailwind Config -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
* {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.nav-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.badge-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
#diagram-container:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Accordion styles */
|
|
.accordion-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.875rem;
|
|
color: #4b5563; /* text-gray-600 */
|
|
text-align: left;
|
|
background-color: #f9fafb; /* bg-gray-50 */
|
|
border-radius: 0.5rem; /* rounded-lg */
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.accordion-button:hover {
|
|
background-color: #f3f4f6; /* bg-gray-100 */
|
|
}
|
|
.accordion-button .chevron {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.accordion-button[aria-expanded="true"] .chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
.accordion-panel {
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
max-height: 0;
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal-overlay {
|
|
backdrop-filter: blur(4px);
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.modal-content {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Markdown styling */
|
|
.markdown-content {
|
|
line-height: 1.7;
|
|
color: #374151;
|
|
}
|
|
|
|
.markdown-content h1 {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.2em;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h3 {
|
|
font-size: 1.25em;
|
|
font-weight: 600;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 0.5em;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h4 {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content p {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content ul, .markdown-content ol {
|
|
margin-bottom: 1em;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-content ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.markdown-content ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background-color: #f3f4f6;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 0.25em;
|
|
font-size: 0.9em;
|
|
font-family: 'Courier New', monospace;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
padding: 1em;
|
|
border-radius: 0.5em;
|
|
overflow-x: auto;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid #3b82f6;
|
|
padding-left: 1em;
|
|
margin: 1em 0;
|
|
color: #6b7280;
|
|
font-style: italic;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: #3b82f6;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.markdown-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content th, .markdown-content td {
|
|
border: 1px solid #e5e7eb;
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-content th {
|
|
background-color: #f9fafb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content hr {
|
|
border: none;
|
|
border-top: 2px solid #e5e7eb;
|
|
margin: 2em 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
|
|
<div class="flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-72 bg-white shadow-xl flex flex-col border-r border-gray-200">
|
|
<!-- Logo Section -->
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-center space-x-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center">
|
|
<img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-gray-900">KROW</h1>
|
|
<p class="text-xs text-gray-500">Launchpad</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto scrollbar-hide p-4" id="sidebar-nav">
|
|
<a href="#" id="nav-home" onclick="showView('home', this)"
|
|
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 bg-primary-50 border border-primary-200 font-medium mb-2">
|
|
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
<span>Home</span>
|
|
</a>
|
|
|
|
<!-- Dynamic diagrams section - ALL diagrams loaded here -->
|
|
<div id="dynamic-diagrams-section"></div>
|
|
|
|
<!-- Documentation section -->
|
|
<div id="documentation-section"></div>
|
|
</nav>
|
|
|
|
<!-- Footer -->
|
|
<div class="p-4 border-t border-gray-200 bg-gray-50">
|
|
<div class="flex items-center space-x-2 text-xs text-gray-500">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full badge-pulse"></div>
|
|
<span>System Online</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 overflow-y-auto">
|
|
|
|
<!-- Home View -->
|
|
<div id="home-view" class="p-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome to KROW Launchpad</h2>
|
|
<p class="text-gray-600">Your central hub for workforce management infrastructure</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Applications Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Applications</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://krow-workforce-dev.web.app" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
|
<span class="font-medium text-gray-900 group-hover:text-blue-700">Control Tower</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://krow-workforce-staging.web.app" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-xl hover:from-amber-100 hover:to-amber-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
|
|
<span class="font-medium text-gray-900 group-hover:text-amber-700">Control Tower</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy Mobile Apps Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Legacy Mobile Apps</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-xl hover:from-green-100 hover:to-emerald-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-green-700">Google Play Store</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">Live</span>
|
|
</a>
|
|
|
|
<a href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-gray-100 hover:to-gray-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-gray-700">Apple App Store</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-gray-700 text-white text-xs font-semibold rounded-full">Live</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cloud Consoles Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Cloud Infrastructure</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://console.firebase.google.com/project/krow-workforce-dev/overview" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-xl hover:from-blue-100 hover:to-indigo-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-indigo-700">Firebase Console</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://console.firebase.google.com/project/krow-workforce-staging/overview" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-orange-100 rounded-xl hover:from-amber-100 hover:to-orange-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-orange-700">Firebase Console</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
|
|
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-cyan-100 rounded-xl hover:from-blue-100 hover:to-cyan-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-cyan-700">Google Cloud</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-yellow-100 rounded-xl hover:from-amber-100 hover:to-yellow-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-yellow-700">Google Cloud</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Access & Resources Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Resources</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://github.com/Oloodi/krow-workforce" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-slate-100 rounded-xl hover:from-gray-100 hover:to-slate-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-900" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
|
|
</svg>
|
|
<div>
|
|
<div class="font-medium text-gray-900 group-hover:text-gray-700">GitHub Repository</div>
|
|
<div class="text-xs text-gray-500">View source code</div>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://chat.google.com/" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-teal-100 rounded-xl hover:from-green-100 hover:to-teal-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
</svg>
|
|
<div>
|
|
<div class="font-medium text-gray-900 group-hover:text-teal-700">Team Communication</div>
|
|
<div class="text-xs text-gray-500">Google Chat</div>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagram Viewer -->
|
|
<div id="diagram-viewer" class="hidden h-full flex flex-col p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 id="diagram-title" class="text-2xl font-bold text-gray-900"></h3>
|
|
<div class="flex items-center space-x-2 bg-white rounded-xl shadow-lg p-2 border border-gray-200">
|
|
<button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom In">
|
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom Out">
|
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Reset View">
|
|
<svg class="w-5 h-5 text-gray-700" 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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="diagram-container" tabindex="-1"
|
|
class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden cursor-grab flex items-center justify-center p-8">
|
|
<!-- SVG will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Viewer -->
|
|
<div id="document-viewer" class="hidden h-full flex flex-col p-8">
|
|
<div class="mb-6">
|
|
<h3 id="document-title" class="text-2xl font-bold text-gray-900"></h3>
|
|
</div>
|
|
<div id="document-container"
|
|
class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-y-auto p-8 markdown-content">
|
|
<!-- Document content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Panzoom -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
|
|
|
<script>
|
|
let allDiagrams = [];
|
|
let allDocuments = [];
|
|
const homeView = document.getElementById('home-view');
|
|
const diagramViewer = document.getElementById('diagram-viewer');
|
|
const diagramContainer = document.getElementById('diagram-container');
|
|
const diagramTitle = document.getElementById('diagram-title');
|
|
const documentViewer = document.getElementById('document-viewer');
|
|
const documentContainer = document.getElementById('document-container');
|
|
const documentTitle = document.getElementById('document-title');
|
|
const zoomInBtn = document.getElementById('zoomInBtn');
|
|
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
|
|
let panzoomInstance = null;
|
|
let currentScale = 1;
|
|
|
|
// Initialize Mermaid
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'default',
|
|
flowchart: {
|
|
useMaxWidth: false,
|
|
htmlLabels: true,
|
|
curve: 'basis'
|
|
}
|
|
});
|
|
|
|
// Build hierarchical structure from paths
|
|
function buildHierarchy(items, pathPrefix) {
|
|
const hierarchy = { _root: { _items: [], _children: {} } };
|
|
|
|
items.forEach(item => {
|
|
let relativePath = item.path;
|
|
if (relativePath.startsWith('./')) {
|
|
relativePath = relativePath.substring(2);
|
|
}
|
|
if (relativePath.startsWith(pathPrefix)) {
|
|
relativePath = relativePath.substring(pathPrefix.length);
|
|
}
|
|
|
|
const parts = relativePath.split('/');
|
|
const relevantParts = parts.slice(0, -1); // remove filename
|
|
|
|
let current = hierarchy._root;
|
|
relevantParts.forEach(part => {
|
|
if (!current._children[part]) {
|
|
current._children[part] = { _items: [], _children: {} };
|
|
}
|
|
current = current._children[part];
|
|
});
|
|
current._items.push(item);
|
|
});
|
|
return hierarchy;
|
|
}
|
|
|
|
// Generic function to create accordion navigation
|
|
function createAccordionNavigation(hierarchy, parentElement, createLinkFunction, sectionTitle) {
|
|
const createAccordion = (title, items, children) => {
|
|
const container = document.createElement('div');
|
|
container.className = 'mb-1';
|
|
|
|
const button = document.createElement('button');
|
|
button.className = 'accordion-button';
|
|
button.setAttribute('aria-expanded', 'false');
|
|
button.innerHTML = `
|
|
<span class="font-medium">${title.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>
|
|
<svg class="chevron w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
`;
|
|
|
|
const panel = document.createElement('div');
|
|
panel.className = 'accordion-panel pl-4 pt-1';
|
|
|
|
if (items) {
|
|
items.forEach(item => createLinkFunction(item, panel, 1));
|
|
}
|
|
|
|
if (children) {
|
|
Object.keys(children).forEach(childKey => {
|
|
const childSection = children[childKey];
|
|
const childHeading = document.createElement('div');
|
|
childHeading.className = 'px-4 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider';
|
|
childHeading.textContent = childKey.replace(/-/g, ' ');
|
|
panel.appendChild(childHeading);
|
|
childSection._items.forEach(item => createLinkFunction(item, panel, 2));
|
|
});
|
|
}
|
|
|
|
button.addEventListener('click', () => {
|
|
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
|
button.setAttribute('aria-expanded', !isExpanded);
|
|
if (!isExpanded) {
|
|
panel.style.maxHeight = panel.scrollHeight + 'px';
|
|
} else {
|
|
panel.style.maxHeight = '0px';
|
|
}
|
|
});
|
|
|
|
container.appendChild(button);
|
|
container.appendChild(panel);
|
|
return container;
|
|
};
|
|
|
|
const heading = document.createElement('div');
|
|
heading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
|
|
heading.textContent = sectionTitle;
|
|
parentElement.appendChild(heading);
|
|
|
|
// Process root items first
|
|
if (hierarchy._root && hierarchy._root._items.length > 0) {
|
|
hierarchy._root._items.forEach(item => createLinkFunction(item, parentElement, 0));
|
|
}
|
|
|
|
// Process categories as accordions
|
|
Object.keys(hierarchy._root._children).forEach(key => {
|
|
if (key.startsWith('_')) return;
|
|
const section = hierarchy._root._children[key];
|
|
const accordion = createAccordion(key, section._items, section._children);
|
|
parentElement.appendChild(accordion);
|
|
});
|
|
}
|
|
|
|
// Helper function to create a document link
|
|
function createDocumentLink(doc, parentElement, level) {
|
|
const link = document.createElement('a');
|
|
link.href = '#';
|
|
link.className = 'nav-item flex items-center space-x-3 px-4 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 text-sm mb-1' +
|
|
(level > 0 ? ' ' : '');
|
|
link.onclick = (e) => {
|
|
e.preventDefault();
|
|
showView('document', link, doc.path, doc.title);
|
|
};
|
|
|
|
const 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="truncate">${doc.title}</span>`;
|
|
parentElement.appendChild(link);
|
|
}
|
|
|
|
// 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-2.5 rounded-lg text-gray-600 hover:bg-gray-100 text-sm mb-1' +
|
|
(level > 0 ? ' ' : '');
|
|
link.onclick = (e) => {
|
|
e.preventDefault();
|
|
showView('diagram', link, diagram.path, diagram.title, diagram.type);
|
|
};
|
|
|
|
const 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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4l2 2h4a2 2 0 012 2v12a2 2 0 01-2 2h-4l-2-2H7z"></path>
|
|
</svg>`;
|
|
|
|
link.innerHTML = `${iconSvg}<span class="truncate">${diagram.title}</span>`;
|
|
parentElement.appendChild(link);
|
|
}
|
|
|
|
// Load all diagrams from config
|
|
async function loadAllDiagrams() {
|
|
const dynamicSection = document.getElementById('dynamic-diagrams-section');
|
|
|
|
try {
|
|
const response = await fetch('./assets/diagrams/diagrams-config.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load diagrams config: ${response.status}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
allDiagrams = JSON.parse(text);
|
|
|
|
if (allDiagrams && allDiagrams.length > 0) {
|
|
const hierarchy = buildHierarchy(allDiagrams, 'assets/diagrams/');
|
|
createAccordionNavigation(hierarchy, dynamicSection, createDiagramLink, 'Diagrams');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading diagrams configuration:', error);
|
|
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);
|
|
}
|
|
}
|
|
|
|
// Load all documentation from config
|
|
async function loadAllDocuments() {
|
|
const documentationSection = document.getElementById('documentation-section');
|
|
|
|
try {
|
|
const response = await fetch('./assets/documents/documents-config.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load documents config: ${response.status}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
allDocuments = JSON.parse(text);
|
|
|
|
if (allDocuments && allDocuments.length > 0) {
|
|
const hierarchy = buildHierarchy(allDocuments, 'assets/documents/');
|
|
createAccordionNavigation(hierarchy, documentationSection, createDocumentLink, 'Documentation');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading documents configuration:', error);
|
|
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">⚠️ Documentation</div>
|
|
<div>Unable to load documents-config.json</div>
|
|
<div class="mt-1 text-amber-500">${error.message}</div>
|
|
`;
|
|
documentationSection.appendChild(errorDiv);
|
|
}
|
|
}
|
|
|
|
function setActiveNav(activeLink) {
|
|
document.querySelectorAll('#sidebar-nav a').forEach(link => {
|
|
link.classList.remove('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
|
link.classList.add('text-gray-700');
|
|
});
|
|
activeLink.classList.remove('text-gray-700');
|
|
activeLink.classList.add('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
|
}
|
|
|
|
async function showView(viewName, navLink, filePath, title, type = 'svg') {
|
|
setActiveNav(navLink);
|
|
if (panzoomInstance) {
|
|
panzoomInstance.destroy();
|
|
panzoomInstance = null;
|
|
}
|
|
diagramContainer.innerHTML = '';
|
|
documentContainer.innerHTML = '';
|
|
currentScale = 1;
|
|
|
|
if (viewName === 'home') {
|
|
homeView.classList.remove('hidden');
|
|
diagramViewer.classList.add('hidden');
|
|
documentViewer.classList.add('hidden');
|
|
} else if (viewName === 'diagram') {
|
|
homeView.classList.add('hidden');
|
|
diagramViewer.classList.remove('hidden');
|
|
documentViewer.classList.add('hidden');
|
|
diagramTitle.textContent = title;
|
|
diagramContainer.innerHTML = `
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
|
|
<p class="text-gray-600 font-medium">Loading diagram...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
if (type === 'svg') {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
|
const svgContent = await response.text();
|
|
|
|
const parser = new DOMParser();
|
|
const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
|
|
const svgElement = svgDoc.querySelector('svg');
|
|
|
|
if (svgElement) {
|
|
diagramContainer.innerHTML = '';
|
|
diagramContainer.appendChild(svgElement);
|
|
panzoomInstance = Panzoom(svgElement, {
|
|
canvas: true,
|
|
maxScale: 10,
|
|
minScale: 0.3,
|
|
startScale: 1
|
|
});
|
|
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
|
diagramContainer.focus();
|
|
} else {
|
|
throw new Error('No SVG element found.');
|
|
}
|
|
} else if (type === 'mermaid') {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
|
const mermaidCode = await response.text();
|
|
|
|
const { svg } = await mermaid.render('mermaidDiagram_' + Date.now(), mermaidCode);
|
|
|
|
diagramContainer.innerHTML = svg;
|
|
const svgElement = diagramContainer.querySelector('svg');
|
|
|
|
if (svgElement) {
|
|
svgElement.style.maxWidth = 'none';
|
|
svgElement.style.height = 'auto';
|
|
|
|
panzoomInstance = Panzoom(svgElement, {
|
|
canvas: true,
|
|
maxScale: 10,
|
|
minScale: 0.3,
|
|
startScale: 1
|
|
});
|
|
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
|
diagramContainer.focus();
|
|
} else {
|
|
throw new Error('Failed to render Mermaid diagram.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
diagramContainer.innerHTML = `
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h4 class="font-bold text-red-900">Failed to load diagram</h4>
|
|
</div>
|
|
<p class="text-red-700 text-sm">${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
} else if (viewName === 'document') {
|
|
homeView.classList.add('hidden');
|
|
diagramViewer.classList.add('hidden');
|
|
documentViewer.classList.remove('hidden');
|
|
documentTitle.textContent = title;
|
|
documentContainer.innerHTML = `
|
|
<div class="flex flex-col items-center justify-center space-y-3 py-12">
|
|
<div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
|
|
<p class="text-gray-600 font-medium">Loading document...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load document: ${response.status}`);
|
|
}
|
|
|
|
const markdownText = await response.text();
|
|
const htmlContent = marked.parse(markdownText);
|
|
documentContainer.innerHTML = htmlContent;
|
|
} catch (error) {
|
|
console.error('Error loading document:', error);
|
|
documentContainer.innerHTML = `
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-6">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h4 class="font-bold text-red-900">Failed to load document</h4>
|
|
</div>
|
|
<p class="text-red-700 text-sm">${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
zoomInBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.zoomIn();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
zoomOutBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.zoomOut();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
resetBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.reset();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadAllDiagrams();
|
|
loadAllDocuments();
|
|
showView('home', document.getElementById('nav-home'));
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |