proxmoxPanel/core
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correction CSS Swup, types WS et création fichier de suivi

Browse source 
- Extraction de tous les styles inline en css/pages.css (chargé globalement)
  pour corriger le CSS cassé lors des navigations Swup
- Correction types WebSocket : proxmox_resources → resources_update
  et msg.data → msg.payload (format réel du hub Go)
- Ajout d'un fetch HTTP immédiat dans dashboardPage/proxmoxPage
  pour éviter l'attente du premier tick (10s) du polling WS
- Correction msg.payload pour les updates (update_output/done/error)
- Ajout class terminal-wrapper sur .main-layout de terminal.html
  pour le fullscreen height sans affecter les autres pages
- Création SUIVI.md : état d'implémentation vs instruction.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
enzo 2026-03-21 17:49:33 +01:00
parent a4b5b06f04
commit 9739dbaee8
11 changed files with 640 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/js/app.js
View file

@ -306,7 +306,9 @@ document.addEventListener('alpine:init', () => {
ws: null,
wsStatus: 'connecting',
init() {
async init() {
// Chargement immédiat via HTTP, puis WS pour le temps réel
await this.fetchResources()
this.connectWS()
},
@ -314,14 +316,25 @@ document.addEventListener('alpine:init', () => {
if (this.ws) this.ws.close()
},
async fetchResources() {
try {
const res = await apiFetch('/api/proxmox/resources')
if (res.ok) {
this.resources = await res.json() || []
this.wsStatus = 'ok'
}
} catch (e) { /* WS prendra le relais */ }
},
connectWS() {
const proto = location.protocol === 'https:' ? 'wss' : 'ws'
const token = encodeURIComponent(localStorage.getItem('pxp_token') || '')
this.ws = new WebSocket(`${proto}://${location.host}/ws/proxmox?token=${token}`)
this.ws.onmessage = (e) => {
const msg = JSON.parse(e.data)
if (msg.type === 'proxmox_resources') {
this.resources = msg.data || []
// Le backend publie type="resources_update", payload=[...]
if (msg.type === 'resources_update') {
this.resources = msg.payload || []
this.wsStatus = 'ok'
}
}
@ -347,17 +360,31 @@ document.addEventListener('alpine:init', () => {
wsStatus: 'connecting',
actionLoading: {},
init() { this.connectWS() },
async init() {
await this.fetchResources()
this.connectWS()
},
destroy() { if (this.ws) this.ws.close() },
async fetchResources() {
try {
const res = await apiFetch('/api/proxmox/resources')
if (res.ok) {
this.resources = await res.json() || []
this.wsStatus = 'ok'
}
} catch (e) { /* WS prendra le relais */ }
},
connectWS() {
const proto = location.protocol === 'https:' ? 'wss' : 'ws'
const token = encodeURIComponent(localStorage.getItem('pxp_token') || '')
this.ws = new WebSocket(`${proto}://${location.host}/ws/proxmox?token=${token}`)
this.ws.onmessage = (e) => {
const msg = JSON.parse(e.data)
if (msg.type === 'proxmox_resources') {
this.resources = msg.data || []
// Le backend publie type="resources_update", payload=[...]
if (msg.type === 'resources_update') {
this.resources = msg.payload || []
this.wsStatus = 'ok'
}
}
@ -508,14 +535,15 @@ document.addEventListener('alpine:init', () => {
this.ws = new WebSocket(`${proto}://${location.host}/ws/updates/${jobId}?token=${token}`)
this.ws.onmessage = (e) => {
const msg = JSON.parse(e.data)
// Le backend publie dans msg.payload (pas msg.data)
if (msg.type === 'update_output') {
this.output += msg.data?.chunk || ''
this.output += msg.payload?.chunk || ''
} else if (msg.type === 'update_done') {
this.jobStatus = 'success'
resolve()
} else if (msg.type === 'update_error') {
this.jobStatus = 'error'
this.output += '\n[ERREUR] ' + (msg.data?.error || '')
this.output += '\n[ERREUR] ' + (msg.payload?.error || '')
resolve()
}
}