secubox-openwrt/package/secubox/luci-app-hexojs/htdocs/luci-static/resources/view/hexojs/media.js
CyberMind-FR 1bbd345cee refactor(luci): Mass KissTheme UI rework across all LuCI apps
Convert 90+ LuCI view files from legacy cbi-button-* classes to
KissTheme kiss-btn-* classes for consistent dark theme styling.

Pattern conversions applied:
- cbi-button-positive → kiss-btn-green
- cbi-button-negative/remove → kiss-btn-red
- cbi-button-apply → kiss-btn-cyan
- cbi-button-action → kiss-btn-blue
- cbi-button (plain) → kiss-btn

Also replaced hardcoded colors (#080, #c00, #888, etc.) with
CSS variables (--kiss-green, --kiss-red, --kiss-muted, etc.)
for proper dark theme compatibility.

Apps updated include: ai-gateway, auth-guardian, bandwidth-manager,
cloner, config-advisor, crowdsec-dashboard, dns-provider, exposure,
glances, haproxy, hexojs, iot-guard, jellyfin, ksm-manager,
mac-guardian, magicmirror2, master-link, meshname-dns, metablogizer,
metabolizer, mqtt-bridge, netdata-dashboard, picobrew, routes-status,
secubox-admin, secubox-mirror, secubox-p2p, secubox-security-threats,
service-registry, simplex, streamlit, system-hub, tor-shield,
traffic-shaper, vhost-manager, vortex-dns, vortex-firewall,
webradio, wireguard-dashboard, zigbee2mqtt, zkp, and more.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-12 11:09:34 +01:00

108 lines
3.2 KiB
JavaScript

'use strict';
'require view';
'require ui';
'require hexojs/api as api';
'require secubox/kiss-theme';
return view.extend({
title: _('Media'),
load: function() {
return api.listMedia();
},
handleDelete: function(path, name) {
var self = this;
ui.showModal(_('Delete Media'), [
E('p', {}, _('Are you sure you want to delete this file?')),
E('p', { 'style': 'font-weight: bold;' }, name),
E('div', { 'class': 'right', 'style': 'margin-top: 16px;' }, [
E('button', { 'class': 'btn', 'click': ui.hideModal }, _('Cancel')),
E('button', {
'class': 'kiss-btn kiss-btn-red',
'style': 'margin-left: 8px;',
'click': function() {
api.deleteMedia(path).then(function(result) {
ui.hideModal();
if (result.success) {
ui.addNotification(null, E('p', _('File deleted')), 'info');
location.reload();
} else {
ui.addNotification(null, E('p', result.error || _('Delete failed')), 'error');
}
});
}
}, _('Delete'))
])
]);
},
isImage: function(name) {
return /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(name);
},
render: function(data) {
var self = this;
var media = data.media || [];
var view = E('div', { 'class': 'hexo-dashboard' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('hexojs/dashboard.css') }),
// Header
E('div', { 'class': 'hexo-header' }, [
E('div', { 'class': 'hexo-card-title' }, [
E('span', { 'class': 'hexo-card-title-icon' }, '\uD83D\uDDBC'),
_('Media Library')
]),
E('div', {}, [
E('span', { 'style': 'color: var(--hexo-text-muted);' }, media.length + ' ' + _('files'))
])
]),
// Info
E('div', { 'class': 'hexo-card' }, [
E('p', { 'style': 'color: var(--hexo-text-muted);' },
_('Upload files via SSH/SCP to: ') + '/srv/hexojs/site/source/images/')
]),
// Media Grid
E('div', { 'class': 'hexo-card' }, [
media.length > 0 ?
E('div', { 'class': 'hexo-media-grid' },
media.map(function(file) {
return E('div', { 'class': 'hexo-media-item' }, [
self.isImage(file.name) ?
E('img', { 'src': '/hexojs' + file.path, 'alt': file.name })
: E('div', {
'style': 'height: 120px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--hexo-bg-input);'
}, '\uD83D\uDCC4'),
E('div', { 'class': 'hexo-media-item-info' }, [
E('div', { 'class': 'hexo-media-item-name', 'title': file.name }, file.name),
E('div', { 'class': 'hexo-media-item-size' }, api.formatBytes(file.size))
]),
E('div', { 'class': 'hexo-media-item-actions' }, [
E('button', {
'class': 'hexo-btn hexo-btn-sm hexo-btn-danger',
'click': function() { self.handleDelete(file.path, file.name); },
'title': _('Delete')
}, '\uD83D\uDDD1')
])
]);
})
)
: E('div', { 'class': 'hexo-empty' }, [
E('div', { 'class': 'hexo-empty-icon' }, '\uD83D\uDDBC'),
E('p', {}, _('No media files yet'))
])
])
]);
return KissTheme.wrap([view], 'admin/services/hexojs/media');
},
handleSaveApply: null,
handleSave: null,
handleReset: null
});