init projectmycelium
This commit is contained in:
mik-tf
364
src/static/js/demo-workflow.js
Normal file
364
src/static/js/demo-workflow.js
Normal file
@@ -0,0 +1,364 @@
|
||||
// Demo Workflow JavaScript
|
||||
// This file provides a comprehensive demo of the ThreeFold Dashboard functionality
|
||||
|
||||
class DemoWorkflow {
|
||||
constructor() {
|
||||
this.currentStep = 0;
|
||||
this.steps = [
|
||||
{
|
||||
title: "Welcome to ThreeFold Dashboard Demo",
|
||||
description: "This demo will showcase the complete interactive functionality of the ThreeFold ecosystem.",
|
||||
action: () => this.showWelcome()
|
||||
},
|
||||
{
|
||||
title: "App Provider: Register New Application",
|
||||
description: "Let's start by registering a new application as an App 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: "Farmer: 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 ThreeFold 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">🚀 ThreeFold 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 ThreeFold Dashboard Demo</h6>
|
||||
<p id="demo-description" class="text-muted small">This demo will showcase the complete interactive functionality of the ThreeFold 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 ThreeFold Dashboard Demo! 🎉', 'info');
|
||||
}
|
||||
|
||||
demoAppRegistration() {
|
||||
showNotification('Demo: Navigating to App Provider dashboard...', 'info');
|
||||
|
||||
setTimeout(() => {
|
||||
if (window.location.pathname !== '/dashboard/app-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 ThreeFold 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 ThreeFold Migration Service',
|
||||
serviceDesc: 'Professional migration service to help businesses move their workloads to the ThreeFold Grid with zero downtime',
|
||||
serviceCategory: 'migration',
|
||||
serviceDelivery: 'hybrid',
|
||||
pricingType: 'hourly',
|
||||
priceAmount: '85',
|
||||
serviceExperience: 'expert',
|
||||
availableHours: '30',
|
||||
responseTime: '4',
|
||||
serviceSkills: 'Docker, Kubernetes, ThreeFold 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 farmer 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 ThreeFold 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;
|
||||
}
|
||||
Reference in New Issue
Block a user