food-cockpit/foodlinkk-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ship War Room UX, CEO inbox, mobile chat, and Agents NAS workspace.

Browse Source 
Make A2A togglable, keep reply context while reading, route agent data to //10.4.7.11/share/Agents, and polish themes plus export-intel sync cancel.
This commit is contained in:
Aissa
2026-08-16 22:40:32 +00:00
parent 910ba465d7
commit c5ea8cbb63
26 changed files with 2891 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cockpit/templates/settings.html
+136 -5
View File
@@ -289,7 +289,7 @@
<div class="settings-panel-head">
<div>
<h2>UI Themes</h2>
<p class="page-tip">Kies een kleurrijk cyaan/blauw thema voor de hele cockpit. Direct toegepast op alle pagina's.</p>
<p class="page-tip">UI-theme, pagina-achtergrond en sidebar-kleur zijn los van elkaar te kiezen.</p>
</div>
</div>
<div class="flk-theme-grid">
@@ -301,6 +301,48 @@
</button>
</template>
</div>
<div class="flk-theme-section">
<h3>Pagina achtergrond</h3>
<p class="page-tip">15 echte kleuren voor alle subpagina’s (niet zwart). Los van UI-theme en sidebar.</p>
<div class="flk-theme-grid">
<button type="button" class="flk-theme-card" :class="{ 'is-active': !bg }" @click="selectBg('')">
<div class="flk-theme-swatch" style="background:linear-gradient(135deg,#07131f,#123049)"></div>
<strong>Standaard</strong>
<small>Volgt UI-theme achtergrond</small>
</button>
<template x-for="b in backgrounds" :key="'bg-'+b.id">
<button type="button" class="flk-theme-card" :class="{ 'is-active': bg === b.id }" @click="selectBg(b.id)">
<div class="flk-theme-swatch" :style="bgSwatch(b.id)"></div>
<strong x-text="b.name"></strong>
<small x-text="b.desc"></small>
</button>
</template>
</div>
</div>
<div class="flk-theme-section">
<h3>Sidebar Themes</h3>
<p class="page-tip">Los van het UI-theme — 10 diepe, strakke kleuren (geen rood/roze). Kies gradient of effen.</p>
<div class="flk-style-toggle" role="group" aria-label="Sidebar stijl">
<button type="button" :class="{ 'is-active': sidebarStyle === 'gradient' }" @click="selectSidebarStyle('gradient')">Gradient</button>
<button type="button" :class="{ 'is-active': sidebarStyle === 'plain' }" @click="selectSidebarStyle('plain')">Effen kleur</button>
</div>
<div class="flk-theme-grid">
<button type="button" class="flk-theme-card" :class="{ 'is-active': !sidebar }" @click="selectSidebar('')">
<div class="flk-theme-swatch" style="background:linear-gradient(180deg,#080c12,#121820)"></div>
<strong>Standaard</strong>
<small>Geen aparte sidebar-kleur (volgt UI)</small>
</button>
<template x-for="s in sidebars" :key="'sb-'+s.id">
<button type="button" class="flk-theme-card" :class="{ 'is-active': sidebar === s.id }" @click="selectSidebar(s.id)">
<div class="flk-theme-swatch" :data-sb="s.id" :data-sb-style="sidebarStyle" :style="sidebarSwatch(s.id)"></div>
<strong x-text="s.name"></strong>
<small x-text="s.desc"></small>
</button>
</template>
</div>
</div>
</section>
{% elif active_tab == 'general' %}
@@ -318,14 +360,42 @@
function flkThemesPage() {
return {
themes: (window.FlkThemes && window.FlkThemes.list) || [],
sidebars: (window.FlkThemes && window.FlkThemes.sidebars) || [],
backgrounds: (window.FlkThemes && window.FlkThemes.backgrounds) || [],
current: 'ocean',
sidebar: '',
sidebarStyle: 'gradient',
bg: '',
init() {
this.themes = (window.FlkThemes && window.FlkThemes.list) || [];
this.sidebars = (window.FlkThemes && window.FlkThemes.sidebars) || [];
this.backgrounds = (window.FlkThemes && window.FlkThemes.backgrounds) || [];
this.current = (window.FlkThemes && window.FlkThemes.current()) || 'ocean';
if (window.FlkThemes) window.FlkThemes.apply(this.current);
this.sidebar = (window.FlkThemes && window.FlkThemes.currentSidebar()) || '';
this.sidebarStyle = (window.FlkThemes && window.FlkThemes.currentSidebarStyle && window.FlkThemes.currentSidebarStyle()) || 'gradient';
this.bg = (window.FlkThemes && window.FlkThemes.currentBg && window.FlkThemes.currentBg()) || '';
if (window.FlkThemes) {
window.FlkThemes.apply(this.current);
window.FlkThemes.applySidebar(this.sidebar);
if (window.FlkThemes.applySidebarStyle) window.FlkThemes.applySidebarStyle(this.sidebarStyle);
if (window.FlkThemes.applyBg) window.FlkThemes.applyBg(this.bg);
}
},
select(id) {
this.current = window.FlkThemes.apply(id);
if (window.Cockpit) Cockpit.toast('Theme: ' + id, 'ok');
if (window.Cockpit) Cockpit.toast('UI theme: ' + id, 'ok');
},
selectSidebar(id) {
this.sidebar = window.FlkThemes.applySidebar(id || '');
if (window.Cockpit) Cockpit.toast(id ? ('Sidebar: ' + id) : 'Sidebar: standaard', 'ok');
},
selectSidebarStyle(mode) {
this.sidebarStyle = window.FlkThemes.applySidebarStyle(mode || 'gradient');
if (window.Cockpit) Cockpit.toast(mode === 'plain' ? 'Sidebar: effen kleur' : 'Sidebar: gradient', 'ok');
},
selectBg(id) {
this.bg = window.FlkThemes.applyBg(id || '');
if (window.Cockpit) Cockpit.toast(id ? ('Achtergrond: ' + id) : 'Achtergrond: standaard', 'ok');
},
swatch(id) {
var map = {
@@ -333,9 +403,70 @@ function flkThemesPage() {
aurora: 'linear-gradient(135deg,#0a1020,#1a2550 45%,#a78bfa 75%,#22d3ee)',
neon: 'linear-gradient(135deg,#050b14,#10243f 40%,#06b6d4 70%,#e879f9)',
glacier: 'linear-gradient(135deg,#0b1522,#1a2f4a 45%,#38bdf8 80%,#7dd3fc)',
cobalt: 'linear-gradient(135deg,#08101c,#172642 40%,#3b82f6 70%,#22d3ee)'
cobalt: 'linear-gradient(135deg,#08101c,#172642 40%,#3b82f6 70%,#22d3ee)',
reef: 'linear-gradient(135deg,#04161a,#11353f 40%,#2dd4bf)',
plasma: 'linear-gradient(135deg,#0c0618,#26114a 40%,#c084fc 75%,#22d3ee)',
lagoon: 'linear-gradient(135deg,#031a1f,#0c3a45 40%,#22d3ee)',
indigo: 'linear-gradient(135deg,#07091a,#1a2250 40%,#818cf8 75%,#22d3ee)',
skyline: 'linear-gradient(135deg,#06101c,#142d4d 40%,#38bdf8)',
mintvolt: 'linear-gradient(135deg,#04140f,#10352a 40%,#34d399 70%,#22d3ee)',
sapphire: 'linear-gradient(135deg,#050d1f,#122650 40%,#3b82f6 70%,#38bdf8)',
arctic: 'linear-gradient(135deg,#0a121c,#1c2a3d 45%,#67e8f9)',
hyperion: 'linear-gradient(135deg,#041018,#0e2d42 40%,#22d3ee 70%,#a3e635)',
meridian: 'linear-gradient(135deg,#0a0716,#221645 40%,#c084fc 70%,#22d3ee)'
};
return 'background:' + (map[id] || map.ocean);
return 'background: ' + (map[id] || map.ocean) + ' !important;';
},
sidebarSwatch(id) {
var style = this.sidebarStyle || 'gradient';
var solids = {
aqua: '#0a4f5c',
azure: '#163a7a',
turquoise: '#0a453f',
cerulean: '#0c4a6e',
electric: '#0a3d4a',
violet: '#2a1f6b',
emerald: '#0a4a38',
midnight: '#0d1f3c',
steel: '#1a2d42',
nordic: '#0e3a4f',
};
var grads = {
aqua: 'linear-gradient(180deg, #062a32 0%, #0a4f5c 55%, #0d6b7a 100%)',
azure: 'linear-gradient(180deg, #0a1f45 0%, #163a7a 55%, #1e4f9e 100%)',
turquoise: 'linear-gradient(180deg, #052925 0%, #0a453f 55%, #0f5f56 100%)',
cerulean: 'linear-gradient(180deg, #06263a 0%, #0c4a6e 55%, #126087 100%)',
electric: 'linear-gradient(180deg, #041820 0%, #0a3d4a 50%, #0e5a6b 100%)',
violet: 'linear-gradient(180deg, #150e3a 0%, #2a1f6b 55%, #3b2f8a 100%)',
emerald: 'linear-gradient(180deg, #05291e 0%, #0a4a38 55%, #0f6349 100%)',
midnight: 'linear-gradient(180deg, #060e1c 0%, #0d1f3c 55%, #153056 100%)',
steel: 'linear-gradient(180deg, #0d1622 0%, #1a2d42 55%, #243b55 100%)',
nordic: 'linear-gradient(180deg, #071f2c 0%, #0e3a4f 55%, #15506a 100%)',
};
var bg = (style === 'plain')
? (solids[id] || solids.electric)
: (grads[id] || grads.electric);
return 'background: ' + bg + ' !important;';
},
bgSwatch(id) {
var map = {
navy: 'linear-gradient(135deg,#0d2b5c,#134078)',
royal: 'linear-gradient(135deg,#1a3a8f,#274bb8)',
azure: 'linear-gradient(135deg,#0a4f8a,#0d6cb8)',
sky: 'linear-gradient(135deg,#0e5f9e,#1880c9)',
cerulean: 'linear-gradient(135deg,#0c6a9e,#1490c8)',
teal: 'linear-gradient(135deg,#0c5c68,#128090)',
lagoon: 'linear-gradient(135deg,#0a6b7a,#0f8fa3)',
cyan: 'linear-gradient(135deg,#0a5568,#0e7a94)',
indigo: 'linear-gradient(135deg,#2f2a7a,#4338ca)',
violet: 'linear-gradient(135deg,#4a1d7a,#6d28d9)',
sapphire: 'linear-gradient(135deg,#123a8c,#1d4ed8)',
midnight: 'linear-gradient(135deg,#1a2f55,#274878)',
emerald: 'linear-gradient(135deg,#0d5c45,#059669)',
slate: 'linear-gradient(135deg,#243447,#334155)',
graphite: 'linear-gradient(135deg,#1e2a3a,#2c3b52)'
};
return 'background: ' + (map[id] || map.navy) + ' !important;';
}
};
}