364 lines
13 KiB
JavaScript
364 lines
13 KiB
JavaScript
// Demo Workflow JavaScript
|
|
// This file provides a comprehensive demo of the Mycelium Dashboard functionality
|
|
|
|
class DemoWorkflow {
|
|
constructor() {
|
|
this.currentStep = 0;
|
|
this.steps = [
|
|
{
|
|
title: "Welcome to Mycelium Dashboard Demo",
|
|
description: "This demo will showcase the complete interactive functionality of the Mycelium ecosystem.",
|
|
action: () => this.showWelcome()
|
|
},
|
|
{
|
|
title: "Application Provider: Register New Application",
|
|
description: "Let's start by registering a new application as an Application Provider.",
|
|
action: () => this.demoAppRegistration()
|
|
},
|
|
{
|
|
title: "Service Provider: Create New Service",
|
|
description: "Now let's create a new service offering as a Service Provider.",
|
|
action: () => this.demoServiceCreation()
|
|
},
|
|
{
|
|
title: "Marketplace Integration",
|
|
description: "See how your apps and services automatically appear in the marketplace.",
|
|
action: () => this.demoMarketplaceIntegration()
|
|
},
|
|
{
|
|
title: "User: Deploy Application",
|
|
description: "As a user, let's deploy an application from the marketplace.",
|
|
action: () => this.demoAppDeployment()
|
|
},
|
|
{
|
|
title: "ResourceProvider: Node Management",
|
|
description: "Manage your farming nodes and monitor capacity.",
|
|
action: () => this.demoNodeManagement()
|
|
},
|
|
{
|
|
title: "Cross-Dashboard Integration",
|
|
description: "See how actions in one dashboard affect others in real-time.",
|
|
action: () => this.demoCrossIntegration()
|
|
},
|
|
{
|
|
title: "Demo Complete",
|
|
description: "You've seen the complete Mycelium ecosystem in action!",
|
|
action: () => this.showCompletion()
|
|
}
|
|
];
|
|
this.initializeDemo();
|
|
}
|
|
|
|
initializeDemo() {
|
|
this.createDemoUI();
|
|
this.bindEvents();
|
|
}
|
|
|
|
createDemoUI() {
|
|
// Create demo control panel
|
|
const demoPanel = document.createElement('div');
|
|
demoPanel.id = 'demo-panel';
|
|
demoPanel.className = 'demo-panel';
|
|
demoPanel.style.cssText = `
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: white;
|
|
border: 2px solid #007bff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
z-index: 10000;
|
|
max-width: 400px;
|
|
font-family: 'Poppins', sans-serif;
|
|
`;
|
|
|
|
demoPanel.innerHTML = `
|
|
<div class="demo-header">
|
|
<h5 class="mb-2">🚀 Mycelium Demo</h5>
|
|
<div class="progress mb-3" style="height: 6px;">
|
|
<div class="progress-bar bg-primary" id="demo-progress" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="demo-content">
|
|
<h6 id="demo-title">Welcome to Mycelium Dashboard Demo</h6>
|
|
<p id="demo-description" class="text-muted small">This demo will showcase the complete interactive functionality of the Mycelium ecosystem.</p>
|
|
</div>
|
|
<div class="demo-controls mt-3">
|
|
<button class="btn btn-primary btn-sm me-2" id="demo-next">Start Demo</button>
|
|
<button class="btn btn-outline-secondary btn-sm me-2" id="demo-prev" disabled>Previous</button>
|
|
<button class="btn btn-outline-danger btn-sm" id="demo-close">Close</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(demoPanel);
|
|
}
|
|
|
|
bindEvents() {
|
|
document.getElementById('demo-next').addEventListener('click', () => this.nextStep());
|
|
document.getElementById('demo-prev').addEventListener('click', () => this.prevStep());
|
|
document.getElementById('demo-close').addEventListener('click', () => this.closeDemo());
|
|
}
|
|
|
|
nextStep() {
|
|
if (this.currentStep < this.steps.length - 1) {
|
|
this.currentStep++;
|
|
this.executeStep();
|
|
}
|
|
}
|
|
|
|
prevStep() {
|
|
if (this.currentStep > 0) {
|
|
this.currentStep--;
|
|
this.executeStep();
|
|
}
|
|
}
|
|
|
|
executeStep() {
|
|
const step = this.steps[this.currentStep];
|
|
|
|
// Update UI
|
|
document.getElementById('demo-title').textContent = step.title;
|
|
document.getElementById('demo-description').textContent = step.description;
|
|
|
|
// Update progress
|
|
const progress = ((this.currentStep + 1) / this.steps.length) * 100;
|
|
document.getElementById('demo-progress').style.width = `${progress}%`;
|
|
|
|
// Update buttons
|
|
document.getElementById('demo-prev').disabled = this.currentStep === 0;
|
|
const nextBtn = document.getElementById('demo-next');
|
|
if (this.currentStep === this.steps.length - 1) {
|
|
nextBtn.textContent = 'Finish';
|
|
} else {
|
|
nextBtn.textContent = 'Next';
|
|
}
|
|
|
|
// Execute step action
|
|
step.action();
|
|
}
|
|
|
|
showWelcome() {
|
|
showNotification('Welcome to the Mycelium Dashboard Demo! 🎉', 'info');
|
|
}
|
|
|
|
demoAppRegistration() {
|
|
showNotification('Demo: Navigating to App Provider dashboard...', 'info');
|
|
|
|
setTimeout(() => {
|
|
if (window.location.pathname !== '/dashboard/application-provider') {
|
|
showNotification('Please navigate to the App Provider dashboard to continue the demo', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Simulate clicking the register app button
|
|
const registerBtn = document.querySelector('[data-bs-target="#registerAppModal"]');
|
|
if (registerBtn) {
|
|
registerBtn.click();
|
|
|
|
setTimeout(() => {
|
|
// Fill in demo data
|
|
this.fillAppRegistrationForm();
|
|
}, 500);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
fillAppRegistrationForm() {
|
|
const formData = {
|
|
appName: 'Demo Secure Chat App',
|
|
appDesc: 'A decentralized, end-to-end encrypted chat application built for the Mycelium Grid',
|
|
appCategory: 'communication',
|
|
appType: 'container',
|
|
appRepo: 'https://github.com/demo/secure-chat',
|
|
minCPU: '2',
|
|
minRAM: '4',
|
|
minStorage: '10',
|
|
pricingType: 'subscription',
|
|
priceAmount: '15'
|
|
};
|
|
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
const element = document.getElementById(key);
|
|
if (element) {
|
|
element.value = value;
|
|
element.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
// Check self-healing
|
|
const selfHealingCheckbox = document.getElementById('selfHealing');
|
|
if (selfHealingCheckbox) {
|
|
selfHealingCheckbox.checked = true;
|
|
}
|
|
|
|
showNotification('Demo form filled! Click "Register Application" to continue.', 'success');
|
|
}
|
|
|
|
demoServiceCreation() {
|
|
showNotification('Demo: Navigating to Service Provider dashboard...', 'info');
|
|
|
|
setTimeout(() => {
|
|
if (window.location.pathname !== '/dashboard/service-provider') {
|
|
showNotification('Please navigate to the Service Provider dashboard to continue the demo', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Simulate clicking the create service button
|
|
const createBtn = document.querySelector('[data-bs-target="#createServiceModal"]');
|
|
if (createBtn) {
|
|
createBtn.click();
|
|
|
|
setTimeout(() => {
|
|
// Fill in demo data
|
|
this.fillServiceCreationForm();
|
|
}, 500);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
fillServiceCreationForm() {
|
|
const formData = {
|
|
serviceName: 'Demo Mycelium Migration Service',
|
|
serviceDesc: 'Professional migration service to help businesses move their workloads to the Mycelium Grid with zero downtime',
|
|
serviceCategory: 'migration',
|
|
serviceDelivery: 'hybrid',
|
|
pricingType: 'hourly',
|
|
priceAmount: '85',
|
|
serviceExperience: 'expert',
|
|
availableHours: '30',
|
|
responseTime: '4',
|
|
serviceSkills: 'Docker, Kubernetes, Mycelium Grid, Cloud Migration, DevOps'
|
|
};
|
|
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
const element = document.getElementById(key);
|
|
if (element) {
|
|
element.value = value;
|
|
element.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
showNotification('Demo form filled! Click "Create Service" to continue.', 'success');
|
|
}
|
|
|
|
demoMarketplaceIntegration() {
|
|
showNotification('Demo: Your apps and services are now available in the marketplace!', 'success');
|
|
|
|
setTimeout(() => {
|
|
showNotification('Navigate to /marketplace/applications or /marketplace/services to see your listings', 'info');
|
|
}, 2000);
|
|
}
|
|
|
|
demoAppDeployment() {
|
|
showNotification('Demo: Simulating app deployment from marketplace...', 'info');
|
|
|
|
// Simulate marketplace purchase
|
|
const purchaseEvent = new CustomEvent('marketplacePurchase', {
|
|
detail: {
|
|
name: 'Demo Secure Chat App',
|
|
provider_name: 'Demo Provider',
|
|
price: 15
|
|
}
|
|
});
|
|
document.dispatchEvent(purchaseEvent);
|
|
}
|
|
|
|
demoNodeManagement() {
|
|
showNotification('Demo: Simulating resource_provider node management...', 'info');
|
|
|
|
setTimeout(() => {
|
|
// Simulate node status change
|
|
const nodeEvent = new CustomEvent('nodeStatusChange', {
|
|
detail: {
|
|
node: { id: 'TF-DEMO-001' },
|
|
oldStatus: 'Online',
|
|
newStatus: 'Maintenance'
|
|
}
|
|
});
|
|
document.dispatchEvent(nodeEvent);
|
|
}, 1000);
|
|
}
|
|
|
|
demoCrossIntegration() {
|
|
showNotification('Demo: Showing cross-dashboard integration...', 'info');
|
|
|
|
setTimeout(() => {
|
|
// Simulate deployment status change
|
|
const deploymentEvent = new CustomEvent('deploymentStatusChange', {
|
|
detail: {
|
|
deployment: { app_name: 'Demo Secure Chat App' },
|
|
oldStatus: 'Deploying',
|
|
newStatus: 'Active'
|
|
}
|
|
});
|
|
document.dispatchEvent(deploymentEvent);
|
|
}, 1000);
|
|
|
|
setTimeout(() => {
|
|
// Simulate new client request
|
|
const clientEvent = new CustomEvent('newClientRequest', {
|
|
detail: {
|
|
client_name: 'Demo Client Corp'
|
|
}
|
|
});
|
|
document.dispatchEvent(clientEvent);
|
|
}, 2000);
|
|
}
|
|
|
|
showCompletion() {
|
|
showNotification('🎉 Demo completed! You\'ve experienced the full Mycelium ecosystem.', 'success');
|
|
|
|
setTimeout(() => {
|
|
this.closeDemo();
|
|
}, 3000);
|
|
}
|
|
|
|
closeDemo() {
|
|
const demoPanel = document.getElementById('demo-panel');
|
|
if (demoPanel) {
|
|
demoPanel.remove();
|
|
}
|
|
showNotification('Demo closed. Explore the dashboards on your own!', 'info');
|
|
}
|
|
}
|
|
|
|
// Auto-start demo if URL parameter is present
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('demo') === 'true') {
|
|
setTimeout(() => {
|
|
new DemoWorkflow();
|
|
}, 2000); // Wait for page to fully load
|
|
}
|
|
});
|
|
|
|
// Add demo starter button to all dashboard pages (currently hidden)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Demo button is temporarily hidden
|
|
// Uncomment the code below to re-enable the Start Demo button
|
|
/*
|
|
if (window.location.pathname.includes('/dashboard/')) {
|
|
const demoButton = document.createElement('button');
|
|
demoButton.className = 'btn btn-outline-primary btn-sm demo-starter';
|
|
demoButton.innerHTML = '🚀 Start Demo';
|
|
demoButton.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9998;
|
|
`;
|
|
|
|
demoButton.addEventListener('click', () => {
|
|
new DemoWorkflow();
|
|
});
|
|
|
|
document.body.appendChild(demoButton);
|
|
}
|
|
*/
|
|
});
|
|
|
|
// Export for use in other modules
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = DemoWorkflow;
|
|
} |