seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-29 03:37:04 +01:00
parent afb33cde38
commit 867d550814
3 changed files with 272 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/posterminal.js
View File

@@ -2,8 +2,8 @@ import { http } from './http.js';
export const posterminal = {
/**
* GET /api/posterminal → { posterminals: [{ id, name, token, pairingpin }] }
* List all terminals for the selected company.
* GET /api/posterminal → { posterminals: [{ id, name, token, pairingpin, sort, enabled, clientversion, ... }] }
* List all terminals for the selected company, sorted by sort ASC, id ASC.
*/
// #region GET /api/posterminal — list
list() {
@@ -13,24 +13,29 @@ export const posterminal = {
/**
* PUT /api/posterminal
* Body: { name: string }
* Body: { name: string, sort?: number, enabled?: boolean, rootCategoryId?: number|null, syncRootArticles?: boolean }
* Creates a new terminal (auto-generates 6-digit pin).
* → 200 { posterminal: { id, name, token, pairingpin } }
* → 200 { posterminal: { id, name, token, pairingpin, sort, enabled, clientversion, ... } }
*/
// #region PUT /api/posterminal — create
create({ name }) {
create({ name, sort, enabled, rootCategoryId, syncRootArticles } = {}) {
const body = { name };
if (sort !== undefined) body.sort = Number(sort);
if (enabled !== undefined) body.enabled = Boolean(enabled);
if (rootCategoryId !== undefined) body.rootCategoryId = rootCategoryId != null ? Number(rootCategoryId) : null;
if (syncRootArticles !== undefined) body.syncRootArticles = Boolean(syncRootArticles);
return http('/api/posterminal', {
method: 'PUT',
body: { name },
body,
});
},
// #endregion
/**
* PATCH /api/posterminal/:id
* Body: { name?: string, rootCategoryId?: number|null, syncRootArticles?: boolean, pairingpin?: string }
* Body: { name?: string, rootCategoryId?: number|null, syncRootArticles?: boolean, pairingpin?: string, sort?: number, enabled?: boolean }
* Update posterminal configuration.
* → 200 { posterminal }
* → 200 { posterminal: { id, name, token, pairingpin, sort, enabled, clientversion, ... } }
*/
// #region PATCH /api/posterminal/:id — update
update(terminalId, patch) {

27
src/automats/companyAutomat.js
View File

@@ -159,6 +159,15 @@ const sortBrands = (brands) =>
const sortGroups = (items) =>
[...items].sort((a, b) => (Number(a.sort) || 0) - (Number(b.sort) || 0));
const sortTerminals = (terminals) => {
if (!Array.isArray(terminals)) return [];
return [...terminals].sort((a, b) => {
const sDiff = (Number(a.sort) || 0) - (Number(b.sort) || 0);
if (sDiff !== 0) return sDiff;
return (Number(a.id) || 0) - (Number(b.id) || 0);
});
};
const sortAccounts = (items) =>
[...items].sort((a, b) => String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de'));
@@ -578,7 +587,7 @@ const actions = {
inflightTerminals = (async () => {
try {
const res = await posterminalApi.list();
const terminals = Array.isArray(res.posterminals) ? res.posterminals : [];
const terminals = sortTerminals(Array.isArray(res.posterminals) ? res.posterminals : []);
companyAutomat.setState({
terminals,
terminalsCompanyId: companyId,
@@ -603,11 +612,15 @@ const actions = {
return actions.loadTerminals();
},
async createTerminal({ name }) {
const res = await posterminalApi.create({ name });
reloadTerminals() {
return actions.loadTerminals();
},
async createTerminal(payload) {
const res = await posterminalApi.create(payload);
const terminal = res.posterminal;
companyAutomat.setState({
terminals: [...companyAutomat.state.terminals, terminal],
terminals: sortTerminals([...companyAutomat.state.terminals, terminal]),
});
return terminal;
},
@@ -620,8 +633,10 @@ const actions = {
const res = await posterminalApi.update(terminalId, patch);
const updated = res.posterminal;
companyAutomat.setState({
terminals: companyAutomat.state.terminals.map((t) =>
t.id === terminalId ? { ...t, ...updated } : t,
terminals: sortTerminals(
companyAutomat.state.terminals.map((t) =>
t.id === terminalId ? { ...t, ...updated } : t,
),
),
});
return updated;

274
src/components/settings/PosTerminalSettingsPanel.jsx
View File

@@ -11,6 +11,8 @@ import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import AddIcon from '@mui/icons-material/Add';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import FolderIcon from '@mui/icons-material/Folder';
import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
@@ -56,6 +58,7 @@ export default class PosTerminalSettingsPanel extends Component {
deletingId: null,
pickerTerminal: null,
patchingTerminalId: null,
sortDrafts: {},
};
this.handleRetry = this.handleRetry.bind(this);
this.loadTerminals = this.loadTerminals.bind(this);
@@ -63,6 +66,10 @@ export default class PosTerminalSettingsPanel extends Component {
this.handleDeleteTerminal = this.handleDeleteTerminal.bind(this);
this.handleSetRootCategory = this.handleSetRootCategory.bind(this);
this.handleToggleSyncRootArticles = this.handleToggleSyncRootArticles.bind(this);
this.handleToggleEnabled = this.handleToggleEnabled.bind(this);
this.handleSortDraftChange = this.handleSortDraftChange.bind(this);
this.handleSortSubmit = this.handleSortSubmit.bind(this);
this.handleMoveTerminal = this.handleMoveTerminal.bind(this);
this.getCategoryLabel = this.getCategoryLabel.bind(this);
}
@@ -104,13 +111,20 @@ export default class PosTerminalSettingsPanel extends Component {
}
async handleCreateTerminal() {
const { newTerminalName, enableAllForNew } = this.state;
const { newTerminalName, enableAllForNew, terminals } = this.state;
const trimmed = newTerminalName.trim();
if (!trimmed) return;
this.setState({ creatingTerminal: true });
try {
const created = await companyAutomat.actions.createTerminal({ name: trimmed });
const nextSort = terminals.length > 0
? Math.max(...terminals.map((t) => Number(t.sort) || 0)) + 1
: 0;
const created = await companyAutomat.actions.createTerminal({
name: trimmed,
sort: nextSort,
enabled: true,
});
if (enableAllForNew && created?.id != null) {
await companyAutomat.actions.enableAllTerminalCategories({ terminalId: created.id });
@@ -126,6 +140,84 @@ export default class PosTerminalSettingsPanel extends Component {
}
}
async handleToggleEnabled(terminal, nextValue) {
this.setState({ patchingTerminalId: terminal.id });
try {
await companyAutomat.actions.updateTerminal(terminal.id, {
enabled: Boolean(nextValue),
});
enqueueSnackbar(nextValue ? 'Terminal aktiviert.' : 'Terminal deaktiviert.', {
variant: 'success',
});
} catch (err) {
notifyError(err);
} finally {
this.setState({ patchingTerminalId: null });
}
}
handleSortDraftChange(terminalId, value) {
this.setState((prev) => ({
sortDrafts: { ...prev.sortDrafts, [terminalId]: value },
}));
}
async handleSortSubmit(terminal) {
const draft = this.state.sortDrafts[terminal.id];
if (draft === undefined) return;
const nextSort = Number(draft);
if (isNaN(nextSort) || nextSort === (terminal.sort ?? 0)) {
this.setState((prev) => {
const next = { ...prev.sortDrafts };
delete next[terminal.id];
return { sortDrafts: next };
});
return;
}
this.setState({ patchingTerminalId: terminal.id });
try {
await companyAutomat.actions.updateTerminal(terminal.id, { sort: nextSort });
enqueueSnackbar('Reihenfolge aktualisiert.', { variant: 'success' });
} catch (err) {
notifyError(err);
} finally {
this.setState((prev) => {
const next = { ...prev.sortDrafts };
delete next[terminal.id];
return { sortDrafts: next, patchingTerminalId: null };
});
}
}
async handleMoveTerminal(terminal, direction) {
const { terminals } = this.state;
const currentIndex = terminals.findIndex((t) => t.id === terminal.id);
if (currentIndex === -1) return;
const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
if (targetIndex < 0 || targetIndex >= terminals.length) return;
const other = terminals[targetIndex];
const currentSort = terminal.sort ?? 0;
const otherSort = other.sort ?? 0;
let newSort;
if (direction === 'up') {
newSort = otherSort <= currentSort ? otherSort - 1 : otherSort;
} else {
newSort = otherSort >= currentSort ? otherSort + 1 : otherSort;
}
this.setState({ patchingTerminalId: terminal.id });
try {
await companyAutomat.actions.updateTerminal(terminal.id, { sort: newSort });
enqueueSnackbar('Reihenfolge aktualisiert.', { variant: 'success' });
} catch (err) {
notifyError(err);
} finally {
this.setState({ patchingTerminalId: null });
}
}
async handleDeleteTerminal(terminal) {
this.setState({ deletingId: terminal.id });
try {
@@ -261,9 +353,10 @@ export default class PosTerminalSettingsPanel extends Component {
</Box>
) : (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{terminals.map((terminal) => {
{terminals.map((terminal, index) => {
const isDeleting = deletingId === terminal.id;
const isPatching = patchingTerminalId === terminal.id;
const isEnabled = terminal.enabled !== false && terminal.enabled !== 0 && terminal.enabled != null;
const pairedDateText = formatDateTime(terminal.pairedAt);
const lastseenText = formatDateTime(terminal.lastseenAt) ?? 'Nie';
const updatedText = formatDateTime(terminal.updatedAt) ?? '—';
@@ -275,18 +368,24 @@ export default class PosTerminalSettingsPanel extends Component {
p: 2,
borderRadius: 2,
border: '1px solid',
borderColor: 'divider',
borderColor: isEnabled ? 'divider' : 'action.disabledBackground',
bgcolor: 'background.paper',
display: 'flex',
flexDirection: 'column',
gap: 1.5,
opacity: isEnabled ? 1 : 0.72,
transition: 'opacity 0.2s ease, border-color 0.2s ease',
}}
>
{/* Header: Icon, Name, PIN, Delete action */}
{/* Header: Icon, Name, PIN, Version, Status Switch, Delete action */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
<PointOfSaleIcon sx={{ color: 'primary.main', fontSize: 24 }} />
<Typography variant="subtitle1" fontWeight={600}>
<PointOfSaleIcon sx={{ color: isEnabled ? 'primary.main' : 'text.disabled', fontSize: 24 }} />
<Typography
variant="subtitle1"
fontWeight={600}
sx={{ color: isEnabled ? 'text.primary' : 'text.secondary' }}
>
{terminal.name}
</Typography>
{terminal.pairingpin ? (
@@ -310,23 +409,68 @@ export default class PosTerminalSettingsPanel extends Component {
({terminal.clientserial})
</Typography>
) : null}
{terminal.clientversion ? (
<Tooltip title="POS Client Software-Version">
<Chip
label={`v${terminal.clientversion}`}
size="small"
variant="outlined"
color="info"
sx={{ fontFamily: 'monospace', fontWeight: 600, fontSize: '0.75rem' }}
/>
</Tooltip>
) : null}
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Tooltip
title={
isEnabled
? 'Terminal aktiv (kann synchronisieren)'
: 'Terminal deaktiviert (POS-Zugriff blockiert)'
}
>
<FormControlLabel
control={
<Switch
size="small"
checked={isEnabled}
disabled={isPatching || isDeleting}
onChange={(e) => void this.handleToggleEnabled(terminal, e.target.checked)}
color="success"
/>
}
label={
<Typography
variant="body2"
sx={{
fontSize: '0.8125rem',
fontWeight: 500,
color: isEnabled ? 'text.primary' : 'text.disabled',
}}
>
{isEnabled ? 'Aktiv' : 'Inaktiv'}
</Typography>
}
sx={{ m: 0 }}
/>
</Tooltip>
<IconButton
size="small"
aria-label={`Terminal ${terminal.name} löschen`}
onClick={() => void this.handleDeleteTerminal(terminal)}
disabled={isDeleting || creatingTerminal || isPatching}
color="error"
>
{isDeleting ? (
<CircularProgress size={16} color="inherit" />
) : (
<DeleteOutlinedIcon fontSize="small" />
)}
</IconButton>
</Box>
<IconButton
size="small"
aria-label={`Terminal ${terminal.name} löschen`}
onClick={() => void this.handleDeleteTerminal(terminal)}
disabled={isDeleting || creatingTerminal || isPatching}
color="error"
>
{isDeleting ? (
<CircularProgress size={16} color="inherit" />
) : (
<DeleteOutlinedIcon fontSize="small" />
)}
</IconButton>
</Box>
{/* Settings row: Root category picker and syncRootArticles toggle */}
{/* Settings row: Root category picker, sort order controls, and syncRootArticles toggle */}
<Box
sx={{
display: 'flex',
@@ -365,22 +509,75 @@ export default class PosTerminalSettingsPanel extends Component {
</Button>
</Box>
<FormControlLabel
control={
<Switch
size="small"
checked={Boolean(terminal.syncRootArticles)}
disabled={isPatching || isDeleting}
onChange={(e) => void this.handleToggleSyncRootArticles(terminal, e.target.checked)}
/>
}
label={
<Typography variant="body2">
Root-Artikel synchronisieren
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<Typography variant="body2" color="text.secondary">
Reihenfolge:
</Typography>
}
sx={{ m: 0 }}
/>
<Tooltip title="Nach oben verschieben">
<span>
<IconButton
size="small"
disabled={index === 0 || isPatching || isDeleting}
onClick={() => void this.handleMoveTerminal(terminal, 'up')}
sx={{ p: 0.25 }}
>
<ArrowUpwardIcon sx={{ fontSize: 16 }} />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Nach unten verschieben">
<span>
<IconButton
size="small"
disabled={index === terminals.length - 1 || isPatching || isDeleting}
onClick={() => void this.handleMoveTerminal(terminal, 'down')}
sx={{ p: 0.25 }}
>
<ArrowDownwardIcon sx={{ fontSize: 16 }} />
</IconButton>
</span>
</Tooltip>
<TextField
type="number"
size="small"
disabled={isPatching || isDeleting}
value={this.state.sortDrafts[terminal.id] ?? terminal.sort ?? 0}
onChange={(e) => this.handleSortDraftChange(terminal.id, e.target.value)}
onBlur={() => void this.handleSortSubmit(terminal)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.target.blur();
}
}}
slotProps={{
htmlInput: {
step: 1,
style: { width: 44, padding: '3px 6px', textAlign: 'center', fontSize: '0.8125rem' },
},
}}
sx={{ width: 56 }}
/>
</Box>
<FormControlLabel
control={
<Switch
size="small"
checked={Boolean(terminal.syncRootArticles)}
disabled={isPatching || isDeleting}
onChange={(e) => void this.handleToggleSyncRootArticles(terminal, e.target.checked)}
/>
}
label={
<Typography variant="body2">
Root-Artikel synchronisieren
</Typography>
}
sx={{ m: 0 }}
/>
</Box>
</Box>
{/* Dates row */}
@@ -402,6 +599,11 @@ export default class PosTerminalSettingsPanel extends Component {
<Typography variant="caption" color="text.secondary">
<strong>Zuletzt online:</strong> {lastseenText}
</Typography>
{terminal.clientversion && (
<Typography variant="caption" color="text.secondary">
<strong>POS-Software:</strong> {terminal.clientversion}
</Typography>
)}
<Typography variant="caption" color="text.secondary">
<strong>Aktualisiert:</strong> {updatedText}
</Typography>