syonad/two
2
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases 9 Packages Wiki Activity Actions

web: start: simple form component

Browse source 
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
This commit is contained in:
GnomeZworc 2026-06-01 23:04:49 +02:00
commit bec5e65728
Signed by: nicolas.boufideline
GPG key ID: 4406BBBF8845D632
7 changed files with 513 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/pages/dashboard/dashboard.js
View file

@ -1,8 +1,46 @@
// Dashboard page — called by the router each time this route is activated.
// Export init(main) to run logic after the HTML fragment is injected.
//
// `main` is the <main> DOM element containing the injected HTML.
import { SidePanel } from '../../components/side-panel/side-panel.js'
export function init(main) {
// Page is ready — add event listeners, fetch data, etc.
main.querySelectorAll('[data-panel-title]').forEach(btn => {
btn.addEventListener('click', () => {
SidePanel.open({
title: btn.dataset.panelTitle,
width: btn.dataset.panelWidth ?? '480px',
content: `<p style="color:#a6adc8;font-size:14px;line-height:1.6">
Contenu du panneau <strong style="color:#cdd6f4">${btn.dataset.panelTitle}</strong>.<br>
Largeur : ${btn.dataset.panelWidth}.<br><br>
Tu peux ouvrir plusieurs panneaux — ils s'empilent vers la gauche.
Ferme avec ✕, Échap, ou en cliquant le fond.
</p>`,
})
})
})
main.querySelectorAll('[data-action="create-vm"]').forEach(btn => {
btn.addEventListener('click', () => {
SidePanel.open({
title: 'Nouvelle VM',
width: '520px',
content: `<form-vm></form-vm>`,
})
// form-vm gère son propre submit et dispatche vm-saved — pas besoin de querySelector
})
})
main.querySelectorAll('[data-action="edit-vm-i-test1"]').forEach(btn => {
btn.addEventListener('click', () => {
SidePanel.open({
title: 'Modifier i-test1',
width: '520px',
content: `<form-vm vm-name="i-test1"></form-vm>`
})
// form-vm gère son propre submit et dispatche vm-saved — pas besoin de querySelector
})
})
// vm-saved est attaché sur main (pas document) → nettoyé automatiquement
// quand le router remplace le contenu de <main>
main.addEventListener('vm-saved', e => {
console.log('vm-saved', e.detail)
})
}

35
web/pages/dashboard/index.html
View file

@ -1,33 +1,24 @@
<date-display></date-display>
<!-- Dev test: open stacked panels -->
<div style="display:flex;gap:8px;margin-top:8px;">
<button onclick="openTestPanel('Panel A', '400px')"
<div style="gap:8px;margin-top:0px;">
<button data-panel-title="Panel A" data-panel-width="400px"
style="background:#313244;border:1px solid #45475a;border-radius:6px;
padding:7px 14px;color:#89b4fa;font-size:13px;cursor:pointer;">
Open panel A
</button>
<button onclick="openTestPanel('Panel B', '520px')"
<button data-panel-title="Panel B" data-panel-width="520px"
style="background:#313244;border:1px solid #45475a;border-radius:6px;
padding:7px 14px;color:#a6e3a1;font-size:13px;cursor:pointer;">
Open panel B
</button>
<button data-action="create-vm"
style="background:#313244;border:1px solid #45475a;border-radius:6px;
padding:7px 14px;color:#a6e3a1;font-size:13px;cursor:pointer;">
Create-vm
</button>
<button data-action="edit-vm-i-test1"
style="background:#313244;border:1px solid #45475a;border-radius:6px;
padding:7px 14px;color:#a6e3a1;font-size:13px;cursor:pointer;">
Edition
</button>
</div>
<script type="module">
import { SidePanel } from '../components/side-panel/side-panel.js'
window.openTestPanel = (title, width) => {
SidePanel.open({
title,
width,
content: `<p style="color:#a6adc8;font-size:14px;line-height:1.6">
Contenu du panneau <strong style="color:#cdd6f4">${title}</strong>.<br>
Largeur : ${width}.<br><br>
Tu peux ouvrir plusieurs panneaux — ils s'empilent vers la gauche.
Ferme avec ✕, Échap, ou en cliquant le fond.
</p>`,
})
}
</script>