File size: 4,188 Bytes
3a8b459
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// Main script
console.log("App loaded");

// Technology combinations mapping
const techCombinations = {
    backend: {
        'FastAPI': {
            orm: ['SQLAlchemy', 'Tortoise ORM', 'Django ORM'],
            packageManager: ['pip', 'poetry', 'uv'],
            runtime: ['Python 3.12', 'Python 3.11']
        },
        'Django': {
            orm: ['Django ORM', 'SQLAlchemy'],
            packageManager: ['pip', 'poetry', 'uv'],
            runtime: ['Python 3.12', 'Python 3.11']
        },
        'Flask': {
            orm: ['SQLAlchemy', 'Tortoise ORM'],
            packageManager: ['pip', 'poetry', 'uv'],
            runtime: ['Python 3.12', 'Python 3.11']
        },
        'Express.js': {
            orm: ['Prisma', 'TypeORM', 'Sequelize', 'Mongoose', 'Drizzle'],
            packageManager: ['npm', 'yarn', 'pnpm'],
            runtime: ['Node.js (LTS)', 'Bun']
        },
        'NestJS': {
            orm: ['Prisma', 'TypeORM', 'Sequelize', 'Mongoose', 'Drizzle'],
            packageManager: ['npm', 'yarn', 'pnpm'],
            runtime: ['Node.js (LTS)', 'Bun']
        },
        'Spring Boot': {
            orm: ['Entity Framework'],
            packageManager: ['nuget'],
            runtime: ['Java 21 (LTS)']
        },
        'Ruby on Rails': {
            orm: [],
            packageManager: [],
            runtime: []
        },
        'Laravel': {
            orm: [],
            packageManager: ['composer'],
            runtime: []
        },
        'ASP.NET Core': {
            orm: ['Entity Framework'],
            packageManager: ['nuget'],
            runtime: ['.NET 8']
        },
        'Go (Gin)': {
            orm: ['GORM'],
            packageManager: ['go mod'],
            runtime: ['Go 1.22']
        }
    }
};

// Function to filter dropdown options based on backend selection
function filterTechnologyOptions() {
    const backendSelect = document.getElementById('backend');
    const ormSelect = document.getElementById('orm');
    const packageManagerSelect = document.getElementById('package_manager');
    const runtimeSelect = document.getElementById('runtime');

    const selectedBackend = backendSelect.value;

    if (selectedBackend && techCombinations.backend[selectedBackend]) {
        const compatibleTech = techCombinations.backend[selectedBackend];

        // Filter ORM options
        filterSelectOptions(ormSelect, compatibleTech.orm);
        
        // Filter Package Manager options
        filterSelectOptions(packageManagerSelect, compatibleTech.packageManager);
        
        // Filter Runtime options
        filterSelectOptions(runtimeSelect, compatibleTech.runtime);
    } else {
        // Reset all options if no backend or unsupported backend
        resetSelectOptions(ormSelect);
        resetSelectOptions(packageManagerSelect);
        resetSelectOptions(runtimeSelect);
    }
}

function filterSelectOptions(selectElement, allowedValues) {
    for (const option of selectElement.options) {
        if (option.value === '') {
            option.disabled = false;
            option.style.display = '';
            continue;
        }
        
        if (allowedValues.length === 0 || allowedValues.includes(option.value)) {
            // If no specific options defined or value is allowed, show option
            option.disabled = false;
            option.style.display = '';
        } else {
            option.disabled = true;
            option.style.display = 'none';
            // Deselect if currently selected
            if (option.selected) {
                selectElement.value = '';
            }
        }
    }
}

function resetSelectOptions(selectElement) {
    for (const option of selectElement.options) {
        option.disabled = false;
        option.style.display = '';
    }
}

// Add event listener to backend dropdown
document.addEventListener('DOMContentLoaded', function() {
    const backendSelect = document.getElementById('backend');
    if (backendSelect) {
        backendSelect.addEventListener('change', filterTechnologyOptions);
        // Run on initial load in case there's a pre-selected value
        filterTechnologyOptions();
    }
});