OS, Docker, Other : categories separees dans sidebar + page d'accueil
This commit is contained in:
+2
-2
@@ -181,8 +181,8 @@
|
||||
<!-- STATS ROW -->
|
||||
<div class="grid grid-cols-4 gap-3 mb-6 text-center" id="stats-row"></div>
|
||||
|
||||
<!-- CARD GRID -->
|
||||
<div id="card-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"></div>
|
||||
<!-- CARD GRID avec catégories -->
|
||||
<div id="card-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center text-[0.6875rem] text-[#94a3b8]" id="footer-hint">
|
||||
|
||||
@@ -5,8 +5,10 @@ let currentNode = null;
|
||||
let currentSection = null;
|
||||
|
||||
const TREE = {
|
||||
id: 'root', label: t('OS', 'OS'),
|
||||
id: 'root',
|
||||
children: [
|
||||
{
|
||||
id: 'os-cat', label: t('OS', 'OS'), children: [
|
||||
{ id: 'linux', label: t('Linux', 'Linux'), children: [
|
||||
{ id: 'ubuntu', label: t('Ubuntu', 'Ubuntu'), children: [
|
||||
{ id: 'ubuntu-2004', label: t('20.04', '20.04'), osKey: 'ubuntu', sectionIds: ['sys','apt','users'] },
|
||||
@@ -31,8 +33,32 @@ const TREE = {
|
||||
]},
|
||||
{ id: 'solaris', label: t('Solaris / illumos', 'Solaris / illumos'), osKey: 'solaris', sectionIds: ['solaris-ips','solaris-smf','solaris-zfs','solaris-zones'] },
|
||||
{ id: 'macos', label: t('macOS', 'macOS') },
|
||||
{ id: 'docker', label: t('Docker', 'Docker') },
|
||||
{ id: 'other', label: t('Other', 'Other') },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'docker-cat', label: t('Docker', 'Docker'), children: [
|
||||
{ id: 'docker-compose', label: t('Compose', 'Compose') },
|
||||
{ id: 'docker-swarm', label: t('Swarm', 'Swarm') },
|
||||
{ id: 'dockerfile', label: t('Dockerfile', 'Dockerfile') },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'other-cat', label: t('Other', 'Other'), children: [
|
||||
{ id: 'network', label: t('Réseau', 'Network'), children: [
|
||||
{ id: 'cisco', label: t('Cisco IOS', 'Cisco IOS') },
|
||||
{ id: 'tplink', label: t('TP-Link', 'TP-Link') },
|
||||
]},
|
||||
{ id: 'sql', label: t('SQL', 'SQL'), children: [
|
||||
{ id: 'mysql', label: t('MySQL / MariaDB', 'MySQL / MariaDB') },
|
||||
{ id: 'postgresql', label: t('PostgreSQL', 'PostgreSQL') },
|
||||
]},
|
||||
{ id: 'tools', label: t('DevOps', 'DevOps'), children: [
|
||||
{ id: 'ansible', label: t('Ansible', 'Ansible') },
|
||||
{ id: 'terraform', label: t('Terraform', 'Terraform') },
|
||||
{ id: 'kubernetes', label: t('Kubernetes', 'Kubernetes') },
|
||||
]},
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
@@ -381,24 +407,34 @@ function renderStats() {
|
||||
}
|
||||
|
||||
var OS_CARDS = [
|
||||
{ id: 'debian', label: 'Debian', icon: 'D', color: '#0f172a', desc: t('Distribution stable de référence', 'Stable reference distribution') },
|
||||
{ id: 'ubuntu', label: 'Ubuntu', icon: 'U', color: '#dc2626', desc: t('Basé sur Debian avec versions LTS', 'Debian-based with LTS releases'), isGroup: true },
|
||||
{ id: 'oracle', label: 'Oracle Linux', icon: 'O', color: '#b9141e', desc: t('Linux Oracle avec UEK + SELinux', 'Oracle Linux with UEK + SELinux') },
|
||||
{ id: 'windows', label: 'Windows', icon: 'W', color: '#0078d4', desc: t('CMD + PowerShell client/server', 'CMD + PowerShell client/server'), isGroup: true },
|
||||
{ id: 'solaris', label: 'Solaris', icon: 'S', color: '#b46400', desc: t('Solaris / illumos avec ZFS + DTrace', 'Solaris / illumos with ZFS + DTrace') },
|
||||
{ id: 'rhel', label: 'RHEL / CentOS', icon: 'R', color: '#94a3b8', desc: t('Enterprise Linux (à venir)', 'Enterprise Linux (pending)'), placeholder: true },
|
||||
{ id: 'fedora', label: 'Fedora', icon: 'F', color: '#94a3b8', desc: t('Basé sur RHEL (à venir)', 'RHEL-based (pending)'), placeholder: true },
|
||||
{ id: 'freebsd', label: 'FreeBSD', icon: 'B', color: '#94a3b8', desc: t('BSD Unix (à venir)', 'BSD Unix (pending)'), placeholder: true },
|
||||
{ id: 'macos', label: 'macOS', icon: 'M', color: '#94a3b8', desc: t('macOS (à venir)', 'macOS (pending)'), placeholder: true },
|
||||
{ id: 'docker', label: 'Docker', icon: 'D', color: '#94a3b8', desc: t('Containers et orchestration (à venir)', 'Containers and orchestration (pending)'), placeholder: true },
|
||||
{ id: 'cisco', label: 'Cisco IOS', icon: 'C', color: '#94a3b8', desc: t('Réseau Cisco (à venir)', 'Cisco networking (pending)'), placeholder: true },
|
||||
{ id: 'mysql', label: 'MySQL / MariaDB', icon: 'S', color: '#94a3b8', desc: t('Bases de données SQL (à venir)', 'SQL databases (pending)'), placeholder: true },
|
||||
// OS category
|
||||
{ id: 'debian', label: 'Debian', icon: 'D', color: '#0f172a', desc: t('Distribution stable de référence', 'Stable reference distribution'), cat: 'os' },
|
||||
{ id: 'ubuntu', label: 'Ubuntu', icon: 'U', color: '#dc2626', desc: t('Basé sur Debian avec versions LTS', 'Debian-based with LTS releases'), cat: 'os', isGroup: true },
|
||||
{ id: 'oracle', label: 'Oracle Linux', icon: 'O', color: '#b9141e', desc: t('Linux Oracle avec UEK + SELinux', 'Oracle Linux with UEK + SELinux'), cat: 'os' },
|
||||
{ id: 'windows', label: 'Windows', icon: 'W', color: '#0078d4', desc: t('CMD + PowerShell client/server', 'CMD + PowerShell client/server'), cat: 'os', isGroup: true },
|
||||
{ id: 'solaris', label: 'Solaris', icon: 'S', color: '#b46400', desc: t('Solaris / illumos avec ZFS + DTrace', 'Solaris / illumos with ZFS + DTrace'), cat: 'os' },
|
||||
{ id: 'rhel', label: 'RHEL / CentOS', icon: 'R', color: '#94a3b8', desc: t('Enterprise Linux (à venir)', 'Enterprise Linux (pending)'), cat: 'os', placeholder: true },
|
||||
{ id: 'fedora', label: 'Fedora', icon: 'F', color: '#94a3b8', desc: t('Basé sur RHEL (à venir)', 'RHEL-based (pending)'), cat: 'os', placeholder: true },
|
||||
{ id: 'macos', label: 'macOS', icon: 'M', color: '#94a3b8', desc: t('macOS (à venir)', 'macOS (pending)'), cat: 'os', placeholder: true },
|
||||
// Docker category
|
||||
{ id: 'docker-compose', label: 'Docker Compose', icon: 'D', color: '#0ea5e9', desc: t('Orchestration multi-conteneurs', 'Multi-container orchestration'), cat: 'docker', placeholder: true },
|
||||
{ id: 'docker-swarm', label: 'Docker Swarm', icon: 'S', color: '#0ea5e9', desc: t('Cluster Docker natif', 'Native Docker clustering'), cat: 'docker', placeholder: true },
|
||||
{ id: 'dockerfile', label: 'Dockerfile', icon: 'F', color: '#0ea5e9', desc: t('Instructions de build', 'Build instructions'), cat: 'docker', placeholder: true },
|
||||
// Other category
|
||||
{ id: 'cisco', label: 'Cisco IOS', icon: 'C', color: '#8b5cf6', desc: t('Réseau Cisco (à venir)', 'Cisco networking (pending)'), cat: 'other', placeholder: true },
|
||||
{ id: 'mysql', label: 'MySQL / MariaDB', icon: 'S', color: '#8b5cf6', desc: t('Bases de données SQL (à venir)', 'SQL databases (pending)'), cat: 'other', placeholder: true },
|
||||
{ id: 'postgresql', label: 'PostgreSQL', icon: 'P', color: '#8b5cf6', desc: t('Base de données avancée (à venir)', 'Advanced database (pending)'), cat: 'other', placeholder: true },
|
||||
{ id: 'ansible', label: 'Ansible', icon: 'A', color: '#8b5cf6', desc: t('Automatisation IT (à venir)', 'IT automation (pending)'), cat: 'other', placeholder: true },
|
||||
{ id: 'kubernetes', label: 'Kubernetes', icon: 'K', color: '#8b5cf6', desc: t('Orchestration conteneurs (à venir)', 'Container orchestration (pending)'), cat: 'other', placeholder: true },
|
||||
];
|
||||
|
||||
function renderCards() {
|
||||
var el = document.getElementById('card-grid');
|
||||
el.innerHTML = '';
|
||||
var cats = { os: { label: t('Systèmes d\'exploitation', 'Operating Systems'), html: '' }, docker: { label: t('Docker / Conteneurs', 'Docker / Containers'), html: '' }, other: { label: t('Réseau, BDD, DevOps', 'Network, DB, DevOps'), html: '' } };
|
||||
OS_CARDS.forEach(function(card) {
|
||||
card.cat = card.cat || 'other';
|
||||
if (!cats[card.cat]) cats[card.cat] = { label: card.cat, html: '' };
|
||||
var div = document.createElement('div');
|
||||
var isPlaceholder = card.placeholder;
|
||||
var node = findNode(TREE, card.id);
|
||||
@@ -411,7 +447,7 @@ function renderCards() {
|
||||
div.innerHTML =
|
||||
'<div class="flex items-start gap-3 mb-3">' +
|
||||
'<div class="icon ' + iconBg + '" style="' + (isPlaceholder ? '' : 'background:' + card.color) + '">' +
|
||||
'<span class="font-bold ' + (isPlaceholder ? 'text-sm' : 'text-sm') + '">' + card.icon + '</span>' +
|
||||
'<span class="font-bold text-sm">' + card.icon + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="flex-1 min-w-0">' +
|
||||
'<div class="font-semibold text-sm truncate">' + (card.isGroup ? card.label + ' →' : card.label) + '</div>' +
|
||||
@@ -424,7 +460,6 @@ function renderCards() {
|
||||
|
||||
div.onclick = function() {
|
||||
if (card.isGroup) {
|
||||
// Expand group in sidebar
|
||||
var n = findNode(TREE, card.id);
|
||||
if (n && n.children && n.children.length > 0) {
|
||||
selectNode(n.children[0]);
|
||||
@@ -434,8 +469,16 @@ function renderCards() {
|
||||
}
|
||||
};
|
||||
|
||||
el.appendChild(div);
|
||||
cats[card.cat].html += div.outerHTML;
|
||||
});
|
||||
|
||||
// Render categories
|
||||
var html = '';
|
||||
Object.keys(cats).forEach(function(k) {
|
||||
html += '<div class="col-span-full text-xs font-semibold uppercase tracking-wider text-[#94a3b8] mt-2 mb-1">' + cats[k].label.fr + '</div>';
|
||||
html += cats[k].html;
|
||||
});
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
// ── SHOW COMMANDS ──
|
||||
|
||||
Reference in New Issue
Block a user