+
+
-
-
-
-
-
-
-
+
+
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 7142bd9..45dfe22 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -392,7 +392,8 @@ document.addEventListener('alpine:init', () => {
wsStatus: 'connecting',
editMode: false,
dragSrcIdx: null,
- dragOverIdx: null,
+ _dragOriginal: null,
+ hoveredWidgetId: null,
widgets: (function() {
const defaults = [
@@ -403,7 +404,6 @@ document.addEventListener('alpine:init', () => {
try {
const saved = JSON.parse(localStorage.getItem('pxp_widgets') || 'null')
if (!saved) return defaults
- // Fusionner pour ajouter d'éventuels nouveaux widgets par défaut
const ids = saved.map(w => w.id)
return [...saved, ...defaults.filter(d => !ids.includes(d.id))]
} catch(e) { return defaults }
@@ -414,11 +414,6 @@ document.addEventListener('alpine:init', () => {
// ── Edition
toggleEdit() { this.editMode = !this.editMode },
- toggleSize(w) {
- w.size = (w.size || 1) === 1 ? 2 : 1
- this.saveWidgets()
- },
-
showWidget(id) {
const w = this.widgets.find(w => w.id === id)
if (w) { w.visible = true; this.saveWidgets() }
@@ -429,27 +424,54 @@ document.addEventListener('alpine:init', () => {
this.saveWidgets()
},
- // ── DnD avec preview
- onDragStart(idx) {
- this.dragSrcIdx = idx
- },
- onDragEnter(idx) {
- if (this.dragSrcIdx !== null && this.dragSrcIdx !== idx) this.dragOverIdx = idx
- },
- onDragLeave(idx) {
- if (this.dragOverIdx === idx) this.dragOverIdx = null
- },
- onDragEnd() {
- this.dragSrcIdx = null
- this.dragOverIdx = null
- },
- onDrop(idx) {
- if (this.dragSrcIdx === null || this.dragSrcIdx === idx) {
- this.onDragEnd(); return
+ // ── Resize via souris (bords de la tuile)
+ startResize(event, w) {
+ event.stopPropagation()
+ event.preventDefault()
+ const startX = event.clientX
+ const origSize = w.size || 1
+ const onMove = (e) => {
+ const grid = this.$el.querySelector('.widgets-grid')
+ const col = grid ? (grid.offsetWidth / 2) : 400
+ const dx = e.clientX - startX
+ if (origSize === 1 && dx > col * 0.3) w.size = 2
+ else if (origSize === 2 && dx < -col * 0.3) w.size = 1
+ else w.size = origSize
}
+ const onUp = () => {
+ this.saveWidgets()
+ document.removeEventListener('mousemove', onMove)
+ document.removeEventListener('mouseup', onUp)
+ }
+ document.addEventListener('mousemove', onMove)
+ document.addEventListener('mouseup', onUp)
+ },
+
+ // ── DnD — réorganisation live (les autres widgets se déplacent pendant le drag)
+ onDragStart(idx) {
+ this.dragSrcIdx = idx
+ this._dragOriginal = JSON.parse(JSON.stringify(this.widgets))
+ },
+
+ onDragEnter(idx) {
+ if (this.dragSrcIdx === null || this.dragSrcIdx === idx) return
const moved = this.widgets.splice(this.dragSrcIdx, 1)[0]
this.widgets.splice(idx, 0, moved)
- this.onDragEnd()
+ this.dragSrcIdx = idx
+ },
+
+ onDragEnd() {
+ // Annulation (pas de drop) → restaurer l'ordre original
+ if (this._dragOriginal) {
+ this.widgets = JSON.parse(JSON.stringify(this._dragOriginal))
+ this._dragOriginal = null
+ }
+ this.dragSrcIdx = null
+ },
+
+ onDrop() {
+ this._dragOriginal = null // commit — ne pas restaurer dans onDragEnd
+ this.dragSrcIdx = null
this.saveWidgets()
},
@@ -485,7 +507,6 @@ document.addEventListener('alpine:init', () => {
},
get visibleWidgets() { return this.widgets.filter(w => w.visible) },
- get hiddenWidgets() { return this.widgets.filter(w => !w.visible) },
get lxc() { return this.resources.filter(r => r.type === 'lxc') },
get running() { return this.lxc.filter(r => r.status === 'running') },
get stopped() { return this.lxc.filter(r => r.status !== 'running') },